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に以下のコードを追加。
挿入コード
<!– モバイル用広告コード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の以下のソースの直前です。
<!–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のバナー広告を想定してやり方を説明してきましたが、当記事では記事下等にランダムに広告を表示しています。
広告をランダムに表示する方法については、別記事でアップの予定です。
