WordPressメモ Amazonアソシエイトの商品リンクを簡単に記事へ追加できるようにするプラグイン “Amazon JS”を使ってみる
AmazonのアソシエイトプラグインはAmazon Linkってのを使ってたんだけど、こっちの方が楽だってことに前々から気付いてた…。
便利なとこはこんなとこ。
- Amazonの商品を検索する機能がある
- ボタンをクリックすれば商品リンクを記事の本文に追加できる
- 商品リンクがまあまあ整ったレイアウトで表示される
前置きとしてプラグインを使うには、AmazonのProduct Advertising APIのアクセスキーIDとシークレットアクセスキーが必要なので準備しとく。
で、ざっくりな手順はこんな感じ。
- Amazon JSのプラグインをインストールする
- Amazon JSが使うディレクトリをFTP経由で作成する
※こんときFTPクライアントアプリがあるといいかも - Amazon JSの設定を変更する
※Amazon APIのアクセスキーと秘密キーを入力する
まずは、プラグインのインストール。
- WordPressの管理画面で左側にあるメニューのうち、"アドイン"の"新規追加"ってとこをクリックする。
- “プラグインを追加"ってページが表示されるので、ページ右上にある入力欄に"Amazon JS"って入力してエンターキーを押す。
- 検索結果が表示されるので、"Amazon JS"って項目のとこにある"いますぐインストール"ってとこをクリックする。
プラグインをインストールしていいか？って念押しして聞いてくるので、"OK"ってとこをクリックする。
インストールし始めるけど…すぐ終わっちゃうので、続けて"プラグインを有効化"ってとこをクリックする。
- “プラグイン"ってページの上にプラグインが表示されたらインストールおしまい。
次はAmazon JSを動かすためのディレクトリを作成する。
- 一応ディレクトリを作らなきゃいけないことを確認しておく。
管理ページの右側にあるメニューで"設定"の"Amazon JS"ってとこをクリックする。
- “AmazonJS"ってページが開くけど、ページの上の方にエラーが表示されとる。
警告! キャッシュディレクトリが存在しません 書き込み可能なディレクトリを/xxx/wp-content/cache/amazonjs/に作成してください
- FTPクライアント(今回はFileZillaってアプリ)を使ってサーバーにあるWordPressのディレクトリのうち/wp-content/cache/amazonjsのパスでディレクトリを作成しとく。
ディレクトリのパーミッションはどんなアクセスでもOKな777ってしといた。
※たぶん、パーミッションは後で変更すると思う
- Amazon JSの設定ページを再読み込みするとエラーが消えとる。
これで、Amazon JSのエラーの対応はおしまい。
んで、最後にAmazon JSの設定をする。
- さっきの続きでAmazon JSの設定ページでアクセスキーIDとシークレットアクセスキーってとこに入力する。
続けて、"Amazon.co.jp"ってとこにトラッキングIDを入力しとく。
- 入力し終わったらページの下の方にある"変更を保存"ってとこをクリックする。
- AmazonJSってページがまた表示されて、終わったって言ってきたら設定はおしまい。
設定を保存しました。
試しに商品リンクを作成してみる。
新規投稿をクリックしてみると…記事を書くとこの上にあるボタンが並んでるところにAmazonのアイコンなボタンが追加されとる。
このボタンをクリックすると…。
Amazonリンクを追加って画面が表示される。
今回は試しに"wordpress"って入力してから検索してみると…検索結果がちゃんと出てきとる。
ちなみに、検索結果は言語とカテゴリから絞り込みができる。
試しにカテゴリで絞り込みするには、画面の上の方にある"全上品(ALL)"ってとこを変更する。
本(Books)に変えてみると、本だけに絞り込みできちゃう。
記事の本文に商品リンクを追加するには、追加したい商品の右にある"選択"ってのをクリックする。
そすっと、"テンプレートを選択"って画面が表示されて、どんな見た目で記事に追加するか聞いてくる。
とりあえず、"動的なテンプレート"の"デフォルト"ってのが標準的なやつっぽい…ので、それを選んで画面の下の方にある"挿入"ってとこをクリックする。
で、記事の中に[amazonjs …]ってのが追加される。
これがAmazonの商品リンクになるそうな。
んま、メモってことで。
[amazonjs asin="4883379248″ locale="JP" title="WordPressレッスンブック HTML5&CSS準拠"]