【AMP】スマホページが要らなくなる？WordPressとの連携方法

AMPとは、「Accelerated Mobile Pages」のことで
GoogleとTwitterが協同で策定したプロジェクト。

詳細については、以下のサイトさんがよくまとまっている。

qiita.com

AMPについて検索してみると
AMPは「カルーセルのみに表示される」のように
書いているサイトさんも見受けられるが
現在は通常の検索結果でもAMPが表示されている。

「渋谷　イタリアン」で検索した例）

AMPでは外部Javascriptが使用できないため
リッチなサイトの作成は難しそうだが

• サイドバー
• SNSのシェアボタン（Twitter, Facebook, Pinterest, Google+, Tumblrなど）
• Youtube
• Googleマップ
• Google Analytics

などのコンポーネントは使えるため、
オーソドックスなサイト作成には、問題ないと思われる。

AMPの広告対応も、Adsenseだけではなく

• A8net
• AccessTrade
• ValueCommerce

なども対応しているようだ。

[参考]
amp-ad / amp-embed – AMP

WordPressでのAMP作成方法

AMPの作成方法には

• １から自分で作る
• プラグインを利用する

の方法がある。手っ取り早く使いたい場合は
プラグインが良いだろう。

記事作成時点では以下のWordPressプラグインが存在するが
「AMP」のプラグインがメジャーっぽい。
※記事作成時のGithubのスター数で比較。「AMP」が1009、「AMP for WP」が61。

[AMP]
ja.wordpress.org

[AMP for WP]
wordpress.org

[AMP]を使用する前提で書くが
デフォルトのデザインは簡易なものなので
CSSの変更は必須。

<?php

add_action( 'amp_post_template_css', 'amp_base_css' );

function amp_base_css( $amp_template ) {
    echo file_get_contents(get_stylesheet_directory_uri() .'/amp-base.css');
}

その他以下のような変更がフィルターを設定するだけで可能だ。

Feature画像の非表示

<?php

add_filter( 'amp_post_template_data', 'xyz_amp_remove_featured_image' );

function xyz_amp_remove_featured_image( $data ) {
    $data['featured_image'] = false;
    return $data;
}

コンテンツ幅の変更

<?php

add_filter( 'amp_content_max_width', 'xyz_amp_change_content_width' );

function xyz_amp_change_content_width( $content_max_width ) {
	return 1200;
}

Schema.orgメタデータの変更

<?php

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
		'height' => 60,
		'width' => 600,
	);

	return $metadata;
}

詳細は以下のリンクを参照
GitHub - Automattic/amp-wp: WordPress plugin for adding AMP support