今まで WordPress 上に Amazon の商品へのリンクを張る際は wp-tmkm-amazon を使用していたのだけど、別の調べ物をしていたときに amazonjs を知ってそっちのほうが良さそうだという事で使ってみた。
https://wordpress.org/plugins/amazonjs/いつのまにか公式のプラグインページから wp-tmkm-amazon がなくなっているようだし amazonjs は更新が活発なので安心できます。
Amazon JS のインストール
管理画面のプラグイン新規追加より Amazon JS で検索すると出てくるのでインストール -> 今すぐ有効化としましょう。
もしくは上記 URL よりダウンロードし plugins ディレクトリへアップロード、管理画面より有効化しましょう。
Amazon JS の使い方
他の Amazon のアフィリエイトリンクを張るプラグインと同様に Access Key ID, Secret Access Key が必要になります。
自分は wp-tmkm-amazon を使用していた時のをそのまま使っています。もし持ってなければ Amazon から取得しましょう。
あとはアソシエイトタグ(日本だと最後が-22になるアレ)を入力すれば初期設定は終わりです。
商品リンクを表示するには以下のような感じに asin コードと国別コード(日本なら JP) を入力します。
[amazonjs asin="B0036TTPEY" locale="JP"]
編集画面のツールバーにある amazon のアイコンのボタンを押すと商品を検索し、ここからショートコードをはりつける事ができます。
表示には jQuery template を使用しており、ユーザー独自のテンプレートを使用する事もできます。標準の見た目は以下のような感じ。
amazonjs の表示をカスタマイズ
amazonjs の表示をカスタマイズするには jQuery Template もしくは CSS を変更する必要がある。管理画面内でカスタム CSS 及び カスタム JavaScript のチェックを入れる事でユーザ独自のデザインを使う事ができる。
例えば JavaScript を利用してカスタマイズするのであれば現在利用しているテーマディレクトリ内に amazonjs.js というファイルを作成し、以下のような感じに JavaScript を記述する。
(function ($) {
$.amazonjs.addTemplate(function(partial){
return {
Small: '<div class="amazonjs_item">' +
'{{if _ShowDefaultImage}}' + partial.mediumImage +'{{/if}}' +
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">' +
'<h4>' + partial.link + '</h4><ul>' +
'{{if Manufacturer}}<li>${Manufacturer}</li>{{/if}}' +
partial.price +
'{{if PublicationDate}}<li><b>' + $.amazonjs.resource.PublicationDate + '</b>${PublicationDate}</li>{{/if}}' +
'</ul></div><div class="amazonjs_footer"></div>' +
'</div>'
};
});
})(jQuery);
こうするとデフォルトのテーマである Small を上書きするので全体に影響を与える。商品毎にテーマを変更する場合は、他の名前に変更し、amasonjs ショートコードを記述する際にテンプレート名を指定します。
wp-tmkm-amazon からの移行
同じようなプラグインが2つ動くのは無駄なので wp-tmkm-amazon で表示していたリンクも全て Amazon JS にします。wp-tmkm-amazon は asin の指定だけなので正規表現でさくっと一括置換できますね。
全記事を対象とした正規表現による一括置換には Search Regex を使用しました。
正規表現が利用できる WordPress の検索置換プラグイン, Search RegexSearch pattern に /\[tmkm-amazon\](.*?)\[\/tmkm-amazon\]/
Replace pattern に [amazonjs asin="\1" locale="JP"]
をそれぞれ指定して Regex にチェックを入れ Replace & Save で一括置換できます。Save する前に Replace だけで動作確認したほうが良いです。履歴残ってなくて正確な文字列を覚えてない...。