WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入

WordPressの人気テーマ「Stinger3」の生みの親でもある「ENJILOG」さんのブログで投稿されていた、

Amazonアソシエイトの自動ランキングを貼る方法～2014年1月アフィリエイト収入報告

を読んで導入にチャレンジしてみました。下記のようなAmazonの売り上げランキングです。

このランキングの導入時の備忘録を残したいと思います。

Amazonアソシエイト

Amazonアソシエイトと言えば先日投稿した、

WordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入 | dmgadget(ディーエムガジェット)

を紹介しました。「AmazonJS」と同じくAmazonアソシエイトは成功報酬型（アフィリエイト）です。今回ランキング導入時、AmazonアソシエイトIDが必要になります。まだ取得していない方は、先日投稿したWordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入を参考に取得してください。先日の投稿でも紹介しましたがAmazonアソシエイトでは、

実は紹介した商品以外が購入されても収益になる

商品のリンクを貼ってそれをクリックされると紹介者のIDが紐付けされ、その紐付けは１日間持続してその間に買い物が行われるとその全てに紹介料が発生する仕組み。紹介した商品が購入されなくてもリンクがクリックされるだけで、収益が発生する可能性が生まれます。これは導入する価値がありそうです。

例えば、誰かが自分のブログを読んでくれて自分のブログのランキングから商品をクリックして何かを購入すると、それに対して収益が発生します。これはかなりありがたいお話ですが、実際かなりのPV数があるブログでないと「売り上げ」と言える金額にならなそうですが、ENJILOGさんは、

アフィリエイトの基本の基本

当たり前なんですが、アフィリエイトを貼らなければ報酬は増えません。
しかし、貼れば増えるというものでもありません。

探しているユーザーに探しているもの（答え）を与える

これが、本当にアフィリエイトの基本だなぁと痛感しました。
しかし、それ以上に大切なのは、

「アフィリエイトを貼る事。」

矛盾してるんですが、これもまた真実。。
意外と貼れば効果があるのに機会損失していたりするんですよね。

迷わず貼れよ。貼ればわかるさ。

と説いています。確かに実践すれば効果はゼロではないはずです。そこから学ぶ事も多いと思います。このdmgadget(ディーエムガジェット）ではまだPV数は少なすぎるので、自分的にはまだやらなくてもいいかなーと躊躇しちゃっている感じですが、普通にAmazonのランキングには興味があるので管理ブログに導入とかしてみようと思っています。では早速チャレンジしてみましょう！

AmazonRanklet[アマゾンランクレット]

まずアマゾンランクレットに飛んで貼付けるランキングのコードを取得します。ランキングはスマホ用２件とPC用３件貼る事が出来ます。３件選んでそのうちの２件をスマホ用にしようかと思います。AmazonRackletはこちら

AmazonRankletのページに飛んでから、まずカテゴリを選択します。カメラやテレビなど高価な物を掲載してもいいと思うんですが、あまり買い替える商品でもないので回転率が悪いかな！？と思い比較的低価格なメモリカードやガジェット系、本などにしました。その辺はお好みで３つ程選んでコードを取得しておきます。ちなみにカテゴリの中にAmazonアソシエイトIDを入れる欄があります。忘れずに記入しておきましょう。アイテム表示数は１０件にすると長すぎるかな？と思って５件ぐらいにしました。画像サイズは「中」にしました。

取得したAmazonランキングのコードを貼る

single.phpにコードを貼る

ENJILOGさんのページで紹介されているコードをsingle.phpの＜?php the_content(); ?＞の下に貼付けます。

<?php if(is_mobile()) { ?>
<div class="centerama">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#FD7C22;padding:5px;text-align:center;margin-bottom:0px;">ランキング TOP10</p>
<div class="amarankbox">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#0075A9;padding:5px;text-align:center;margin:-5px -5px 10px -5px;">タイトル</p>
ランクレットで取得したコード
</div>
<div class="amarankbox">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#98B969;padding:5px;text-align:center;margin:-5px -5px 5px -5px;">BOOK</p>
ランクレットで取得したコード
</div>
<div class="clear"></div>
</div>
<?php } else { ?>
<div class="amasbox">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#FD7C22;padding:5px;text-align:center;margin-bottom:0px;">ランキング TOP10</p>
<div class="amarankbox" style="margin-right:5px;">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#98B969;padding:5px;text-align:center;margin:-10px -13px 10px -10px;">タイトル</p>
ランクレットで取得したコード
</div>
<div class="amarankbox" style="margin-right:5px;">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#0075A9;padding:5px;text-align:center;margin:-10px -12px 10px -12px;">タイトル</p>
ランクレットで取得したコード
</div>
<div class="amarankbox">
<p style="font-size:16px;font-weight:bold;color:#fff;background-color:#FD7C22;padding:5px;text-align:center;margin:-10px -10px 10px -13px;">タイトル</p>
ランクレットで取得したコード
</div>
<div class="clear"></div>
</div>
<?php } ?>

single.phpを開きましょう。管理画面　→　外観　→　テーマ編集　→　右側のバーから「単一記事の投稿（single.php)」で編集して頂いてもOK!　自分はTransmitを使用しています。有料ですがとても便利です！多くの有名ブロガーも使用しています。お試し期間などもあったと思うので気になる方は試してみてください。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

Transmitで説明していきます。FTPアプリでStinger3のフォルダにアクセスしてsingle.phpを開きます。慣れないうちはバックアップをしながら作業をすることをお勧めします。自分は対象のファイルをデュプリケイトしてバックアップしておきます。（デュプリケイトするとファイル名が「single copy.php」と言う名のコピーが出来ます。

single.phpを開いて＜?php the_content(); ?＞を探してその下に先程のコードを貼ります。transmitでは４６行目に＜?php the_content(); ?＞がありました。その下に貼ります。

４６行目のあと分かり易く一行空けましたが、こんな感じで貼付けが出来ました。

sytle.cssにコードを貼る

同じくStinger3のフォルダの中にあるstyle.cssにこちらのENJILOGさんのブログにあったコードを貼付けます。分かり易い様に上に３行程足しています。こちらを使ってください^^

/*---------------------------------
Amazon Ranking
--------------------------------*/
.amarankbox02{
width:130px;float:left;padding:5px;
	word-break: break-all;
	overflow: auto;
}
.amarankbox02 .amazonranklet-item{
font-size:15px!important;
padding-bottom:10px;
}

.amarankbox02 .amazonranklet-item img{
width:130px!important;
padding:5px;
}

.amarankbox02 .amazonranklet-item a{
font-weight:bold;
padding-bottom:10px;
color:#666;
text-decoration:none;
}

.amarankbox{
width:160px;float:left;padding:10px;
}
.amazonranklet-item{
font-size:15px!important;
padding-bottom:10px;
}

.amazonranklet-item img{
width:160px!important;
padding:10px 0px;
}

.amazonranklet-item a{
font-weight:bold;
padding-bottom:10px;
color:#666;
text-decoration:none;
}

こんな感じで貼付けが出来たと思います。

smart.cssもコードを貼る

モバイルサイト用ページにも忘れずにコードを貼っておきます。

/*-----------------------------------
Amazon Ranking
------------------------------------*/
.amarankbox{
width:130px;float:left;padding:5px;
	word-break: break-all;
	overflow: auto;
}
.amazonranklet-item{
font-size:15px!important;
padding-bottom:10px;
}

.amazonranklet-item img{
width:130px!important;
padding:5px;
}

.amazonranklet-item a{
font-weight:bold;
padding-bottom:10px;
color:#666;
text-decoration:none;
}

下記のようになっていれば問題ないと思います。

それでは現状の表示を確認します。

ここまで問題なく表示されています。

次にランクレットで取得したコードを貼る

先程開いたsingle.phpを開いてランクレットで取得したコードを貼って行きます。

左側の「ランクレットで取得したコード」と書いてある所に先程取得したコードを貼付けます。「ランクレットで取得したコード」は消してください！上２段がモバイルサイトで表示させるためのコードで下３段はPCサイト用となっています。それぞれ表示させたいようにコードを貼ってください。又、各ランキングにタイトルを付けれるので忘れずに変更してください。

それでは表示を確認しましょう。PCサイト用

モバイルサイト用

完成

phpやcssに親しみが無い方はちょっと複雑な作業のような感じがありますが、やってみると意外と簡単に出来ると思います。色々微調整もトライしてみようかと思います。ENJILOGさん有益な情報ありがとうございました。