WordPressのAMPプラグイン（バージョン1.0）を使ってみた　※デモあり

はじめに

つい先日、WordPressのAMP公式プラグインのバージョン1.0安定版が正式リリースされました。

筆者もベータ版から触ってみているのですが、かなりの完成度です。

もう数ヶ月先にはAMPプラグインを入れただけでWordPressサイトのAMP対応は完了。

AMP化に必要な工数はほとんどなくなり、今度こそ世界中のサイトがAMP化するのではないかと思います。

ですが、現時点ではまだプラグインで対応しきれていない部分もちらほら。

そこで現状でどこまでできるのか、デモ環境を公開させていただこうかと。

エンジニアの皆様のご参考になれば幸いです。

デモ環境&元のサイト

実際に存在するサイトを元にデモ環境を作りました。

ぜひ見比べて見てください。

デモ環境：http://stg-spc.net/demos/amp/wp/
※全ページAMP化済み

元のサイト：売れるECサイトの 企画・構築・運用ならECサイト制作.com

URL構成に関して

まず気にすべきはURLです。

ベータ版では、従来通り通常ページのURLに「/amp」をつける形でAMPページが生成されるわけではなく、「?amp」をつける形もしくは「通常ページをAMPページに置き換える」という形になるようです。

見つかった不具合

ただ、以下の点で表示崩れ・動作不良が見つかりました。

・これまで通りオリジナルJavaScriptが動かない（ハンバーガーメニューやスクロールに合わせて出てくる要素など）
・プラグインを使用した問い合わせ機能が動かない
・チャットボットやMAツールなどは動作しない
・WordPressの場所がドメイン直下出ない場合は背景が表示されなくなる（CSSのディレクトリ指定がずれる）

やはりJavaScriptまわりがネックなようですね。

おわりに

もうちょい、といったところでしょうか。

アップデートが楽しみです。

AMPに関しては他にも記事を執筆しております。

この記事にたどり着いた方々には訳に立つ内容ではないかと。

• 『AMP公式ページを読んでも分からないこと|ホームページ制作、Webマーケティング｜株式会社SPC』
• 『AMPページに『Google Analytics』を設置する際の禁止事項』
• 『AMPページを作る際の工数を削減してみた（WordPress）』

※全てバージョン1.0が出る前の記事となります

3つ目の記事に関しては、今後必要なくなってしまいますね。

色々工夫したのに……。

追記していかねば。