WordPressで画像が表示されない時の対処

WordPressをカスタマイズしていると、思いもよらいない表示やエラーなどいろいろ起こります。

今回は画像。

本文中の画像が真っ白になった場合の改善方法です。

スポンサーリンク

表示されない画像の戻し方

症状は本文の画像だけ


こんな感じで真っ白。

画像に関係ある箇所を確認してみました。

    • 本文内の画像全て真っ白になる
    • サムネイル、アイキャッチは表示される
    • 投稿編集ページのビジュアルエディタには表示される
    • 管理画面のメディアライブラリは通常通り

見覚えのないアドレス「1×1.trans.gif」

ちなみに、この真っ白の画像のアドレスを見てみると、アドレスが若干いつもと違っていて、見覚えのない「1×1.trans.gif」が末尾にくっついていると思います。

「1×1.trans.gif」が表示される場合は、画像遅延読込してくれるLazy Loadが原因かと思われます。

プラグインLazy Loadが原因

このプラグインはスクロールして表示するタイミングで画像を読込むんでくれるので、重い画像や大量に画像がある場合に有効です。

ただ、他のプラグインやテーマと競合してしますと、スクロールしても表示されないまま画像が真っ白になることがあります。

プラグインを使用していないと思っていても、知らないうちに使用している場合があります。

例えば、

simplicityテーマ内に用意されているLazy Load

jetpackプラグインに含まれている画像遅延読み込み

2つともオンにしていると、画像が真っ白になるのでどちらかオフにしましょう。

jetpackプラグインの画像遅延読み込みをオフ

jetpackの設定画面にいきます

真ん中ぐらいにある「パフォーマンスおよびスピード」内の「画像の遅延読み込みを有効にする」をオフにします。

jetpackは変更した瞬間に勝手に保存してくれるのでこれで以上です。

simplicityテーマのLazy Loadをオフ

simplicityテーマでは、Lazy Loadがあらかじめ用意されています。

外観→カスタマイズにいきます

カスタマイズ内の画像をクリック

「Lazy Loadを有効」のチェックを外します

変更したら、上部にある「公開」をクリックして保存

まとめ

画像遅延の読込が重複しなければ真っ白になることはないと思いますが、テーマやプラグイン同士で相性が悪い場合もあります。

記事内の画像が少ない場合は、Lazy Loadなどの画像遅延系を使わないのも手です。

スポンサーリンク

ブログランキング・にほんブログ村へ