記事中広告をスマホとタブレットとPCで切り替えて出力する方法

2015/04/29 2018/04/22

このブログでは、アフィリエイト広告を利用しています。

本エントリーの目次

1 事前準備
2 設定方法
3 広告を変えたくなったら、どうするの？
4 スマホとPCは同じ広告コードを使いたいんだけど…
5 なぜ、テンプレートを二重に経由させるの？
6 CTRが低いとお悩みの方は、記事中広告を試してみると良いのかも

現在このブログでは、他の掲載位置に比べ、CTRが高いため、記事中に広告を掲載しています。
またスマホ用の広告とタブレット＆PC用の広告は、異なる広告出力コードを使用しています。

そこで今回は、ショートコードを使って挿入した記事中広告を、スマホとタブレットとPCで、切り替えて出力する方法をご紹介します！

事前準備

今回の処理を実装するために、以下の事前準備が必要です。

はじめに

本エントリーの内容は、以前にご紹介したスマホとタブレット、PCの分岐を作る方法とショートコードとテンプレートを使って、記事中に広告を出す方法の2つを組み合わせて実現しています。

そのためあらかじめ上記2エントリーを先にご覧いただくと、理解が容易になるはず。
もしよろしければ、併せてご覧ください。

is_mobileメソッドの準備

今回ご紹介する方法では、is_mobileメソッドを使用します。

はるるがこのブログに使用しているテーマ、STINGER5であれば、あらかじめ宣言されているため、特に作業は必要ありません。

ですがテーマがSTINGER5でなく、is_mobileメソッドが宣言されていない場合は、こちらを参考にis_mobileメソッドを宣言してください。

設定方法

さて事前準備が完了したので、肝心の設定方法をご紹介します。

広告出力コードテンプレートファイルの準備

まず、広告出力コードを保持しておくためのテンプレートファイルを、3つ作成します。
今回は以下の3つのファイル名で用意し、それぞれに広告出力用のコードを記載しておきます。

ad-template-sp.php
スマートフォン用の広告出力コードを保持しておくテンプレートファイル。
今回の例では、Google AdSenseのレスポンシブ広告のコードを保存しておいた、ということにしておきます。
ad-template-tablet.php
タブレット用の広告出力コードを保持しておくテンプレートファイル。
今回の例では、Google AdSenseの336×280のサイズの広告コードを保存しておいた、ということにしておきます。
ad-template-pc.php
PC用の広告出力コードを保持しておくテンプレートファイル。
今回の例では、Amazonアソシエイトの広告コードを保存しておいた、ということに。

作成が完了したら、上記3つのファイルをテーマフォルダ、または子テーマフォルダにFTPSなどを使用して、アップロードします。

広告出力コードテンプレート呼び出し用テンプレートファイルの準備

次に、先に作成した3つの広告出力コードテンプレートの呼び出し用のテンプレートファイルを、contents-ad.phpという名前で作成します。

その内容は以下のとおり。

<div class="contents-ad">
    <p>スポンサーリンク</p>
    <?php if(is_mobile()) { ?>
        <!-- スマホ -->
        <?php get_template_part('ad-template-sp');?>
    <?php } else { ?>  
        <?php if ( wp_is_mobile() ) { ?>
            <!-- タブレット -->
            <?php get_template_part('ad-template-tablet');?>
        <?php }else{ ?>
            <!-- PC -->
            <?php get_template_part('ad-template-pc');?>
        <?php } ?>
    <?php } ?>
</div>

<p>スポンサーリンク</p>

<?php if(is_mobile()) { ?>

<?php get_template_part('ad-template-sp');?>

<?php } else { ?>

<?php if ( wp_is_mobile() ) { ?>

<?php get_template_part('ad-template-tablet');?>

<?php }else{ ?>

<?php get_template_part('ad-template-pc');?>

<?php } ?>

</div>

作成が完了したら、このファイルをテーマフォルダ、または子テーマフォルダにFTPSなどを使用して、アップロードします。

functions.phpの編集

最後に子テーマフォルダ内(子テーマに用意していなければ、テーマ内の)のfunctions.phpに、以下の内容を追記します。

function showads() {
    if(is_single()){
        ob_start();
        get_template_part('contents-ad');
        return ob_get_clean();
    }else{
        return '';
    }
}
add_shortcode('adsense', 'showads');

function showads() {

if(is_single()){

ob_start();

get_template_part('contents-ad');

return ob_get_clean();

}else{

return '';

}

add_shortcode('adsense', 'showads');

以上で設定は完了。

後は記事中で［adsense］(→［］は本当は半角)と入力すればその場所に、アクセス元がスマホであればGoogle AdSenseのレスポンシブ広告を、タブレットであればGoogle AdSenseの336×280のサイズの広告を、PCであればAmazonアソシエイトの広告を表示するようになります。

尚、上記コードでは［adsense］と入力しても、固定ページなど、そのページが記事ページでない場合は、広告コードが出力されない(長さゼロの文字列を出力する)ようになっています。

これが不要である場合は、2行目の分岐処理を外してください。

広告を変えたくなったら、どうするの？

広告を変えたくなった場合は、スマホ用の広告であればad-template-sp.phpを、タブレット用の広告であればad-template-tablet.phpを、PC用の広告であればad-template-pc.php内の広告出力コードを変更するだけでOK！

そのため、変更も安全＆楽チン！

スマホとPCは同じ広告コードを使いたいんだけど…

こういった場合は、contents-ad.phpの分岐を修正するか、contents-ad.phpの5行目と12行目で読み込むテンプレートを同じファイルに変更することで可能です。

PHPに不慣れであれば、後者の方で修正した方が簡単なので、おすすめです。

なぜ、テンプレートを二重に経由させるの？

今回のこの手法はもちろん、functions.phpにベタ書きしても問題ありません。
では、なぜテンプレートを二重に経由して出力させているのか、というと。

以前にも少し触れましたが、広告出力コードをfunctions.phpを切り離すことによる、広告出力コードの修正の際のミスによるトラブルを未然に防ぐため、というのが1点。
もう1点は、functions.phpにプラットフォームの判別処理や、広告出力コードを入れることによる、showadsメソッドの肥大化を嫌ったためです。

どちらも、コードの修正ミスを未然に防ぐためではありますが、はるるの好みとも言えますね。

そのためテーマフォルダ内のファイルが増えるのが嫌だ！
という方は、functions.phpにベタ書きしても、もちろんOKです。

その場合は、ob_startやob_get_cleanメソッドによる、出力バッファリングが不要になります。

CTRが低いとお悩みの方は、記事中広告を試してみると良いのかも

記事中広告は、このブログでは他の掲載位置に比べ、明らかにCTRが高い傾向にあります。

これが全部のブログやwebサイトに当てはまる、とは思いません。
ですがもしCTRが低いとお悩みの場合は、記事中広告を試してみると良いのかも。

もしかしたら、大幅にCTRが上がるかもしれませんよ～。

前へ: ショートコード内でget_template_part()を使う場合は工夫が必要！
次へ: STINGER5のGoogle AdSenseのコード出力位置(ソースコードの場所)をまとめてみた

- WordPress, ブログ運営 STINGER5

ピックアップコンテンツ＆スポンサーリンク

前へ: ショートコード内でget_template_part()を使う場合は工夫が必要！
次へ: STINGER5のGoogle AdSenseのコード出力位置(ソースコードの場所)をまとめてみた