ワードプレス・賢威でサイドバーへアドセンスをきれいに挿入する



Googleアドセンスの広告ユニットについて

アドセンスの広告ユニットですが、カスタムサイズとか、変なサイズを指定すると、一気に表示率がさがり、空白が表示される確率が上がります。

空白の表示は非常にブサイクであり、収益も発生せず、踏んだり蹴ったりです。

表示率の高いアドセンス広告ユニットを選ぶ

表示率がぶっちぎりで高いのは300 × 250 のレクタングルです。

このレクタングルをサイドバーに挿入したいと思い、今回作業します。

サイドバーへのアドセンス広告ユニット挿入方法

まず、一番簡単なのがウィジェットのカスタムHTMLでの挿入

サイドバーへのアドセンス広告ユニット挿入方法

こんな感じでそのまま広告ユニットのコードを貼り付ければ、そのまま表示できます。

賢威8でのサイドバーのアドセンス

賢威8でのサイドバーのアドセンス

テーマ独自の問題発生。

もしかしたら、こうなるテーマの方が多いのかもしれませんが、バリバリ枠はみ出してますし、下の位置とズレまくってますし、ブサイクなことこの上ない。

広告がはみ出す原因

現在設定中のテーマは「賢威8」

確認したところ、サイドバーのカラムの親要素は横幅300pxですので、間違いなくこの広告がきれいにすっぽり収まります。

広告がはみ出す原因

ただ先ほどの画像確認してもらうと、変な白い枠が出来ているのが確認できると思います。

ウィジェットのカスタムHTMLで作成されたパーツは「枠を作った上で、中に任意のHTMLを表示させる」と言う仕様のようです。

はみ出すアドセンス広告の解決策

CSSで調整するという手もあるんですが、何分、他のパーツとの兼ね合いもあって、割と面倒。

ってことで、今回は直接挿入させる手法で解決します。

サイドバーの枠本体はテーマフォルダ直下のsidebar.php

サイドバーの枠本体はテーマフォルダ直下のsidebar.php

子テーマを使っている場合は通常ディフォルトではないファイルと思いますので、親テーマからコピーして子テーマフォルダ内に引っ張ってきます。

sidebar.phpの編集

賢威8を見本に進めますが、お使いのテーマでも似たような感じで編集可能だと思います。

<?php

if ( ! is_active_sidebar( 'sidebar-1' ) || ! is_keni_layout_sidebar() ) {
	return;
}
?>

<aside id="secondary" class="keni-sub">
        <!-- ここからアドセンスの広告ユニットを貼り付け -->
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle"
	     style="display:inline-block;width:300px;height:250px"
	     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
	     data-ad-slot="xxxxxxxxxxx"></ins>
	<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
	</script>
        <!-- ここまでアドセンスの広告ユニットを貼り付け -->
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

結構sidebar.phpはシンプルです。

上記コードの中では、

<?php dynamic_sidebar( 'sidebar-1' ); ?>

が、ウィジェットで設定した各種パーツを読み込む関数ですので、その直上にアドセンスコードを貼り付けます。

完成系

ちょっと下のパーツとの段差が気になりますが、とりあえずあの超絶ブサイクな状態は回避できました。

<追記>その後CSSで調整して、段差を取り払いました。のっぺりしててイイ感じです。