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に関連するものとしては、以下を利用しました。今後とりかえたりするかもしれません。

実際にやって見て

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

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

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

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

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

YouTube

Twitter

Facebook

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

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

数式

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

次回予告

関連記事

Posted in