WordPressを手早くAMP化する最適な方法WordPressを手早くAMP化する最適な方法2020年1月3日AMP本サイトはWordPressで運用されています。基本的にすべてのページがAMPに対応した形で公開されています。利用しているプラグインはAMPです。いうオープンソースで開発が続けられているプロジェクトの中の一つです。Github上にリポジトリがあって、だれでもissueを書いたり、プルリクエストを送ったりできます。Modeとして3つの中からAMP化の方法を選ぶことができます。説明すると以下のような感じです。選べる3つのモードStandard現在利用しているテーマの見栄えそのままに、全てのページをAMP化、URLもかわりません。)を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。)を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。AMPプラグインを使おう!どのモードでも、AMPの仕様としての制約(Javascriptが利用できない、CSSの容量制限)などはありますが、基本的にはモードを選ぶだけで、即座にWordPressサイトをAMP化できます。その際、既存のタグをそれぞれAMPのタグに変換したり、エラー内容を通知してくれたりもします。便利で素敵なプラグインです。WordPressでAMP化する最適な方法は、このAMPプラグインを有効化する!以上!となります。これだけと、短い感じがしますので、もう少し話を続けましょう。これまでTransitonalを利用していた理由これまでは、Transitionalを利用していました。いうのも、既存サイトのAMP化の場合、ハンバーガーメニューや、スライダーなどなどJavascriptを利用したパーツが複数含まれており、それらが利用できなくなることや、CSSの容量制限から、正しく表示されないといった心配があったからです。そのため、Transitionalモードを利用し、さらに、AMPを適用する範疇も記事の詳細ページだけとし、サイトに与える影響が小さくなるようにしていました。Euro2019のスポンサーブースにおいて、AMPプラグインの開発に携わるエンジニアさんと話す機会があり、「なぜ、Standardモードを利用しないの?」と聞かれました。その時には上記のような理由をお伝えしたのですが、雰囲気には、Standardモードがオススメだよ。いう雰囲気を感じました。それ以降、いつかタイミングがあったら、StandardモードでAMPサイトを作りたいなーと考えていました。Standardモードを利用するためにテーマやプラグインというわけで、準備に取り掛かります。テーマについては、WordPressの最新バージョンに含まれるデフォルトテーマのtwenty-twentyなどはAMP対応テーマなので、こちらを利用する。AMPに対応のあるテーマを利用する。いうのが簡単と思われます。プラグインも同ページで紹介されていますね。1からつくってみようということで、このサイトのテーマを作りました。頼れるものはプラグインになるべく頼るなどの対応と公開をとりあえずの目標に、テーマを作成しました。制作の際に参考にしたもの。Gutenberg様々なブロックをいれたダミーページを作ってくれるプラグイン色々忘れたり、漏れたりするので、こういうのがあると助かりますね。記述やCSSの参考に利用したプラグインAMPに関連するものとしては、以下を利用しました。今後とりかえたりするかもしれません。実際にやって見てStandardモードはかなりいいと感じました。結果として、表示速度は早くなりますし、ブロックエディターとの相性もよく、様々な埋め込みにもAMPは対応できるということもわかりました。付加要素として、新しい手法を取り入れられて、なんか嬉しい気持ち。引き続き色々手を加えながら、もっと良くなるといいなーと思っています。いうわけで、よかったらAMP対応やってみてくださいませ。モード変更は可能なので、色々試してみていただければとおもいます。おまけ、いろんな貼り付け最後に、色々埋め込んでもAMPは動くというサンプルを紹介します。YouTubeTwitterFacebookAMPプラグインによって提供されるブロック以下はmAMPプラグインを有効化すると利用できるブロックの一部なのですが、特に数式が面白かったのでご紹介します。いえ、さっぱり数式のことはわかりませんが。ついて2月に行われる自分主催のイベント”めがねさんと。2020について日記的なYoutubeを再開したい。毎日続けられるかどうか。雑記AMP対応でもソースコードを見やすく、表示したい。