WordPressテーマ「Cocoon」でブログを運営していて、ある日気づいたら アイキャッチ画像が表示されない トラブルに遭遇しました。
スマホ(iPhone)では出ているのに、PCでは本文にも一覧にも出ない…。
こんな感じでなんか表示されてるようななんもないような
原因を調べたところ、EWWW Image OptimizerのWebP変換が問題でした。
症状
- iPhone(スマホ)ではアイキャッチが表示される
- PCでは本文にも一覧にも出てこない
- 記事編集画面ではアイキャッチは設定済み
試したこと
- Cocoonの設定確認
- キャッシュ削除(WP Fastest Cache)
- Regenerate Thumbnails でサムネイル再生成
→ いずれも解決せず
原因はEWWW Image Optimizer
原因は EWWW Image OptimizerのWebP変換機能でした。
WebPのみを配信する設定にしていたため、
- スマホはWebPに対応 → 表示される
- PCはキャッシュや互換の影響で表示されない
という状態になっていたようです。
解決方法
EWWWを削除したところ、アイキャッチが正常に表示されるようになりました。
もしどうしてもEWWWを使いたい場合は:
- WebPのみではなく「JPG/PNGを残してWebPと併用」に設定する
- またはWebP配信をオフにして圧縮だけ使う
まとめ
- アイキャッチが出ないときは EWWWのWebP設定を疑う
- 表示優先ならEWWWを使わず、Cocoon+キャッシュプラグインだけで十分
- 軽量化をしたいときは、他の方法や設定を検討するのがおすすめ

