WordPressの有料テーマ「THE THOR」のAMPエラー(amp-imgの必須属性のheight設定)の解消方法

当サイトはWordPressの有料テーマ「The Thor」を導入しています。 SEOやレスポンシブルデザインに特化した初心者にも優しく、痒いところに手が届くありがたいテーマとなっていますが、モバイル向けのAMPページに対し、Googleから警告メッセージ「AMPエラー：必須属性「height」がタグ「amp-img」にありません。」が出ましたので、その解決方法を残しておきます。

HTMLタグボード

かなりニッチな情報になりますが、誰かの役に立てればと思い、記事にします。

1 amp-imgの必須属性のheight設定に関するAMPエラーメッセージ
2 WordPressの有料テーマ「THE THOR」での対処案
- 2.1 ①投稿ページの編集画面の「ブロック」で画像の寸法をpxで実入力するか％指定する方法
- 2.2 ②テーマのソースコードに直接を手を入れ、自動で入力させる方法
3 ②の解決手段について
- 3.1 The Thorでの修正方法について

amp-imgの必須属性のheight設定に関するAMPエラーメッセージ

Google Search Console画面でのエラーメッセージは以下の通りです。

AMPエラー：必須属性「height」がタグ「amp-img」にありません。
Google Search Console

投稿ページに画像を掲載する場合に、AMP変換ページのHTMLタグは<amp-img>になりますが、この属性で画像の縦横サイズを示す「width」と「height」属性が必須と定義されているにもかかわらず、記載されていない場合にこの警告メッセージが出ます。

WordPressの有料テーマ「THE THOR」での対処案

HTMLタグボード

いろいろとネットで調べてみると、対処方法には以下の2通りがあることが分かりました。

①投稿ページの編集画面の「ブロック」で画像の寸法をpxで実入力するか％指定する方法

例えば下記の画像は「400px × 80px」なので、widthには400、heightには80が入力されるはずのため、あえて投稿ページの編集画面で実際の値を入力する方法です。

初心者にも簡単な方法ですが、投稿ページ全てを修正する必要があり、骨が折れる作業です。

②テーマのソースコードに直接を手を入れ、自動で入力させる方法

難易度は上がりますが、テーマのソースコードを直接編集（テーマエティター）し、投稿後のページ生成時に自動で画像のサイズを判定し、 amp-imgタグの各属性に自動で値を入力させる方法です。作業漏れもなくなるため、こちらの方が効率的になります。

私は今後のことも考えて、②を選択しました。

②の解決手段について

では、この解決方法について解説します。

なかなかネットで検索してもすぐには見つからなかったのですが、幸いなことに「The Thor」の無料版である「LION MEIA」のテーマの場合に解決する方法を記載いただいたブログが見つかりましたので、そちらを参考に、「The Thor」での解決方法について、説明します。

LION MediaでAMP for WordPress に対応させるために必要な修正事項
カラスのガレージ

上記の「amp-img内にheight,widhtの追加」の項を参考にします。

以下のソースコードを「LION MEDIA」の[function.php]の「画像タグをamp用に置換」の直前に追記するのですが、「The Thor」では少々やり方が異なります。

//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);