Amazon のアフィリエイトリンクを WordPress にはりつけれる Amazon JS

WebSite

2014.10.022015.12.01

今まで WordPress 上に Amazon の商品へのリンクを張る際は wp-tmkm-amazon を使用していたのだけど、別の調べ物をしていたときに amazonjs を知ってそっちのほうが良さそうだという事で使ってみた。

いつのまにか公式のプラグインページから wp-tmkm-amazon がなくなっているようだし amazonjs は更新が活発なので安心できます。

Amazon JS のインストール
Amazon JS の使い方
1. amazonjs の表示をカスタマイズ
wp-tmkm-amazon からの移行

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 Regex

Search pattern に /\[tmkm-amazon\](.*?)\[\/tmkm-amazon\]/
Replace pattern に [amazonjs asin="\1" locale="JP"]

をそれぞれ指定して Regex にチェックを入れ Replace & Save で一括置換できます。Save する前に Replace だけで動作確認したほうが良いです。履歴残ってなくて正確な文字列を覚えてない...。

開発したアプリなど一覧