Lognote

ネット集客に強い整体院サイトを制作

another-ad-category-thumbnail

カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する

公開日:2016-05-25
最終更新日:

ブログで収益を受け取る方法の一つとして、Amazonアソシエイトの紹介料をいただくというのがあります。

Amazonアカウントを持っていれば誰でも簡単に始めることができますが、売り上げを上げるには工夫が必要です。

購入につなげるためには、なるべく多くのリンクを貼りたいところですが、闇雲に商品を貼っても興味のない商品は邪魔になるだけです。むしろウザがられて、二度と見に来てくれなくなるかもしれません。

そこで今回試したのが、読んでくれているカテゴリーに関連した商品をマッチングさせて表示するカスタマイズです。

Amazon.co.jp成果反映用プログラムについて

成果報酬は以下のページにまとめてあります。単価の高い商品ほど料率は下がる傾向にあります。

アフィリエイト広告はA8.netを利用

Amazon公式のウィジェットはしっくりくるものがないので、A8.netのAmazonツールからランキング広告を使用します。ランキング広告であれば人気のある商品が自動で入れ替わるので楽チンです。

A8.netの申し込みはこちらからできますのでまだの方はしてください。

メニューからAmazonツール選びます。

A8.netでAmazonツールを選択している状態のスクリーンショット

わたしのオススメの設定は以下の通りですが、自分好みに設定してみてください。

A8.netのAmazonツール設定画面のスクリーンショット

第2カテゴリーを選ばなければ、大きなくくりで商品が選定されます。

これから詳しくお話しますが、同じカテゴリーでもPCとスマホで広告を分けますので掲載設定は可変をオススメします。

PCとスマホで商品数を分岐させる

PCではTOP10を縦5列、横2列の幅600pxで表示したいのですが、もちろんスマホだと横に大きくはみ出します。なのでPCとスマホでファイルを分岐して、スマホではtop5にして縦5列、横1列の幅300pxで表示したいと思います。

PCとスマホを分岐させるためのis_mobile関数を使います。functinos.phpに下記のコードがない方はまずはこちらを貼り付けてください。

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

アマゾン広告用テンプレートファイルを作る

次に、amazon-item-pc.phpとamazon-item.phpという2つのファイルを新たに作ります。中身はどちらも同じで構いませんので、下のコードを丸々コピーしてください。

//amazon-item-pc.php、amazon-item.php
<?php
$post_cats = get_the_category();
/* 1つめのカテゴリの記事の表示内容 */
if ( $post_cats[0]->cat_ID == カテゴリーID || $post_cats[0]->category_parent == カテゴリーID || cat_is_ancestor_of( カテゴリーID, (int)$post_cats[0]->category_parent ) ) { ?>
<h4>「<?php the_category(', '); ?>」のオススメ商品</h4>
/* このコメントを消してアフィリエイトバナーを貼る */

<?php }
/* 2つめのカテゴリの記事の表示内容 */
if ( $post_cats[0]->cat_ID == カテゴリーID || $post_cats[0]->category_parent == カテゴリーID || cat_is_ancestor_of( カテゴリーID, (int)$post_cats[0]->category_parent ) ) { ?>
<h4>「<?php the_category(', '); ?>」のオススメ商品</h4>
/* このコメントを消してアフィリエイトバナーを貼る */

<?php }
/* 3つめのカテゴリの記事の表示内容 */
if ( $post_cats[0]->cat_ID == カテゴリーID || $post_cats[0]->category_parent == カテゴリーID || cat_is_ancestor_of( カテゴリーID, (int)$post_cats[0]->category_parent ) ) { ?>
<h4>「<?php the_category(', '); ?>」のオススメ商品</h4>
/* このコメントを消してアフィリエイトバナーを貼る */

<?php }
/*その他の記事の表示内容*/
else { ?>
<h4>その他の記事に表示するタイトル</h4>
/* このコメントを消してアフィリエイトバナーを貼る */
<?php } ?>

h4見出しはh3などに各自変えてください。the_category関数でリンク付きでカテゴリー名を取得しています。

「このコメントを消してアフィリエイトバナーを貼る」のところをamazon-item-pc.phpには幅の大きい広告。amazon-item.phpにはスマホの画面に収まる広告を貼ります。カテゴリーを増やしたい場合は改行ごとにコピペしてください。

「その他の記事の表示内容」以下には分岐設定しないカテゴリー全て共通の広告を貼ります。

カテゴリーIDを調べる

分岐するためのカテゴリーIDを調べるため、Wordpress管理画面からカテゴリーページに移動します。

Wordpress管理画面でカテゴリーを選択している状態のスクリーンショット

任意のカテゴリーの「編集」のテキストリンクにマウスオーバーすると、画面の一番下に長いリンクが表示されます。

Wordpressカテゴリーページで編集を選択している状態のスクリーンショット

その中にID=○○と数字が入っていますので、それがそのカテゴリーのIDとなります。これをamazon-item-pc.phpとamazon-item.phpそれぞれの「カテゴリーID」の部分に入れてください。

single.phpでテンプレートファイルを読み込む

single.phpのアマゾン広告を表示したいところに以下のコードを貼り付けます。

//アマゾン商品
<?php if (is_mobile()) :?>
<?php get_template_part( 'amazon-item' ); ?>
<?php else: ?>
<?php get_template_part( 'amazon-item-pc' ); ?>
<?php endif; ?>

is_mobile関数で分岐し、スマホならamazon-item.php、PCならamazon-item-pc.phpを読み込みます

実際の表示

ここまでカスタマイズしていただくと以下のような表示となります。

Wordpress記事下にアマゾンリンクを貼った状態のスクリーンショット

見出しのアイコンフォントはFont Awesomeを使っています。

こちらで解説しているCSSを使った方法ではなく、タグをそれぞれのh4の前に直接入れています。

以上、「カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する」という記事をお届けしました。

-WordPress
-

この記事のタイトルとURLをコピーする
カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷...

cannot-modify-header-information-thumbnail

WordPressで”Cannot modify header information”の警告が出たときの解決方法

WordPressで"Cannot modify header information"の警告が出たときの解決方法を紹介します。

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。 目次Font …

stinger6-logo-use-google-web-fonts-thumbnail

WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法

STINGER8のタイトルロゴをGoogle Web Fontsを使ってカスタマイズする方法のご紹介します。

affinger4-hukidashi-thumbnail

WordPressで会話風ふきだしを表示させるCSSカスタマイズ

AFFINGER4に実装されている会話風ふきだし機能。あれってすごく便利そうですよね!この記事ではWordPres...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい