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

2017年3月14日 2023年2月1日
WordPress カスタムフィールド, プラグイン不要

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

カスタマイズの経緯

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

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

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

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

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

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

Custom Field Template — WordPress Plugins

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

最終完成イメージ

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

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

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

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

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

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

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

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

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

[Affiliate広告]
type =textarea

[Amazon商品]
type =textarea

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

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

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を想定してカスタマイズしていますので、それ以外のサイズは表示が崩れます。

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

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

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

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

商品紹介ブログパーツカエレバ

カエレバをブログに設置する方法 | vdeep

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

カエレバ・ヨメレバのカスタマイズ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を使用してください。