WordPress

WordPress で AMP ページ用 URL を任意の形式に整えてみる

WordPress で AMP ページ用 URL を任意の形式に整えてみる

WordPress を AMP 化するには、rel="amphtml"を指定した link タグを使わなければいけません。このタグで AMP ページ用 URL を指定することで、Google が AMP ページをクロールしてくれるようになります。

この AMP ページ用 URL には任意のものを設定できます。元ページの URL に/amp?amp=1といったパラメータを追加したものを見かけることが多いです。

WordPress の場合は AMP 対応用のプラグインを使って簡単に URL を設定できるのですが、サイト制作の勉強のため、今回はプラグインを使わずに実装してみようと思います。

AMP とは

amp

AMP は、Accelerated Mobile Pages(アクセラレイティッド・モバイル・ページズ)の略。Google が中心となって立ち上げた、モバイルでの Web サイト閲覧高速化を目的としたオープンソースプロジェクトです。

AMP 独自のルールに則って Web ページを制作すると、そのページが Google にキャッシュされます。これにより、モバイルの検索結果からページに接続した際に、通常よりも高速に表示させることができます。

WordPress の場合は、プラグインを利用することで簡単に AMP に対応することができます。特にこだわりが無いのであれば、プラグインの導入だけで AMP 対応できるようです。

AMP WordPress プラグイン

しかし、この方法だと細かいデザインの指定ができず、プラグインを使用したページはどれも画一的で個性のないものになってしまいます。できれば独自のデザインを生かして、スマートに AMP 対応させたいところです。

そういった AMP 独自対応の一環として、今回はプラグインを使用せずに AMP ページ用 URL を任意の形式に整える方法を試してみたいと思います。

/ampで URL を指定する

今回は、通常の URL の後ろに/ampを付けたものを AMP ページ用 URL として使えるようにすることを最終目標とします。

手順は以下の2ステップです。

  1. add_rewrite_tag()で WordPress にカスタム POST/GET 変数(クエリ文字列)を認識させる
  2. add_rewrite_rule()で カスタム URL(/amp付きの URL)を作成

具体的には以下のコードで実装しました。

add_action('init', function() {
	add_rewrite_tag('%amp%', '([^&]+)');
	add_rewrite_rule('(.+?)(?:/([0-9]+))?/amp', 'index.php?name=$matches[1]&=1', 'top');
}, 10, 0);

まず、add_rewrite_tag('%amp%', '([^&]+)');でページの取得に使うクエリ文字列としてampを WordPress に認識させます。

さらに、add_rewrite_rule()で個別記事のパーマリンクが/amp付きだった場合の処理を行います。上記のように書くことで通常のクエリ文字列に&=1が加えられたページを呼び出すようになります。

最後に、WordPress 管理画面のパーマリンク設定変更を保存をクリックして、リライトルールを反映させたら完了です。

ちなみに、上記add_rewrite_rule()のコードは、パーマリンク設定を %postname% にした場合のものになっています。パーマリンクの形式によって正規表現の部分を書き直さなければいけないので、そこだけご注意ください。

リライトルール関連については公式のドキュメントが分かりやすいです。ぜひ目を通してみてください。

Rewrite API/add rewrite rule

AMP ページとそれ以外を振り分ける

次に、AMP ページとそれ以外を振り分ける関数を作成してみます。

この関数により、/ampに接続した場合のみ AMP 用 HTML が出力されるよう設定できるようになります。

私は WordPress の他の条件分岐タグと同じような形式にしたかったので、is_amp()で分岐できるようにしました。

function is_amp() {
	global $wp_query;
	$is_amp = $wp_query -> query_vars['amp'];
	if($is_amp === '1' && is_single()) {
		$amp = true;
	}
	return $amp;
}

まず、global $wp_queryでグローバル変数の $wp_query を取得し、そこからquery_vars['amp']でクエリ文字列のamp=に続く値を取得します。

前述したコードで設定したリライトによって、AMP ページの URL ではamp=1が指定されているはずです。値が1だった場合、かつ、個別投稿ページだったの場合のみtrueを返すようにしました。

以上で、if(is_amp()) { }のように書いて条件分岐できるようになります。


以上です。

URL の設定についてはこれが最小限のコードかなと思うのですが、もしかしたら足りない部分があるかもしれません。なにかアドバイスなどありましたら教えていただけると嬉しいです。

また、WordPress で独自に AMP 対応してみようかなと考えている方の参考になればいいなと思います。

それではまた🙌🏻