ガレージカラスのデザインを変更しました。twitterからのリンクが一時切れてたため修正しました。

LION MediaでAMP for WordPress に対応させるために必要な修正事項

  • 2019.02.11
  • IT
LION MediaでAMP for WordPress に対応させるために必要な修正事項

LION MediaはAMP対応を謳っていますが、別のテーマからの移行やプラグインの絡みで、結構エラーだらけなので修正していきます。

内容だけ知りたい方の方が多いと思うので能書きは後回しで修正した内容から紹介していきます。

amazon リンク張り直し

amazonJSを使っているとエラーになります。

なんか色々複合して出てきます。

タグ「amp-iframe」の属性「src」の URL プロトコルが無効です。

このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。

などが出てきたと思います。が、これは対処法があるので楽です。

AmazonJS reviewerという便利なプラグインの追加modを作ってくれている人がいるので使います。

リンク先の通りに追加すればAMP対応のコードに変換してくれます。

amp-img内にheight,widhtの追加

画像が貼られている古い記事で発生しやすいエラーです。

このドキュメントに、必須の AMP HTML タグがありません。みたいなエラーが出ます。

画像の縦横のサイズが指定は必須になってしまったので一つ一つ追加しました。

何か楽な方法があるかもしれません。

一応function.phpを修正してwidthとheightを追加しました。

これを「画像タグをamp用に置換」の直前に入れます。

//imgタグにwidthとheightを追加 ここから先を追記
$img_pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
preg_match_all($img_pattern, $the_content, $rep_imgs);
foreach ( $rep_imgs[0] as $i => $rep_img ) {
if ( false !== strpos( $rep_img, 'width=' ) && false !== strpos( $rep_img, 'height=' ) ) {
continue;
}
$rep_img_url = $rep_imgs[1][$i]; // 画像url
$rep_img_size = @getimagesize( $rep_img_url ); // 画像サイズを取得
if ( false === $rep_img_size ) {
continue;
}
$replaced_img = str_replace( '<img ', '<img ' . $rep_img_size[3] . ' ', $rep_imgs[0][$i] );
$the_content = str_replace( $rep_img, $replaced_img, $the_content );
}
//追加ここまで

//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);

他記事には画像ブロックのアップデートで行けるみたいなのもあったのですが、僕の場合はダメでした。

何がいけなかったんでしょうね、何かのプラグインがheightタグとwidthタグを消しているような気がするのですが特定できてません。

検索すると、数年前までこれらのプロパティを削除するのが流行っていたみたいなので、その影響かもしれませんね。

border=”0″削除

このプロパティも禁止されているので見つけ次第消します。

許可されていない属性または属性値が HMTL タグにあります。

というエラーが出ます。

古い記事によく出てきます。

こちらはそんなに多くないので手作業でやりました。

沢山あったらやはりfunction.phpで削除した方がいいと思います。

基本的なAMP不具合対処方法

正直検索してもあまり情報出てこないです。(2019年2月現在)

対処要領もあまり乗っておらず、自分で考えるしかない部分があります。

必要なソースコードは探せば出てこなくもないですが、検索の仕方にコツが必要で、エラーメッセージだけ書いてもダメです。

AMP対応はかなり厳格なマークアップが必要ということで、いろんなプラグインを入れてしまってわけわからなくなっている人はちょっと大変だと思います。

がんばってください。

ITカテゴリの最新記事