WordPressでAmazonアソシエイトの商品リンクをAMP仕様にする方法

Amazonアソシエイトの商品リンクをWordpressでうまいこと修正して、AMP仕様にする方法の紹介です。

WordPressなどでAmazon商品の紹介をするときに、Amazon JSを利用している方も多いと思いますが、AMPページではエラーになってしまいます。その対策などにも。

アソシエイトの商品リンクはAMP仕様だとエラーになる

まず、Amazonアソシエイトの商品リンクとは以下のようなAmazonが発行するタグを利用した商品へのリンクです。

タグはこんな感じになっています。

<iframe 
  src="https://rcm-fe.amazon-adsystem.com/e/cm?t=xxxxxxx-22&o=9&p=8&l=as1&asins=B00F4KOK5M&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" 
  style="width:120px;height:240px;" 
  scrolling="no" 
  marginwidth="0" 
  marginheight="0" 
  frameborder="0">
</iframe>

※見やすいように改行してあります。

このiframeをAMP用にamp-iframeに置換したとしても、以下のような点でAMPエラーになります。

width属性がない
height属性がない
style属性がある
src属性で読み込むURLがhttpだった時にエラーが出る（Amazon JSの出力するコード）

今回は、Amazonアソシエイトが発行する商品リンクを、Wordpress上PHPで処理してやることによって、AMPページで表示させても問題ないように出力させる方法です。

Amazon JSの出力タグ

ちなみにAmazon JSでAmazon商品リンクを表示させている場合は、以下のようなリンクが出力されます。

ただしこれは、プラグイン名にAmazon JSとあるように、JavaScriptを用いてAmazon APIを呼び出し商品リンクを出力させています。

しかし、AMPページでは決まったJavaScriptしか利用できないため、スクリプトを用いた商品リンクは作成できません。

そういった「スクリプトが利用できないページ」のために、Amazon JSはnoscriptタグを用いて、以下のようなタグを出力します。

<noscript>
  <iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=xxxx-22&o=9&p=8&l=as1&asins=B00GLK7Q2I&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" 
  style="width:120px;height:240px;" 
  scrolling="no" 
  marginwidth="0" 
  marginheight="0" 
  frameborder="0">
  </iframe>
</noscript>

noscriptタグを用いて出力されるのは、Amazonアソシエイトで発行される商品リンクと同じです。しかも、Amazon JSで利用されているURLは、httpなので、これにも対応する必要があります（AMPの仕様でiframeのsrcにhttpsしか利用できない）。

参考 AmazonJSのAMP対応について

Amazonアソシエイトの商品リンクをAMP化させる

Amazonアソシエイトの商品リンクを、Wordpress側でうまくAMP化させるには、functions.phpに以下のコードを貼り付けます。

//AMP判別関数
function is_amp(){
  //AMPチェック
  $is_amp = false;
  if ( empty($_GET['amp']) ) {
    return false;
  }
 
  // ampのパラメーターが1かつ
  // かつsingleページのみ$is_ampをtrueにする
  if(is_amp_enable() && //AMPがカスタマイザーの有効化されているか
     is_single() &&
     $_GET['amp'] === '1'
    ){
    $is_amp = true;
  }
  return $is_amp;
}
 
//AMP用にコンテンツを変換する
function convert_content_for_amp_exsample($the_content){
  if ( !is_amp() ) {
    return $the_content;
  }
 
  //noscriptタグの削除
  $the_content = preg_replace('/<noscript>/i', '', $the_content);
  $the_content = preg_replace('/<\/noscript>/i', '', $the_content);
 
  //Amazon商品リンクのURLにhttpが使われている場合はhttpへ
  $the_content = str_replace('http://rcm-jp.amazon.co.jp/', 'https://rcm-fe.amazon-adsystem.com/', $the_content);
  //Amazonデフォルトの商品リンク埋め込みタグを置換する
  $pattern = '/<iframe([^>]+?)(src="https:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?").*?><\/iframe>/is';
  $append = '<amp-iframe$1$2 width="120" height="240"frameborder="0"></amp-iframe>';
 
  $the_content = preg_replace($pattern, $append, $the_content);
 
  //スクリプトを除去する
  $pattern = '/<script.+?<\/script>/is';
  $append = '';
  $the_content = preg_replace($pattern, $append, $the_content);
 
  return $the_content;
}
add_filter('the_content','convert_content_for_amp_exsample', 999999999);

ちなみに、is_amp関数のような、AMPページを判別する関数は、環境（使用テーマ、プラグイン）に合わせて書く必要があると思います。上記のis_amp関数は、「投稿ページかつURLパラメーターにamp=1が含まれているもの」をAMPページと判別する関数になっています。

上記のコードで行っている処理は、以下のようなことです。