前回の記事で書いたWordPressのテーマ「TwentyTwelve」はレスポンシブ対応なので、Adsense広告の表示が結構難しい。
468*60といった幅が広めの広告を使っている場合、スマートフォン(私の場合はiPhone5)で広告が画面からはみだすならまだ良いが、広告の幅を基準としてメインコンテンツである記事が縮小表示されてしまっていた。
プラグインのWPtouch等でスマートフォン最適化をしているならそうした悩みも発生しないが、せっかくのレスポンシブ対応のテーマなのだから、できればレスポンシブで対応したい。
というわけで、調べつつレスポンシブ対応してみた。 ((つーか、GoogleはSEO的にレスポンシブを推奨しているのだから、Adsense広告もレスポンシブ対応にするべきだと思うのだが、いかがだろうか。ま、やり方は全然考えてないが。))
で、ここは面倒臭いが、PCとスマートフォンのAdsense広告を切り替える方法で対処することにした。
参考にしたのは以下のサイト。私の説明よりも10倍わかりやすく、情報量も多いので参考にされたし。
まずは、functions.phpに以下のコードを追加。
[sourcecode language=”php”]<br />
function is_mobile(){<br />
$useragents = array(<br />
‘iPhone’, // iPhone<br />
‘iPod’, // iPod touch<br />
‘Android’, // 1.5+ Android<br />
‘dream’, // Pre 1.5 Android<br />
‘CUPCAKE’, // 1.5+ Android<br />
‘blackberry9500’, // Storm<br />
‘blackberry9530’, // Storm<br />
‘blackberry9520’, // Storm v2<br />
‘blackberry9550’, // Storm v2<br />
‘blackberry9800’, // Torch<br />
‘webOS’, // Palm Pre Experimental<br />
‘incognito’, // Other iPhone browser<br />
‘webmate’ // Other iPhone browser<br />
);<br />
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;<br />
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);<br />
}<br />
[/sourcecode]
見ての通り、記載されている端末をモバイル(スマートフォン)と判定するコードになる。
ここに適切な情報を追加すれば、新しい端末(OS)にも対応できる。
で、テンプレートのAdsenseを表示したい箇所に、以下のコードを追加。
[sourcecode language=”php”]<br />
<?php if(is_mobile()) { ?><br />
/*【スマートフォン用のAdSenseコードを入れる】*/<br />
<?php } else { ?><br />
/*【PC用のAdSenseコードを入れる】*/<br />
<?php } ?><br />
[/sourcecode]
広告を表示したい位置はそれぞれ違うと思うので、参考程度になるが、私の場合はcontent.php(子テーマ)の以下の場所にコードを挿入している。
[sourcecode language=”php”]<br />
/*【この位置に入れている】*/</p>
<footer class="entry-meta">
<?php twentytwelve_entry_meta(); ?><br />
[/sourcecode]
ただし、このまま素直に入れると、indexページやアーカイブページ等、記事の一覧が表示されるページでAdsense広告がズラズラと並ぶ事態になるかと。
なので、記事ページだけ表示させるため、以下のコードを追加。
[sourcecode language=”php”]<br />
<?php if ( is_single() ) : ?><br />
/*【この位置にさっきのAdsense表示用のコードを入れてます】*/<br />
<?php endif; // is_single() ?><br />
[/sourcecode]
これでPCとモバイルで広告表示が切り替えられるようになる。
ちなみにこのブログでは、more(続きを読む)の後にもAdsense広告を入れているのだが、テーマファイルでの位置がわからなかったので、ここは引き続きプラグインのQuick Adsenseに任せることにした。content.phpの中にあると思うのだが。。。
では良いAdsenseライフを。