WordPressでスマホとPCの表示を出しわけたい！！
どうも、Linです。伊豆お茶、入れてみました。
先日、「本当に稼げるGoogle AdSense」という本を読んでいて、
自分が圧倒的にアドセンスのポリシーに違反している
ということが判明しました笑
PC とスマホで同じ広告を表示していたので、記事下の2枚のレクタングルの広告がスマホの場合だと縦に連なってしまっていたのです。
これではスマホ画面いっぱいを尽くしてしまうため、ユーザー体験を阻害するためにポリシー違反。
この不具合を解消するためにも、PCとスマホで広告表示を出し分ける必要があります。
そんなニッチな方法を探していたところ、次の2つの神記事に出会いました↓
その結果、スマホと PC の表示の出し分け方法は次の2つがあることが判明しました。
- 記事外のPHPファイルでだし分ける方法
- 記事内のコンテンツとしてだし分ける方法
記事外のPHPファイルを編集してだし分ける方法
1つ目が記事外の PHP ファイルを編集して出し分ける方法です。
header.phpや、single-post.phpなどのヘッダー部分や投稿記事などを表示するためのPHPファイルを編集していきますよ。
スマホのみに表示
スマホのみで表示させたい場合は、次のPHP のコードを挿入するといいでしょう。
|
1 2 3 |
<?php if (wp_is_mobile()) :?> コード <?php endif; ?> |
この条件分岐の中に挟んだコードはスマホのみで表示されるというわけですね。
たとえば、スマホのみに表示させたいアドセンス広告をPHPファイルに貼り付けたい場合は次のようなコードをPHPファイルに挿入すればいいのですね。
|
1 2 3 |
<?php if (wp_is_mobile()) :?> アドセンス広告のコード <?php endif; ?> |
「wp_is_mobile」でデバイスの真偽値を取れるなんて便利すぎるぜWordPress！
PCのみに表示
逆に、PC ののみ表示させたい場合は、こちらの if 文の条件を「!」で否定すればいいわけですから、次のようになります。
|
1 2 3 |
<?php if (!wp_is_mobile()) :?> コード <?php endif; ?> |
WordPressの記事内でPCとスマホの表示をだし分ける方法
続いて記事内でコードを出し分ける方法です。
先ほどの方法はPHP コードの編集であるため、こいつを記事内に記述しても無意味。
PHPコードがそのまま文字として表示されてしまうことになります。
そこで、記事内でPCとスマホの表示を出しわけたい場合は、
ショートコードを使う方法
を採用することをおすすめします
Step1.「functions.php」を編集する
functions.phpに次のようなコードを追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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']); } function pccontents( $atts, $content = null ) { if(is_mobile()) { return ''; } else { return '' . $content . ''; } } function spcontents( $atts, $content = null ) { if(is_mobile()) { return '' . $content . ''; } else { return ''; } } add_shortcode('pc-only', 'pccontents'); add_shortcode('mobile-only', 'spcontents'); |
Step2. ショートコードで囲う
設定したショートコード記事内に挿入します。
先ほどの例ですと、スマホのみに表示したい場合は、
|
1 |
[mobile-only][/mobile-only] |
PCのみに表示させたい場合は、
|
1 |
[pc-only][/pc-only] |
で内容を囲えばいいのです。
たとえば、とあるアドセンスのコードをPCのみで表示させたい場合は、
|
1 2 3 |
[pc-only] アドセンスのコード [/pc-only] |
と記事内に挿入すればいいことになりますね。
これらのショートコードの名前を変更したい場合は、先ほど追加したコードの、
|
1 2 |
add_shortcode('pc-only', 'pccontents'); add_shortcode('mobile-only', 'spcontents'); |
の1つ目の引数の名前を変更すればオッケーですね。
この方法は記事内に書き込む他にも、
Quick AdSenseというアドセンス広告を導入するプラグイン
などにも使えます。
なぜなら、Quick AdSense 記事内にコードを挿入するようになっているので、PHPコードは機能しないからです。
ぼく自身、このプラグインでアドセンスを挿入しているサイトがあって苦戦していたのですが、無事に出しわけが完了しました。
Quick Adsenseを利用している方はこちらの方法を使ってみてくださいね。
さあ、WordPressの表示をPCとスマホで出し分けしよう！
以上が、WordPressでPCとスマホの表示を出し分ける方法でした。
これならアドセンス広告のポリシーを守れるだけでなく、画面が大きいPCには大きめの広告を堂々と表示できるようになるので収益性も向上するでしょう。
今回はアドセンスの広告の出し分け方法ということで紹介してきましたが、これらの方法はその他の用途にも使えます。
例えばスマホユーザーだけに表示させたい sidebarの要素や、メッセージなどをデバイスごとに出し分けることが可能です。
WordPressで PC とスマホ切り替えてコンテンツを表示させていきましょう。
それでは！
Lin
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている
