WordPressサイトのAMP対応
2016-09-16 15:52 - hagiwara
こんにちは。開発担当の萩原です。
以前からAMPが話題になっておりますが、
対応方法やAMP_HTMLについての情報はたくさん公開されておりますので、
AMP_HTMLの基本的な文法や仕様などの部分は割愛させていただきまして、
今回はWordPressサイトのAMP対応について書かせていただきたいと思います。
その方法ですが、WordPressを制作したAutomattic社が公開している「AMP」という
プラグインをダウンロードしてきて管理画面から有効化するだけです。
※この記事時点でのプラグインのバージョンは0.3.3です
そうしますと既存のページのURL末尾に「/amp/」か「?amp=1」を追加してアクセスすると
AMP対応したページが表示されます。
これでAMP対応はできるのですが、このプラグインの仕組みとしては、
AMP用のURLへのリクエストがあったら、
このプラグイン内に持っているAMP用のテーマに切り替えて表示するという
感じになっておりまして、
このプラグインでAMP対応したサイトの見た目はどのサイトもほぼ同じになってしまいます。
もしくは、プラグイン内のテーマを自分で変更する方法もありますが、
プラグインをアップデートするたびに、そのテーマを変更し直さなければなりません。
また、この状態ではGoogleAnalyticsのタグも入っていません。
そのような状態ではAMP対応できても意味がないと思う方もいらっしゃると思いますので、
・WordPressサイトをAMP対応して、AMP用のテーマをプラグインの外で管理する方法
・WordPressサイトをAMP対応して、GoogleAnalyticsのタグを入れる方法
を紹介させていただきます。
WordPressサイトをAMP対応して、AMP用のテーマをプラグインの外で管理する方法
AMPプラグインの「templates」ディレクトリを、
使用しているテーマのディレクトリに「amp_templates」という名前でコピーしてください。
そしてそのテーマのfunctions.phpに以下の記述を追加してください。
|
1 2 3 4 5 6 |
add_filter('amp_post_template_dir', 'my_amp_post_template_dir'); function my_amp_post_template_dir($amp_template_dir) { $amp_template_dir = TEMPLATEPATH.'/amp_templates'; return $amp_template_dir; } |
「amp_post_template_dir」のフィルタを使ってテンプレートディレクトリを変更することで、
amp_templates内のテンプレートファイルを読み込むようになりますので、
プラグイン内のテンプレートファイルを書き換えなくて良くなります。
※「amp_templates」は任意の名前で結構です
WordPressサイトをAMP対応して、GoogleAnalyticsのタグを入れる方法
使用しているテーマのfunctions.phpに以下の記述を追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
add_filter('amp_post_template_analytics', 'my_amp_post_template_analytics'); function my_amp_post_template_analytics($analytics) { if (!is_array($analytics)){ $analytics = array(); } $analytics['my-site'] = array( 'type' => 'googleanalytics', 'attributes' => array(), 'config_data' => array( 'vars' => array( 'account' => "UA-XXXXX-Y" ), 'triggers' => array( 'trackPageview' => array( 'on' => 'visible', 'request' => 'pageview', ), ), ), ); return $analytics; } |
「amp_post_template_analytics」のフィルタを使って、GoogleAnalyticsの情報をセットします。
「account」には任意のトラッキングIDを入れてください。
最後に
このプラグインでは「投稿ページ」しかAMP対応しないのですが、
「固定ページ」もAMP対応する方法です。
この方法はプラグインファイルを変更するのであまりお勧めはできませんが、
どうしても対応させたい場合は、
AMPプラグイン内のamp.phpの40行目あたりの
|
1 2 |
add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK ); add_post_type_support( 'post', AMP_QUERY_VAR ); |
を
|
1 2 3 |
add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK | EP_PAGES ); add_post_type_support( 'post', AMP_QUERY_VAR ); add_post_type_support( 'page', AMP_QUERY_VAR ); |
に変更すると固定ページもAMP対応の対象となります。
以上となります。ご参考になりましたら幸いです。
