Lognote

整体師によるお役立ち情報ブログ

custom-field-affiliate-banner-thumbnail

カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法

2017-03-14

今回はWordPressのカスタムフィールドを活用して記事下の広告エリアをカスタマイズする方法を紹介します。

カスタマイズの経緯

私はこれまで広告コードをテーマファイルにそのまま記入していました。そうすると全ページに広告が載ってくれるため非常に便利なのですが、カメラの記事にレンタルサーバーの広告が載ってしまったりしてしまいます。

つまり、訪問者に対しての広告の最適化ができていない状態でした。これではせっかくの広告もただの飾り。むしろ邪魔なものです。

訪問者に対して興味のある広告を自由に選択して表示できるようにしたい!

そんな思いでおこなったのが今回のカスタマイズです。

カスタムフィールドを簡単に実装できるプラグイン「Custom Field Template」

プラグインは「Custom Field Template」を使用します。

custom-field-affiliate-banner-03

記事下の広告エリアを有効に使おう!

最終完成イメージ

custom-field-affiliate-banner-01

最終的にはこのような表示になり、記事ごとに好きなAffiliate広告とAmazon商品を貼れるようにします。

分岐コードを使ってスマホ閲覧時は左のアドセンスのみが表示されます。PC閲覧時は横並びで左がアドセンス、右がAffiliate広告、さらにその下にAmazon商品が表示されます。

custom-field-affiliate-banner-02

毎回の記事投稿時は記事投稿画面のカスタムフィールドにそれぞれ1つずつコードを記入するだけです。簡単ですね!

これで記事ごとにニーズに合った広告を選択して表示できるというわけです。

もし、適当なアフィリエイト商品がないときはアドセンスコードを入れておけばいいので、無駄なくスペースを使えます。

custom-field-affiliate-banner-04

プラグインをインストールして有効化したら、管理画面から設定 ⇒ カスタムフィールドテンプレートと進みます。

カスタムフィールドテンプレートオプション

まずはどんな項目を記事下に配置するかのテンプレートを作成します。例えば今回の場合はAffiliate広告Amazon商品という2つの項目を記入します。

custom-field-affiliate-banner-05

◆入力テキスト(コピペしてください)

[Affiliate広告]
type =textarea

[Amazon商品]
type =textarea

[](角括弧)で囲った文字はtextareaに埋め込んだ広告コードを呼び出す役割をします。

custom-field-affiliate-banner-06

少し下にスクロールし、赤枠の部分をクリックするとコード入力フォームが開きます。

custom-field-affiliate-banner-07

PHPを使うので下のチェックをしてください。

◆入力テキスト(コピペしてください)

<?php if(is_mobile()) { //モバイルの場合?>
    <div style="padding-top:10px;">
        <?php get_template_part( 'st-smartad' ); ?>
    </div>
<?php } else { //PCの場合?>
    <div style="padding:20px 0px;">
        <div id="adsense-kijishita">
            <script>document.write('<p style="color:#666; margin:auto; width:640px; font-size: 13px; text-align: center;">スポンサードリンク<p>');</script>
        <div id="adsense-left">
            <?php get_template_part('ad'); ?>             
        </div>
        <div id="adsense-right">
            [Affiliate広告]
        </div>
    </div>
<?php } ?>

<h4>オススメ商品はこちら!</h4>
[Amazon商品]

ショートコードを記事内に埋め込んだ時に呼び出されるコードです。

このコードはSTINGER7を元に作成したものとなっています。STINGER以外のテーマを使用している場合は、3行目と10行目のテンプレートコード部分にアドセンスコードを直接埋め込むか各自テーマウィジェットのテンプレートコードを記述してください。

h4見出しは好きなように変更してください。

PC閲覧時の広告を横並びにするCSS

#adsense-kijishita {
    margin: 0 auto 10px;
    padding: 5px 0px;
    overflow: visible;
}
#adsense-left {
    float: left;
    margin: 0 12px 0;
    padding: 0;
}
#adsense-right { padding: 0 }
#adsense-kijishita:after {
    content: "";
    display: block;
    clear: both;
}
ちなみに広告サイズは300×250を想定してカスタマイズしていますので、それ以外のサイズは表示が崩れます。

記事の一番下には以下のようにショートコードを忘れずに記述してください。これがないとカスタムフィールドを保存しても記事に反映されなくなります。

amazon-fraud-09

formatの後の数字はカスタムフィールドテンプレートオプションで作成した際の番号です。

Amazonアソシエイトはカエレバ・ヨメレバを使用

Amazonアソシエイトはブックマークレット カエレバを使用しています。

使い方についてはこちらのサイトがとてもわかりやすかったです。

カエレバ・ヨメレバのカスタマイズCSS

私の環境下でのCSSを載せておきます細かい部分は調整してください。

.booklink-box,
.kaerebalink-box {
    width: device-width;
    margin: 1em 0 1em;
    padding: 5%;
    border: double #d2d7e6;
    overflow: hidden;
    font-size: small;
    border-radius: 2px;
}
.booklink-image,
.kaerebalink-image { margin: 0 0 15px 0; }
.booklink-image img,
.kaerebalink-image img {
    display: block;
    margin: 0 auto;
    text-align: center;
}
.booklink-info,
.kaerebalink-info {
    text-align: center;
    overflow: hidden;
}
.booklink-name,
.kaerebalink-name {
    font-size: 16px;
    margin-bottom: 14px;
}
.booklink-powered-date,
.kaerebalink-powered-date {
    font-size: 8pt;
      margin-top: 5px;
}
.booklink-powered-date,
.kaerebalink-detail { margin-bottom: 5px; }
.booklink-link2,
.kaerebalink-link1 { margin-top: 10px; }
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom {
    width: 90%;
    height: 15px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    margin: 0  auto 5px auto;
    padding: 10px 0px;
    text-align: center;
}
.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkkindle:hover,
.shoplinkyahoo:hover {
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color: #f6f6f6;
}
.shoplinkamazon:active,
.shoplinkrakuten:active,
.shoplinkkindle:active,
.shoplinkyahoo:active {
    position: relative;
    top: 1px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a {
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-weight: 800;
    text-shadow: 1px 1px 1px #dcdcdc;
    font-size: 12px;
}
.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkyahoo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover { background: none !important; }
.shoplinkamazon a { color: #FF9901; }
.shoplinkrakuten a { color: #c20004; }
.shoplinkkindle a { color: #007dcd; }
.shoplinkyahoo a { color: #7b0099; }
.booklink-footer { clear: left; }

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) { 
.booklink-box,
.kaerebalink-box {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
}
.booklink-image,
.kaerebalink-image {
    margin: 0 15px 0 0;
    float: left;
}
.booklink-info,
.kaerebalink-info {
    margin: 0;
    text-align: left;
}
.booklink-name,
.kaerebalink-name {
    margin-bottom: 5px;
    font-size: 14px;
}
.booklink-link2,
.kaerebalink-link1 { margin-top: 10px }
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom {
    float: left;
    width: 48%;
    margin: 3px 2px 0 auto;
    padding: 8px 1px;
}
}
このCSSデザインを使う場合はamazlet風-2を使用してください。

アフィリエイト広告の掲載期間が終わってしまったら

ここでちょっと心配なのは、アフィリエイト掲載期間が終わってしまった場合です。一つ一つの記事を開いて広告を貼り直すとなると想像しただけで怖いです。

大丈夫です! そんな心配もご安心ください!

カスタムフィールドの一括置換ができるプラグインがあります。そのあたりもWordPressの特権ですよね。

カスタムフィールドに記入した値をカテゴリーごと一括置換するプラグイン「Custom Field Bulk Editor」

プラグインは「Custom Field Bulk Editor」を使用します。

custom-field-affiliate-banner-10

custom-field-affiliate-banner-11

プラグインをインストールして有効化したら、管理画面から投稿 ⇒ Bulk Edit Fieldsと進みます。

custom-field-affiliate-banner-12

コードを置換したいカテゴリーを選択し、Applyをクリックします。

custom-field-affiliate-banner-13

対応したカテゴリー一覧が表示されますので、その中からさらに希望の記事をチェックします。今回はWordPressカテゴリーのすべての記事にチェックをしています。

custom-field-affiliate-banner-14

下にスクロールするとSet Custom Field Values For Checkedの項目がありますので、Custom Field NameにAffiliate広告、Amazon商品と記入し、右の値に広告コードを記入します。

すべての記入が終わったら、下のSave Custom Fieldsをクリックすると一瞬で一括置換・挿入されます。念のため記事に広告が挿入されているか確認してみてください。

まとめ

今回紹介した2つのプラグインを使ってカスタマイズをしたところ、アフィリエイト広告管理がめちゃくちゃ便利になって感動してしまいました。

記事本文に直接コードを入れてしまうと、あとで編集したいときに探すのが面倒です。それに比べて記事編集ページで広告のみパッと編集できるのはカスタムフィールドの魅力ですよね。

さらに置換も一発でできるのは、記事をこれからどんどん増やしていく上でのメリットにもなります。

「いいじゃんこれ!」と思っていただけた方は是非導入してみてくださいね!

オススメ商品はこちら!

-WordPress, アフィリエイト
-,

ヤマカワ (@lognotebiz) のヒトコト
ショートコードは記事下でなくても好きなところに配置できます。記事中にアドセンスを入れるショートコードを作ったりするのにも重宝しますね!
この記事のタイトルとURLをコピーする
カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

cannot-modify-header-information-thumbnail

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

WordPressテーマの制作中、管理画面のJetpackメニューの部分に Warning:Cannot modify header information こ …

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

無料SSLサービスに引き続き、エックスサーバーがまたやってくれました! なんと、あの有名な日本語Webフォントのモリサワフォントを無料でWebサイトに利用できる …

iphone-icon-black-thumbnail

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分が黒くなってしまうというデメリットがあります。 そ …

mouse-cursor-zoom-thumbnail

Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法

ふわっと画像を拡大させるエフェクトが実装できるLightbox。 WordPressでは、専門知識がない方でも簡単にLightbox導入できるプラグインが豊富で …

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようになりました。 グーグル推薦SEOに有効な画像altタ …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

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