先日、WordPressのCocoonテーマでAmazon.co.jp Product Advertising API（以下、PA-API）を利用した商品リンク作成ショートコード機能を追加しました。
今回は、そのAmazon商品リンク作成機能を単純化したものを、どんなテーマにも適用出来るようにサンプル化したものを紹介します。
例えば、こんな感じのショートコードを書くだけで（※[カッコ]は省略してあります）
|
1 |
amazon asin="B0162EAZBQ" kw="iRobot ルンバ" |
Amazon商品リンクを手軽に作成できるようになります。
iRobot (アイロボット)
スポンサーリンク
目次
Amazon商品リンクショートコードの実装方法
実装するのに必要な主な手順はこちら。
- functions.phpにコードを追記
- style.cssにスタイルを追記
- 各種IDを取得し入力
基本的にコードを2回ほどコピペしてあとは、APIの認証IDや、Amazon、楽天、Yahoo!ショッピングのIDを書き加えるだけです。
functions.phpにコードを追記
まずはテーマ（子テーマ）のfunctions.phpに追記する形で以下のように書き加えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 |
//外部ファイルの取得 if ( !function_exists( 'get_http_content' ) ): function get_http_content($url){ try { $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true, ]); $body = curl_exec($ch); $errno = curl_errno($ch); $error = curl_error($ch); curl_close($ch); if (CURLE_OK !== $errno) { throw new RuntimeException($error, $errno); } return $body; } catch (Exception $e) { return false; //echo $e->getMessage(); } } endif; //シンプルなアソシエイトURLの作成（PA-API制限時用） if ( !function_exists( 'get_amazon_associate_url' ) ): function get_amazon_associate_url($asin, $associate_tracking_id){ $base_url = 'https://www.amazon.co.jp/exec/obidos/ASIN'; $associate_url = $base_url.'/'.$asin.'/'; if (!empty($associate_tracking_id)) { $associate_url .= $associate_tracking_id.'/'; } $associate_url = esc_url($associate_url); return $associate_url; } endif; //Amazon商品紹介リンクの外枠で囲む if ( !function_exists( 'wrap_amazon_item_box' ) ): function wrap_amazon_item_box($message){ return '<div class="amazon-item-box no-icon amazon-item-error cf"><div>'.$message.'</div></div>'; } endif; //Amazon商品リンク作成 //API処理参考：https://qiita.com/yokkong/items/efd3b4dcdeeb1555de8f add_shortcode('amazon', 'generate_amazon_product_link'); if ( !function_exists( 'generate_amazon_product_link' ) ): function generate_amazon_product_link($atts){ extract( shortcode_atts( array( 'asin' => null, 'id' => null, //'isbn ' => null, 'kw' => null, 'title' => null, 'amazon' => 1, 'rakuten' => 1, 'yahoo' => 1, ), $atts ) ); $asin = esc_html(trim($asin)); //ASINが取得できない場合はID if (empty($asin)) { $asin = $id; } //アクセスキー $access_key_id = 'ACCESS_KEY_ID'; //シークレットキー $secret_access_key = 'SECRET_ACCESS_KEY'; //アソシエイトタグ $associate_tracking_id = 'ASSOCIATE_TRACKING_ID'; //楽天アフィリエイトID $rakuten_affiliate_id = 'RAKUTEN_AFFILIATE_ID'; //Yahoo!バリューコマースSID $sid = 'SID'; //Yahoo!バリューコマースPID $pid = 'PID'; //キャッシュ更新間隔 $days = 60; //キーワード $kw = trim($kw); //アクセスキーもしくはシークレットキーがない場合 if (empty($access_key_id) || empty($secret_access_key)) { $error_message = 'Amazon APIのアクセスキーもしくはシークレットキーが設定されていません。'; return wrap_amazon_item_box($error_message); } //ASINがない場合 if (empty($asin)) { $error_message = 'Amazon商品リンクショートコード内にASINが入力されていません。'; return wrap_amazon_item_box($error_message); } //アソシエイトurlの取得（デフォルト） $associate_url = get_amazon_associate_url($asin, $associate_tracking_id); $new_cache = false; //キャッシュの存在 $transient_id = 'nlg_amazon_api_asin_'.$asin; $xml_cache = get_transient( $transient_id ); if ($xml_cache) { $res = $xml_cache; } else { //APIエンドポイントURL $endpoint = 'https://ecs.amazonaws.jp/onca/xml'; // パラメータ $params = array( //共通↓ 'Service' => 'AWSECommerceService', 'AWSAccessKeyId' => $access_key_id, 'AssociateTag' => $associate_tracking_id, //リクエストにより変更↓ 'Operation' => 'ItemLookup', 'ItemId' => $asin, 'ResponseGroup' => 'ItemAttributes,Images', //署名用タイムスタンプ 'Timestamp' => gmdate('Y-m-d\TH:i:s\Z'), ); //パラメータと値のペアをバイト順？で並べかえ。 ksort($params); // エンドポイントを指定します。 $endpoint = 'webservices.amazon.co.jp'; $uri = '/onca/xml'; $pairs = array(); // パラメータを key=value の形式に編集します。 // 同時にURLエンコードを行います。 foreach ($params as $key => $value) { array_push($pairs, rawurlencode($key)."=".rawurlencode($value)); } // パラメータを&で連結します。 $canonical_query_string = join("&", $pairs); // 署名に必要な文字列を先頭に追加します。 $string_to_sign = "GET\n".$endpoint."\n".$uri."\n".$canonical_query_string; // RFC2104準拠のHMAC-SHA256ハッシュアルゴリズムの計算を行います。 // これがSignatureの値になります。 $signature = base64_encode(hash_hmac("sha256", $string_to_sign, $secret_access_key, true)); // Siginatureの値のURLエンコードを行い、リクエストの最後に追加します。 $request_url = 'https://'.$endpoint.$uri.'?'.$canonical_query_string.'&Signature='.rawurlencode($signature); $res = get_http_content($request_url); $new_cache = true; } //XMLが取得できた場合 if ($res) { $responsed_xml = $res; // xml取得 $xml = simplexml_load_string($res); //_v($xml); if (property_exists($xml->Error, 'Code')) { $error_message = '<a href="'.$associate_url.'" target="_blank">'.'Amazonで詳細を見る'.'</a>'; if (is_user_logged_in()) { $admin_message = '<b>'.'管理者用エラーメッセージ'.'</b><br>'; $admin_message .= 'アイテムを取得できませんでした。'.'<br>'; $admin_message .= '<pre class="nohighlight"><b>'.$xml->Error->Code.'</b><br>'.preg_replace('/AWS Access Key ID: .+?\. /', '', $xml->Error->Message).'</pre>'; $admin_message .= '<span style="colof:red;">このエラーメッセージは"サイト管理者のみ"に表示されています。少し時間おいてリロードしてください。</span>'; $error_message .= '<br><br>'.$admin_message; } return wrap_amazon_item_box($error_message); } //var_dump($item); if (!property_exists($xml->Items, 'Item')) { $error_message = '商品を取得できませんでした。存在しないASINを指定している可能性があります。'; return wrap_amazon_item_box($error_message); } if (property_exists($xml->Items, 'Item')) { $item = $xml->Items->Item; //var_dump($xml); //var_dump($xml->Items->Errors); // _v($item); $ASIN = esc_html($item->ASIN); $DetailPageURL = esc_url($item->DetailPageURL); if ($DetailPageURL) { $associate_url = $DetailPageURL; } $SmallImage = $item->SmallImage; $MediumImage = $item->MediumImage; $MediumImageUrl = esc_url($MediumImage->URL); $MediumImageWidth = esc_html($MediumImage->Width); $MediumImageHeight = esc_html($MediumImage->Height); $LargeImage = $item->LargeImage; $ItemAttributes = $item->ItemAttributes; if ($title) { $Title = $title; } else { $Title = $ItemAttributes->Title; } $TitleAttr = esc_attr($Title); $TitleHtml = esc_html($Title); $ProductGroup = esc_html($ItemAttributes->ProductGroup); $ProductGroupClass = strtolower($ProductGroup); $ProductGroupClass = str_replace(' ', '-', $ProductGroupClass); $Publisher = esc_html($ItemAttributes->Publisher); $Manufacturer = esc_html($ItemAttributes->Manufacturer); $Binding = esc_html($ItemAttributes->Binding); if ($Publisher) { $maker = $Publisher; } elseif ($Manufacturer) { $maker = $Manufacturer; } else { $maker = $Binding; } $ListPrice = $item->ListPrice; $FormattedPrice = esc_html($item->FormattedPrice); $buttons_tag = null; if ($kw) { //Amazonボタンの取得 $amazon_btn_tag = null; if ($amazon) { $amazon_url = 'https://www.amazon.co.jp/gp/search?keywords='.urlencode($kw).'&tag='.$associate_tracking_id; $amazon_btn_tag = '<div class="shoplinkamazon">'. '<a href="'.$amazon_url.'" target="_blank" rel="nofollow">'.'Amazon'.'</a>'. '</div>'; } //楽天ボタンの取得 $rakuten_btn_tag = null; if ($rakuten_affiliate_id && $rakuten) { $rakuten_url = 'https://hb.afl.rakuten.co.jp/hgc/'.$rakuten_affiliate_id.'/?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F'.urlencode($kw).'%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F'; $rakuten_btn_tag = '<div class="shoplinkrakuten">'. '<a href="'.$rakuten_url.'" target="_blank" rel="nofollow">'.'楽天市場'.'</a>'. '</div>'; } //Yahoo!ボタンの取得 $yahoo_tag = null; if ($sid && $pid && $yahoo) { $yahoo_url = 'https://ck.jp.ap.valuecommerce.com/servlet/referral?sid='.$sid.'&pid='.$pid.'&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D'.$kw; $yahoo_tag = '<div class="shoplinkyahoo">'. '<a href="'.$yahoo_url.'" target="_blank" rel="nofollow">'.'Yahoo!'.'</a>'. '</div>'; } //ボタンコンテナ $buttons_tag = '<div class="amazon-item-buttons">'. $amazon_btn_tag. $rakuten_btn_tag. $yahoo_tag. '</div>'; } $tag = '<div class="amazon-item-box no-icon '.$ProductGroupClass.' '.$asin.' cf">'. '<figure class="amazon-item-thumb">'. '<a href="'.$associate_url.'" class="amazon-item-thumb-link" target="_blank" title="'.$TitleAttr.'" rel="nofollow">'. '<img src="'.$MediumImageUrl.'" alt="'.$TitleAttr.'" width="'.$MediumImageWidth.'" height="'.$MediumImageHeight.'" class="amazon-item-thumb-image">'. '</a>'. '</figure>'. '<div class="amazon-item-content">'. '<div class="amazon-item-title">'. '<a href="'.$associate_url.'" class="amazon-item-title-link" target="_blank" title="'.$TitleAttr.'" rel="nofollow">'. $TitleHtml. '</a>'. '</div>'. '<div class="amazon-item-snippet">'. '<div class="amazon-item-maker">'. $maker. '</div>'. $buttons_tag. '</div>'. '</div>'. '</div>'; } else { $error_message = '商品を取得できませんでした。存在しないASINを指定している可能性があります。'; $tag = wrap_amazon_item_box($error_message); } if ($new_cache) { //キャッシュ更新間隔 $expiration = 60 * 60 * 24 * $days; //Amazon APIキャッシュの保存 set_transient($transient_id, $responsed_xml, $expiration); } return $tag; } } endif; |
コードが長すぎるので、詳しくは説明しません。
一応、PA-APIの制限対策用に、一度商品リンクを作成したら、60日間キャッシュ保存されるようになっています。そして、2回目以降はキャッシュが呼び出され、PA-APIの制限をなるべく回避するようにしてあります。
こちらのAPIの利用方法は以下のコードを参考にさせていただきました。
参考 Amazon Product Advertising APIの署名認証について
style.cssにスタイルを追記
次に、テーマ（子テーマ）のstyle.cssに以下のCSSを貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
.amazon-item-box { padding: 22px 25px; width: 94%; margin: 0 auto 1.6em; border: 3px solid #dfdfdf; box-sizing: border-box; text-align: center; position: relative; } .amazon-item-box { position: relative; } /* Font Awesome適用下でコメントアウトすると ボックス右下にAmazonアイコンが表示されます*/ /* .amazon-item-box::after { font-family: FontAwesome; content: ""; padding-right: 3px; position: absolute; bottom: 0; right: 6px; font-size: 24px; color: #ccc; } */ .amazon-item-error.cf { display: block; line-height: 1.2; } .amazon-item-thumb { width: 160px; min-width: 160px; margin: 0 auto 5px; float: none !important; } .amazon-item-thumb * { display: block; } .amazon-item-thumb > a > img { margin: 0 auto; } .amazon-item-content { line-height: 125%; width: 100%; } .amazon-item-snippet { font-size: 0.8em; margin-top: 6px; } .amazon-item-buttons a { width: 90%; display: block; margin: 0px auto 8px; padding: 10px 1px; text-decoration: none; font-size: 14px; font-weight: bold; text-align: center; color: #fff; } .amazon-item-buttons a:hover { opacity: 0.6; } .amazon-item-buttons { margin-top: 1em; } @media screen and (min-width: 768px) { .amazon-item-box { text-align: left; display: flex; font-size: inherit !important; } .amazon-item-thumb { vertical-align: top; box-sizing: border-box; min-width: auto !important; } .amazon-item-content { line-height: 125%; vertical-align: top; box-sizing: border-box; padding-left: 25px; width: 100%; } .amazon-item-buttons { display: flex; flex-wrap: wrap; } .amazon-item-buttons a { width: auto; text-align: center; margin: 0; border-radius: 3px; } .amazon-item-buttons a img { position: absolute; bottom: 0; right: 0; } .amazon-item-buttons > * { width: 31.5%; margin: 2px; box-sizing: border-box; } } .shoplinkamazon a { background: #f79901; } .shoplinkrakuten a { background: #bf0000; } .shoplinkyahoo a { background: #e60033; position: relative; } |
Font Awesome適用下で、コメント部分をコメントアウトすると、商品紹介ボックス右下にAmazonアイコンが表示されます。
Font Awesomeを使用していないテーマの場合、もしくはアイコンを表示させたくない場合は、そのままにしておいてください。
各種IDを取得し入力
最後に、functions.phpに追加したコード部分に、APIのIDや、AmazonトラッキングID、楽天アフィリエイトID、バリューコマース（Yahoo!ショッピング）のsid・pidを入力してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//アクセスキー $access_key_id = 'ACCESS_KEY_ID'; //シークレットキー $secret_access_key = 'SECRET_ACCESS_KEY'; //アソシエイトタグ $associate_tracking_id = 'ASSOCIATE_TRACKING_ID'; //楽天アフィリエイトID $rakuten_affiliate_id = 'RAKUTEN_AFFILIATE_ID'; //Yahoo!バリューコマースSID $sid = 'SID'; //Yahoo!バリューコマースPID $pid = 'PID'; //キャッシュ更新間隔 $days = 60; |
キャッシュの更新間隔を変更したい場合は$days変数に入れる日数を変更してください。
PA-APIの「アクセスキー」と「シークレットキー」の入手方法は、以下を参照してください。
Amazon商品紹介リンク用の認証機能を取得＆登録方法です。Amazonアソシエイトからアクセスキーとシークレットキーを作成登録する方法です。
Amazonアソシエイトの「トラッキングID」を取得するには、以下を参照してください。
AmazonアソシエイトからトラッキングIDを取得して、Cocoonの商品紹介リンクで利用するために設定する方法です。
「楽天アフィリエイトID」を取得するには、以下を参照してください。
バリューコマースからYahoo!ショッピングの「sid」と「pid」を取得するには、以下を参照してください。
バリューコマースでYahoo!ショッピングと提携しsidとpidを取得し設定登録する方法です。
Amazonアソシエイトに登録されていないサイトで利用すると、規約違反になる可能性があるので、事前に必ず登録申請を行ってください。
先日新しくこのブログを作ったので、Amazonアソシエイトにサイト登録をしました。
ただその時、やり方につまずいたので書いてお...
2018-07-21 12:48
使い方と動作確認
何点か商品リンクを作成してみます。
基本的に、asinオプションにAmazonのASINを指定すればOKです（書籍以外）。
ASINとはAmazonの商品IDのことです。
ダイソン掃除機
|
1 |
amazon asin="B07BHKJBLH" kw="ダイソン スティッククリーナー" |
以下全て、ショートコードの[カッコ]を取り除いた状態でサンプルコードを紹介します。でないと実行されてしまうので。
紙の書籍
紙の書籍の場合はISBNで（ISBN-10）。
朝井 リョウ
|
1 |
amazon asin="4087468178" kw="桐島、部活やめるってよ" |
Kindle書籍
Kindle書籍の場合は、ASINで。
朝井リョウ
|
1 |
amazon asin="B00A773H60" kw="桐島、部活やめるってよ" |
ボタンが不要な場合
個々のボタンの表示を切り替えるならこんな感じ。
|
1 |
amazon asin="B01FIG3SMC" kw="Kindle Paperwhite マンガモデル" rakuten=0 yahoo=0 |
1が表示、0が非表示です。
全ての検索ボタンを非表示にするのであれば、kwオプションを無くすか、未入力にしてください。
詳しい使い方
ASIN、ISBN等の取得方法や、詳しい使い方は以下を参照してください。
こちらのブックマークレットを使用するとクリック一発でショートコードを作成することもできます。
CocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと思います。
また、実用で使うのであれば、正しくトラッキングIDが設定されているか以下の方法で確認しておくことをおすすめします。
注意点
当記事のコードは、なるべく簡潔に書いたサンプルコードです。
ですので、どんな環境でも確実に動作するということは、保証はできません。
また、他にも考えられる注意点を列挙しておきます。
- PA-APIには、リクエスト制限があります。制限が厳しい状態になっている場合はなかなか商品リンクが表示されない可能性があります。そういう場合は時間をおいてブラウザでリロードすればいずれ読み込まれます。制限について詳しくはリンク先をご確認ください。
- 当カスタマイズコードを含む、PA-APIを利用したものを有償販売する場合はPA-APIライセンス違反になると思うのでご注意ください。
- 当記事で紹介されているコードはサンプルコードです。利用することにより不利益が起こったとしても当サイトは責任を負いません
- Cocoonのようなキャッシュの削除機能はありません。基本的に時間を置けばキャッシュは削除されます。キャッシュの削除方法機能実装の質問には、お答えできかねるのでご了承ください。
- キャッシュ期間が長いため値段は表示させてません
あくまで利用は自己責任でお願いします。
まとめ
今回のカスタマイズを用いることで、商品リンクを手軽に作成できるようになるかと思います。
最初、ASINの取得などに手間どるかもしれませんが、慣れると30秒ほどで商品リンクを作成できるかと思います。
また、商品検索は実際のAmazonサイトを利用します。高精度の検索やレビュー、あわせ買い商品を見て参考にできるので、商品探しもはかどるかと思います。
早速試してみます！
有益な情報、有難うございます！！
変動する「価格」まで、表示するのは難しのですかね？