PCサイトとスマホサイトでは、横幅が違います。
例えば、300×250pxのバナー広告の場合、PCサイトでは横に2個、スマホサイトでは1個だけ表示したい場合、どのようにすれば良いのでしょうか？
Wordpressで、プラグインを使うことなく、PHPで広告を切り替える方法をご紹介致します。

投稿記事の広告を切り替える

●考え方
●functions.php
●single.php

考え方

サイトの横幅で広告の切替ができるのが理想ですが、今回はデバイスで広告を切り替える方法をご紹介致します。

デバイスで広告を切り替える為、PCサイトで幅を狭めると、300×250pxのバナー広告が上下に2個並ぶという現象が生じることがありますが、通常はあまりないのではないでしょうか？

完成図は以下です。
バナーをクリックするとリンク先に飛びます。

PCからだとバナー広告が横に2個、スマホからだと1個表示されているはずです。
では表示方法を解説致します。

functions.php

デバイスによって、表示を変えるには、以下のコードをfunctions.phpに追加します。
賢威テンプレートをご使用の場合等、「子テーマ」がある場合は、「子テーマ」のfunctions.phpにコードを追加します。

/* デバイスで広告切替 */
function is_mobile(){
$useragents = array(
‘iPhone’, // iPhone
‘iPod’, // iPod touch
‘Android’, // 1.5+ Android
‘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’]);
}

single.php

次に「親テーマ」のsingle.phpに以下のコードを追加。

挿入コード

<?php if ( wp_is_mobile() ) : ?>
<!– モバイル用広告コード300×250 –>
</div>
<?php else: ?>
<div class=”ad”>
<div class=”adleft”>
<!– PC用広告コード300×250 –>
</div>
<div class=”adright”>
<!– PC用広告コード300×250 –>
</div>
</div>
<?php endif; ?>

挿入場所

以上のコードを挿入する場所ですが、「賢威」で記事下に挿入する場合は、「親テーマ」にあるsingle.phpの以下のソースの直前です。

 </div>
<!–article-body–>

CSS

デザインは、「カスタマイズ」に以下のCSSを追加。

.ad{
text-align:center;
margin:1em 0;
}

.adleft, .adright{
display:inline-block;
padding:0.25em;
}

以上は私のやり方（一例）なので、divのプロパティ（class名）を何にするか、デザイン（marginやpaddingの値）はどうするか等はご自分で調整して下さい。

尚、functions.phpやsingle.phpを編集する場合は、予めバックアップを取ってから行うのが賢明です。何か不具合が生じた場合、元に戻せます。

ショートコードで広告を切り替える

上記では、記事下に広告を挿入するという想定でやり方をご紹介しました。
但し、当記事では、記事下ではなく、既に記事の途中で広告が表示されています。

ショートコードを使うと、投稿記事だけでなく、固定ページの好きな場所に広告を表示することが可能です。
ショートコードを使うにはプラグインを利用します。

Post Snippets

Post Snippetsというプラグインです。
ここでは詳しい解説は省略しますが、簡単に広告管理が出来る便利なプラグインです。

但し、前述のPHPコードをPost Snippetsに貼り付けるだけでは、広告が表示しません。
以下の2点の設定が必要です。

PHPコードを加工

上記のPHPコードには頭に「<?php」、最後に「?>」が付いていますが、Post Snippetsに貼る時にはこれを除いた残りのコードを貼ります。

チェック項目

Post Snippetsは通常、①「Shortcode」にチェックを入れますが、PHPコードの場合は、それにプラスして②「PHP Code」にもチェックを入れます。

①「Shortcode」②「PHP Code」の両方にチェックを入れないと、広告は表示しませんので、ご注意下さい。

ショートコードを任意の場所に貼る

後は、投稿記事だけでなく、固定ページの好きな場所にショートコードを貼るだけで広告を広告を表示することが可能です。

尚、当記事では、300×250pxのバナー広告を想定してやり方を説明してきましたが、当記事では記事下等にランダムに広告を表示しています。
広告をランダムに表示する方法については、別記事でアップの予定です。