Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年5月7日 WordPress

【WordPress】PCとスマートフォンでAdSenseの種類を切り替える方法|レスポンシブデザインの必須テクニック!


resAd当ブログもさっき実装しました。
ブログにレスポンシブレイアウトを採用していると、スマートフォンからの閲覧時に横幅の大きいAdSense広告が画面をはみ出してしまいます。 CSSを使って隠したり縮小したりすることも出来ますが、これは規約違反になるのでアウト。管理人の@LeoTiger_7は危うくやりかけました。

そこで活躍するのが、WordPressに備わっている便利な関数です。いいね!

AdSenseを切り替えてみる

WordPressで使える関数の中に、wp_is_mobileというものがあります。 この関数は閲覧者がモバイル端末からアクセスしているかどうかを判別してくれるという便利なもので、これをif文と組み合わせれば、スマホからのアクセスならスマホ用のコードを、PCからのアクセスならPC用のコードを吐き出すようにすることが可能です。

これならCSSのdisplay:noneのように隠している訳ではないので、規約的にもOKですね!

<?php if(wp_is_mobile()) { ?>
<!--ここにスマートフォン用のAdSenseコードを貼り付ける-->
<?php } else { ?>
<!--ここにPC用のAdSenseコードを貼り付ける-->
<?php } ?>
記述はこんな感じになります。後は上記のコードをAdSenseを載せたい場所に貼り付けるだけです。
この機能はAdSenseに限らず、スマホ用のレイアウトを組み立てる際に色々と応用できそうなので、WordPress使いの人は要チェック!
関連するかもしれない記事