プラグインを使わずWordPressのシングルページでAMP対応ページを作ってみた

WordPress

プラグインを使わずWordPressのシングルページでAMP対応ページを作ってみたのアイキャッチ画像

以前「プラグインを使わずWordPressの固定ページでAMP対応ページを作ってみた」と言う記事で pagedを使ってAMP対応ページを実装してみましたが、もっとスマートにシングルページで実装できたので、そちらに乗り換えました。

PHPで現在のURLを取得してURLのパラメーターで判定する

phpで現在のURLを取得して、get_the_permalink();にパラメーターをもたせたURLで条件分岐します。シングルページのURLの末尾に?amp/を追加するとAMP用ページに切り替わります。

<?php
$current_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$wp_url = get_the_permalink();
$amp_url = $wp_url.'?amp/';
?>

<?php if ($current_url == $amp_url): ?>
  //AMP対応ページの処理
<?php else: ?>
  //通常の投稿ページの処理
<?php endif; ?>

固定ページでやるよりも全然スマートだし、手数もかからないし、スラッグも活かせるし、ということでこっちのやり方に乗り換えました。

大く異なるのは出力されているヘッダー

AMP対応ページで通常のページと大く異なるのは<head>です。AMP対応ページの処理に以下が出力されるようにしています。

<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>ページタイトル</title>
<link rel="canonical" href="元ページのURL">
<script type="application/ld+json">{
	"@context": "http://schema.org",
	"@type": "BlogPosting",
	"headline": "記事タイトル",
	"description": "記事ディスクリプション",
	"datePublished": "2016-02-14T07:00:02+00:00", //作成時間
	"dateModified": "2016-02-14T21:05:30+00:00", //更新時間
	"mainEntityOfPage":{
		 "@type": "WebPage",
		 "@id": "http://irec.jp/wordpress/amp-page-custom/"
	},
	"publisher": {
		"@type":"Organization",
		"name":"サイト名",
		"logo":{
			"@type":"ImageObject",
			"url":"サイトロゴ",
			"height":サイズ,
			"width":サイズ
		}
	},
	"author": {
		"@type": "Person",
		"name": "Naruhiko Wakai"
	},
	"image" : {
		"@type" : "ImageObject",
		"url" : "記事アイキャッチ",
		"width" : サイズ,
		"height" : サイズ
	}
}</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
//スタイル
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

またしばらく、検証です。