アフィリエイト、それはブログ運営における稼ぎ方の一つです。有名どころだと、Amazonアソシエイトや楽天アフィリエイトなどがあります。 これらのサービスを利用するためには紹介リンク（アフィリエイトリンク）というものを投稿の中に貼る必要があります。
しかし紹介リンクは簡単に生成できるものではなく、それを助けるための有名なプラグインとして「Rinker」があります。 そしてこの度、Rinkerに頼らずにそれっぽい機能を自分で作ってみましたので共有したいと思います。
Rinkerについて
まず最初に、Rinkerというプラグインはそもそも何なのかについて解説していきます。
Rinkerの機能
勝手にめちゃくちゃ名前使ってしまって失礼極まりないかもしれませんね。一応ちゃんと紹介しておきます。
https://oyakosodate.com/rinker/
Rinkerはとあるブロガーが開発したWordPressプラグインとのことで、アフィリエイトリンクを作るのに特化しています。
Amazonアソシエイトの自分のパートナータグやアクセスキー、シークレットキーなどを入力することでAmazonのアフィリエイトリンクをいとも簡単に追加できるようになったり、楽天アフィリエイトについても同様に簡単にリンクが作成できたりします。 そして作成した商品リンクは投稿内にショートコードによって手軽に追加することができ、非常に便利と話題になっております。
脱Rinkerしたいその理由
BableTechでもRinkerは長い間使わせていただきました。本当にありがとうございます。 しかし、最近BableTechのリニューアルをしようとしている中でRinkerを使うのをやめようと感じた理由がいくつかあるので紹介します。
プラグインが重たい
プラグインというのはWordPressの目玉機能の一つではあるのですが、基本的にページ読み込み時に毎回プラグインも読み込まれているので、プラグインの数が増えるほどサイト自体も重たくなっていきます。
Rinkerもそこまで軽いプラグインではなく、わずかだとしてもサイトの表示時間に影響を与えてしまっています。また、Rinkerの商品リンクは投稿と同じデータベースで管理されていて、その分データベースのレコード数も増えており、多少影響を与えてしまっています。本当に多少ですが
Created By Rinkerを消したい
リンカ―で作ったアフィリエイトリンクには、「Created By Rinker」という文字列が表示されてしまいます。有料プランにすることでこれを削除できるらしいのですが、そのためにお金払うのもちょっと違う感じがしました。 でも、有料プランにしたら売れ行きが良くなったとかいう話を聞いたりするので、このような文字列が無いに越したことはないのでしょう。
検索結果を表示したい
Rinkerのリンク作るのって正直面倒くさいなと感じていました。毎回Amazonから商品を選んでタイトルも設定してショートコードを作って… しかも、登録していた商品がなくなってしまっていたらリンクとして機能しなくなってしまうというデメリットもあります。
それで、Amazonや楽天の検索結果自体をそのまま投稿内に載せることができたらリンク切れの心配も要らないし、タイトルも自分で設定する必要が無かったりして楽だと考えました。そのような機能はRinkerにはないと思いますので、自分で作ろうと思った感じですね。
プログラミングスキルを磨きたい
正直これが一番大きいです。これからBableTechがより便利なサイトになるようにカスタマイズしていきたいのですが、その過程でなんせWordPressとかPHPとかJavaScriptの知識が必要になってくると思います。 まだまだ自分には足りないので、シンプルにもっとスキルを伸ばしたいなと思い、開発してみることにしました。
検索結果自動挿入機能を作る
この機能はAmazonアソシエイトユーザーであることと、楽天アフィリエイトに登録済みであることが前提となります。また、コピペで真似して実装することもできるかもしれませんが、自己責任でお願いします。そこまでレベルの高いものではないですが、ある程度は知識が必要になってくると思います。
それでは早速作ってみましょう。
Amazonや楽天の検索結果を取得する
最重要ステップですね。でもこれに関しては公式ホームページでかなり手厚く説明してくれてたりするのでプログラミング初心者でも簡単にできるかと思います。
Amazonアソシエイト（Amazon PA-API 5）↓
https://webservices.amazon.co.jp/paapi5/scratchpad/index.html
ここで自分のアクセスキーとかシークレットキーを入力したら検索結果を取得してくれるPHPのコードを自動生成してくれます。 一応自動生成はしてくれますが、軽く目を通してどういう流れで処理をしているのかある程度は把握しておきましょう。
このコードはAPIのバージョンとともに変わってしまいそうだし、かなり長いのでここでは割愛しておきます。 ただ、この後商品画像、価格、タイトルを取得するために
$payload = array(
"Keywords"=>$keyword,
"PartnerTag"=>"[パートナータグ]",
"PartnerType"=>"Associates",
"Marketplace"=>"www.amazon.co.jp",
"Resources"=> ["Images.Primary.Medium","Offers.Listings.Price","ItemInfo.Title"]
);リクエストのパラメータの一つである $payload という変数には上のような値を格納しておきましょう。そして、アクセスキー等をしっかり入力したうえで、検索ワードを自分で決めて$keywordに格納しつつ、これらのコードを任意のPHPファイルに挿入してからブラウザ上から実行してみましょう。
そしたら$responseという変数にJSON形式で検索結果が返ってきます。そして、以下（例）のように、配列化してから適当にHTMLコードを生成します。
$result_data_set = json_decode($response,true);
$items = $result_data_set["SearchResult"]["Items"];
$search_page = $result_data_set["SearchResult"]["SearchURL"];
$sum = $result_data_set["SearchResult"]["TotalResultCount"];
$result_DOM = "";
foreach($items as $item){
$title = $item["ItemInfo"]["Title"]["DisplayValue"];
$price = $item["Offers"]["Listings"][0]["Price"]["DisplayAmount"];
$url = $item["DetailPageURL"];
$img = $item["Images"]["Primary"]["Medium"]["URL"];
$result_DOM .= "<li><img src='{$img}'><h5><a href='{$url}'>{$title}</a></h5><p class='price'>{$price}</p></li>";
}
$result_DOM .= "<a href='{$search_page}' class='more'>さらに見る</a>";
echo json_encode(["DOM"=>$result_DOM,"sum"=>$sum]);もっとコンパクトにまとめられそうですが、PHP歴が浅くて雑になってしまいました。
このコードによって、li要素の中に商品画像とタイトル（アフィリンク付き）、価格を入れ込むことができました。
続いて楽天市場です。
https://webservice.rakuten.co.jp/explorer/api
楽天にも素晴らしいツールが用意されていました。こちらもAmazonと同じように、自分のアプリケーションIDを入力しつつテストフォームに検索ワード等を入力するだけで検索結果を得るためのURLを自動生成してくれます。
$keyword = $_POST["word"];
$affiliateId = "[アフィリエイトID]";
$applicationId = "[アプリケーションID]";
$search_result = file_get_contents("https://app.rakuten.co.jp/services/api/IchibaItem/Search/20220601?format=json&keyword={$keyword}&affiliateId={$affiliateId}&applicationId={$applicationId}",false);
$result_data_set = json_decode($search_result,true);
$items = $result_data_set["Items"];
$sum = $result_data_set["count"];
$result_DOM = "";
foreach($items as $item){
$title = $item["Item"]["itemName"];
$price = $item["Item"]["itemPrice"];
$price = number_format($price);
$price = "￥".strval($price);
$url = $item["Item"]["itemUrl"];
$img = $item["Item"]["mediumImageUrls"][0]["imageUrl"];
$result_DOM .= "<li><img src='{$img}'><h5><a href='{$url}'>{$title}</a></h5><p class='price'>{$price}</p></li>";
}
echo json_encode(["DOM"=>$result_DOM,"sum"=>$sum]);
POSTで検索文字列が送信されることを想定して、一番上のコードを書いています。リクエストURLができたら後はfile_get_contentsで検索結果をJSON形式で得るだけです。Amazonよりもかなり楽ですね。
そしてそのあとに先ほどと同様に、配列化してそこから必要な情報を抽出してHTMLコードを生成しています。
投稿内に表示する
上のコード（自分で手直しする必要あります）をPHPファイルに挿入して、任意の場所に保存しておきましょう。 そして、検索文字列をPOSTしたら検索結果のHTMLコードが返ってくるようにしましょう。
そしたら次の手続きとしては、JavaScriptからこれらのPHPファイルにAjax通信でPOSTして、返り値でHTMLコードを受け取って、投稿内に挿入するといった感じですね。今回私が想定しているのは、投稿内に
<div data-id='検索ワード' class='affiliate_field'><div class='amazon'><h4>Amazon</h4><ul></ul></div><div class='rakuten'><h4>Rakuten</h4><ul></ul></div></div>上のようなHTMLコードをページ読み込み時に表示し、ページが読み込まれた後にjQueryによって検索ワードを取得しつつ検索結果をPHPから取得して帰ってきたHTMLコードをこのフィールドに挿入するといった感じです。
//アフィリエイトフィールドを展開する（楽天だけ展開して、Amazonは任意のタイミングで展開できるようにする）
jQuery("div.affiliate_field").each(function(){
const this_field = jQuery(this);
const search_word = this_field.data("id");
//それぞれの検索結果を得る
jQuery.ajax({
async: true,
type: "POST",
url: "[楽天の検索結果を返してくれるPHP]",
data: {
"word": search_word
}
}).done(function (data) {
data = JSON.parse(data);
const result_sum = data["sum"];
const result_DOM = data["DOM"];
this_field.find("div.rakuten ul").html(result_DOM);
if(!result_DOM){
setTimeout(function(){this_field.find("div.amazon h4").trigger("click");},1000);
}
//センサーの追加
this_field.find("div.rakuten h4").click(function(){
this_field.find("div.rakuten h4").css({opacity:'1'});
this_field.find("div.amazon h4").css({opacity:'.3'});
this_field.find("div.rakuten ul").fadeIn();
this_field.find("div.amazon ul").fadeOut();
this_field.find("div.rakuten").css({zIndex:'1'});
this_field.find("div.amazon").css({zIndex:'0'});
});
});
//Amazon用のセンサーを置いていく
this_field.find("div.amazon h4").click(function(){
//すでに展開されているかどうか
if(this_field.find("div.amazon ul").html() == ""){
jQuery.ajax({
async: true,
type: "POST",
url: "[検索結果を返してくれるPHPファイル]",
data: {
"word": search_word
}
}).done(function (data) {
data = JSON.parse(data);
const result_sum = data["sum"];
const result_DOM = data["DOM"];
this_field.find("div.amazon ul").html(result_DOM);
});
}
this_field.find("div.amazon h4").css({opacity:'1'});
this_field.find("div.rakuten h4").css({opacity:'.3'});
this_field.find("div.amazon ul").fadeIn();
this_field.find("div.rakuten ul").fadeOut();
this_field.find("div.rakuten").css({zIndex:'0'});
this_field.find("div.amazon").css({zIndex:'1'});
});
});ごめんなさい。全く人に見ることを想定してなかったのでかなり雑なコードになってしまいました。この処理は、jQuery(function(){});の中（つまりページが読み込まれた後に実行される関数） に記述しています。 投稿内からこのアフィリエイトフィールドを検出して、そこにdata-idとして埋め込まれている検索ワードを取得しそのフィールドに検索結果を出力するという感じですね。
そして検索結果はAmazonと楽天で切り替えれるようにしているわけです。ただ、AmazonのAPIの方がリクエスト回数の制限が厳しいので、最初は楽天の方の検索を表示するようにして、閲覧者がAmazonというところをクリックしたらそこで初めてAmazonの検索結果を取得するというスタンスにしています。
なお、楽天の検索結果が無かった場合は自動的にAmazonの検索結果を出すようにしています。こうすることで、ほぼ確実に何かしらの商品が表示されるようにして、目に留まりやすくしています。
また、例えばパソコンパーツのグラフィックボードに関しては同じGPUでもいろいろなメーカーが作っていたりして、好みも人それぞれだと思うので、あらゆるメーカーの商品を一目で見ることができるという利点がありますね。
後はCSSをカスタマイズするだけです。
/*アフィリエイトリンクのデザイン*/
div.affiliate_field {height: 300px;position: relative;margin: 60px 0 20px 0;}
div.affiliate_field div {
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
box-shadow: 0 0 7px #00000029;
}
div.affiliate_field div.amazon h4 {background-color: #131921;left: 0;opacity:.3;}
div.affiliate_field div h4:after {
display: none;
}
div.affiliate_field div h4 {
color: white;
text-align: center;
width: 50%;
margin: 0;
position: absolute;
top: -40px;
line-height: 40px;
padding: 0;
transition: .5s;
}
div.affiliate_field div h4:hover {
cursor:pointer;
}
div.affiliate_field div.rakuten h4 {
background-color: #bf0000;
left: 50%;
opacity:1;
}
div.affiliate_field div ul {
padding: 10px;
background-color: white;
overflow-y: scroll;
height: 100%;
box-shadow:none;
}
div.affiliate_field div ul li {
list-style: none;
width: 21%;
display: inline-block;
vertical-align: top;
margin: 10px 1% 10px 1%;
padding: 10px 1% 10px 1%;
background-color: #f7f7f7;
box-shadow: 0 0 10px #00000021;
}
div.affiliate_field div ul li img {
max-height: 100px;
display: block;
margin: auto;
margin-bottom: 5px;
}
div.affiliate_field div ul li h5 a {
color: black;
font-size: 12px;
line-height: 1.6;
display: block;
height: 55px;
overflow: hidden;
}
div.affiliate_field div ul li p.price {
font-weight: bold;
margin: 0;
}
div.affiliate_field div.amazon ul li p.price {
color: #b12704;
}
div.affiliate_field div.rakuten ul li p.price {}
div.affiliate_field div.rakuten ul li p.price {
color: #bf0000;
}
div.affiliate_field div ul a.more {
width: 100%;
display: block;
text-align: center;
text-decoration: none;
color: white;
font-weight: bold;
background-color: #131921;
margin: 20px 0 20px 0;
line-height: 35px;
}
CSSもそこまで得意ではないのであまり真似しない方が良い気がしますが、一応紹介しておきます。以下のようになりました。
一応20件くらい検索結果は取得されるようになっていて、スクロールで下も見れます。そして上のタブでAmazonとRakutenを切り替えることも可能です。 そしてリンクはもれなくしっかりアフィリエイトリンクになっております。
簡単に挿入できる仕組みを作る
一通り完成しましたが、アフィリエイトフィールドDOM（divのやつ）を自分でいちいち挿入するのは面倒くさいですよね。 そのため、これをWordPressのエディターからブロックとして簡単に挿入できるような仕組みをちゃちゃっと作りました。 以下の記事も併せてごらんください。
【超簡単】WordPressで自作ブロックを作ってみる【効率アップ】
今回は検索ワードを入力するためのフォームをブロックに設置しないといけないので少々複雑です。ブロックの定義を行うPHPを以下のようにします。
//商品リンクを追加することができるブロック
function add_block_affiliate() {
wp_enqueue_script(
'bable-admin-affiliate_block-script', //スクリプトを識別するためのハンドル名
plugins_url( 'js/affiliate_block.js', __FILE__ ), //スクリプトの URL
array( 'wp-blocks', 'wp-element', 'wp-editor')
);
register_block_type(
'my-blocks/insert-affiliate',
array(
//エディター用スクリプトにブロックのスクリプトを関連付け
'editor_script' => 'bable-admin-affiliate_block-script',
)
);
}
add_action( 'init', 'add_block_affiliate' );スクリプト名や関数名などは各自変えるようにしましょう。これをfunction.php等に挿入しつつ、ブロック用のスクリプトも同時に作っていきます。
( function( blocks, element , blockEditor) {
var el = element.createElement;
var RichText = blockEditor.RichText ;
blocks.registerBlockType(
'my-blocks/insert-affiliate',
{
title: 'アフィリエイト',
icon:'cart',
description:'指定の検索ワードのアフィリエイトリンクを挿入します',
category: 'common',
example:{},
attributes: {
//入力された値を保存する属性を設定
SearchWord: {
type: 'string',
default: ''
}
},
edit: (props) => {
const onChangeContent = ( newText ) => {
props.setAttributes( { SearchWord: newText } );
}
return el(
'div',
{style:{backgroundColor:'#00ff3e3b',padding:'30px 20px 30px 20px',position:'relative'}},
el('img',{style:{width:'100px',position:'absolute',top:'5px',left:'5px',opacity:'.6'},src:"https://bablishe.com/babletech_logo_170width.png"}),
el('h2',{style:{fontSize:'20px',color:'black',textAlign:'center'}},'ここにアフィリエイトリンクが挿入されます'),
el('p',{style:{fontSize:'15px',color:'black',marginBottom:'0'}},'検索ワードを入力：'),
el(
RichText,
{
onChange: onChangeContent,
value: props.attributes.SearchWord,
style:{margin:'15px',backgroundColor:'white'}
}
)
);
},
save: (props) => el(
'div',
{
style:{margin:'20px 0 20px 0'}
},
`Amazon
Rakuten
`)
}
);
}(
window.wp.blocks,
window.wp.element,
window.wp.blockEditor
) );非常にシンプルなブロックです。表示されたフォームに検索ワードを入力するだけで簡単に検索結果を挿入することができます。
そしてこのブロックの出力として、affiliateというショートコードを用いているのがわかりましたでしょうか。 特に深い理由はないですが、一度ショートコードを挟んで出力するという形にしようと思います。 そしてfunction.phpなどで以下のようにショートコードを定義します。
function insert_affiliate($atts){
extract(shortcode_atts(array('word'=>''),$atts));
if(!$word){return "";}
return "<div data-id='{$word}' class='affiliate_field'><div class='amazon'><h4>Amazon</h4><ul></ul></div><div class='rakuten'><h4>Rakuten</h4><ul></ul></div></div>";
}
add_shortcode('affiliate','insert_affiliate');正直このショートコードだけ作って、あとは直接編集画面でショートコードを入力するってスタイルでも良かったと思うのですが、ちょっとブロックを作ってみたかったのでこうしました。
割とプログラミング初心者の私でも1日で簡単に実装できたので、まだ難易度としてはそこまで高くないですね。（解説が適当になってしまってすみません）
ただこれだと、楽天やAmazon以外のアフィリエイトリンクを貼る機能がないので、それはそれでまた別で作りたいと思います。
ちなみにこの機能ですが、WordPressのデータベースを利用していませんし、検索結果が表示されるのもページを読み込んだ後の話なのでサイト読み込みの高速化に貢献しているかと思います。
これからもWebサイトのカスタマイズの方法についていろいろ発信していきたいと思いますのでどうぞよろしくお願いします！