任意のh2見出しの前にテンプレートを呼び出してアドセンス広告を表示させる方法。
WordPressの記事中にアドセンスを表示させたいケースは多いと思います。
プラグインを使わずに、特定のテンプレートを作ってアドセンスを自動で表示させるカスタマイズ方法の紹介です。
目次
別のテンプレートを作っておくメリット
WordPressのカスタマイズをする際には、要素ごとにテンプレート(phpファイル)を分けておくと便利です。
その分テンプレートの数は多くなるのですが、
- 要素内の記述を別のテンプレートに書くことで、そのテンプレート自体はすっきり書くことができ、見やすい
- どこをいじったら良いかわかりやすく、カスタマイズがしやすい
- 1行コードを書くことでテンプレートの使いまわしができる
といったメリットがあります。
今回は、
- アドセンスのコードを記載したテンプレート(ad-in-body.php)
を別途用意し、記事中のh2見出しの前に表示させます。
なお、functions.phpを編集します。
カスタマイズは必ずバックアップを取ってから行うか、ローカル環境で行っていただければと思います。
h2見出しの前にアドセンスを表示する
functions.phpに以下のコードを記述します。
コードはこちらの記事を参考にさせていただきました。
目次の下&複数のh2タグの上にアドセンス広告を表示させる方法|Libreco
/*____記事内にAdsenseを表示____*/
function add_ad_before_h2($the_content) {
ob_start();//バッファリング
get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
$ad_template = ob_get_clean();
/*
//広告タグをここに記述する場合
$ad = <<< EOF
// ここにアドセンスを挿入
EOF;
*/
if (is_single()){//投稿ページ
$h2 = '/<h2.+?<\/h2>/u';
//$h2 = '/<h[2-3].+?<\/h[2-3]>/u'; //h2とh3タグを合わせてカウントする場合
if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
if ( $h2s[0] ) {//h2タグの有無をチェック
if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][0], $ad_template.$h2s[0][0], $the_content);
}
if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][2], $ad_template.$h2s[0][2], $the_content);
}
if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][4], $ad_template.$h2s[0][4], $the_content);
}
}
}
}return $the_content;
}
add_filter('the_content','add_ad_before_h2');
get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
というところでアドセンス用のテンプレートを呼び出しています。
(”)の中身がテンプレート名になります。
別の名前にする場合はここを変えていただければ。
別にテンプレートを作らずに、直接コードを書きたい場合は、「ここにアドセンスを挿入」というところにコードを記載してください。
1番目のH2タグ手前に広告を挿入
の[0][0]といった数字の部分ですが、1番目の見出しの直前なら「0」、2番目の見出しの直前なら「1」、というように書きます。
1つずつ数字がずれるイメージですね。
せっかくなので、ad-in-body.phpのコードも置いておきます。
<div class="ad-space">
<div class="ad-pc">
<!-- ここにアドセンスコードを入れる -->
</div>
<div class="clear"></div>
</div>
cssも一応。
.ad-space {
margin: 40px 0;
max-width: 100%;
text-align: center;
}
ad-space以外のクラス名はいらなかったですね…。笑
スマホだとたまにアドセンスが横揺れしてしまっていることがありますが、テンプレートにコードを入れてスタイルを当ててあげれば、横揺れも防げるのではないかと思います。
直接アドセンスコードを記載する方法や、ウィジェットを呼び出す方法は見かけたのですが、別のテンプレートを呼び出して任意のh2タグ前に表示させる方法はみつからなかったので記事にしてみました。
参考になれば嬉しいです。
サービスメニュー
Postscript執筆後記
今日はクリスマス・イブということで朝からSpotifyでクリスマスのプレイリストを色々と流しています。クリスマスソングは名曲が多く、なんだかんだ好きです。
Something New一日一新
Dockerの仮想環境を使ってWordPressのカスタマイズキッチンカーのクリスマス限定メニュー