h2タグの前に広告を自動表示させる方法

WEBデザイン

h2タグの前に広告を自動表示させる方法【WORDPRESS】

アドセンス等の自動広告をやっていて、それぞれのh2の前に自動で広告が表示できたらなと思いました。

WORDPRESSのプラグインを使用してもできますが、子テーマのfunctions.phpにコードを書き込むことで、簡単に実装することできました。

この記事では、 WORDPRESSでh2タグ前に自動で広告を表示する方法を紹介したいと思います。

同じようなやり方で広告を表示したいという方は、ぜひ参考にしていただければと思います。

目次

完成イメージ

カスタマイズ後は、以下のように広告が表示できるようになります。

完成イメージ

今回は、ウィジェットを使った方法ウィジェットを使わない方法、2通りについて解説します。

カスタマイズの方法(ウィジェットなし)

注意点

functions.php編集

今回のカスタマイズでは、functions.phpを編集をします。
カスタマイズ自体は難しくはありませんが、functions.phpに記述するコードは間違っているとWORDPRESSの画面が真白になってします。
経験がある人もいると思います。
ですので、編集前に

  • 編集の前にfunctions.phpのバックアップをとっておく
  • 子テーマのfunctions.phpを編集する

ことをオススメします。

functions.phpの編集

それでは、カスタマイズの方法を説明します。

まず、 以下のコードを子テーマのfunctions.phpに貼り付けます。

functions.phpは、管理画面の【外観】→【テーマの編集】→【テーマのための関数 (functions.php)】と進むと編集ができます。

このコードでは、記事の1~4番目のh2タグの前に広告が表示されるようにしています。


/*********************
h2見出し前に広告を挿入 
 *********************/
function ads_before_all_h2($the_content) {
  global $post;
  if (!is_single()) return $the_content;

  //広告(AdSense)タグを記入
  $ad = << < EOF
  //////////////////////////
  //アドセンス挿入場所//
  //////////////////////////
  EOF;

  if (!defined('H2REGEX')) define('H2REGEX', '/^<h2.*?>.*?<\/h2>$/im');

  preg_match_all(H2REGEX, $the_content, $matches);

  if (isset($matches[0])) {
    // 1番目のh2前に表示
    if (isset($matches[0][0])) {
      $the_content = str_replace($matches[0][0], $ad.$matches[0][0], $the_content);
    }
    // 2番目のh2前に表示
    if (isset($matches[0][1])) {
      $the_content = str_replace($matches[0][1], $ad.$matches[0][1], $the_content);
    }
    // 3番目のh2前に表示
    if (isset($matches[0][2])) {
      $the_content = str_replace($matches[0][2], $ad.$matches[0][2], $the_content);
    }
    // 4番目のh2前に表示
    if (isset($matches[0][3])) {
      $the_content = str_replace($matches[0][3], $ad.$matches[0][3], $the_content);
    }
  }
  return $the_content;
}

add_filter('the_content', 'ads_before_all_h2');

アドセンスのコードを挿入する

次にfunctions.phpに貼り付けたコードの 「アドセンス挿入場所」にアドセンスコードを挿入します。

「アドセンス挿入場所」という文言は消してしまってください。

アドセンスのコードを挿入する

記事を確認していただくと、記事の中の1~4番目のh2の前に広告が表示されるようになっていると思います。

意外と簡単なカスタマイズで実装することができました。

カスタマイズの方法(ウィジェットあり)

次に、ウィジェットを使うやり方について説明します。
アドセンスコードをウィジェットに入力している場合、こちらの方が管理しやすいかもしれません。

functions.phpの編集

以下のコードを子テーマのfunctions.phpに貼り付けます。

こちらのコードでも、記事の1~4番目のh2タグの前に広告が表示されるようにしています。



/************************
 ウィジェットを登録
 *************************/
add_action('after_setup_theme', function() {
  add_action('widgets_init', 'add_register_sidebars');});
  
function add_register_sidebars(){
  register_sidebar(array(
    'id' => 'ads_in_all_h2',
    'name' => '記事中h2前表示',
    'description' => '1-4番目のh2前に表示します',
    'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', )); } /********************* h2見出し前に広告を挿入 *********************/ function ads_before_all_h2($the_content) { global $post; if (!is_single()) return $the_content; if (!is_active_sidebar('ads_in_all_h2')) return $the_content; // ウィジェットを$adに格納 ob_start(); dynamic_sidebar('ads_in_all_h2'); $ad = ob_get_contents(); ob_end_clean(); if (!defined('H2REGEX')) define('H2REGEX', '/^<h2.*?>.*?<\/h2>$/im'); preg_match_all(H2REGEX, $the_content, $matches); if (isset($matches[0])) { // 1番目のh2前に表示 if (isset($matches[0][0])) { $the_content = str_replace($matches[0][0], $ad.$matches[0][0], $the_content); } // 2番目のh2前に表示 if (isset($matches[0][1])) { $the_content = str_replace($matches[0][1], $ad.$matches[0][1], $the_content); } // 3番目のh2前に表示 if (isset($matches[0][2])) { $the_content = str_replace($matches[0][2], $ad.$matches[0][2], $the_content); } // 4番目のh2前に表示 if (isset($matches[0][3])) { $the_content = str_replace($matches[0][3], $ad.$matches[0][3], $the_content); } } return $the_content; } add_filter('the_content', 'ads_before_all_h2');

ウィジェットにアドセンスコードを追加

上記のコードを貼り付けると、ウィジェットの管理画面(【外観】→【ウィジェット】)に、新しく「記事中h2前表示」というウィジェットが追加されます。

「記事中h2前表示」というウィジェットが追加されます

アドセンスのコードを、カスタムHTML等でこちらに貼り付けてください。

アドセンスのコードを、カスタムHTML等でこちらに貼り付け

ウィジェットを使ったやり方の場合、アドセンスのコードはウィジェットの画面で管理できるようになります。

最初のh2の前を非表示に

自動メニュー作成のプラグインなどを使用している場合、目次の上に広告が出てしまって、思い通りのイメージに広告が表示されない場合があります。

これはメニュー内にh2タグが含まれているから起こります。

最初のh2タグの前には広告を表示しない場合は、以下の部分を削除してください。

h2タグの前には広告を表示しない場合は、以下の部分を削除

これで、最初のh2の前を非表示に、2番目のh2上から広告が表示されるようになります。

さいごに

広告の表示うまくいきましたでしょうか?

このようにプラグインを使わなくても、簡単なカスタマイズで広告を表示させることができます。

毎回、広告を挿入していたのでは面倒くさいし、広告は自動表示で手間を省くのがいいですね。

それでは、楽しいWORDPRESSライフをお過ごしください。