スマホだけ表示させたい!とか、
PCだけ表示させたいコンテンツや広告ってありますよね。

スマホしか対応してない広告をPCユーザーに見せても成果につながらないじゃないですか。。。

そんな時に使えるコードをご紹介します。WordPressとHTMLサイト、
両方のバージョンをご紹介します。

WordPressでスマホとPCの広告を分ける

テンプレートに直接広告タグを貼る場合

single.phpとか、
テンプレートファイルに直接コードを書く場合、

<?php if(is_mobile()): ?>
★スマホのみに表示させる広告★
<?php else: ?>
★PCのみに表示させる広告★
<?php endif; ?>

↑ このように書けばOK!

スマホ・PCと表示させる広告を分けるのではなく、
スマホのみに表示させたい広告がある場合以下のように書きます。

<?php if(is_mobile()): ?>
★スマホのみに表示させる広告★
<?php endif; ?>

逆に、PCのみに表示させたい広告がある場合以下のように書きます。

<?php if(!is_mobile()): ?>
★PCのみに表示させる広告★
<?php endif; ?>

ブログ投稿内に広告を貼りたい場合

まずはfunctions.phpファイルに

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-mieru', 'pccontents'); add_shortcode('sp-mieru', 'spcontents');

↑ このように書いてショートコードを作成!

記事投稿画面で、

[pc-mieru]★スマホのみに表示させる広告★[/pc-mieru]
 [sp-mieru]★PCのみに表示させる広告★[/sp-mieru]

↑ こんな感じに書けばOK!

参考サイト様:【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法

HTMLサイトでスマホとPCの広告を分ける

HTMLサイトの場合、ちょっと荒業っぽいやり方になります(-`ω´-;A

2通りのやり方をご紹介しますので、お好きな方をお使いください。

JavascriptでスマホとPCの広告を分ける

HTMLファイルに以下のJavascriptコードを書けばOK!

<script type="text/javascript">
var getDevice = (function(){
	var ua = navigator.userAgent;
	if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
		document.write('★スマホのみに表示させる広告★');
	}else{
		document.write('★PCのみに表示させる広告★');
	}
})();
</script>

注意する所は、貼り付ける広告タグに改行が入っていると、
エラーになって、ちゃんと表示されません( ;∀;)

改行を削除されるか、改行前に \ を入れてください。


CSSでスマホとPCの広告を分ける

まずはCSSファイルに

.sp-mieru {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc-mieru {
		display: none;
	}
	.sp-mieru {
		display: block;
	}
}

↑ このように書いて・・・・

HTMLファイルに

<div class="pc-mieru">★PCのみに表示させる広告★</div>
<div class="sp-mieru">★スマホのみに表示させる広告★</div>

↑ こんな感じに書けばOK!