AmazonJSで表示される項目をカスタマイズする方法 | ナカムラキリコの人生はパーティーだ！ブログ

ウェブ
AmazonJSで表示される項目をカスタマイズする方法
2016年1月23日
- タグ一覧：AmazonJS WordPress
こんにちは、WordPress初心者のキリコです。

前回の記事、「AmazonJSのぐるぐるエラーについて解決策をまとめてみた」に引き続き、AmazonJSについて書いていきたいと思います。

さて、AmazonJSを無事設置できたはいいものの、

「な、なんかいらん項目多いなあ・・・」

大型本とかページ数とかこの段階で気になる人いるの？ていうかISBNて何？？？と思ったので、今回はAmazonJSで表示される項目を自分好みにカスタマイズする方法を書きたいと思います！

まずは項目が記載されているファイルですが、WordPress管理画面左ナビにあるプラグインから、AmazonJSの【編集】を押します。

画面右側のプラグインファイルの中から【amazonjs/js/amazon.js】を選択し、amazon.jsの編集画面を表示させます。

こちらのamazon.jsに書いてある内容を簡単に説明すると、こういう場合はこういう表示をしなさいという内容がひたすら書かれているのですが、今回は

var defaultTemplates = {　～　};

この部分を触ってカスタマイズしていきます。

まずはページ内検索等で上記の記述を見つけてください。

すると、こんな感じで

Small:[　～　],
Music:[　～　],
DVD:[　～　],
Book:[　～　],
eBooks:[　～　]

さらに項目が分かれていると思います。

もうお分かりかと思いますが、Music=音楽関連の商品、Book=書籍関連の商品など、それぞれ項目ごとの表示内容が記述されています。

ちなみにSmallというのは、リンク挿入時に「少ない情報」を選んだときの表示内容が記述されています。

今回は「デフォルト」の「Book」を例にカスタマイズしていきましょう。

Bookの記述を見てみると、

Book:[
　　'<div class=”amazonjs_item amazonjs_book”>’,
　　imageTemplate,
　　'{{if _ShowDefaultImage}}’,mediumImageTemplate,'{{/if}}’,
　　'<div class=”amazonjs_info” style=”{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}”>’,
　　'<h4>’,linkTemplate,'</h4>’,
　　'<ul>’,
　　'{{if Author}}<li><b>’ + r.BookAuthor + ‘</b>${Author}</li>{{/if}}’,
　　priceLiTemplate,
　　'<li><b>’ + r.BookPublicationDate + ‘</b>${PublicationDate}</li>’,
　　'{{if SalesRank}}<li><b>’ + r.SalesRank + ‘</b>’ + r.SalesRankValue + ‘</li>{{/if}}’,
　　'<li><b>${Binding}</b>’ + r.NumberOfPagesValue + ‘</li>’,
　　'<li><b>ISBN-10</b>${ISBN}</li>’,
　　'<li><b>ISBN-13</b>${EAN}</li>’,
　　'<li><b>’ + r.BookPublisher + ‘</b>${Publisher}</li>’,
　　'</ul>’,
　　'</div>’,
　　reviewLinkTemplate,
　　'<div class=”amazonjs_footer”></div>’,
　　'</div>’
],

こんな感じになっていると思います。

この中の、<li>の部分が表示する項目になっています。

上から順に翻訳すると、

BookAuthor　=　著者
BookPublicationDate　=　出版日
SalesRank　=　商品ランキング
Binding　=　製本方法（大型本、とか）
NumberOfPagesValue　=　ページ数
ISBN　=　図書コード
BookPublisher　=　出版社

となっています。

私は今回、商品ランキング、製本方法、ページ数、図書コードを削除したいので、

Book:[
　　'<div class=”amazonjs_item amazonjs_book”>’,
　　imageTemplate,
　　'{{if _ShowDefaultImage}}’,mediumImageTemplate,'{{/if}}’,
　　'<div class=”amazonjs_info” style=”{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}”>’,
　　'<h4>’,linkTemplate,'</h4>’,
　　'<ul>’,
　　'{{if Author}}<li><b>’ + r.BookAuthor + ‘</b>${Author}</li>{{/if}}’,
　　priceLiTemplate,
　　'<li><b>’ + r.BookPublicationDate + ‘</b>${PublicationDate}</li>’,
　　‘{{if SalesRank}}<li><b>’ + r.SalesRank + ‘</b>’ + r.SalesRankValue + ‘</li>{{/if}}’,
　　‘<li><b>${Binding}</b>’ + r.NumberOfPagesValue + ‘</li>’,
　　‘<li><b>ISBN-10</b>${ISBN}</li>’,
　　‘<li><b>ISBN-13</b>${EAN}</li>’,
　　'<li><b>’ + r.BookPublisher + ‘</b>${Publisher}</li>’,
　　'</ul>’,
　　'</div>’,
　　reviewLinkTemplate,
　　'<div class=”amazonjs_footer”></div>’,
　　'</div>’
],

こちらの4行を削除します。

削除したくない方は/*　～　*/でコメントアウトにしちゃいましょう。

編集が終わったらファイルを更新します。

確認してみると・・・

はいっ！これでスッキリしましたね。

ちなみに、価格の部分を編集したい場合は、そこだけ別テンプレートとして記述されているので、

var priceLiTemplate = ‘{　～　}’;

これをページ内検索して、同じ要領でいじってみてください。

以上、AmazonJSの表示項目を自由にカスタマイズする方法でした。