※当ブログではアフィリエイト広告を利用しています。
WordPress プラグインの AMP を導入したところ、なぜか記事中の画像が二重で表示されるようになってしまいました。
この問題に対処した方法をメモします。
発生した問題（プラグイン AMP を有効化すると画像が二重で表示される）
WordPress プラグイン AMP を有効化したところ、下の画像のように AMP ページにおいてブログ記事中に挿入した一つの画像が二つ表示されるようになってしまいました。
PC で AMP ページを閲覧した場合のみ発生し、スマホでは発生しませんでしたがあまり気分がいいものではありません。
対処した方法
まず WordPress プラグイン AMP を使っていると思われる他のサイトで AMP ページを見てみたところ、PC で画像が二重で表示されるような表示にはなっていませんでした。
このため私のサイトのどこかに問題があると考えました。
記事そのものでは画像は一つずつしか挿入していないため HTML ソースを見てみると、amp-imgが二重で出力されており、img タグにdata-srcが挿入されているものが見当たりました。
このため画像の出力を変更するようなプラグインを疑い一つ一つ調べていったところ、プラグイン「Unveil Lazy Load」が原因でした。
このプラグインは画像を一度に読み込まず遅延読み込みするためのものですが、最終更新が 5 年前で長い間アップデートされていないため、これを機に別のプラグインを使用することにしました。
現在は直近でも更新が行われている「Lazy Load by WP Rocket」を使っています。
おわりに
原因がわからず困りましたが、WordPress で表示がおかしくなったらまずプラグインを疑ってみるのはトラブルシューティングの鉄板だと感じた事象でした。
