NIFの楽園

主にAndroidスマートフォンやアプリに関する紹介

【WordPress】【Plugin】Amazon商品リンクをカスタマイズできる「Amazon Associates Link Builder」(Ver.1.4.6)の使い方 その2

2017/07/19

 Amazon商品リンクのWordPress用プラグイン「Amazon Associates Link Builder」について、デフォルトの使い方と簡単なカスタマイズの方法を紹介しました。

 今回は、その上級編として、さらなるカスタマイズに挑戦したいと思います。
 提供されているデフォルトのレイアウト(テンプレート)のうち「ProductCarousel」は、jQueryのプラグイン「jCarouselLite」が使われていて、複数の商品リンクをスライド表示できるレイアウトになっています。

1.デフォルトのレイアウトの比較

・「ProductCarousel」は、表示する商品数>ブラウザに表示できる商品数のときに、商品をスライド表示してくれます。
・「ProductGrid」は、商品をグリッド表示してくれます。
・「ProductAd」は、1商品のみ表示してくれます。

・「ProductCarousel」(左)「ProductGrid」(右)の例

・1商品の場合の例

2.デフォルトのテンプレートの違いについて

1)HTML本体部分(クラス名以外)

・「ProductAd」には、ヘッダー部分の記述がありません。
・「ProductGrid」には、4,5行目に
<input type="hidden" name="columns" value="2" />
<input type="hidden" name="rows" value="5" />
の記述があり、最大のグリッド(横×縦)を設定をしています。デフォルトは、2×5で10商品まで表示可能のようです。

2)HTMLスクリプト部分(クラス名以外)

 共通しているのは、選択された商品数からブラウザに表示するレイアウトを再構築(cssの変更)しているところです。
 「ProductAd」と「ProductGrid」は、プラグイン「jCarouselLite」(スライド表示)を強制的に利用しないようにしています。
 「ProductCarousel」は、選択された商品数とカルーセル内の可視部分に表示できる商品数(を算定)からプラグイン「jCarouselLite」を利用してスライド表示させるかを決めています。

3)CCS

 クラス名以外は、すべて同じです。
※jQueryで必要に応じて変更を加えています。

3.jQueryプラグイン「jCarouselLite」について

 詳細はこちらを参照してください。
http://www.gmarwaha.com/jquery/jcarousellite/
※デモ、ドキュメントが充実しています。(ただし、英語)

・オプション一覧

オプション 説明
btnPrev* ボタン(「次へ」「前へ」)をクリックして、アイテムをスライドさせるときにこのオプションを使います。
このオプションの値には、jQueryセレクタを指定します。
btnNext* 同上
btnGo カルーセル内のアイテム番号に基づいて、スライドさせることが可能になります。
mouseWheel マウスホイール自体で、アイテムをスライドできるようになります。("true"を設定)
※利用するには、mousewheelのプラグインをインストールする必要があります。
※このmouseWheelオプションとボタン(btnNext / btnPrevまたはbtnGoオプションを指定)を同時に使用することは可能です。
auto カルーセルを自動でスクロールします。
ミリ秒の値(連続する2つのスライド間の時間)を指定すると有効になります。
デフォルトはnullで、自動でのスクロールは無効になります。
speed カルーセルのアイテムがスライドする速度(800、600、1500など)を指定します。
※0を指定すると、スライドエフェクトが削除されます。
easing 任意のイージングエフェクトを指定できます。
※利用するには、イージングプラグインが必要です。
vertical* カルーセルの方向を決定します。
true:カルーセルが上下にスライドします。
false(デフォルト):カルーセルが左右にスライドします。
circular true:循環ナビゲーションが有効になります。
※ 最後のアイテムに到達した後に「次へ」をクリックすると、自動的に最初のアイテムにスライドします。
false(デフォルト):循環ナビゲーションが無効になります。
※最後のアイテムに達した後に「次へ」(「前へ」)ボタンをクリックすると、最後(最初)のアイテム自体にとどまります。
visible* カルーセル内で常に見えるアイテムの数を指定します。 デフォルトは「3」です。
(例)「3.5」は3つの項目と次のアイテムの半分を表示します。
start カルーセルを開始するアイテム番号を指定できます。
※最初のアイテム番号は0です。
scroll 「次」または「前」ボタンをクリックしたときに、一度にスクロールするアイテム数が指定できます。
※「mouseWheel」「auto」にも適用されます。
beforeStart アニメーションが開始する前に呼び出されるコールバック関数。アニメーションの前に表示されるアイテムを表す要素が引数として渡されます。
afterEnd アニメーションが終了した後に呼び出されるコールバック関数。アニメーションの終了後に表示されるアイテムを表す要素が引数として渡されます。

*:「Amazon Associates Link Builder」で使用しているオプション

4.テンプレートのカスタマイズ

 デフォルトのテンプレート「ProductCarousel」をもとに、サイドバーにウィジェットとして配置できるようにカスタマイズしたいと思います。

1)商品リンク部分

①ヘッダー部分を削除

在庫切れ商品を非表示※想定通りにできなかったので断念

②商品名をすべて表示

③「Price」等を日本語に変更
④「Prime]の表示位置を変更

⑤ブランド名(著者名)({{By}})、販売者({{Merchant}})を追加表示

2)レイアウト部分

⑥販売者の表示部分を追加

⑦価格の文字部分を変更

3)カルーセル部分

・カルーセル内の可視部分に表示できる商品数を「1」に固定。
・それらに伴いボタンの位置等を変更
※サイドバーのテキストウィジェットにショートコードを貼り付けたら、選択した商品が縦1列に表示されるのみで、JavaScript部分が動作しませんでした。現在の技量では解決できないので断念。

マウスホイールでもスライドできるようにします。
・こちらから「jquery-mousewheel 3.1.13」プラグインをダウンロードします。
https://github.com/jquery/jquery-mousewheel/tags
⑧解凍して、「jquery.mousewheel.min.js」ファイルを開いて、コピーをスクリプトの最後の部分に貼り付けます。

⑨「jCarouselLite」のオプションに『mouseWheel : true,』を追加します。

6.完成レイアウト

※マウスホイールでもスライドできます。

 

※「Check on Amazon」(⇒Amazonで確認してください。)「Out of Stock」(⇒現在在庫切れです。)を日本語に変更しています。変更の仕方は、こちらを参照してください。

Amazon Associates Link Builderのカスタマイズ

7.カスタマイズしたテンプレートのバックアップ方法

 プラグイン「Amazon Associates Link Builder」を更新すると新しく作成したテンプレートは、失われてしまうのでバックアップを取りましょう。

1)サーバー上の『/wp-content/uploads/amazon-associates-link-builder/template』フォルダを探します。

2)作成したすべてのカスタムテンプレートに対して、「.cssファイル」と「.mustacheファイル」をコピーし、ローカルに退避します。

3)「Amazon Associates Link Builder」プラグインを最新バージョンに更新します。

4)更新が終わったら、退避したファイルを『/wp-content/uploads/amazon-associates-link-builder/template』フォルダに戻します。

8.終わりに

 HTMLについては、ほんの少し知識がありましたが、cssやjQuery(JavaScript)に関してはまったくなかったので、「Amazon Associates Link Builder」のデフォルトのテンプレートでどのようなことがなされているのかコードを解析しながら勉強してみました。
 なんとなく、何をしているのかわかりましたが、プログラム言語は、書式ルールとか結構面倒ですね。
 また、何か機会があれば、挑戦したいと思います。

Amazon.co.jpアソシエイト

Amazon.co.jpアソシエイト(商品検索)

-wordpress
-, , , , ,