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デベロッパーツールで 確認するのが普通のようです。
ブラウザは、思った以上にうまく表示できているようで、safari5.1.7以外は、いい模様
ギャラリー表示
ampでは、カルーセル表示に変更される模様
パスワード投稿
通常の投稿へリダイレクト
カテゴリーやタグの表示
すべて表示せず、主要なものだけ表示
関連
The tag ‘details’ is disallowed.
The tag ‘summary’ is disallowed.
The tag ‘parsererror’ is disallowed.