ショートコードを使ってアフィリエイトページの作成をラクにする

以前の記事でアフィリエイトのリストが作れるようになったので、WordPressでラクにページを作れたらいいなぁと思い、ショートコードを自作する方法を試してみました。

参考にさせていただいたのはこちらのサイト。

簡単な例を使ってわかりやすく教えていただきました。

WordPressのショートコードを自作してみる

Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。そんなときに便利なのがショートタグです。

複数の引数を渡す方法もこれでわかりました。

ここで初めて連想配列のキー毎に変数を作成してくれる extract という関数に出会ったのですが、これ便利そうですね～。メモメモ。

extract関数の使い方(連想配列に含まれるキー毎に変数を作成)

PHP で用意されている組み込み関数の一つである extract 関数の使い方です。 extract 関数は連想配列に含まれるキーを変数名、値をその変数の値として新しい変数を作成します。

/* --------------------------------------------------
// 楽天検索ショートコード
-------------------------------------------------- */
add_shortcode('rs', 'RakutenSearch');
function RakutenSearch($search_word) {
    extract(shortcode_atts(array(
        'key' => '',
        'ng' => '',
    ), $search_word));
	
	$key = urlencode($key);
	if( !empty( $ng ) ){
		$ng = urlencode($ng);
		$ng = '&NGKeyword='.$ng;
	}
	
	// 楽天API
	$appID		= '*****************';
	$affID		= '*****************';
	$card		= '1';// 0:すべての商品 1:カード利用可の商品
	$postage	= '1';// 0:すべての商品 1:送料込み・送料無料の商品

	$xml = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=xml&keyword='.$key.$ng.'&postageFlag='.$postage.'&creditCardFlag='.$card.'&sort=%2BitemPrice&affiliateId='.$affID.'&applicationId='.$appID;

	$xmlData = simplexml_load_file( $xml );//xmlを読み込む
	
	$list = '<ul class="itemlist cf">';

	foreach( $xmlData -> Items -> Item as $Item ){
		$title = $Item -> catchcopy.$Item -> itemName;
		$title = mb_strimwidth( $title, 0, 100, '…', 'UTF-8');
		$price = $Item -> itemPrice;
		$shop = $Item -> shopName;
		$soyf = $Item -> shopOfTheYearFlag;
		if( $soyf == 1 ){
			$soy = ' <span>ショップ・オブ・ザ・イヤー受賞店</span>';
		}else{
			$soy = '';
		}
		$img = $Item -> mediumImageUrls -> imageUrl[0];
		$list.='<li>';
		$list.='<a href="'.$Item -> affiliateUrl.'" target="_blank">';
		$list.='<p>'.$title.'</p>';
		$list.='<img src="'.$img.'">';
		$list.='<p>価格：'.$price.'円</p>';
		$list.='<p>店舗：'.$shop.$soy.'</p>';
		$list.='</a>';
		$list.='</li>';
	}

	$list.= '</ul>';
	
    return $list;

}

appID（アプリID）・affID（アフィリエイトID）については以前の記事で書いています。

今回は「楽天商品検索API」を使って、キーワードに関連する商品をピックアップしました。

商品名、キャッチコピー、価格、商品画像、店舗名、ショップ・オブ・ザ・イヤーフラグ、アフィリエイトURL、を出力しています。

「送料無料」「カード利用可」を必須条件として、価格の昇順（安い順）で並べています。

投稿ページに以下のようなショートコードを記述することで、検索結果の一覧が表示されます。

[rs key="キーワード スペースでAND検索" ng="除外"]

テストページでは、今買いたいと思ってるティファールの電気ケトルを検索してみましたよ。これ、めっちゃ便利です。次はもう三代目。

404 Error - Not Found

なんとか形になりました！

実際にこのショートコードを使う場合は、キーワードだけではあまり関係のない商品がたくさん表示されてしまうので、まだまだ改善の余地ありだと思います…。この辺は楽天よりAmazonの方が簡単かもしれませんね。今度はAmazonのアフィリエイトをやってみたいな。

一応、リスト用のCSSはこちらです。

ul.itemlist {
  list-style: none;
  margin-bottom: 20px;
}
ul.itemlist li {
  float: left;
  width: 30%;
  margin: 10px;
}
ul.itemlist li a {
  font-size: 80%;
  display: block;
  border: 1px solid #DDDADA;
  padding: 20px;
  height: 380px;
  background: #FFF;
  position: relative;
}
ul.itemlist li a span {
  display: block;
  background: #C03;
  color: #EBEBEB;
  position: absolute;
  width: 80px;
  height: 25px;
  top: -5px;
  right: -5px;
  font-size: 10px;
  line-height: 1.3;
  padding: 5px;
  text-align: center;
}