AMPでAmazonJSプラグインを使えるようにする方法 | WordPress

AMP で AmazonJS を使う

Amazonアソシエイト（アフィリエイト）の商品紹介を、WordPressで生成したブログ上に、キレイに貼り付けてくれる便利なプラグインに AmazonJS があり、有名だ。

 

一方、スマートフォン等の携帯端末向けに、高速なウェブブラウジングを実現する手段として、Google社も推奨するAMP（Accelerated Mobile Pages Project）という枠組みがある。

AMP に対応させると、Googleの検索結果に引っかかりやすくなり、また、高速なブラウジングが可能となるため、閲覧者はストレス無くページを閲覧することが可能となる。
（その結果、PV数が増えるということで、対応するブログも多くなってきた。）

 

ただ、AmazonJS は Javascript で動作するのだが、AMP は限定した Javascript のみに対応しており、AmazonJS は動作しない。

ただ、AmazonJS の Javascript は、Amazonから API を介して必要な商品情報を取得する仕組みになっているが、この処理を、php に書いてあげることで、正常に動作させることが可能となる。

 

こちら↓の方が、「AMP」というプラグインでAMP化を実現した際に、AmazonJS を使用する例を記載してくださっている。

AMPでAmazonアフィリエイト(アソシエイト)に本格的に対応した話（WordPress AmazonJSを使う）

 

今回は、これを真似て、Simplicity2 でAMP化を実現した際に、AmazonJS を使用することとする。

 

 

Simplicity2 でAMP化し、AmazonJS を利用

SimplicityというWordPressテーマは、Simplicity 2.3.1 から AMP に対応している。

Simplicity 2.3.1 以降が、WordPress にインストールされている前提で進める。

 

 

 

wp-content/themes/simplicity2/lib/amp.php というファイルを編集する。

まず、万が一の場合を想定し、バックアップをとっておく。

$ cd /DIRECTORY_OF_WORDPRESS/wp-content/themes/simplicity2/lib/
$ cp amp.php amp.php.bak

 

標準では、AmazonJS 関連のエントリーがあった場合は、URLをhttpsに変換する等の処理が入っているが、一部重複するため、Amazonアソシエイト関連の処理は、コメントアウトする。

$ vi amp.php
[コメントアウトする部分]
 //Amazon商品リンクのhttp URLをhttpsへ
  $the_content = str_replace('http://rcm-jp.amazon.co.jp/', 'https://rcm-fe.amazon-adsystem.com/', $the_content);
  $the_content = str_replace('"//rcm-fe.amazon-adsystem.com/', '"https://rcm-fe.amazon-adsystem.com/', $the_content);
  $the_content = str_replace("'//rcm-fe.amazon-adsystem.com/", "'https://rcm-fe.amazon-adsystem.com/", $the_content);
  //Amazon商品画像のURLをhttpsへ
  $the_content = str_replace('http://ecx.images-amazon.com', 'https://images-fe.ssl-images-amazon.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_placeholder.'</amp-iframe>';
  */
/*  $pattern = '/<iframe([^>]+?)(src="https?:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?t=([^&"]+)[^"]+?asins=([^&"]+)[^"]*?").*?><\/iframe>/is';
  $amazon_url = 'https://www.amazon.co.jp/exec/obidos/ASIN/$4/$3/ref=nosim/';
  $append = PHP_EOL.'<amp-iframe$1$2 width="120" height="240" frameborder="0">'.$amp_placeholder.'</amp-iframe><br><a href="'.$amazon_url.'" class="aa-link"></a>'.PHP_EOL;
*/

 

Amazonから商品リンクを引っ張ってくるためのライブラリをダウンロードし、

wp-content/themes/simplicity2/lib/amp.php

と同じディレクトリに格納する。

 

ダウンロード先　→　github: AmazonWordpressApi

 

次に、いよいよ、AmzonJS の Javascript を書き換えるための phpコードを書く。

$ vi amp.php

先程、Amazonアソシエイト関連の処理をコメントアウトした直後の、83行目辺りに、以下のように記載する。

// AMAZON JS対応
$matchNum = preg_match_all('/data-asin="([^"]{1,})"/', $the_content, $matches);
include "aws_apai.php";
foreach ($matches[1] as $asin) {
$html = getAsinInfo($asin);
$the_content = preg_replace('/<div data-role="amazonjs".*?<\/div>/',$html, $the_content,1);
}

 

amp.phpの末尾に以下を追記する。

//AmazonJS用function
function getAmazonInfoHtml($product) {
// 画像サイズを横幅最大65pxとする
$imgWidthMag= $product["imageWidth"] / 65;
$imgWidth = $product["imageWidth"] / $imgWidthMag;
$imgHeight = $product["imageHeight"] / $imgWidthMag;
$html;
$html .= '<div class="amazonjs_item">';
$html .= '<div class="amazonjs_image">';
$html .= '<a href='. $product["url"] . 'class="amazonjs_link" data-role="amazonjs_product" data-asin="'. $product["asin"] .'" title="'. $product["name"] .'" target="_blank">';
$html .= '<amp-img src="'. $product["image"] .'" width="'. $imgWidth .'" height="'. $imgHeight .'" alt="'. $product["name"] .'"></a>';
$html .= '</div>';
$html .= '<div class="amazonjs_info">';
$html .= '<h4>';
$html .= '<a href="'. $product["url"] . '" class="amazonjs_link" data-role="amazonjs_product" data-asin="B00HV671GW" title="'. $product["name"] .'" target="_blank">';
$html .= $product["name"] .'</a></h4>';
$html .= '<ul>';
$html .= '<li>'. $product["publisher"] . '</li>';
if (isset($product["fprice"]) and !empty($product["fprice"])) {
$html .= '<li class="amazonjs_price" title="価格および発送可能時期はデータを取得した時点のものであり、変更される場合が
あります。商品の販売においては、購入の時点で [Amazon.co.jp または Javari.jp] に表示されている価格および発送可能時期の>情報が適用されます。">';
if (isset($product["ListFprice"]) and !empty($product["ListFprice"])) {
$html .= '<b>参考価格</b><span class="amazonjs_listprice">'. $product["ListFprice"]. '</span><br>';
}
$html .= '<b>価格</b>'. $product["fprice"] . '<span></span></li>';
}
if (isset($product["releaseDate"]) ) {
$html .= '<li><b>発売日</b>'. str_replace("-", "/",$product["releaseDate"]) . '</li><li>';
} else if(isset($product["publicationDate"])) {
$html .= '<li><b>発売日</b>'. str_replace("-", "/",$product["publicationDate"]) . '</li><li>';
}
$html .= '<b>商品ランキング</b>'.number_format($product["salesRank"]) . '位</li>';
$html .= '</ul>';
$html .= '</div>';
return $html;
}

 

 

あとは、Simplicity2 の設定から、AMPを有効化すればOKだ。

 

WordPressの通常のブログ投稿画面からAmazonJS で Amazonアソシエイトのリンクを貼れば、AMPでもキレイに表示されるはずだ。

 

コメント