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

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

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

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

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

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

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

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

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の表示上重要なものでは無く、内部的な数字です。（というので一旦スルーしてしまって解決まで時間かかっちゃった…）

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

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

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

その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″」を追加しました。