ホーム > 雑記 > WordPressを手早くAMP化する最適な方法

WordPressを手早くAMP化する最適な方法

本サイトはWordPressで運用されています。そして基本的にすべてのページがAMPに対応した形で公開されています。利用しているプラグインはAMPです。

Official AMP plugin, supported by the AMP team. Formerly Accelerated Mobile Pages, AMP enables great experiences across mobile, desktop, and stories.

https://ja.wordpress.org/plugins/amp/

このプラグインは、The AMP Project というオープンソースで開発が続けられているプロジェクトの中の一つです。Github上にリポジトリがあって、だれでもissueを書いたり、プルリクエストを送ったりできます。

WordPressにAMPプラグインをインストールして有効化すると、Website Modeとして3つの中からAMP化の方法を選ぶことができます。ざっくり説明すると以下のような感じです。

選べる3つのモード

Standard

現在利用しているテーマの見栄えそのままに、全てのページをAMP化、URLもかわりません。

Transitional

現在利用しているテーマの見栄えそのままに、AMP化したURL（既存のURLの最後に?amp ）を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。

Reader

現在利用しているテーマとは異なる、シンプルなテーマ（プラグイン内に同封）でAMP化したURL（既存のURLの最後に?amp ）を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。

AMPプラグインを使おう！

どのモードでも、AMPの仕様としての制約（Javascriptが利用できない、CSSの容量制限）などはありますが、基本的にはモードを選ぶだけで、即座にWordPressサイトをAMP化できます。その際、既存のタグをそれぞれAMPのタグに変換したり、エラー内容を通知してくれたりもします。とても便利で素敵なプラグインです。

ですので、WordPressでAMP化する最適な方法は、このAMPプラグインを有効化する！以上！となります。

これだけと、短い感じがしますので、もう少し話を続けましょう。

これまでTransitonalを利用していた理由

これまでは、Transitionalを利用していました。というのも、既存サイトのAMP化の場合、ハンバーガーメニューや、スライダーなどなどJavascriptを利用したパーツが複数含まれており、それらが利用できなくなることや、CSSの容量制限から、正しく表示されないといった心配があったからです。

そのため、Transitionalモードを利用し、さらに、AMPを適用する範疇も記事の詳細ページだけとし、サイトに与える影響が小さくなるようにしていました。

WordCamp Euro 2019にてStandardを勧められる

WordCamp Euro2019のスポンサーブースにおいて、AMPプラグインの開発に携わるエンジニアさんと話す機会があり、「なぜ、Standardモードを利用しないの？」と聞かれました。その時には上記のような理由をお伝えしたのですが、雰囲気には、Standardモードがオススメだよ。という雰囲気を感じました。

それ以降、いつかタイミングがあったら、StandardモードでAMPサイトを作りたいなーと考えていました。

Standardモードを利用するためにテーマやプラグイン

というわけで、準備に取り掛かります。テーマについては、WordPressの最新バージョンに含まれるデフォルトテーマのtwenty-twentyなどはAMP対応テーマなので、こちらを利用する。またはAMPに対応のあるテーマを利用する。というのが簡単と思われます。プラグインも同ページで紹介されていますね。

ただ、せっかくなら1からつくってみようということで、このサイトのテーマを作りました。

とはいえ、開発にあまり時間をかけたくないので

  • AMP対応
  • ハンバーガーメニュー的なものの実装
  • アドセンス対応
  • GTMを利用したAnalyticsの測定と、イベント取得
  • ブロックエディタ対応
  • 頼れるものはプラグインになるべく頼る

などの対応と公開をとりあえずの目標に、テーマを作成しました。

制作の際に参考にしたもの。

  • ドキュメント
    • AMPのための独自実装の参考に
    • わかりやすくて、サンプルもあってとても便利
  • Block Unit Test for Gutenberg
    • 様々なブロックをいれたダミーページを作ってくれるプラグイン
    • 色々忘れたり、漏れたりするので、こういうのがあると助かりますね。
  • gutenberg-starter-theme
    • ブロックエディター導入後のtheme-support の記述やCSSの参考に

利用したプラグイン

AMPに関連するものとしては、以下を利用しました。今後とりかえたりするかもしれません。

実際にやって見て

Standardモードはかなりいいと感じました。結果として、表示速度は早くなりますし、ブロックエディターとの相性もよく、様々な埋め込みにもAMPは対応できるということもわかりました。

付加要素として、新しい手法を取り入れられて、なんか嬉しい気持ち。というのもあります。ので、引き続き色々手を加えながら、もっと良くなるといいなーと思っています。

というわけで、よかったらAMP対応やってみてくださいませ。すぐにモード変更は可能なので、色々試してみていただければとおもいます。

おまけ、いろんな貼り付け

最後に、色々埋め込んでもAMPは動くというサンプルを紹介します。

YouTube

Twitter

Facebook

AMPプラグインによって提供されるブロック

以下はｍAMPプラグインを有効化すると利用できるブロックの一部なのですが、特に数式が面白かったのでご紹介します。とはいえ、さっぱり数式のことはわかりませんが。。

数式

というわけで以上です、ではまた！

次回予告

  • AMPでのアクセス解析
    • クリックイベントの取得
  • AMPとカスタムメニューの組み合わせ
  • AMPでアドセンス自動広告
  • Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
  • 2月に行われる自分主催のイベント”めがねさんと。“について
  • WordCamp ASIA 2020について
  • 日記的なYoutubeを再開したい。
  • 毎日続けられるかどうか。
  • ロゴをかっこよくする
  • メニューをサンドイッチぽくする

megane9988