【Cocoon】広告設定「本文中」で目次下のH2見出し広告のみを消す方法

いきなり目次の下に広告があるとちょっと見栄えが…。Cocoonの”本文中”への広告設定において目次下、つまり最初のH2タグ手前の広告を削除する方法です。

こんなケース

下記の2つのスマホ、PCの画面を見てみて下さい。

記事を開いた際に表示される画面の一例ですが、このように目次直下に広告が表示されます。

これはCocoonの設定において、Google AdSenseの広告出現位置を「本文中」を指定した場合の標準の仕様であり、H2見出しの手前に広告を挿入することになっています。

我々Google Adsense様様なのですが、個人的に思うのは目次の下から広告が始まると少し見栄えが気になるのと、読み始めるうえで心理的に抵抗感があります。

そんな訳で今回はブロガーが良く利用するWordPressテーマであるCocoonで最初のH2のみ広告を削除する方法を紹介します。

前提条件

今回の作業はWordPressの管理画面でもできなくはないですが、基本的には普段触らないファイルを操作します。よって下記の条件を満たせる方が対象になります。

・ブログのバックアップを取得でき、元に戻す能力がある方
・HTMLやPHPを最低限理解している方

特に1つ目が重要。

最悪訳が分からなくなってもファイルを全て元に戻せば何とかなります。全てのバックアップが必要ではありませんが、手順がわからない方はやめておいた方が良いでしょう。

ちなみに私が契約しているXserverは標準サービスとして日次バックアップを取得するようになっており、バックアップからの復元までも管理画面でこなせます。

サーバスペックが良い上にリーズナブルな価格なので、これからブログを始める方、移行を検討している方にもおススメできる会社です。紹介しておこう…。

設定方法

環境の前提条件

作業をするにあたってCocoonの子テーマが設定されている必要があります。

(子テーマが無いと、テーマのアップデートの際に設定がリセットされてしまいます。)

導入方法は公式HPをご覧ください。

▼(外部リンク)WordPress無料テーマ/Cocoon

Cocoon

Cocoonテーマをインストールする方法 WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

1.最新子テーマからfunction.phpのダウンロード

WordPressのインストールディレクトリ < wp-content < themes < cocoon-child-master

にある、

function.php

レンタルサーバの管理画面やFTPソフトにより、ファイルをダウンロードの上、バックアップを取得ください。
*不安な方はサーバ全体のバックアップを取得ください。
*ソフトの使い方はご自身でお調べください。

今回はこの子テーマのfunction.phpにコードを追記します。

2.fuction.phpへコード追記

/*
*1つめのH2タグに広告を設定しない
*/

//更新 H2_REGの定義
define('H2_REG', apply_filters('insertion_heading_regexp', '/<h2 class="wp-block-heading">/i'));//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;
      }
      //1つめのH2タグを対象外にしてから置換
      $the_content = preg_replace(H2_REG, '<h2 id="top_h2">', $the_content, 1);
      $the_content = preg_replace(H2_REG, $ad_template.PHP_EOL.PHP_EOL.$h2result, $the_content, $limit);
    }
  }
  return $the_content;
}

function.phpの適切な行に上記のコードをコピペします。

簡単に説明すると、H2タグが広告付きのH2タグに置換される前に、1つ目のH2タグに文字列を付与して別物にすることで置換の対象外にしています。

3.子テーマのfunction.phpへ上書き

WordPressのインストールディレクトリ < wp-content < themes < cocoon-child-master

子テーマのfunction.phpへ上書きします。

間違えて親テーマのfunction.phpに上書きしないように注意しましょう(WEBサイトが見られなくなります)。

設定後

ご覧の様に目次下の広告を削除できました！

もちろん2つ目以降のH2タグ前には広告が表示されています。

このように「3」に制限している場合、3つめのH2タグまで通常広告付きH2へ置き換えられますが、今回1つ目を対象外としたことで2～4つ目までが置換対象となるようです。これもくどい感じになるようでしたら適宜数量を減らしてもいいかもしれませんね。

以上最初のH2タグ手前(目次下)の広告を削除する方法の説明でした。

*設定変更は自己責任により行ってください。いかなる損害がございましても責任は負いかねます。