楽天ウェブサービスのAPIを利用して、ページ表示速度の早い商品ランキング広告を作る方法

楽天アフィリエイトをやっている方は、楽天ウィジットを使っている方が多いのではないでしょうか？

楽天ウィジットは、様々な商品等をランキング表示してくれたり、訪問者に合わせた商品を表示してくれたりととても便利なのですが唯一、表示されるまで時間がかかってしまうため、ホームページ自体のページ表示速度に悪影響を与えてしまう問題点があります。

でも、実は、楽天は「楽天ウェブサービス」というものの提供もしていて、このAPIを使うと、楽天市場や楽天トラベルなどの商品を抽出して、自分のホームページ利用することができます。もちろんアフィリエイトとしても使用できるますし、ウィジットに比べて、表示が格段に早くなるので、今回は、こちらを利用しWordprssに楽天市場のランキング広告の作り方はど紹介したいと思います。

楽天ウェブサービスへの登録

まずは、はじめに「楽天ウェブサービス」に登録を行います。
「楽天ウェブサービス」は楽天会員でなければ、利用できませんので、楽天のほうの会員登録が必要になります。
これがないと、APIが利用できませんので、必ず必要な作業になります。
ここでは、楽天IDは既に登録済みとして、その後の手順を説明します。

「楽天ウェブサービス」にアクセスします。https://webservice.rakuten.co.jp/
「アプリIDの発行」をクリックします。
楽天会員登録が済んでいる場合は、ユーザーIDとパスワードを入力して、ログインしてください。
楽天会員登録がまだの場合は、先に登録から行ないます。
ログインすると、「アプリID/デベロッパーID」が表示されますので、メモします。

楽天SDKの追加

WordPressに「楽天SDK」を追加します。

「楽天ウェブサービス」から「Rakuten Web Service SDK for PHP」をダウンロードします。https://webservice.rakuten.co.jp/sdk/php.html
ダウンロードしたファイルを解凍して、フォルダ名を”sdk”にします
FTPでWordpressで使用しているテーマまたは子テーマのフォルダへアップロードします。

WordPressにランキング広告用PHPコードを追加

ランキング広告表示用のPHPコードを追加します。
今回は、広告コードをショートコード化して利用します。

WordPressの子テーマにある「function.php」を開きます。（親テーマのfunction.phpでも構いませんが、テーマのアップデートで消えてしまう場合があるので注意しましょう）
「function.php」に以下のコードを追加します。
※ *1、*2、*3部分は自分の環境に合わせて書き換えてください。

function Rakuten_Rank_func($atts) {
extract(shortcode_atts(array(
		'catid' => '000000',
		'num' => '1',
		'place' => 'main'
	), $atts));

if($place == 'main'){
	echo '<div class="rserch">';
}else{
	echo '<div class="rserch1">';
}

//autoload.phpの絶対パスを指定
require_once '絶対パス/sdk/autoload.php'; //*1
$client = new RakutenRws_Client();

//IDを入力
$client->setApplicationId('アプリID'); //*2
$client->setAffiliateId('アフィリエイトID'); //*3

//タイトル（サイドバーに表示した時のみ表示）
if($place == 'main'){

}else{
	{echo '<h3 class="localHead">楽天ランキング</h3>';}
}

//楽天市場のカテゴリ番号の指定（番号はショートコードで設定）
	$response = $client->execute('IchibaItemRanking', array('genreId' => $catid, 'carrier' => 1));

//取得する商品数（商品数はショートコードで指定）
if ($response->isOk()) {$i = 0; $goods = $num; foreach($response as $item){
if($i >= $goods){break;}
if($place == 'main'){
	echo '<div class="ranking1">';
}else{
	echo '<div class="ranking2">';
}

//ランキングの順位を表示
echo '<div class="rank">'.$item.'位</div>';

//商品のサムネイルを取得しアフィリエイトリンクを挿入
if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];
echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}

//金額関連
echo '<div class="price">'.$item[itemPrice].'円';
if($item[postageFlag] ==0){
echo "（送料込）</div>";}else{echo "（送料別）</div>";}

//商品名
echo '<a href="'.$item[affiliateUrl].'" target="_blank">'.$item[itemName].'</a>';

//レビュー平均とレビュー件数
echo '<div class="average">レビュー平均：<b>'.$item[reviewAverage].'</b></div>';
echo '<div class="count">レビュー件数：<b>'.$item[reviewCount].'</b></div>';

//店がショップオブイヤーを受賞しているのであれば「ショップオブザイヤー受賞」を表示
if($item[shopOfTheYearFlag] ==0){
echo "";}else{echo '<div class="shop_year">ショップオブザイヤー受賞</div>';}

//ショップ名
echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}
?>
</div>
<?php }
add_shortcode('rakutenrank', 'Rakuten_Rank_func');

WordPressの子テーマにある「style.css」を開きます。（親テーマのstyle.cssでも構いませんが、テーマのアップデートで消えてしまう場合があるので注意しましょう）
「style.css」に以下のコードを追加します。（設定は、ご自分の環境に合わせて調整してください）

/*--------------------------------------
楽天ランキングCSS
--------------------------------------*/
.rserch {
display: block;
float: left;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ECECEC;
text-shadow:none;
}.rserch1 {
display: block;
float: left;
width: 300%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ECECEC;
text-shadow:none;
}

.goods1 {
width: 31%;
padding: 1%;
text-shadow:none;
float: left;
margin-bottom: 10px;
}

.goods1 a, .ranking1 a{
font-size: small;
}

.goods1 a img {
padding: 2px;
background-color: #666;
}

.shop, .shop2 {
clear: both;
display: block;
margin-right: 1%;
padding-top: 20px;
padding-bottom: 20px;
background-image: url(../../../../images/icons-32x32/open.png);
background-repeat: no-repeat;
background-position: left 10px;
text-indent: 3em;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #ECECEC;
font-weight: bold;
font-size: 17px;
}

.shop_rank {
clear: both;
display: block;
padding-top: 20px;
padding-bottom: 20px;
background-image: url(../../../../images/ranking02.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: 3em;
font-weight: bold;
font-size: 24px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
margin-bottom: 20px;
}

.ranking1 a img {
padding: 20%;
border: 1px solid #E1E1E1;
width: 59%;
background-color: #F7F7F7;
background-image: url(../../../../images/back/frenchstucco.jpg);
}

@media screen and (max-width: 600px) {

.ranking1 a img {
padding: 5%;
border: 1px solid #CCC;
width: 88%;
}

.shop_rank {
text-indent: 4em;
font-size: 18px;
}

}

@media screen and (max-width: 480px) {

.textwidget {
width: 80%;
margin: 0 auto;
}

}

/* メイン表示 */
.ranking1 {
font-size: x-small;
line-height: normal;
width: 31%;
padding: 1%;
text-shadow:none;
float: left;
height: 450px;
}

/* サイドバー表示 */
.ranking2 {
font-size: x-small;
line-height: normal;
width: 31%;
padding: 1%;
text-shadow:none;
float: none;
height: 450px;
}

.rank {
color: #FFF;
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #666;
}

.shop_name {
font-size: xx-small;
line-height: normal;
clear: both;
display: block;
color: #333;
padding: 3px;
margin-top: 10px;
margin-bottom: 5px;
background-image: url(../../../../images/home.png);
background-repeat: no-repeat;
background-position: left 3px;
text-indent: 1.2em;
}

.shop_year {
color: #FFF;
background-color: #F90;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
}

.catch {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999;
margin-bottom: 5px;
padding: 3px;
}

.average {
padding-right: 3px;
padding-left: 3px;
}

.average b {
color: #C00;
font-weight: bold;
}

.count {
padding-right: 3px;
padding-left: 3px;
margin-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999;
padding-bottom: 5px;
}

.count b{
color: #039;
font-weight: bold;
}

.price {
color: #900;
font-weight: bold;
font-size: small;
padding-left: 3px;
margin-top: 10px;
}

楽天ウェブサービスへの登録

楽天SDKの追加

WordPressにランキング広告用PHPコードを追加

ランキング広告の表示