Cocoonテーマでの画像表示不具合

ブログ記事タイトル画像「Cocoonテーマでの画像表示不具合」

WordPressの人気無料テーマCocoonを使用したサイト作成において、トップぺージ用に設定したヘッダーロゴや、ブログ用のアイキャッチ画像が表示されない不具合が発生したため、その対策を行った内容について備忘録として残します。

結論から言うと、Autoptimizeというプラグインを無効にすることで、ロゴやアイキャッチ画像が表示されるようになりました。

AutoptimizeというプラグインはCSS・JS・HTMLを圧縮・統合（最適化）するものですが、時々以下のような副作用が出るようです。

  • 特定のテーマ（Cocoon含む）と相性が悪い設定がある
  • CSSの読み込み順が崩れる → 画像ファイルが非表示になってしまう
  • Lazy Load や JS の依存関係が壊れる → <img> タグが出てるのに表示されない　

Cocoonテーマ自体にある程度の最適化機能が備わっているため、Autoptimizeプラグインの代替が可能です。

具体的には、管理画面の「Cocoon設定」→「高速化」より、下記画像を参考に設定します。