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

2019年2月11日2019年11月4日ITブログ,壊れた

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

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

Contents

1. amazon リンク張り直し
2. amp-img内にheight,widhtの追加
3. border="0″削除
4. 基本的なAMP不具合対処方法

amazon リンク張り直し

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

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

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

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

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

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

AMP対応の AmazonJS拡張プラグインを作成！

リンク先の通りに追加すれば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タグを消しているような気がするのですが特定できてません。

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