[WP] AdSense をブログ本文の手前に自力で差し込むためにテーマをカスタマイズ

前回のエントリでサムネイル設定をすることでブログのコンテンツを直す羽目になったことをご報告した @azur256 です。

前回予告しましたが、コンテンツの構成を変えたことによって AdSense の位置が気に入らなくなってしまったので、今回、この位置を変更することにしました。

今までのレイアウト

いままでは Maseter Post Advert というプラグインを使ってシングルページの時に「続きを読む」という表示をする <–!more> タグの部分に指定した AdSense コードを挿入してくれるプラグインを使っていました
WordPress › Master Post Advert « WordPress Plugins

ところがコンテンツのレイアウトを前回紹介した以下の構成にすると

シングルページで見た時の AdSense の位置がいま一つになるわけです。

AdSense の挿入位置を変えてみる

<!–more–>タグの位置に入れるわけにもいかず、一つ目の画像のしたいに入れる、というコードにすると画像の場所によって影響を受けてしまう。といっても AdSense のコードを毎回記事に埋め込むのも大変(忘れそう)なので、思いきってレイアウトを変えることにしました。

AdSense のコードを忍者おまとめボタンの直後に持ってくるように変更します。具体的には以下のようなイメージに。

タイトルから本文までの距離が長くなってしまうのが、まだ調整の余地があるところですが、ひとまずはこの構成でいってみようと思います。

レイアウト変更の方法

ここに持ってくるためのプラグインを探すのも面倒ですし、先日、忍者おまとめボタンをコードで追加したこともあるので、同じようにコードで差し込むことにします。

コードはいつものように子テーマの functons.php にフィルターフックで実装します。 AdSense のコードを変数に突っ込んでコンテンツの前に入れるだけ。
ちょっとだけ注意しなければならないのは、忍者おまとめボタンのコードとの順序です。忍者おまとめボタン → AdSense の順に表示したいので、AdSense のフィルターフックを忍者おまとめボタンのフィルターフックよりも前に実行されるように、先に記載します。逆にすると、AdSense が先に表示されます。

functions.php に記載したコードはこれ。

// AdSense Inner Contents Banner
if ( ! function_exists('add_adSense_banner')):
	function add_adSense_banner ( $content ) {
		if ( is_single() ) {
			
			$adSense_code = 'Sponsored Link:' . "<br />";
			$adSense_code = $adSense_code . '<center><table width = "470" hight = "62" bgcolor="#877"><tr><td><center>';
			$adSense_code = $adSense_code . '<script type="text/javascript"><!--' . "\n";
			$adSense_code = $adSense_code . 'google_ad_client = "ca-pub-nnnnnnnnnnnnnnnn";' . "\n";
			$adSense_code = $adSense_code . '/' . '* Inner_Banner *'.'/' . "\n";
			$adSense_code = $adSense_code . 'google_ad_slot = "nnnnnnnnnn";' . "\n";
			$adSense_code = $adSense_code . 'google_ad_width = 468;' . "\n";
			$adSense_code = $adSense_code . 'google_ad_height = 60;' . "\n";
			$adSense_code = $adSense_code . '/' . '/-->' . "\n";
			$adSense_code = $adSense_code . '</script>' . "\n";
			$adSense_code = $adSense_code . '<script type="text/javascript"' . "\n";
			$adSense_code = $adSense_code . 'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">' ."\n";
			$adSense_code = $adSense_code . '</script>' . "\n";
			$adSense_code = $adSense_code . '</center></td></tr></table></center>';

			$content = $adSense_code . "\n" . $content;

		}
		
		return $content;
	}
	
	add_filter('the_content', 'add_adSense_banner');

endif;

// AdSense Inner Contents Banner

if ( ! function_exists('add_adSense_banner')):

function add_adSense_banner ( $content ) {

if ( is_single() ) {

$adSense_code = 'Sponsored Link:' . "<br />";

$adSense_code = $adSense_code . '<center><table width = "470" hight = "62" bgcolor="#877"><tr><td><center>';

$adSense_code = $adSense_code . '<script type="text/javascript"><!--' . "\n";

$adSense_code = $adSense_code . 'google_ad_client = "ca-pub-nnnnnnnnnnnnnnnn";' . "\n";

$adSense_code = $adSense_code . '/' . '* Inner_Banner *'.'/' . "\n";

$adSense_code = $adSense_code . 'google_ad_slot = "nnnnnnnnnn";' . "\n";

$adSense_code = $adSense_code . 'google_ad_width = 468;' . "\n";

$adSense_code = $adSense_code . 'google_ad_height = 60;' . "\n";

$adSense_code = $adSense_code . '/' . '/-->' . "\n";

$adSense_code = $adSense_code . '</script>' . "\n";

$adSense_code = $adSense_code . '<script type="text/javascript"' . "\n";

$adSense_code = $adSense_code . 'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">' ."\n";

$adSense_code = $adSense_code . '</script>' . "\n";

$adSense_code = $adSense_code . '</center></td></tr></table></center>';

$content = $adSense_code . "\n" . $content;

}

return $content;

}

add_filter('the_content', 'add_adSense_banner');

endif;

まぁ、いつものように AdSense コードを変数に設定する部分がちょっと面倒ですが、これだけの事でレイアウトの自由度を手に入れられるのであれば、私としては御の字です。

全ての人にオススメ出来る方法ではありませんが、興味のある方は是非やってみてはいかがでしょうか。
functions.php を触るのは WordPress の画面が全く表示されなくなるなどのリスクがありますので、バックアップは必ず取っておくことと、子テーマで実施することをオススメします。

WordPress で子テーマを作る方法は以下のエントリでご紹介していますので、宜しかったらどうぞ。