WordPressの無料高品質テーマ「Sparkling」にGoogleAdsenseを入れた

「シンプル」「レスポンシブ」「ワンカラム or 2カラム」。この辺りを条件にWordpressのテーマをお探しの方は非常に多いのではないかと思う。私もこれまで前述の条件に沿った、数多くのテーマを試してきましたのだけれど、ようやく今使っているSparklingに落ち着いた。理由はいくつかあるけれど、特に気に入っているのはカスタマイズのしやすさ（とはいえほぼノンカスタマイズだけど、、）と、無駄な装飾のない高品質なデザイン。そんなSparklingに、GoogleAdsenseのレクタングルバナーを入れたので備忘録として以下に書き示しておく。

 
【やったこと】
→ WordPressのテーマ「Sparkling」にGoogleAdsenseを表示させる
→ PC・スマホでGoogleAdsenseバナーを出し分けて表示させる
→ PC・スマホのCSSをそれぞれ調整する
 

まずはGoogleAdsenseのレクタングルバナーを右カラムに表示させるため「sidebar.php」に以下のコードを追加。

[code language=”php”]
<?php if (wp_is_mobile()): ?>
<div class="sp-adsense">
/* ここにSP用GoogleAdsenseのコードを追加 */
</div>
<?php else: ?>
<div class="pc-adsense">
/* ここにPC用GoogleAdsenseのコードを追加 */
</div>
<?php endif; ?>
[/code]

WordPressの条件分岐タグを使用し、スマホからのアクセスにはSP用GoogleAdsenseを表示させ、それ以外はPC用を表示させた。その際、それぞれにクラフを振ることでデバイス毎のスタイル調整が可能となったので「style.css」には以下のコードを追加。

[code language=”css”]
.pc-adsense {
padding: 12px 12px 12px 12px;
margin-bottom: 25px;
background-color: #FFF;
text-align: center;
}

.sp-adsense {
margin-bottom: 10px;
}
[/code]

PC閲覧時の右カラムはデフォルトで360pxで設定されているのでレクタングルバナー（幅336px）を表示させる際、違和感のない表示と知るためbackgroundを白にした。スマホ閲覧時は逆に背景が不要となるのでCSSで調整している。