Accelerated Mobile Pages Project ってなんだ？

Accelerated Mobile Pages Project それは乱暴に言ってしまえばモバイル端末でウェブページを高速表示する為のHTML仕様です。
詳しくは「AMP html とは」をキーワードに検索して出てきたサイトを参照してください。

WordPressへの実装で困ること

Accelerated Mobile Pages Project(以下AMP)プラグインが出てきていますが環境によっては動かないものがあります。
それに、過去の資産を使う場合、そのプラグインでは対応できず、チェック時エラーがでる記事があります。
AMPに対応した記事の書き方をしなければならないのですが、過去の記事を表示する場合はそうも言っていられない。
出力に対応したテーマを書くなり、プラグインを書くなりしないとならないんですね・・・。

各タグに style の埋め込みはできない

その中でも困ったのが各タグに css設定 styleを埋め込んで調整ってのができません。
なんてこったい！
ってところです。
今さら各記事をエディタでチェックして、とっぱらって通常表示＆AMP表示チェックして調整してなんて面倒でやってられないということで・・・

AMP表示時、すべてのタグから style とっぱらってしまえ

っとなるんですね。

そんなわけで「simple_html_dom.php」を使って

function amp_del_style($content) {
	$amp_sb_htmltags = array(
		'a','abbr','acronym','address','applet','area','article','aside','audio','b','base','basefont','bdi','bdo','big','blockquote','body','br','button','canvas','caption','center','cite','code','col','colgroup','datalist','dd','del','details','dfn','dialog','dir','div','dl','dt','em','embed','fieldset','figcaption','figure','font','footer','form','frame','frameset','h1','h2','h3','h4','h5','h6','head','header','hr','html','i','iframe','img','input','ins','kbd','keygen','label','legend','li','link','main','map','mark','menu','menuitem','meta','meter','nav','noframes','noscript','object','ol','optgroup','option','output','p','param','pre','progress','q','rp','rt','ruby','s','samp','script','section','select','small','source','span','strike','strong','style','sub','summary','sup','table','tbody','td','textarea','tfoot','th','thead','time','title','tr','track','tt','u','ul','var','video','wbr'
	);
	$amp_sb_dom = str_get_html($content);

	foreach ($amp_sb_htmltags as $amp_sb_target_htmltag) {
		foreach ($amp_sb_dom->find($amp_sb_target_htmltag) as $el) {
			$el->style = null;
		}
	}

	$temp = $amp_sb_dom->save();
	$amp_sb_dom->clear();
	return $temp;
}

と styleを削除し、表示チェックをし、調整します。

面倒なものはまだまだある

javascriptを自由に使えなかったり imgタグを筆頭にタグ置き換えや、もちろん使用禁止タグがあります。
それら対処が必要です。

ぐはぁ！