プラグインを使ってWordPressのサイトをAMP対応させる方法について紹介！

モバイルサイトの高速表示をできるAMP(Accelerated Mobile Pages)。

サイトの表示速度はアクセス数の増加のためにも、気にかけていく必要があります。

このAMPをプラグインを利用することで簡単にWordPressのサイトに導入することができるということを知っていましたか？

今回はプラグインを使ってWordPressのサイトをAMP対応させる方法について紹介します。

1 AMPの概要
2 WordPressのサイトをAMP対応する方法
- 2.1 プラグインを使ってAMP対応する手順
3 AMP対応したページをカスタマイズしよう
- 3.1 Googleanalyticsの設定について
- 3.2 デザインの変更について
4 まとめ

AMPの概要

AMP（Accelerated Mobile Pages）とは、「モバイルページを高速に表示させること」を目的としたGoogle主体のプロジェクトのことです。

日本では、毎日新聞や朝日新聞、マイナビニュースなどのニュースサイトがAMPを使用したページを公開しています。
また、TwitterやLINEといった今やほとんどの人が利用しているようなアプリでも対応していますので、今後どんどん普及が進んでいくものと予想できます。

AMPは、通常のWebサイトで用いられるHTML,CSS,JavaScriptといった技術を利用しながらも、独自に制限を設けたAMPフレームワークによって、サイト表示の高速化を実現しています。

AMPの技術を利用しているサイトは、従来のサイトに比べ平均4倍の速度で表示され、さらにデータ量も約10分の1となるため、ほとんどのページが瞬時に表示されるようになります。

WordPressのサイトをAMP対応する方法

WordPressのサイトをAMP対応するにはどうしたらいいのでしょうか。

WordPressのサイトをAMP対応にするためには、大きく分けて2つの方法があります。
１つは、自分でAMPの使用に沿ってテンプレートを作成する方法。
もう１つは、プラグインを使って自動でAMP仕様に沿ったページを自動生成してもらう方法です。

今回は”プラグインを使って”WordPressのサイトをAMP対応する方法について紹介するというテーマなので、
プラグインを使ったAMP対応の方法について紹介します。

プラグインを使うと、簡単にAMP対応することができますが、
プラグイン独自のテンプレートを利用することになりますので、
デザイン面で制約を受けてしまうということには注意が必要です。

プラグインを使ってAMP対応する手順

プラグインを使ってAMP対応するためには、「AMP」というプラグインを使用します。
このプラグインは、AMPプロジェクト公式サポートページにて紹介されています。

まず、このプラグインを利用するために、
WordPressの管理画面にログインし、AMPプラグインを検索してインストール、プラグインを有効化します。

有効化した後、適当な記事ページのURLの末尾に「/amp」を付けてアクセスすると、
AMP対応後のページが表示されるようになります。

URLは「http://記事ページURL/amp」のように表示されます。

ページが表示されることが確認出来たら、
念のためAMPページのHTMLのエラーや警告がないかどうか確認しておきましょう。

これらのエラーや警告は、AMPページURLの末尾に「#development=1」とつけてアクセスすると確認することができます。

URLは「http://記事ページURL/amp/#development=1」となります。

AMP対応したページをカスタマイズしよう

プラグインを用いてAMP対応したページは、冒頭でも述べましたが、
プラグイン独自のテンプレートを利用して表示されます。

したがって、デザインの変更や、GoogleAnalyticsの設定をする場合には、
AMPページ用に再度設定しなおす必要があります。

詳しくは、AMPプラグインのgithubページ
（https://github.com/Automattic/amp-wp）に記載されているのですが、
今回はGoogleAnalyticsの設定とデザインの変更について紹介します。

Googleanalyticsの設定について

上述のように、AMP対応したページは、
AMPプラグイン独自のテンプレートを利用して表示されます。

そのため、AMPプラグインを導入する前のページに設定していた
Googleanalyticsのトラッキングタグなどは反映されなくなります。

そこで、AMPプラグインには、AMP対応のページにGoogleAnalyticsの
トラッキングタグを設定するための方法が用意されているので、その方法を紹介します。

functions.phpの末尾にトラッキングIDはご自身のものに置き換えてから以下のコードを追加してください。

add_filter( ‘amp_post_template_analytics’, ‘xyz_amp_add_custom_analytics’ );
function xyz_amp_add_custom_analytics( $analytics ) {
if ( ! is_array( $analytics ) ) {
$analytics = array();
}

// https://developers.google.com/analytics/devguides/collection/amp-analytics/
$analytics[‘xyz-googleanalytics’] = array(
‘type’ => ‘googleanalytics’,
‘attributes’ => array(
// ‘data-credentials’ => ‘include’,
),
‘config_data’ => array(
‘vars’ => array(
‘account’ => “トラッキングID”
),
‘triggers’ => array(
‘trackPageview’ => array(
‘on’ => ‘visible’,
‘request’ => ‘pageview’,
),
),
),
);

return $analytics;
}

上記のトラッキングタグを設定すると、GoogleAnalytics上でAMPページのトラッキングが行われるようになります。

デザインの変更について

AMPプラグインを利用すると、プラグイン独自のテンプレートを利用するため、
AMP対応ページのデザインがすべて同じになってしまいます。
そのデザインを変更する方法を今回紹介します。

functions.phpの末尾に以下のコードを追加するとCSSを追加することができるようになります。

エラーが出ないように注意しながら行いましょう。
この時に注意なのですが、<style><style/>で囲ってはいけません。

add_action( ‘amp_post_template_css’, ‘xyz_amp_my_additional_css_styles’ );

function xyz_amp_my_additional_css_styles( $amp_template ) {
// only CSS here please…
?>

/* —– ここにcssを記載 —– */
.custom-style {
background: #0a89c0;
}
nav.amp-wp-title-bar {
background: #41A378; /* 既存のスタイルの上書き */
}
/* —– ここにcssを記載 —– */　　　　　

<?php
}

これで背景の色を変更することができるようになりました。