釣りとキャンプとコーヒーと釣りとキャンプとコーヒーと釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。Pages)はひたすらにページの表示速度を追いかけるため、javascriptが動作しないなどの制限があったり、HTMLの記述においてもAMP対応用のタグで記述する必要があるなどの制約があります。従来のWordPressの公式AMPプラグインでAMP化されたページは、オリジナルぺーじよりもかなり簡易化されたページでしたか、今回の1.0版のリリースにより、かなりオリジナル近い状態でAMP化ページを簡単に生成できるようになりました!それではさっそくAMP化してみましょう!目次1.AMPプラグインをインストールして、有効化する2.AMPプラグインを設定する3.AMP化されたかを確認する1.AMPプラグインをインストールして、有効化するまずは、WordPress公式のAMPプラグインをインストールしましょう。キーワードで「AMP」と入力して検索⇒「AMP」というプラグインをインストールします。インストールしたらさっそく有効化しましょう。有効化すると以下のような画面になり、WordPress管理画面の左側に「AMP」というメニューが追加されます。2.AMPプラグインを設定するプラグインを設定するとWordPress管理画面に「AMP」のメニューが追加されるので、その中で設定を行います。設定項目としては以下が表示されています。AMPページを生成します。ページやモバイルページはなくなります。私のサイトでは、メニューがうまく動作しなくなり、ページ遷移も遅くなってしまったのでこの設定はやめました。WordPressの管理画面「AMP」にAMPページとして変換した際に発生したエラーが表示されますが、私のページでは大量にエラーが出力され、メニューがやはりうまく動作しなかったため、結局この設定もやめました。1.0以前での表示ページです。デザイン的にもこの設定が一番よい感じだったのでこれを採用しました。3.AMP化されたかを確認するGoogleがAMP化していることを確認できるテストサイトを用意してくれています。AMPテストにAMP化後のURLを入力するだけで確認できます。AMP化されたURLは、例えばこのサイトのURLでいくと以下のようになります。https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/ampURLの後ろに/ampを付けます。※パラメータ付きのURLの場合は、&と付与したページがAMP化後のURLになることもあります。AMP化が成功していると上記のように表示されます。AMPページのURLの末尾に「#development=1」を付けることで確認することも可能です。https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/amp#development=1AMP確認のためのURLにアクセスし、Chromeのデベロッパーツールを起動して「console」タブを開いてください。以下の方法でChromeのデベロッパーツールは起動できます。(Mac)以下のように表示されればAMP化成功です。successful.」と表示されます。まとめいかがでしたでしょうか?プラグインを利用してWordPressをAMP化する方法をご紹介しました。Clasic以外のモードでは、オリジナルページを極力再現しようとする都合上、javascriptの動作が再現しきれない部分が発生していますが、こちらはサイトに応じてどの設定を選択いただくのがよいと思います。いずれにしてもシンプルな設定でAMP対応は可能ですので、やっておいて損はない設定です。>おすすめ2019年11月17日AMPページにAdSense広告を表示する最も楽ちんな方法2019年10月18日GTMで任意のページにチュートリアルを実装する方法2019年10月12日PWAでホームアイコンが追加されたかをGA/GTMで計測する!2019年8月10日PWAのホームアイコンにFCMを使ってWebプッシュ通知を送信する方法。