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

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

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

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

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

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

楽天SDKの追加

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

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

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

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

  1. WordPressの子テーマにある「function.php」を開きます。(親テーマのfunction.phpでも構いませんが、テーマのアップデートで消えてしまう場合があるので注意しましょう)
  2. 「function.php」に以下のコードを追加します。
    ※ *1、*2、*3部分は自分の環境に合わせて書き換えてください。
  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[rank].'位</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');
  4. WordPressの子テーマにある「style.css」を開きます。(親テーマのstyle.cssでも構いませんが、テーマのアップデートで消えてしまう場合があるので注意しましょう)
  5. 「style.css」に以下のコードを追加します。(設定は、ご自分の環境に合わせて調整してください)
  6. /*--------------------------------------
    楽天ランキング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;
    }

ランキング広告の表示

  1. 広告を表示させたい場所に下記のショートコードを追加します。
  2. [rakutenrank catid="xxxxxx" num="x" place="xxxx"]

    ◎ パラメータは次のとおりです。
    ”catid”・・・表示させたい楽天のカテゴリIDを指定します。
    カテゴリIDはこちらからも確認できます。https://www.rakuten.co.jp/com/inc/rms/navi/directory.html

    ”num”・・・表示させたい商品数を指定します。

    ”place”・・・広告を表示する場所を指定します。(sidebarまたはmainを指定)

    phpコード内で使いたい場合は、下記のコードを追加します。

    <?php echo do_shortcode('[rakutenrank catid="xxxxxx" num="x" place="xxxx"]'); ?>
  3. WordPressのウィジット内で使いたい場合は、「function.php」に下記のコードを追加します。
  4. /* ウィジットでショートコードを使用する */
    add_filter('widget_text', 'do_shortcode');

    管理画面→外観→ウィジットで表示させたい位置に「テキスト」を追加し、ショートコードを記載します。

    以上で、楽天のランキング表示が高速で表示されるようになります。
    今まで、ページの表示が重くて、楽天ウィジットが使えなかった方や表示速度を改善したい方は、是非、お試しください。
    Googleの「Page Speed Insights」でもこちらの方法だと、楽天ウィジットを利用するより、かなり評価があがります。

    「Page Speed Insights」については、こちらの記事もご覧ください。
    Googleのサイト表示速度測定サービス「Page Speed Insights」で90点以上をWordPressで出す6つの方法


    ☆もしこの記事が気に入っていただけましたなら、SNSでシェアをお願いします。非常に励みになります。 ☆フォロー・配信購読はこちら