にゃん分間待ってやる

「文章の書き方」や「アクセスアップ」などブログ運営のテクニックを解説。

トップ > Googleアドセンス、H2タグ（見出し）の前に広告を自動追加する方法

Googleアドセンス、H2タグ（見出し）の前に広告を自動追加する方法

Googleアドセンス、H2タグ（見出し）の前の広告

ブログ記事ページ、H2見出し手前の自動広告サンプル

ブログ記事ページ、H2見出し手前の自動広告サンプル

上記画像の
「Cocoon、ウィジェットエリアはどこで定義されているか？」
の部分がH2見出しです。

「アドセンス審査で通らない人へ……」
の部分がGoogleアドセンスの広告です。

ブログ記事の本文中に広告が表示されていますが、記事を書くときに1つずつ広告コードを貼り付けているわけではありません。
WordPressをカスタマイズして、H2タグが出てきたら自動的にその手前に広告を表示させています。

H2の手前に広告を表示する方法（Cocoon設定）

WordPressでCocoonテーマを使っている人は、Cocoonの標準機能でH2タグの手前に広告を表示させることができます。

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

WordPress管理画面で
Cocoon設定　＞　「広告」タブ
を開きます。

「本文中」

「広告の表示位置」　＞　「投稿・固定ページの表示位置」の中にある
「本文中」
にチェックを入れましょう

これで、本文中に出てくる「H2タグ」の手前にGoogleアドセンスの広告が表示されるようになります。
ただし、1つ目の「H2タグ」だけが対象です。

「広告の表示数を制御する」

さらに、「広告の表示数を制御する」にもチェックを入れましょう。

「先頭から◯個まで」の◯の部分に「-1」を設定すると、本文中のすべてのH2タグ手前に広告が表示されます。
仮に、本文中にH2見出しを100回使っていたら、100個の広告が表示されることになります。

広告の個数を抑制したい場合は、「先頭から10個まで」のように設定すると、H2見出しが100個あっても、最初の10個だけしか広告が表示されなくなります。

H2の手前に広告を表示する方法（ウィジェット）

広告のクリック率などの詳細な統計を取るために、「Cocoon設定」ではなく「ウィジェット」を使って広告コードを設置します。

広告ユニットを分ける話はこちらの記事もご参照ください。

Googleアドセンス、広告ユニットを分けよう（掲載位置別）
Googleアドセンス、広告ユニットを分けよう Googleアドセンスを利用しているブロガーさん向けの情報です。 あなたは複数の広告ユニットを使い分けできていますか？ １つの広告ユニットを使いまわしていませんか？ 広告ユニッ...
u-ff.com
2020.04.17
Googleアドセンス、広告ユニットを分ける方法（デバイス別）（パソコン、スマホ、AMP）
この記事は、以下の記事の続きです。 Googleアドセンスの広告はレスポンシブデザイン Googleアドセンスの管理画面で「新しい広告ユニットの作成」から広告を作るとき、上記のような画面になります。 「広告サイズ」...
u-ff.com
2020.04.18

投稿本文中

WordPress管理画面、外観＞ウィジェット、投稿本文中

WordPress管理画面、外観＞ウィジェット、投稿本文中

WordPress管理画面で、
外観　＞　ウィジェット
を開きます。

「ウィジェット」の「投稿本文中」が、
「Cocoon設定」にあった「広告の表示位置」の「本文中」に相当します。

「投稿本文中」に、広告コードを貼り付けるとH2タグの前にGoogleアドセンスの広告を表示することができます。

ただし、「投稿本文中」の下の説明書きには以下のように書いてあります。
「投稿本文中に表示されるウイジェット。文中最初のH2タグの手前に表示されます。」

ここに広告コードを貼り付けても、「文中最初のH2タグの手前」にしか広告が表示されません。

「Cocoon設定」の「本文中」には、「すべてのH2見出し手前に広告を挿入」という機能がありました。

しかし、「ウィジェット」の「投稿本文中」には、「すべてのH2見出し手前に広告を挿入」の機能がありません。

これでは広告コードの設置を「Cocoon設定」から「ウィジェット」に置き換えることができません。

そんなときは、「すべてのH2見出し手前に広告を挿入」ができるウィジェットエリアを自作してしまいましょう。
ウィジェットエリアの自作に関する基礎知識は以下の記事に解説があります。

WordPress、ウィジェットエリアを自作する方法
WordPressに独自のウィジェットエリアを追加する WordPressの管理画面で、 外観　＞　ウィジェット を開きます。 今日は、ここに自作のウィジェットエリアを追加するお話です。 ウィジェットエリアの自作は...
u-ff.com
2020.04.25

H2の手前に広告を表示する方法（独自ウィジェット）

独自のウィジェットエリアを作成して、そのウィジェットエリアを各H2タグの前に表示する設定をカスタマイズします。
そして、ウィジェットエリアに広告コードを貼り付けることで、本文中のH2タグの手前に広告が表示されるようになります。

FTPでの作業①

functions.phpをダウンロード

WordPressのサーバーにFTPソフトで接続しましょう。

そして、
「/public_html/wp-content/themes/cocoon-child-master」ディレクトリにある
「functions.php」というファイルをダウンロードします。

テキストエディタでの作業

functions.phpをカスタマイズ

ダウンロードしてきた「functions.php」に下記のコードを書き加えます。

require_once get_theme_file_path() . '/widget-multi-h2.php';

「widget-multi-h2.php」というファイル名の部分は変更してもOKです。
「widget-multi-h2.php」は、もともとはCocoon上に存在しないファイルです。
これから自作します。

独自ウィジェットを作成

「widget-multi-h2.php」という名前のファイルを新しく作成します。
「functions.php」で「require_once」の行に別のファイル名を付けた人は、その名前のファイルを作成しましょう。

「widget-multi-h2.php」に下記のコードを書き込みます。

<?php // 投稿ページ・固定ページですべてのH2タグの前に広告を表示する独自ウィジェットエリアを追加 // H2タグの前に広告を表示する回数（-1で制限なしに） define('LIMIT_H2_AD', 10); // 独自ウィジェットエリアを作成 register_sidebar(array( 'name' => '独自ウィジェットエリア（投稿本文中）', 'id' => 'widget-multi-h2', 'description' => '投稿ページ・固定ページのすべてのH2タグ（最大'.LIMIT_H2_AD.'回まで）の前に広告を表示。', 'before_widget' => '<div class="widget widget-multi-h2 %2$s">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', )); // H2タグを判別する正規表現を定数化 if (!defined('H2_REG')) define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2/i')); // 本文中にH2タグが最初に含まれている箇所を返す（含まれない場合はnullを返す） if(!function_exists('get_h2_included_in_body')): function get_h2_included_in_body($the_content){ //H2見出しが本文中にあるかどうか if(preg_match(H2_REG, $the_content, $h2results)){ return $h2results[0]; } } endif; // すべてのH2タグ手前にウィジェットを挿入（LIMIT_H2_AD定数で回数制限） if(!function_exists('add_ads_before_multi_h2')): function add_ads_before_multi_h2($the_content) { if(is_singular() // 投稿ページ・固定ページのとき // && is_all_adsenses_visible() // AdSense設定項目で表示が許可されているか ){ // ウィジェットの中身を取ってきて$ad_templateの中にセットする ob_start(); //バッファ開始 dynamic_sidebar('widget-multi-h2'); // 独自ウィジェットエリアの中身をバッファに出力 $ad_template = ob_get_clean(); // バッファを出力＆終了 // 本文にH2タグが含まれていれば取得 $h2result = get_h2_included_in_body($the_content); // H2見出しが本文中にある場合のみ if($h2result){ // 1つ目のH2タグはいったんH99タグに置換（1つ目のH2タグ手前には広告を設置しない） $the_content = preg_replace('/<h2/i', '<h99', $the_content, 1); // 各H2タグの前に広告を挿入（LIMIT_H2_ADで回数を制限） $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, LIMIT_H2_AD); // H99をH2に戻す $the_content = preg_replace('/<h99/i', '<h2', $the_content, 1); } } return $the_content; } endif; add_filter('the_content','add_ads_before_multi_h2');

FTPでの作業②

ファイルをアップロード

上記の2つのファイルを
「/public_html/wp-content/themes/cocoon-child-master」ディレクトリにアップロードします。

Googleアドセンス管理画面での作業

広告コードを作成

Googleアドセンス管理画面、広告＞サマリー＞広告ユニットごと

Googleアドセンス管理画面、広告＞サマリー＞広告ユニットごと

Googleアドセンスの管理画面で、
広告　＞　サマリー
の画面を開きましょう。

「新しい広告ユニットの作成」から「記事内広告」を2つ、「ディスプレイ広告」を1つ作成します。
本当は「記事内広告」を3つ作成したいのですが、「記事内広告」はAMP（アンプ）対応していません。
（AMP対応していません＝カミナリマークがついていません）
そのため、1つだけ「ディスプレイ広告」で代用します。

Googleアドセンス管理画面、新しい記事内広告

Googleアドセンス管理画面、新しい記事内広告

広告の作成は、名前を付けるくらいで、それ以外の項目は特に変更は必要ありません。

3つの広告には下記のような名前を付けましょう。

  • 記事内広告
    • H2前広告（記事内広告、PC用）
    • H2前広告（記事内広告、スマホ・非AMP用）
  • ディスプレイ広告
    • H2前広告（ディスプレイ広告、スマホ・AMP用）

名前は自由につけても大丈夫ですが、後から見て分かりやすいものにしましょう。

WordPress管理画面での作業

広告ウィジェットを追加

先ほど、WordPressのサーバーに

上記の2つのファイルをアップロードしました。

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

これにより、WordPress管理画面の
外観　＞　ウィジェット
には、
「独自ウィジェットエリア（投稿本文中）」
というアイテムが表示されていると思います。

ここに下記の3つのウィジェットを追加します。

  • [C]広告（PC用）
  • [C]広告（モバイル用）
  • [C]広告

※これはWordPressテーマCocoonの機能です。
Cocoonを使っていない人は、「[C]広告」のようなウィジェットがそもそも存在しないのでご注意ください。

広告ウィジェットの設定

WordPress管理画面、外観＞ウィジェット、広告ウィジェットの中身

WordPress管理画面、外観＞ウィジェット、広告ウィジェットの中身

3つの広告ウィジェットには下記のような設定をします。

  • [C]広告（PC用）
    • 「広告タグ」欄にGoogleアドセンス管理画面で、
      「H2前広告（記事内広告、PC用）」
      と名付けた広告コードを貼り付け
    • 「ウィジェットの表示」：　「チェック・入力したページで非表示」
    • 「ページ」タブ　＞　「AMPページ」：　チェック
  • [C]広告（モバイル用）
    • 「広告タグ」欄にGoogleアドセンス管理画面で、
      「H2前広告（記事内広告、スマホ・非AMP用）」
      と名付けた広告コードを貼り付け
    • 「ウィジェットの表示」：　「チェック・入力したページで非表示」
    • 「ページ」タブ　＞　「AMPページ」：　チェック
  • [C]広告
    • 「広告タグ」欄にGoogleアドセンス管理画面で、
      「H2前広告（ディスプレイ広告、スマホ・AMP用）」
      と名付けた広告コードを貼り付け
    • 「ウィジェットの表示」：　「チェック・入力したページで表示」
    • 「ページ」タブ　＞　「AMPページ」：　チェック

表示を確認

ブログ記事ページ、H2見出し手前の自動広告サンプル

ブログ記事ページ、H2見出し手前の自動広告サンプル

上記のように、記事ページの各H2見出しの前に広告が表示されます。

これでカスタマイズは完了です。

以降は仕組みに関する説明です。
読まなくても動きますが、読んで内容を理解しておくことをおすすめします。

H2タグ前の広告表示設定、カスタマイズ内容を解説

functions.phpの解説

「functions.php」には下記のコードを追加しました。

require_once get_theme_file_path() . '/widget-multi-h2.php';

これは別のファイルを「functions.php」に読み込む処理です。

「widget-mulit-h2.php」の中身をそっくりそのまま「functions.php」の中に書くのと同じ効果があります。

WordPressを長く使っていると、「functions.php」には本件のカスタマイズ以外にもいろいろと書き足していると思います。
そのため、「functions.php」の中に直接カスタマイズ内容を書くと、どこからどこまでが「H2タグ手前に広告を表示するための設定」なのかが分かりにくくなります。

そこで、複雑なカスタマイズをするときは、別のファイルを新しく作り、そこに一塊のカスタマイズをまとめて書きます。
これにより、「○○.php」には「～～～に関する設定が書いてある」というのが一目瞭然になります。

  1. 「○○.php」というファイルを新しく作り、カスタマイズ用のコードを書き込む
  2. 「functions.php」には、
    「require_once get_theme_file_path() . ‘/○○.php’;」
    と書き込む

この技はよく使うので覚えておきましょう。

widget-multi-h2.phpの解説

「widget-multi-h2.php」というファイルを新規作成し、下記のようなコードを書き込みました。

<?php // 投稿ページ・固定ページですべてのH2タグの前に広告を表示する独自ウィジェットエリアを追加 // H2タグの前に広告を表示する回数（-1で制限なしに） define('LIMIT_H2_AD', 10); // 独自ウィジェットエリアを作成 register_sidebar(array( 'name' => '独自ウィジェットエリア（投稿本文中）', 'id' => 'widget-multi-h2', 'description' => '投稿ページ・固定ページのすべてのH2タグ（最大'.LIMIT_H2_AD.'回まで）の前に広告を表示。', 'before_widget' => '<div class="widget widget-multi-h2 %2$s">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', )); // H2タグを判別する正規表現を定数化 if (!defined('H2_REG')) define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2/i')); // 本文中にH2タグが最初に含まれている箇所を返す（含まれない場合はnullを返す） if(!function_exists('get_h2_included_in_body')): function get_h2_included_in_body($the_content){ //H2見出しが本文中にあるかどうか if(preg_match(H2_REG, $the_content, $h2results)){ return $h2results[0]; } } endif; // すべてのH2タグ手前にウィジェットを挿入（LIMIT_H2_AD定数で回数制限） if(!function_exists('add_ads_before_multi_h2')): function add_ads_before_multi_h2($the_content) { if(is_singular() // 投稿ページ・固定ページのとき // && is_all_adsenses_visible() // AdSense設定項目で表示が許可されているか ){ // ウィジェットの中身を取ってきて$ad_templateの中にセットする ob_start(); //バッファ開始 dynamic_sidebar('widget-multi-h2'); // 独自ウィジェットエリアの中身をバッファに出力 $ad_template = ob_get_clean(); // バッファを出力＆終了 // 本文にH2タグが含まれていれば取得 $h2result = get_h2_included_in_body($the_content); // H2見出しが本文中にある場合のみ if($h2result){ // 1つ目のH2タグはいったんH99タグに置換（1つ目のH2タグ手前には広告を設置しない） $the_content = preg_replace('/<h2/i', '<h99', $the_content, 1); // 各H2タグの前に広告を挿入（LIMIT_H2_ADで回数を制限） $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, LIMIT_H2_AD); // H99をH2に戻す $the_content = preg_replace('/<h99/i', '<h2', $the_content, 1); } } return $the_content; } endif; add_filter('the_content','add_ads_before_multi_h2');

H2タグ前広告の表示回数

// H2タグの前に広告を表示する回数（-1で制限なしに） define('LIMIT_H2_AD', 10);

「10」となっているので、H2タグ前広告を10個まで表示します。

ここを好きな数字に書き換えれば、個数を変更できます。
「-1」ならば個数制限なし、すべてのH2タグの前に広告が挿入されます。

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

「Cocoon設定」の「先頭から◯個まで」の部分に相当します。

独自ウィジェットエリアを作成

// 独自ウィジェットエリアを作成 register_sidebar(array( 'name' => '独自ウィジェットエリア（投稿本文中）', 'id' => 'widget-multi-h2', 'description' => '投稿ページ・固定ページのすべてのH2タグ（最大'.LIMIT_H2_AD.'回まで）の前に広告を表示。', 'before_widget' => '<div class="widget widget-multi-h2 %2$s">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', ));

上記のコードにより、自作のウィジェットエリアが生成されます。

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPressの管理画面では
外観　＞　ウィジェット
に
「独自ウィジェットエリア（投稿本文中）」
というアイテムが表示されるようになります。

この時点では、ただ箱が作られただけの状態です。
ここに広告コードを貼り付けても、ブログ上には広告は表示されません。

「独自ウィジェットエリア（投稿本文中）」をブログ画面上のどの位置に表示するかという設定が、「widget-multi-h2.php」ファイルの続きに書かれています。

H2タグ判別用の正規表現

// H2タグを判別する正規表現を定数化 if (!defined('H2_REG')) define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2/i'));

上記のコードは、H2タグを識別するための定数を設定しています。

PHP、文字の置き換え機能

PHPには、文章中の文字を置き換える機能があります。
たとえば、「文章中の『卵』という文字を探して『玉子』という文字に置換する」みたいな能力です。

今回は、「H2タグの手前に広告を表示する」という機能を、PHPの置換機能を使って実現します。
つまり、「H2タグ」を「広告コード＆H2タグ」に置き換えます。

「文章中の『卵』という文字を探して『玉子』という文字に置換する」の例でいうと
「文章中の『卵』という文字を探して『玉子（卵）』という文字に置換する」みたいなものです。

元の文字を消して別の文字に置き換えるのではなく、元の文字を残しつつ別の文字を追加する技です。

H2タグも、広告コードも、所詮はただの文字データなので、PHPで置換ができます。

// H2タグを判別する正規表現を定数化 if (!defined('H2_REG')) define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2/i'));

上記のコードの説明に話を戻しましょう。
このコードでは、「<h2」という文字に、「H2_REG」という呼び名をつけています（定数化）。

「『H2タグ』を『広告コード＆H2タグ』に置き換える」という作業をするために、「H2タグ」とは何かを決める必要があります。

今回は、「<h2」という3文字を見つけたら、それを「H2タグ」（置換対象）とみなします。

実際の置換の処理はこのあとに続きます。
今はまだ、置換元の「H2タグ」を定義して、「H2_REG」という名前の定数にしたところまでです。

H2タグの有無を確認

// 本文中にH2タグが最初に含まれている箇所を返す（含まれない場合はnullを返す） if(!function_exists('get_h2_included_in_body')): function get_h2_included_in_body($the_content){ //H2見出しが本文中にあるかどうか if(preg_match(H2_REG, $the_content, $h2results)){ return $h2results[0]; } } endif;

上記のコードは、文章中（HTML中）に「H2タグ」が存在するかどうかを判定するための関数を作成しています。

後で、

  • H2タグがあれば広告を挿入
  • H2タグがなければ何もしない

という条件分岐をするための布石です。

広告コードを変数化

// すべてのH2タグ手前にウィジェットを挿入（LIMIT_H2_AD定数で回数制限） if(!function_exists('add_ads_before_multi_h2')): function add_ads_before_multi_h2($the_content) { if(is_singular() // 投稿ページ・固定ページのとき // && is_all_adsenses_visible() // AdSense設定項目で表示が許可されているか ){ // ウィジェットの中身を取ってきて$ad_templateの中にセットする ob_start(); //バッファ開始 dynamic_sidebar('widget-multi-h2'); // 独自ウィジェットエリアの中身をバッファに出力 $ad_template = ob_get_clean(); // バッファを出力＆終了

上記のコード、特に

 // ウィジェットの中身を取ってきて$ad_templateの中にセットする ob_start(); //バッファ開始 dynamic_sidebar('widget-multi-h2'); // 独自ウィジェットエリアの中身をバッファに出力 $ad_template = ob_get_clean(); // バッファを出力＆終了

の部分で、「$ad_template」に「広告コード」をセットしています。

「『H2タグ』を『広告コード＆H2タグ』に置き換える」という作業をするための、「広告コード」が「$ad_template」という名前で一時保存されている状態です。

「$ad_template」の中身は、具体的には下記のような文字が入っています。

<div class="widget widget-multi-h2 widget_pc_ad"> <div class="ad-area no-icon pc-ad-widget ad-none ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock"> <div class="ad-label" itemprop="name" data-nosnippet> </div> <div class="ad-wrap"> <div class="ad-responsive ad-usual"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div>
dynamic_sidebar(‘widget-multi-h2’) の中身

「$ad_template」の中に入っている文字は、「dynamic_sidebar(‘widget-multi-h2’)」によって呼び出されたものです。

「dynamic_sidebar(‘widget-multi-h2’)」の中身は、
WordPressの管理画面、
外観　＞　ウィジェット
で
「独自ウィジェットエリア（投稿本文中）」
に
「[C]広告（PC用）」
などのウィジェットをセットした結果です。

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

「$ad_template」の中身、「ウィジェットエリア」のレベル

「$ad_template」の中身、コードの最初と最後の行、

<div class="widget widget-multi-h2 widget_pc_ad"> … … </div>

の部分は、「widget-multi-h2.php」に書いたregister_sidebarの中の「before_widiget」「after_widget」に対応しています。

「widget-multi-h2.php」の序盤で下記のようなコードを書いたことを思い出してください。

// 独自ウィジェットエリアを作成 register_sidebar(array( （中略） 'before_widget' => '<div class="widget widget-multi-h2 %2$s">', 'after_widget' => '</div>', （中略） ));

「%2$s」の部分が最終的に「widget_pc_ad」という文字に置き換えられています。
これは「[C]広告（PC用）」ウィジェットを使用したからです。

「[C]広告（モバイル用）」では、「%2$s」の部分が「widget_mobile_ad」に置き換えられます。

パソコンだったらこっちの広告を表示、スマホだったらこっちの広告を表示、みたいな切り替えは、CSSの機能を使っています。
CSSの中では、「class」の中に「widget_pc_ad」とあったらパソコン用の広告、「widget_mobile_ad」とあったらスマホ用の広告のように識別をしています。

「$ad_template」の中身、「ウィジェット」のレベル
 <div class="ad-area no-icon pc-ad-widget ad-none ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock"> <div class="ad-label" itemprop="name" data-nosnippet> </div> <div class="ad-wrap"> <div class="ad-responsive ad-usual"> … … </div> </div> </div>

上記の部分は、「[C]広告（PC用）」に関するコードです。

ウィジェットは「[C]広告（PC用）」「[C]広告（モバイル用）」などの他にも

  • テキスト
  • カスタムHTML
  • プロフィール
  • カテゴリー

などなど、いろんな種類があります。

何のウィジェットを追加したかによって

 <div class="ad-area no-icon pc-ad-widget ad-none ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock"> （中略） </div>

の部分のコードが変わります。

「$ad_template」の中身、「広告タグ」のレベル
 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

上記の部分は、「[C]広告（PC用）」ウィジェットを追加するときに、「広告タグ」の欄に貼り付けた広告コードです。

WordPress管理画面、外観＞ウィジェット、広告ウィジェットの中身

WordPress管理画面、外観＞ウィジェット、広告ウィジェットの中身

「$ad_template」の中身、まとめ
<div class="widget widget-multi-h2 widget_pc_ad"> <div class="ad-area no-icon pc-ad-widget ad-none ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock"> <div class="ad-label" itemprop="name" data-nosnippet> </div> <div class="ad-wrap"> <div class="ad-responsive ad-usual"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div>

「$ad_template」の中には上記のようなコードが入っていると書きましたが、実はこれは
「独自ウィジェットエリア（投稿本文中）」に「[C]広告（PC用）」だけをセットした場合のものです。

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

「独自ウィジェットエリア（投稿本文中）」には下記の3つのウィジェットをセットしました。

  • 「[C]広告（PC用）」
  • 「[C]広告（モバイル用）」
  • 「[C]広告」

そのため、「$ad_template」の中身はさきほど例示したコードを3つ繋げたようなものがでてきます。
（実際にはAMPページと非AMPページで動きが違うんですが、本題からそれるので省略）

『H2タグ』を『広告コード＆H2タグ』に置き換え
 // 本文にH2タグが含まれていれば取得 $h2result = get_h2_included_in_body($the_content); // H2見出しが本文中にある場合のみ if($h2result){ // 1つ目のH2タグはいったんH99タグに置換（1つ目のH2タグ手前には広告を設置しない） $the_content = preg_replace('/<h2/i', '<h99', $the_content, 1); // 各H2タグの前に広告を挿入（LIMIT_H2_ADで回数を制限） $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, LIMIT_H2_AD); // H99をH2に戻す $the_content = preg_replace('/<h99/i', '<h2', $the_content, 1); } } return $the_content; } endif;

下準備が整いました。
ようやく、「『H2タグ』を『広告コード＆H2タグ』に置き換える」コードの登場です。

特に、

 $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, LIMIT_H2_AD);

の部分が置き換えを行っている部分です。

事前準備として、
「<h2」という3文字を「H2タグ」とみなし、「H2_REG」という名前を付けました。
「広告コード」に、「$ad_template」という名前を付けました。

「$the_content」というのはメインエリアのHTMLソースコードです。
（文字の置き換えを行う、大元のテキストです）

「preg_replace(H2_REG, $ad_template.～～～.$h2result, ～～～」
の部分が
「『H2タグ』（H2_REG）を『広告コード＆H2タグ』（$ad_template.～～～.$h2result）に置き換え」です。

add_filter
// すべてのH2タグ手前にウィジェットを挿入（LIMIT_H2_AD定数で回数制限） if(!function_exists('add_ads_before_multi_h2')): function add_ads_before_multi_h2($the_content) { （中略） } endif; add_filter('the_content','add_ads_before_multi_h2');

上記のコードの説明です。

ここまで説明したコードは、「add_ads_before_multi_h2($the_content)」という関数の中身です。
この関数を実行すると、H2タグの手前に広告コードを挿入
＝「『H2タグ』を『広告コード＆H2タグ』に置き換え」
が行われます。

いつ関数が実行されるかと言うと、

add_filter('the_content','add_ads_before_multi_h2');

の部分で定義されています。

the_content()が実行されたら、add_ads_before_multi_h2()も合わせて実行されます。

the_content()はいつ実行されるかと言うと、
「/public_html/wp-content/themes/cocoon-master/tmp」ディレクトリにある
「content.php」が実行されたときです。

ブログ記事ページ、メインエリア

ブログ記事ページ、メインエリア

content.phpとは、記事ページのメインエリア（上記の画像の赤枠の部分）を表示するためのテンプレートファイルです。

テンプレートファイルやcontent.phpの話は下記の記事で詳しく説明してあります。

WordPress、テンプレートファイル（content.php）をカスタマイズする方法
テンプレートファイルとは？ WordPressのテンプレートファイルとは、ブログのページを部品に分けたファイルです。 部品を組み合わせて、ページ全体の見た目・デザインを作っています。 上記の画像で「テストサーバー」と書かれて...
u-ff.com
2020.04.24

参考にしたソースコード

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

「Cocoon設定」の「本文中」には、
「全てのH2見出し手前に広告を挿入」という機能が元々ありました。

「ウィジェット」の「投稿本文中」には、
「全てのH2見出し手前に広告を挿入」という機能がありませんでした。

そこで、独自ウィジェットを作成し、
「全てのH2見出し手前に広告を挿入」の機能を設定しました。

独自ウィジェットを作成するにあたり、
「Cocoon設定」の「本文中」の「全てのH2見出し手前に広告を挿入」
の機能がどこで定義されているのかをCocoonテーマのPHPファイルを探して参考にしました。

add_ads_before_1st_h2()のパス

「/u-ff.com/public_html/wp-content/themes/cocoon-master/lib」ディレクトリの
「ad.php」ファイルの中に
「add_ads_before_1st_h2()」という関数が定義されています。

原形は下記のようなコードでした。

//H2見出しを判別する正規表現を定数にする if ( !defined('H2_REG') ) define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2/i'));//H2見出しのパターン //本文中にH2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す） //H3-H6しか使っていない場合は、h2部分を変更してください if ( !function_exists( 'get_h2_included_in_body' ) ): function get_h2_included_in_body( $the_content ){ if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか return $h2results[0]; } } endif; //最初のH2の手前に広告を挿入（最初のH2を置換） add_filter('the_content', 'add_ads_before_1st_h2', BEFORE_1ST_H2_AD_PRIORITY_STANDARD); if ( !function_exists( 'add_ads_before_1st_h2' ) ): function add_ads_before_1st_h2($the_content) { if ( is_singular() //投稿日・固定ページのとき && is_ad_pos_content_middle_visible() //設定で表示が許可されているとき && is_all_adsenses_visible() //AdSense設定項目で表示が許可されているか //&& !is_multi_paged() //マルチページの2ページ目以降でない場合 ){ //広告（AdSense）タグを記入 ob_start();//バッファリング get_template_part_with_ad_format(get_ad_pos_content_middle_format(), 'ad-content-middle', is_ad_pos_content_middle_label_visible()); $ad_template = ob_get_clean(); $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得 //H2見出しが本文中にある場合のみ if ( $h2result ) { //本文全てのH2見出し手前に広告を表示しない場合 if (!is_ad_pos_all_content_middle_visible()) { //最初のH2の手前のみに広告を挿入（最初のH2を置換） $limit = 1; } else { //無制限に置換する $limit = intval(get_ad_pos_content_middle_count()); $limit = $limit ? $limit : -1; } $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, $limit); } } return $the_content; } endif;

カスタマイズ箇所

「add_ads_before_1st_h2」という関数を参考に、今回のカスタマイズでは
「add_ads_before_multi_h2」という関数を作成しました。

主な変更点は以下の4つ

  • 表示回数の制限
  • 独自のウィジェットエリアを作成
  • 広告コードの設定場所を「Cocoon設定」から「ウィジェット」に変更
  • 1つ目のH2タグの手前には広告コードを表示しない

表示回数の制限

// H2タグの前に広告を表示する回数（-1で制限なしに） define('LIMIT_H2_AD', 10);

H2タグの手前に広告を表示する回数の上限をファイルの中で設定するようにしました。

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

WordPress管理画面、Cocoon設定＞「広告」タブ、本文中

上記画面の「先頭から◯個まで」のように、設定画面を作りこむのは難易度が高かったので、ファイルに直接数字を書き込む方式にしました。

独自のウィジェットエリアを作成

// 独自ウィジェットエリアを作成 register_sidebar(array( 'name' => '独自ウィジェットエリア（投稿本文中）', 'id' => 'widget-multi-h2', 'description' => '投稿ページ・固定ページのすべてのH2タグ（最大'.LIMIT_H2_AD.'回まで）の前に広告を表示。', 'before_widget' => '<div class="widget widget-multi-h2 %2$s">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', ));

上記のコードによりウィジェットエリアを自作しました。

広告コードの設定場所を「Cocoon設定」から「ウィジェット」に変更

 ob_start();//バッファリング get_template_part_with_ad_format(get_ad_pos_content_middle_format(), 'ad-content-middle', is_ad_pos_content_middle_label_visible()); $ad_template = ob_get_clean();

上記のようなコードを、下記のようなコードに書き換えました。

 // ウィジェットの中身を取ってきて$ad_templateの中にセットする ob_start(); //バッファ開始 dynamic_sidebar('widget-multi-h2'); // 独自ウィジェットエリアの中身をバッファに出力 $ad_template = ob_get_clean(); // バッファを出力＆終了
WordPress管理画面、Cocoon設定＞「広告」タブ

WordPress管理画面、Cocoon設定＞「広告」タブ

元のコードでは、「Cocoon設定」の「広告」タブの「広告コード」がH2タグの手前に挿入されるようになっていました。

それを「独自ウィジェットエリア（投稿本文中）」にセットした内容をH2タグの手前に挿入するように変更しました。

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

WordPress管理画面、外観＞ウィジェット、独自ウィジェットエリア

1つ目のH2タグの手前には広告コードを表示しない

 $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, $limit);

上記のコードを、下記のように書き換えました。

 // 1つ目のH2タグはいったんH99タグに置換（1つ目のH2タグ手前には広告を設置しない） $the_content = preg_replace('/<h2/i', '<h99', $the_content, 1); // 各H2タグの前に広告を挿入（LIMIT_H2_ADで回数を制限） $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, LIMIT_H2_AD); // H99をH2に戻す $the_content = preg_replace('/<h99/i', '<h2', $the_content, 1);

1つ目の「H2タグ」の手前にだけは「広告コード」を挿入しないようにカスタマイズしています。

「『H2タグ』を『広告コード＆H2タグ』に置き換える」という処理をする前に、
「1つ目の『H2タグ』を『H99タグ』に置き換える」という処理を追加しています。

そして、「『H2タグ』を『広告コード＆H2タグ』に置き換える」という処理の後に、
「1つ目の『H99タグ』を『H2タグ』に置き換える」という処理を追加しています。

先頭の「H2」タグを一旦「H99」というタグに変換しておくことで、広告コードが挿入されないように工夫しています。

1つ目のH2タグ手前は、「投稿本文上」などのウィジェットと表示位置が近いです。
「投稿本文上」に広告を設定していると、近い場所に広告が2つ表示されて邪魔に感じるので、1つ目のH2タグ手前には広告を挿入しないようにカスタマイズしました。

1つ目のH2タグ手前にも広告を表示したい場合は、
「独自ウィジェットエリア（投稿本文中）」に加えて、
Cocoonに初めから備わっている
「投稿本文中」に広告コードを貼り付ければ、1つ目のH2タグ手前にも広告が設置できます。

まとめ

本日は、H2タグの前にGoogleアドセンスの広告コードを自動的に追加する方法を説明しました。

説明は長くなりましたが、作業内容自体は簡単です。

  1. 「functions.php」の編集とアップロード
  2. 「widget-multi-h2.php」の作成とアップロード
  3. 広告コードの作成
  4. 広告ウィジェットの追加

functions.php

「/public_html/wp-content/themes/cocoon-child-master」というディレクトリに「functions.php」というファイルがあります。
これをダウンロードしましょう。

「functions.php」の中に下記のコードを追記します。

require_once get_theme_file_path() . '/widget-multi-h2.php';

widget-multi-h2.php

widget-multi-h2.zipをダウンロードします。
zipを解凍して「widget-multi-h2.php」ファイルを取り出します。

下記の2つのファイルを

「/public_html/wp-content/themes/cocoon-child-master」ディレクトリにアップロードします。

広告コードの作成

Googleアドセンスの管理画面から広告コードを作成しましょう。

広告ウィジェットの追加

WordPress管理画面で
外観　＞　ウィジェット
に
「独自ウィジェットエリア（投稿本部中）」
というアイテムが追加されます。

ここにGoogleアドセンスの広告コードを貼り付けましょう。

以上の作業を行うと、H2タグの手前に広告が自動的に挿入されます。

文章を書くときに、トピックごとに章を分ける。
章ごとの始まりに「H2」タグで見出しをつける。
これを意識するだけで、適度な位置に広告が設置できます。

このページは移転しました。