整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

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

custom-field-affiliate-banner-thumbnail

今回は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を載せておきます細かい部分は調整してください。

この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つのプラグインを使ってカスタマイズをしたところ、アフィリエイト広告管理がめちゃくちゃ便利になって感動してしまいました。

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

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

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

custom-field-affiliate-banner-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。