AMP for WordPress で Amazon アソシエイトリンク表示調整

AMP for WordPress 便利ですよね。インストールして有効化すればほぼ修正無しで AMP 対応が完了します。

ただ、気になるのが Amazon アソシエイトの広告表示サイズ。「テキストと画像」広告の場合、なぜか 840×400 のサイズのブロック内にぽつんと表示されるようです。

AMP導入当初のAmazonアソシエイト広告表示

解決方法

このままでは見た目があまりよくないので、解消するコードを書いてみました。

コードをテーマファイルの functions.php に追記します。
ダッシュボードだと「外観」→「テーマの編集」から「テーマのための関数」から。


//AMPの場合に実行
add_action( 'pre_amp_render_post', 'amp_add_custom_actions_01' );
function amp_add_custom_actions_01() {
	add_filter( 'the_content', 'amp_amazon_associate_size_setting' );
}
/**
 * アマゾンアソシエイトのリンクサイズ修正
 */
function amp_amazon_associate_size_setting ( $content ) {
	$pattern = '/<iframe (.*)(style="width:\s*120px\s*;\s*height:\s*240px;")(.*)<\/iframe>/iu';
	$replacement = '<iframe $1 style="width:120px;height:240px;" width="120" height="240" $3';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

これできれいに表記されるようになりました。

修正コード導入後のAmazonアソシエイト広告表示

原因と対策内容

Amazonアソシエイトの「テキストと画像」には iframe が使われています。
そして AMP では iframeは表示できず、amp-iframe 要素に置き換えることで表示が可能となります。

iframe の追加 – AMP

AMP for WordPress プラグインでは、iframe から amp-iframe への変換を自動で行っているため、何も設定しなくても iframe が表示できるわけです。

変換の際、タグの属性の width, height は自動で amp-iframe に反映されますが、style属性の width, height は反映されません。
Amazonアソシエイトの「テキストと画像」広告の高さ、横幅は style 属性の指定になっています。そのため、初期状態ではAMP for WordPress の初期設定値である width=400 が適用されます。

※ 詳細は wp-content/plugins/amp/includes/sanitizers/class-amp-iframe-sanitizer.php を参照。

そこで AMP 変換前に、Amazonアソシエイトの「テキストと画像」タグに

width="120" height="240"

を追記してサイズが設定されるようにしています。

注意

Amazon アソシエイトのタグの加工については特に規約が見当たりませんでした。
ヘルプページには、

テキストリンクや個別商品リンク(基本型)からイメージタグを削除しても、リンクは機能しますか?

当プログラムでは、リンク作成ページで生成されたHTMLをそのまま使用することをお勧めします。

アソシエイト・セントラル – ヘルプ

といった、そのまま利用することをお勧めします、といった緩めの表記はありますが、コードを利用する際は自己責任でお願いいたします。

Follow me!