Amazon商品リンクの価格を表示する方法

Amazon商品リンク
この記事は約2分で読めます。

Cocoon Ver.1.1.6からAmazon商品リンクの価格表示に対応しました。

以下のように、紹介している商品の価格を表示することが可能です。

Amazon APIから価格情報が取得できない場合は表示されません。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

全体の価格表示を設定する方法

サイト全体に表示されている「Amazon商品リンク」の価格表示を設定する場合は、まずはテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「API」タブの「Amazon」項目から「価格を表示する」にチェックを入れてください。

データー取得時点のAmazon販売ページでの値段を表示します。ショートコードでpriceオプションが設定されている場合は、そちらが優先されます。

チェックが有効になっている場合、すべての「Amazon商品リンク」の価格が表示されます。

個別に価格表示を切り替える

個々の「Amazon商品リンク」の価格表示を切り替える場合は、ショートコードで指定します。

価格を表示しない

価格を表示したくない場合は、price=0オプションを利用してください。

[amazon asin="B00F4MSFE2" price=0 kw="正露丸"]
全体設定の価格表示が有効になっていてもショートコードオプションが優先され価格が非表示になります。

価格を表示する

価格を表示する場合は、price=1オプションを利用してください。

[amazon asin="B00PRE5NY2" price=1 kw="キャベジンコーワα"]
全体設定の価格表示が無効になっていてもショートコードオプションが優先され価格表示されます。

価格の更新間隔

キャッシュの更新間隔が長い場合は、古い価格が表示される可能性が高くなります。

「Cocoon設定→API」タブを開いて「キャッシュの保存期間」で更新期間を変更できます。

APIキャッシュのリフレッシュ間隔を設定します。1~365日の間隔を選べます。

間隔を短くすれば、新しい値段が表示されますが、その分Amazon APIのリクエスト制限にかかる可能性が高くなります。

アクセス数が多いサイトは、少し長めに設定しておくことをおすすめします。

ショートコード詳細

Amazon商品リンクショートコードについての詳細はこちらを参照してください。

Amazon商品リンクショートコードの使い方。サンプル付き
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。

コメント テーマの質問はフォーラムへ

  1. sada より:

    アマゾン商品リンクへの価格表示の希望を叶えてくださり、まことにありがとうございました。私のような存在感のない者の個人的なこだわりに過ぎなかった要望を真摯に受け止めて、このように実装していただけたことに心から感激しております。私個人としては、価格表示と更新期日が表示されることにより、的確で有用な情報を閲覧者に示すことが出来るようになりました。またそれがCocoonの機能として安定的に提供していただけることを心強く思っています。わいひら様のユーザーへの想いに負けないよう、私も見てくれる人への想いを忘れることなくこれからも頑張っていきたいと思います。このたびは本当にありがとうございました。

    • わいひら わいひら より:

      価格は表示されていた方が、ユーザビリティーは高いと思います。
      その意味でも、追加すべき機能だったと思います。こちらこそ貴重なご意見ありがとうございます。
      それだけ喜んでいただけたのであれば、僕も機能を追加して良かったです。

  2. ikeda より:

    amazonの価格表示機能大変助かっています。

    質問です。
    amazon価格は割引価格を表示させることは可能ですか?

    というのも、cocoonのショートコードで作る商品リンクに表示される価格は参考価格で、実際の価格と大きく違う商品が多々あるからです。

    よろしくお願いします。

    • わいひら わいひら より:

      可能ではありますが、PHPカスタマイズが必要となります。
      以下のサポート対象外のものにもありますに、PHPカスタマイズはサポート対象外とさせていただいています。
      https://wp-cocoon.com/not-supported/
      案内するとしても、編集箇所のヒント程度になるかと思います。

      ただヒントを書くとしても、コメントの案内にもありますように、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);