WordPress Popular Postsのアイキャッチ画像が消える問題を解決する

★★★ お知らせ ★★★

◆ 6月のPS Liveは決済サービスStripeのデモ！◆
決済サービスのStripeでサブスクリプションの支払い機能を作ってみた
Stripeの機能の一部を切り出して、簡単なサブスクリプションを作るとどうなるのかを、デモをまじえてご紹介します。
⇒ 詳細はこちらから

◆【セミナー開催】可視化ツールGrafana～初めてのダッシュボード作成◆
デモンストレーション付き！
本セミナーでは、売上データを用いて、4種類のパネル作成方法をお見せします。
⇒ お申込みはこちらから

◆ エンジニア業務環境アンケート結果 ◆
エンジニアが自分の働き方にどういったことで満足していて、不満を感じているのか、働きたい会社像として何を求めているのか、業務環境調査を実施しました。ぜひご覧ください。
⇒ アンケート結果はこちらから

やまねと申します。普段はDebianのパッケージをいじったり、zoomのLinux用パッケージの中身を眺めたり、フィッシングサイトの誤警告と戦ったり、雑誌の記事（その１、その２、その３）を書いたりしています。今日はWordPressのプラグインでハマってトラブルシュートをしたので、それをネタにお話します。

WordPress、使ってますか？このサイトもWordPressで動かしてます。色々なテーマやプラグインがあって便利ですよね。

しかし、その便利なプラグインの機能が衝突してしまうこともままあり、そんな時は解決に苦慮することがあります。今回は「WordPress Popular Posts」というプラグインを入れたものの、意図通りに動作しなかったためにトラブルシュートしたよ、という話です。

1 現象
2 結論
3 原因について

現象

ウィジェットでWordPress Popular Postsを設定したが、リロードしたら表示されていたアイキャッチ画像が消えて二度と表示されない。一旦画像を全削除してからリロードすると1度目は表示されるものの2度目からは空になる。

（お分かり頂けただろうか？左の画像にあったサムネイルが右では無くなっている…怪奇現象。）

結論

EWWW Image Optimizerプラグインと衝突するのでEWWW Image Optimizer側の設定を調整する

早めに解決策から。

WordPress Popular Postsを入れた環境にEWWW Image Optimizerが入っていると、機能が衝突してアイキャッチのサムネイル画像が意図通りに表示されないので、EWWW Image Optimizerの設定でWordPress Popular Postsが生成する画像を無視する設定を以下のように入れる必要があります。

EWWW Image Optimizerの [設定]→[EWWW Image Optimizer]→[上級者向け]→[無視するフォルダー] に「/wp-content/uploads/wordpress-popular-posts」と指定します。これだけ。

原因について

問題が置きていた該当のページのソースを見ると https://example.com/wp-content/uploads/wordpress-popular-posts/1234-featured-300×171.webp を参照しようとしているのですが、該当ディレクトリには 1234-featured-300×171.png.webp というファイルが生成されてしまっていました（xxxx.png.webpと拡張子が二重についている）。WebPファイルの生成はEWWW Image Optimizerプラグインを使っていたので、これの機能とWordPress Popular Postsのアイキャッチサムネイル作成機能の組み合わせが意図しない挙動を生んだようです。

WordPress Popular PostsリポジトリでのIssueへの作者の返信を見る限り、「EWWW Image OptimizerがWordPressのコア機能をぶんどっちゃうからじゃない？使ってないから知らんけど。」ということで、「WordPress Popular Posts側には問題がないからEWWW Image Optimizer側に言ってちょ」というスタンスのようですね。

そして、EWWW Image Optimizerで何とか設定できないかなーと調べた結果、上記のように「無視するフォルダー」でWordPress Popular Postsが生成する画像のフォルダを指定すれば良いことがわかりました。同じ様にハマった人が居そうなのでBlogネタとして供養します。