Cocoonでサムネイルが表示されない原因と対処法

こんにちは。KYOです。

今回は、WordPressのテーマ「Cocoon」のお話です。

先日、記事一覧にトップで表示されている投稿以外の記事のサムネイル（アイキャッチ）が全て表示されないという問題が発生しました。

最新の投稿記事1件だけは問題なくサムネイルが表示されているものの、残りの記事全てのサムネイルが真っ白になってしまったのです。

試行錯誤の末、この問題を解決したので今回はサムネイルが表示されない時の解決方法を解説いたします。

Cocoonでサムネイルが表示されない原因と対処法

Cocoonでサムネイルが表示されないという問題は複数の事例が報告されているため、私の解決策が全ての方に有効とは限りませんのでこの点をご留意ください。

結論から言うと、私の場合、記事のサムネイルが表示されない原因は「高速化の設定」でした。

Cocoonには「高速化」という機能が標準装備されており、この設定を変更することでサイトの表示速度を改善することが出来ます。

ただ、当然ながら設定を変更するとサイトの仕様も同時に変更されるため、これが原因でサムネイルの表示が阻害されていたというわけです。

さっそく見ていきましょう。

まず、ダッシュボードに「Cocoon設定」にアクセスして「高速化」を開きます。

すると、「サイト高速化」のページが表示されるので、「縮小化」という項目を探して下さい。

この縮小化の中に「CSSを縮小化する」という項目が存在していますが、これがサムネイルの表示を妨げていた原因でした。

この部分の☑を外せば、正常にサムネイルの表示されるようになるはずです。

当初、私は「CSSを縮小化する」に加えて、以下の項目に全て☑を入れていました。

そのため、最初はどの項目がサムネイルの表示を妨げているのか分からなかったため、☑を1つずつ外してサムネイルの表示具合を確かめていました。

そうすると、「CSSを縮小化する」の☑を外した時だけサムネイルの正常に表示されるようになったというわけです。

CSS（Cascading Style Sheets）はWebサイトのデザイン全体に関与するプログラミング言語で、背景の色や文字の装飾、そして画像の設置に関わっています。

「CSSを縮小化する」という項目に☑を入れると、CSSで記述されたコードの中で余分な空白や改行が圧縮され、これによりサイトの高速化を図れるというわけです。

ただ、いくら圧縮されるのが余分な空白や改行だったとしても、圧縮後には本来の記述とは異なってしまいます。

そうすると、Webサイトのデザインに何かしらの不具合が発生してしまう可能性があり、今回で言えば、サムネイルが表示されなくなってしまったというわけです。

Cocoonを使っていて突然サムネイルが表示されなくなった場合、まずは「高速化」の項目にある「CSSの縮小化」を確認してみて下さい。

もしこの項目に☑が入っているようであれば、それが原因でサムネイルが正常に表示されていない可能性があります。

EWWW Image Optimizerの設定が影響している可能性も

画像を最適化してサイトの表示速度を高めるプラグインに「EWWW Image Optimizer」があります。

このプラグインは非常に人気なので、多くの方が導入しているプラグインでもあります。

ただ、場合によっては、このプラグインの設定が原因でサムネイルが表示されなくなっているケースがあります。

それが「遅延読み込み（Lazy Load）」という項目です。

EWWW Image Optimizerには「遅延読み込み（Lazy Load）」の機能が備わっており、これを有効にすると、画像が表示領域に入った時（または入ろうとした時）に読み込みが行われます。

つまり、画像が表示されていないエリアでは読み込みが行われないため、その分、サイトの表示速度を速めているというわけです。

もし「遅延読み込み（Lazy Load）」の項目に☑が入っていれば、一度その☑を外してみてください。

そうすれば、サムネイルが正常に表示されるはずです。

なお、CocoonでEWWW Image Optimizerを導入していた場合、EWWW Image Optimizer側で「遅延読み込み（Lazy Load）」をOFFにしたら、Cocoon側では「遅延読み込み（Lazy Load）」をONにしておきましょう。

これにより、サムネイルを正常に表示させつつ、遅延読み込みも同時に行うことができてサイトの高速化を行えます。