WordPress記事に設定したタグでAmazonサーチウィジェットに商品を表示させる

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

本記事はWordPressでwebサイトを運営し、Amazonアソシエイト(アフィリエイト)を利用している方向けの内容です。WordPressテーマのphpファイルを編集が必要ですので、テーマの独自編集について知識がある前提での記述となっておりますので、予めご了承ください。

Amazonアフィリエイトのウィジェットでは、ページの内容にあわせて自動的に商品をリストアップしてくれる『Amazonおまかせリンク(R)』というウィジェットが提供されていましたが、これは2018年1月に提供終了のアナウンスがありました。

後継となるウィジェットは現在の所提供されていないので、比較的新しい『Amazon サーチウィジェット』で記事に適した商品を自動リストアップさせるべく、WordPressのタグ機能を応用し自動表示させる事をゴールとします。

※同機能は2019年1月現在、uzurea.netにも適用させています。

当記事のゴール……検索入力欄にWordPressで記事に設定したタグを自動出力してWordPressの記事ページに設置
当記事のゴール……検索入力欄にWordPressで記事に設定したタグを自動出力してWordPressの記事ページに設置

Amazon サーチウィジェットの準備

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)を除外/削除する

この方法の他にも、カテゴリを元に検索条件を設定したり、もちろん専用のカスタムフィールドで制御する……なんて方法もできそうですね。


この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。運営会社スタッフ及び契約ライターによる匿名寄稿を含みます。

関連する記事



page top