スマホとPCに別々の広告を表示させるJavascript＆WPテンプレートタグ
スマホだけ表示させたい！とか、
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
２通りのやり方をご紹介しますので、お好きな方をお使いください。
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！