【WordPress】ブログカード使いたいのに、アイキャッチ画像・ファビコンが表示されない！それ、「wp-image」が原因かも

WordPressでブログカードを導入した際、アイキャッチ画像やファビコンなど、外部サーバーの画像が表示されなくて試行錯誤した結果をここに残しておきます。

事の発端はHPのリンクにブログカードを導入したこと

当方が運営するとあるホームページで、リンクに「ブログカード」を導入することにしました。

ブログカードとは↓こういうやつ

れんじゃくログ | ゲーム情報・考察｜ウマいモノ｜生活のまめ知識

g-soundlife.net

リンクにアイキャッチ画像やファビコン、記事内容の抜粋がついた、「ちょっとリッチなリンク」ですね。

SEOとか回遊とかそういう観点は一旦置いておいて、外部リンクにもブログカードを使いたかったので以下のサイトを参考に、ブログカードを設置しました。

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

vanillaice000.blog.fc2.com

ちなみにこのブログで利用しているテーマ「Cocoon」はもともとブログカードの機能が実装されているので楽ちんです。

作成したブログカードのアイキャッチ画像が表示されない。

状況を確認したら以下のような感じでした。

2つ目の挙動から「画像処理系のプラグイン」が悪さしてそうだな…というのがちょっと推測できますね。

こういうので王道のやり方は、一つずつプラグインを止めるっていうのがあると思うのですが

私は以前、そのHPで同じことをやってかな～り痛い目を見た（HP停止・Wordpress管理画面全停止）のでもうやりません…ｗ

表示・非表示の鍵を握っているのは「wp-image-数字」？

ふと思い立って、ブックマークレットで内部リンクのブログカードを作りました。

やはり画像は表示されず。

そこで、メディアライブラリから選択した無事に表示されるパターンと、ブックマークレットを使った表示されないパターンでHTMLを比較してみました。

やっぱりこういう比較が最終的には効くんですよね多分。

src内は全く同一のURLで、異なるのは「class」でした。

表示される方（メディアファイルから選択した画像）

<img class="alignnone wp-image-(数字) size-medium" src="https://～.png" alt="代替文字" width="300" height="300" />

表示されない方（ブックマークレットで作ったブログカードの画像）

<img src="https://～.png" alt="代替文字" width="300" height="300" />

気になるのは2つで、「alignnone」ですがこれは画像の配置を表すのであんまり関係なさそう。

で、「wp-image-(数字)」ですが、これはどうやらWordPressが自動でメディアファイルに付与しているIDのようです。

コレ自体はHPの表示上重要なものでは無く、内部的な数字です。（というので一旦スルーしてしまって解決まで時間かかっちゃった…）

WordPressでメディアから投稿に挿入した画像に「好きなクラス名を追加する」方法｜今村だけがよくわかるブログ

WordPressで文章を書いていると「この場所に画像を入れようかな〜」と思うことがあります。 パソコンでの操作を例にしますと・・・画像を入れるには、WordPressの管理画面から投稿の編集画面の左上にある「メディアを...

www.imamura.biz

でも今になってよく考えたら、「外部の画像」＝「メディアファイルじゃない画像」＝「「wp-image」が付与されていない画像」ってことで、こいつがやっぱり原因だったんですよね…。

「wp-image」をトリガーに使っているプラグインがあるらしい

片っ端から検索しまくったところ、とある画像系プラグインの解説ページが引っかかりました。

このプラグインは「wp-image」をトリガーに使っているので、画像を表示させたい場合はすべて「wp-image-0」にしてくださいという旨の記載が…。

WordPressでインポートした記事の画像がKtai Styleで表示されないときはaltかclassをチェック！

WordPressをフューチャーフォン（ガラケー）向けに最適化する際に便利なプラグイン「Ktai Style」。記事中の画像も自動的

restep.jp

そのHPはこのプラグインを使っているわけではありませんでしたし、この記載は特に外部画像を意図しているものではなさそうでしたが、結果としてHTMLに”wp-image-0″を手入力で追加してみたら解決しました。

何が解決の糸口になるかわかりませんね～

ちなみに、どのプラグインが原因だったかは判明していません。少なくとも「EWWW Image Optimizer」でないことは確か。

また、今後導入するプラグインに「wp-image-」以降の数字を活用しているものがあった場合、そのプラグインが正常に動作しない可能性がありますのでご注意ください。

修正は自己責任で！

まとめ

外部の画像だけが表示されない場合、画像のHTMLコードを確認してみましょう。

wp-imageがない場合は試しに「wp-image-0」を付けてみたら解決するかもしれません！

例

<img class="wp-image-0" src="https://～" alt="代替文言" width="100" height="100" />

ちなみにブログカードを作るたびにwp-image-を付与するのが面倒だったので、ブックマークレットのjavascriptに「 class=”wp-image-0″」を追加しました。

ここにたどり着くまでに半日かかってしまったので、この努力がどなたかのためになれば幸いです。。。

いい記事！でしたら他の方へシェアしてくださると猛烈に喜びます

この記事がなにかの参考になった！と思っていただけましたらこの上ない喜びです！

不明点やご質問、ご指摘等ございましたら、記事へのコメント・問い合わせフォーム・ツイッターなどでお気軽にご連絡くださいませ。

また、他にもこの情報を求めていそうな方をご存知でしたら、ぜひこの記事のURLをSNSやLINE、ブログ等でシェアして下さると嬉しいです。

これからも役に立つ記事を沢山書いていこうと思います！ありがとうございました！