AmazonJSをカスタマイズ!コピペでOKのオリジナルテンプレートを作ってみた

こんにちは。
ブログのテンプレートいじりが楽しくて仕方ないコウジ(@koojy03)です。

ブロガーの皆さんはAmazonの商品を紹介するときは、どういうツールを使用していますか?

WordPressユーザーならAmazonJS

このブログではAmzonの商品を紹介する時には、Wordpressのプラグイン「AmazonJS」を使用しています。

WordPressの管理画面から商品を検索して選ぶだけだけで、ショートコードを挿入してくれて、いい感じに商品が紹介できます。

以前はカエレバを使っていたときもあったのですが、コードを記事内にコピペする必要があるので、めちゃくちゃ見にくい・・。
またコピペなので、一度投稿したすべてのHTML触るのも大変ですよね。

AmazonJSはカスタマイズ可能!

標準のまま使っても良いのですが、AmazonJSはカスタマイズするための仕組みもしっかり用意されています。

「シンプルな表示にしたいな」「HTMLを自分でアレンジしたいな」

こんな悩みもAmazonJSならカスタマイズできます。

表示項目をシンプルに!
ということで、カスタマイズしてみました。
完成形はこんな感じですよ。

カスタマイズしたAmazonJSの完成イメージ

JavaScript

amazonJSではカスタマイズ用のJavaScriptを読み込む設定があります。
まずは管理画面から設定しましょう。

  1. 管理画面から「設定」→「AmazonJS」
  2. 「カスタマイズ」の項目にある「カスタムスクリプトを使用する」にチェック
  3. 変更を保存をクリック

JavaScriptのコードを作成

カスタムスクリプトを使用するにチェックすることでテーマディレクトリの直下に置いてある「amazonjs.js」というファイルを読み込むようになります。

amazonjs.jsに下記のコードをコピペして配置してください。
Originalの部分はテンプレート名になるので、わかりやすい名前にしてしまってOKです。

(function($) {
  $.amazonjs.addTemplate(function(partial) {
    return {
      'Original': [
        '<div class="amazon-box">',
          '<div class="amazon-box__image">',
            '<a href="${DetailPageURL}">',
              '{{if MediumImage}}<img src="${MediumImage.src}">{{/if}}',
            '</a>',
          '</div>',
          '<div class="amazon-box__body">',
            '<div class="amazon-box__title">${Title}</div>',
            '<a href="${DetailPageURL}" data-asin="${ASIN}" class="amazon-box__button"><i class="fa fa-amazon"></i>クリックして今すぐチェック</a>',
          '</div>',
        '</div>'
      ].join('')
    };
  });
})(jQuery);

CSS

CSSについてもJavaScript同様、CSSファイルを読み込む設定が用意されています。

  1. 管理画面から「設定」→「AmazonJS」
  2. 「カスタマイズ」の項目にある「カスタムCSSを使用する」にチェック
  3. 変更を保存をクリック

amazonjs.cssに下記のコードをコピペして配置してください。

CSSのコード作成

.amazon-box {
  margin-bottom: 1.6em;
}
.amazon-box:after {
  content: " ";
  display: block;
  clear: both;
}
.amazonn-box__image {
  margin-bottom: 10px;
  text-align: center;
}
.amazon-box__image img {
  display: inline-block;
  border: 1px solid #eee;
  padding: 5px;
  background: #f5f5f5;
}
.amazon-box__title {
  font-weight: bold;
  margin-bottom: 10px;
}
.amazon-box__body {
  overflow: hidden;
}
.amazon-box__button {
  display: block;
}
@media(min-width: 600px) {
  .amazon-box__image {
    float: left;
    margin-right: 20px;
    margin-bottom: 0;
  }

  .amazon-box__title {
    margin-bottom: 20px;
  }

  .amazon-box__button {
    display: inline-block;
  }
}

投稿時テンプレート名を指定

JavaScriptとCSSの設定が終われば、登録したテンプレートを使用することができます。

投稿画面からamazonJSで挿入したショートコードに「tmpl=“Original”」を追加しましょう。
(Originalの部分はJavaScriptで指定したテンプレート名)

表示確認

最後に表示がカスタマイズしたものになっているのか確認です。
ここでもしカスタマイズしたものが表示されていない場合はこんな理由が考えられますよ。

標準のテンプレートが表示されている

  • amazonjs.jsの記述ミス
  • amazonjs.jsの配置場所
  • 投稿時のショートコードにテンプレート名が指定されていない、もしくはテンプレート名の指定が間違っている

スタイルが崩れている

  • amazonjs.cssの記述ミス
  • amazonjs.cssの配置場所

[rt id=1138]

AmazonJS最高!

ブログは書いて終わりではなく、メンテナンスすることも大事ですよね

AmazonJSを使えばショートコードだけでスマートに商品紹介することができ、テンプレートを変更したくなったら今回のようにテンプレートをカスタマイズすれば、自分好みにすることができる。

WordPressユーザーはAmazonJSを使いこみましょう!

スポンサーリンク