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

web・サーバー・メール
web・サーバー・メールPC・web・IT系

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

古のルールとして、外部サーバーにある画像を直接表示させる行為、いわゆる「直リンク」は相手方のサーバー負荷の問題からマナーとしてやってはいけない、という事になっています。(もはや死語ですかね?)

ただし近年、SNSやブログカードでのシェアが広く普及しているため、アイキャッチ画像とファビコンの直リンクは暗黙の了解で許されている(嫌な方は.htaccessで自衛)と判断し記事を作成しております。

この記事はご自身の管理下に無い外部サーバーからの直リンクを推奨するものではありません。

スポンサーリンク

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

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

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

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

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

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

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

絵に斜線引かれたようなマークが出て表示されない。

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

画像表示されない問題、こんな感じでした
  • メディアライブラリ内にアップロードしている画像は投稿画面でもプレビュー画面でも問題なく表示される
  • メディアライブラリ外の画像は、投稿画面では表示されるのにプレビュー画面では表示されない
  • 画像のURL自体に間違いはなく、URLを直接アドレスバーに打ち込むと画像は問題なく表示される

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

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

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

スポンサーリンク

表示・非表示の鍵を握っているのは「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」をトリガーに使っているので、画像を表示させたい場合はすべて「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″」を追加しました。

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

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

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

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

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

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

スポンサーリンク
この記事を書いた人
れんじゃく

ゲームが生きがい。ストーリーをよく考察してます。仕事とゲーム以外の時間は限りなくゼロにしたい!一人暮らし向きの早うまメシを探し求める毎日。

れんじゃくをフォローする
れんじゃくをフォローする
れんじゃくログ

コメント

タイトルとURLをコピーしました