実際の対応の仕方についてはこちらを参考に行いました。

今回は置き換えた際に起こった問題を書いておきます。

特定のプラグインを有効にしておくと上手く対応できない

今回の場合、まず、「Jetpack by WordPress.com」を有効にしていた時に起きました。

これは、Jetpack by WordPress.comが画像を早く表示するために画像のパスが「Photon」のキャッシュになりますが、これが呼び出せないのか画像が表示されませんでした。

次に、「Lazy Load」です。これは、同時に「VK Post Author Display」を有効にしている場合に起きたのですが、VK Post Author Displayで表示されるはずの画像がLazy Loadを有効にしているとAMP対応のページで表示されなくなってしまいました。

記事中の画像がheight:100%になってしまう

こちらを参考にしてimgタグを置き換えたときに正常に表示されるページとそうでないページがでてきました。
調べてみた結果、今回AMP対応を行ったWordpressのfunctions.phpでimgタグの前後に自動的に付与されるpタグを削除する処理が入っていました。
どうやら、imgタグがpタグやaタグの中に入っていないとamp-imgタグに置き換えた際にamp-imgタグの終了が自動的に入らなくなっているようです。

実際に対応してみて

プラグインなしで対応をしてみましたが、このようになかなか気づかない問題が出てきてしまい、対応するのに苦労しました。AMPのプラグインを使用した場合このような問題は起きずにできるので、こだわりがなければプラグインを使用したほうがいいようです。

Google Analyticsについては

こちらの記事でプラグインを使用した場合のGoogle Analyticsの導入方法を記載しています。
Google Analyticsに関してはプラグインの有無は関係ないため、まったく同じなの方法で導入することができました。

このブログを書いた人

瀬高博文
プログラマです。言語はC,C++。現在はWebサイトやスマートフォンアプリ作成のためにPHP,JavaScript,Objective-C,MySQLを勉強中です。
この人のすべてのブログを見る