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

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

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

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

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

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

www.webopixel.net

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

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

https://www.phpbook.jp/func/array/index1.html

www.phpbook.jp

/* --------------------------------------------------
// 楽天検索ショートコード
-------------------------------------------------- */
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;

}

/* --------------------------------------------------

// 楽天検索ショートコード

-------------------------------------------------- */

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 = ' ショップ・オブ・ザ・イヤー受賞店';

}else{

$soy = '';

}

$img = $Item -> mediumImageUrls -> imageUrl[0];

$list.='<li>';

$list.='<a href="'.$Item -> affiliateUrl.'" target="_blank">';

$list.=''.$title.'';

$list.='<img src="'.$img.'">';

$list.='価格：'.$price.'円';

$list.='店舗：'.$shop.$soy.'';

$list.='</a>';

$list.='</li>';

}

$list.= '</ul>';

return $list;

}

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

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

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

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

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

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

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

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

ショートコードテスト

テスト内容楽天市場で検索（API）キーワード：ティファール電気ケトル 1.2 ジャスティンプラス除外キーワー...

natu-note.net

2017-12-07 10:20

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

実際にこのショートコードを使う場合は、キーワードだけではあまり関係のない商品がたくさん表示されてしまうので、まだまだ改善の余地ありだと思います…。この辺は楽天より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;
}

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;

}

人気の記事［週間］

人気の記事