Accelerated Mobile Pages ’amp プラグイン’ お試し

WordPressのプラグイン　amp( Version 0.3.2 )って、どんなものなのか
感触をつかみたくて、試用してみました。

以下のキャプチャーは、WordPressの投稿本文にサブブロックを作成するという記事の下書きですが、中身は大体同じものです。

「サブブロックを作成する」なんてありふれたことを、結構頑張って書いたのですが、AMPでは、投稿本文のサブブロックなどは、esc_htmlされて出力されるようで、
あっ、こういう事をするわけ～。と変な興味がわいてきたりして、

プラグインそのものは、single.phpテンプレートを乗っ取って、表示を変更するのでテーマの通常のCSSは排除されます。

それだと、pre要素で記述したコード等がオーバーフローして、閲覧ができない感じなので、ちょっと修正を入れました。


add_filter('the_content','raindrops_amp_filter');
//サブブロック要素をhr 要素に置換。
//これをしないと、サブブロック以下は esc_htmlされてしまうんですね
function raindrops_amp_filter( $content ) {
	if(get_query_var('amp')){
		
		$content= preg_replace('!<(/)?div[^>]*>!','<hr />', $content );
	}
	return $content;
}
add_action('amp_post_template_css', 'raindrops_amp_css');
//スタイルを修正、
//ベンダープレフィックスが入っていると、validationでエラーになったりするような予想
function raindrops_amp_css(){
	?>
	hr + hr{
		display:none;
	}
	pre{
	background:#eee;
	padding:1em;
	box-sizing:border-box;
	white-space: pre-wrap; 
	}
	<?php
}

全体としては、素直に動作してくれるようです。

個別投稿ベージでのみ動作するようです。

以下のようなクエリを追加すると、amp　で表示します。

http://www.example.com/wp/archives/37248?amp=1

http://www.example.com/wp/archives/37248/amp

検証は、W3Cバリデーションサービス等では行うことが出来ないので

http://www.example.com/wp/archives/37248?amp=1#development=1

#development=1というフラグメント識別子を付けて、Chromeデベロッパーツールで確認するのが普通のようです。

amp-result

ブラウザは、思った以上にうまく表示できているようで、safari5.1.7以外は、いい模様

screencapture-amp

ギャラリー表示

ampでは、カルーセル表示に変更される模様

amp-gallery

パスワード投稿

通常の投稿へリダイレクト

カテゴリーやタグの表示

すべて表示せず、主要なものだけ表示

amp-category-tag

WordPress Snippet