WordPress記事に設定したタグでAmazonサーチウィジェットに商品を表示させる UZUREA編集部 公開:2019年1月7日(6年前) / 更新:2020年8月24日 コメント 0件 Web技術AmazonWordPress SNS X Facebook B! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 本記事はWordPressでwebサイトを運営し、Amazonアソシエイト(アフィリエイト)を利用している方向けの内容です。WordPressテーマのphpファイルを編集が必要ですので、テーマの独自編集について知識がある前提での記述となっておりますので、予めご了承ください。 Amazonアフィリエイトのウィジェットでは、ページの内容にあわせて自動的に商品をリストアップしてくれる『Amazonおまかせリンク(R)』というウィジェットが提供されていましたが、これは2018年1月に提供終了のアナウンスがありました。 後継となるウィジェットは現在の所提供されていないので、比較的新しい『Amazon サーチウィジェット』で記事に適した商品を自動リストアップさせるべく、WordPressのタグ機能を応用し自動表示させる事をゴールとします。 ※同機能は2019年1月現在、uzurea.netにも適用させています。 当記事のゴール……検索入力欄にWordPressで記事に設定したタグを自動出力してWordPressの記事ページに設置 記事の索引1 Amazon サーチウィジェットの準備2 WordPressテンプレートへ適用3 完成 最終形のコード4 応用 特定のタグは出力しない様にする Amazon サーチウィジェットの準備 amazonアソシエイト、管理画面の上部メニューから ウィジェット > 商品検索ウィジェット と選択し、推移します。 amazonアソシエイト画面から、商品検索ウィジェットコードを取得 サーチウィジェットのあなたのWebサイトに追加ボタンをクリック。 サーチウィジェットの設定画面で、各種カスタマイズをしつつ広告のコードを取得しますが、『カテゴリ選択』はAmazon.co.jpのままで。『検索ワード』欄は後の工程でWordPressタグを表示させまするので未入力のままでOKですが、『●●●●』といった文字を入力しておくと、コードの調整段階で見分けが付きやすくなりますのでお勧めです。 各種設定をしたのち『広告コードをコピー』 下記の様なコードが取得されますので、一旦テキストエディタなどで保存しておきます。 <script type="text/javascript">amzn_assoc_ad_type ="responsive_search_widget"; amzn_assoc_tracking_id ="【自身のアフィリエイトユーザーID】"; amzn_assoc_marketplace ="amazon"; amzn_assoc_region ="JP"; amzn_assoc_placement =""; amzn_assoc_search_type = "search_widget";amzn_assoc_width ="auto"; amzn_assoc_height ="auto"; amzn_assoc_default_search_category =""; amzn_assoc_default_search_key ="●●●●";amzn_assoc_theme ="light"; amzn_assoc_bg_color ="FFFFFF"; </script><script src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP"></script> WordPressテンプレートへ適用 WordPressの記事(個別ページ)テンプレートの任意の箇所へ、前述のウィジェットコードを貼付けますが、その際に…… amzn_assoc_default_search_key ="●●●●" の箇所へWordPressでタグを出力するコードを(get_the_tags)で記述します。 Amazonウィジェットで検索させる為にタグはリンクやカンマを出力せず、スペース区切りで表示させる必要があるため下記のようなコードとしますが…… <?php $tags = get_the_tags( $post->ID ); $separator = ' '; //区切り文字 半角スペースのみ $output = ''; if($tags){foreach($tags as $tag) { if($tag->slug != ""){ $output .= $tag->name.$separator; } } echo trim($output, $separator); } ?> ウィジェットに改行が入るとうまく動作しなかったので、改行とインデント、コメントは削除し…… <?php $tags = get_the_tags( $post->ID ); $separator = ' '; $output = ''; if($tags){foreach($tags as $tag) { if($tag->slug != "" ){ $output .= $tag->name.$separator; }} echo trim($output, $separator); } ?> のように成形し、ウィジェットコードに組み込みます。 完成 最終形のコード 下記の様なコードで完成です。 <script type="text/javascript">amzn_assoc_ad_type ="responsive_search_widget"; amzn_assoc_tracking_id ="【自身のアフィリエイトユーザーID】"; amzn_assoc_marketplace ="amazon"; amzn_assoc_region ="JP"; amzn_assoc_placement =""; amzn_assoc_search_type = "search_widget";amzn_assoc_width ="auto"; amzn_assoc_height ="250"; amzn_assoc_default_search_category =""; amzn_assoc_default_search_key ="<?php $tags = get_the_tags( $post->ID ); $separator = ' '; $output = ''; if($tags){foreach($tags as $tag) { if($tag->slug != "" ){ $output .= $tag->name.$separator; }} echo trim($output, $separator); } ?>";amzn_assoc_theme ="light"; amzn_assoc_bg_color ="FFFFFF"; </script><script src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP"></script> WordPressの記事テンプレート(single.phpなど)の任意の箇所に記述し、動作確認をすればOKです。 ただし、タグの運用については、amazonで商品を絞り込めるような運用をしている必要があります。そこで次に応用方法を。 応用 特定のタグは出力しない様にする 当サイト(uzurea.net)では PR記事や製品提供記事についてその旨を示すタグを付与しています。 とはいえ、amazon サーチウィジェットに『PR記事』などと入力されてても商品は出きませんので前述のコードに一部追記をします。 <?php $tags = get_the_tags( $post->ID ); $separator = ' '; $output = ''; if($tags){foreach($tags as $tag) { if($tag->slug != "provision-products" && $tag->slug != "pr" ){ //除外するタグのスラッグを記述 $output .= $tag->name.$separator; } } echo trim($output, $separator); } ?> 『製品提供記事』タグのスラッグ『provision-products』と、『PR記事』タグのスラッグ『pr』を除外するようにしています。 これを同様に、コメント、改行、インデントを除去し <script type="text/javascript">amzn_assoc_ad_type ="responsive_search_widget"; amzn_assoc_tracking_id ="【自身のアフィリエイトユーザーID】"; amzn_assoc_marketplace ="amazon"; amzn_assoc_region ="JP"; amzn_assoc_placement =""; amzn_assoc_search_type = "search_widget";amzn_assoc_width ="auto"; amzn_assoc_height ="250"; amzn_assoc_default_search_category =""; amzn_assoc_default_search_key ="<?php $tags = get_the_tags( $post->ID ); $separator = ' '; $output = ''; if($tags){foreach($tags as $tag) { if($tag->slug != "provision-products" && $tag->slug != "pr" ){ $output .= $tag->name.$separator; }} echo trim($output, $separator); } ?>";amzn_assoc_theme ="light"; amzn_assoc_bg_color ="FFFFFF"; </script><script src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP"></script> の様にして適用すれば、該当のタグは出力されずに検索させる事ができました。 これで記事執筆時にタグを適切に付与する事で、記事にあわせた商品(アフィリエイト・リンク)を表示させる事ができます。 ※タグの出力に関して、こちらの記事を参考にさせていただきました:WordPress 特定のタグ(tag)を除外/削除する この方法の他にも、カテゴリを元に検索条件を設定したり、もちろん専用のカスタムフィールドで制御する……なんて方法もできそうですね。 あなたもアフィリエイト✕アドセンスで稼げる! はじめてのWordPress本格ブログ運営法 ¥1,155 (2024/11/22 17:12:31時点 Amazon調べ-詳細) Amazonでのレビューを見る Kindle Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す 徹底攻略 AWS認定 ソリューションアーキテクト – アソシエイト教科書 ¥2,899 (2024/11/22 17:12:32時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す 本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる SBクリエイティブ ¥1,738 (2024/11/21 20:22:48時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す