アドセンスに使える！WordPressでスマホとPCの表示を出しわける2つの方法

WordPressでスマホとPCの表示を出しわけたい！！

どうも、Linです。伊豆お茶、入れてみました。

先日、「本当に稼げるGoogle AdSense」という本を読んでいて、

元Google AdSense担当が教える本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60

posted with ヨメレバ

石田健介,河井大志ソーテック社 2018-01-20

Amazon

Kindle

楽天ブックス

自分が圧倒的にアドセンスのポリシーに違反している

ということが判明しました笑

PC とスマホで同じ広告を表示していたので、記事下の2枚のレクタングルの広告がスマホの場合だと縦に連なってしまっていたのです。

これではスマホ画面いっぱいを尽くしてしまうため、ユーザー体験を阻害するためにポリシー違反。

この不具合を解消するためにも、PCとスマホで広告表示を出し分ける必要があります。

そんなニッチな方法を探していたところ、次の2つの神記事に出会いました↓

アフィリエイトで稼ぐ方法を全部話そうと思う

WordPressにアドセンス広告を設置する方法【図解】

https://affiliate150.com/adsense-for-wordpress

今回は効果的なGoogleアドセンスの貼り付け位置と貼り方を解説していきます。アドセンスの登録や審査が終わって広告コードの作成までできる前提で進めますが、まだ登録や審査、広告の作成方法や子テーマが分か

webdesign-ginou.com

QuickAdsenseで挿入するアドセンスコードをPCとスマホで切り替える方法 | SimpleSt...

http://webdesign-ginou.com/quick_ad_code

WordPressの記事内に自動でGoogleアドセンスのコードを挿入してくれる便利プラグイン「Quick Adsense」。当ブログでもありがたく使用させていただいております。本当に便利なのですがただひとつだけ不満があり、それが「ス

その結果、スマホと PC の表示の出し分け方法は次の2つがあることが判明しました。

記事外のPHPファイルでだし分ける方法
記事内のコンテンツとしてだし分ける方法

記事外のPHPファイルを編集してだし分ける方法

1つ目が記事外の PHP ファイルを編集して出し分ける方法です。

header.phpや、single-post.phpなどのヘッダー部分や投稿記事などを表示するためのPHPファイルを編集していきますよ。

スマホのみに表示

スマホのみで表示させたい場合は、次のPHP のコードを挿入するといいでしょう。

<?php if (wp_is_mobile()) :?>
コード
<?php endif; ?>

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

コード

<?php endif; ?>

この条件分岐の中に挟んだコードはスマホのみで表示されるというわけですね。

たとえば、スマホのみに表示させたいアドセンス広告をPHPファイルに貼り付けたい場合は次のようなコードをPHPファイルに挿入すればいいのですね。

<?php if (wp_is_mobile()) :?>
アドセンス広告のコード
<?php endif; ?>

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

アドセンス広告のコード

<?php endif; ?>

「wp_is_mobile」でデバイスの真偽値を取れるなんて便利すぎるぜWordPress！

PCのみに表示

逆に、PC ののみ表示させたい場合は、こちらの if 文の条件を「!」で否定すればいいわけですから、次のようになります。

<?php if (!wp_is_mobile()) :?>
コード
<?php endif; ?>

<?php if (!wp_is_mobile()) :?>

コード

<?php endif; ?>

WordPressの記事内でPCとスマホの表示をだし分ける方法

続いて記事内でコードを出し分ける方法です。

先ほどの方法はPHP コードの編集であるため、こいつを記事内に記述しても無意味。

PHPコードがそのまま文字として表示されてしまうことになります。

そこで、記事内でPCとスマホの表示を出しわけたい場合は、

ショートコードを使う方法

を採用することをおすすめします

Step1.「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']);
}
 
 
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');

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');

functions.phpの編集は一歩間違うとサイトが表示できなくなる大惨事が起きますので、バックアップはとっておきましょう。

Step2. ショートコードで囲う

設定したショートコード記事内に挿入します。

先ほどの例ですと、スマホのみに表示したい場合は、

[mobile-only][/mobile-only]

1	[mobile-only][/mobile-only]

PCのみに表示させたい場合は、

[pc-only][/pc-only]

1	[pc-only][/pc-only]

で内容を囲えばいいのです。

たとえば、とあるアドセンスのコードをPCのみで表示させたい場合は、

[pc-only]
アドセンスのコード
[/pc-only]

[pc-only]

アドセンスのコード

[/pc-only]

と記事内に挿入すればいいことになりますね。

これらのショートコードの名前を変更したい場合は、先ほど追加したコードの、

add_shortcode('pc-only', 'pccontents');
add_shortcode('mobile-only', 'spcontents');

1 2	add_shortcode('pc-only', 'pccontents'); add_shortcode('mobile-only', 'spcontents');

の1つ目の引数の名前を変更すればオッケーですね。

この方法は記事内に書き込む他にも、

Quick AdSenseというアドセンス広告を導入するプラグイン

などにも使えます。

WordPress.org

Quick Adsense

https://ja.wordpress.org/plugins/quick-adsense/

Quick Adsense offers a quicker & flexible way to insert Google Adsense or any Ads code into a blog post.

なぜなら、Quick AdSense 記事内にコードを挿入するようになっているので、PHPコードは機能しないからです。

ぼく自身、このプラグインでアドセンスを挿入しているサイトがあって苦戦していたのですが、無事に出しわけが完了しました。

Quick Adsenseを利用している方はこちらの方法を使ってみてくださいね。

さあ、WordPressの表示をPCとスマホで出し分けしよう！

以上が、WordPressでPCとスマホの表示を出し分ける方法でした。

これならアドセンス広告のポリシーを守れるだけでなく、画面が大きいPCには大きめの広告を堂々と表示できるようになるので収益性も向上するでしょう。

今回はアドセンスの広告の出し分け方法ということで紹介してきましたが、これらの方法はその他の用途にも使えます。

例えばスマホユーザーだけに表示させたい sidebarの要素や、メッセージなどをデバイスごとに出し分けることが可能です。

WordPressで PC とスマホ切り替えてコンテンツを表示させていきましょう。

それでは！

Lin

飯橋凛（いいはしりん）

自称、学習系ブロガー。好きな映画は「メリーに首ったけ」。

学びを楽しくするために日々書いています。

このサイトでは、フリーランスで自由に生きるために役立つ情報を発信しています。

質問・ご意見・相談があればLINEまでどうぞ。

Pocket

アドセンスに使える！WordPressでスマホとPCの表示を出しわける2つの方法

WordPressでスマホとPCの表示を出しわけたい！！

記事外のPHPファイルを編集してだし分ける方法

スマホのみに表示

PCのみに表示

WordPressの記事内でPCとスマホの表示をだし分ける方法

Step1.「functions.php」を編集する

Step2. ショートコードで囲う

さあ、WordPressの表示をPCとスマホで出し分けしよう！

音生入力で楽にブログを書く技が満載！
ブログ音声入力術

コメントを残すコメントをキャンセル

電子書籍を出版しました

最新記事

カテゴリー

WordPressでスマホとPCの表示を出しわけたい！！

記事外のPHPファイルを編集してだし分ける方法

スマホのみに表示

PCのみに表示

WordPressの記事内でPCとスマホの表示をだし分ける方法

Step1.「functions.php」を編集する

Step2. ショートコードで囲う

さあ、WordPressの表示をPCとスマホで出し分けしよう！

おすすめ記事よかったらもう1記事どうぞ

【CSSメモ】勝負どころで使いたい！リンクボタンの作り方

コンテンツマーケティングに必須！SEO対策に便利なWebツール5選

WordPressの記事中にコピーしやすい文字を挿入する方法

【WordPress使い方】コメント欄のフォームを思うがままにカスタマイ…

「DNSルックアップでエラーが発生したため」でWordPressのサイト…

WordPressブログで「403 Forbidden」が表示されたとき…

1分でDONE！WordPress向けファビコンの作り方と設定方法

Kindle出版（KDP）の表紙・カバーを楽に作る方法〜イラレのテンプレ…

音生入力で楽にブログを書く技が満載！ ブログ音声入力術

コメントを残す コメントをキャンセル

電子書籍を出版しました

人気の投稿

最新記事

カテゴリー

音生入力で楽にブログを書く技が満載！
ブログ音声入力術

コメントを残すコメントをキャンセル