wordpressで投稿の編集中、プレビューに画像が表示されない。

こんにちは

先日こちらのブログを書いていたら、プレビュー画面で画像が
表示されない事象が発生しました。

もちろん記事の公開をしても画像は表示されません。

今までこんなことなかったのに、

何が原因だろう？

どうしたら解決できるかな？

その時の試行錯誤の様子を書いてみます。

（結果、正常に画像表示できるようになりました。）

プレビューに画像が表示されない原因

ブログの使用環境

まず、私のwordpressの使用環境を参考に書いときます。

・ブログテーマは「cocoon」

・サーバーはXserver

・エディタにはプラグインの「Classic Editor」「TinyMCE Advanced」
　を使用。

・プラグインは上記を含め17種類インストール。
　その中で画像に関連しそうなのは「Drawit「EWWWimageOptimizer」
   くらいですかねぇ。

この環境でつい最近までブログを書いてましたが、特段
異常はありませんでした。

が、先日突然投稿記事を書いて、プレビューで確認しようと
すると、画像が表示されなくなりました。

原因は何か？

そこで早速googleさんに聞きました。

【考えられる原因】

などが原因ではないかと思われます。

この中で、４番目と５番目は「メディアを追加」での画像のプレビュー
が出ない現象だったり、サイトの画像そのものが表示されない
症状ですので、今回の私の不具合に関係ありそうなのは
おそらく１番目～３番目だと考えました。

そこで順番に試してみます。

プレビューに画像が出ない時の解決方法

プラグインの確認

まずたくさんインストールしているプラグインから確認していきます。

プラグインについては、相性の問題だったり、プラグインその
もののバグ が原因で不具合を起こすことをよく聞きます。

17個も入れているプラグインを一つづつ有効→停止して確認して
みます。

いきなり解決、「Jetpack」が悪さしてた。

まず初めに「Jetpack」を停止して、投稿記事をプレビュー
してみると、なんといきなり画像が表示されました。

拍子抜けしましたが、取りあえず「Jetpack」が悪さして
いることが分かったのでこれで解決。

冷静な嫁

運がよかったわね。

昭平令

内心、17個のプラグイン検証するのはいやだった。

ですがいちよう他の原因も検証させてください。

LazyLoadの検証

ググってみると、プラグインの「LazyLoad」が原因のような
書き込みもけっこうありました。私はプラグインとしては
インストールしていませんが、

cocoonには始めからLazyLoad（画像の遅延読み込み機能）が実装
されています。 ブログページの表示スピードを速くするのに
有効な機能ですが、使うかどうか選択できます。

「cocoonの設定」から「高速化」を選択すると↓

LazyLoadの設定画面があります。
ここでLazyLoadの有効、無効を選択できます。

私は記憶にないのですが、すでにチェックが入ってました。
そこで、先ほどの「Jetpack」を再び有効にし、LazyLoadの
チェックを外してみました。

結果、不具合が解消しました。

ということは、

「Jetpack」とLazyLoadの相性が悪いと言う事か。

function.phpの確認

このfunction.phpはcocoonのテーマファイルです。
このファイルに余分な空白が入っていたりすると、似たような
不具合が起こるらしい。

そこで確認しました。

wordpressの「外観」から「テーマエディタ」を選択すると
テーマの編集画面が出ます。そこで、cocoon childのテーマファイル
の中から、function.phpを選択すると↓

function.phpファイルが現れますので、余分な空白がないか
確認します。一番先頭の部分に空白が入る場合が多いらしい
のですがここでは見当たりませんでした。

まとめ

wordpress記事の投稿でプレビューに画像が表示されない現象は
3種類の原因を検証した結果どうやら、

プラグイン「Jetpack」とLazyLoadの相性

にあるみたいです。私の使用環境での結果ですから全ての
ケースに有効かどうかわかりませんが、もし同じような
症状でお悩みでしたら、どちらかの機能を無効にするよう
試してみてください。

現在プラグインの「Jetpack」は削除し、LazyLoadを有効に
して使用してますが、今のところ問題ありません。

プラグイン「Jetpack」は多機能で便利ですので、私も始めから
利用してましたが、今回の不具合で色々調べてみると、画像関係
の不具合の原因になっているケースが結構あるようです。

師匠

プラグインを入れすぎると動作にも影響することが多い。

あいや～

厳選して使う方がいいあるよ。

wordpressのプラグインはとても便利なものが多いのですけど、
その使用は必要最低限にしておいた方がよさそうですねぇ。

追記

上記にありました「Shortcode star rating」なんですが、最近
公開が停止されてました。

このように星の数で評価してくれるプラグインです。

もしかしてこれも原因の一つだったかもしれません。
その検証はまた別の記事で書きます。

それでは。