WordPress

【JINカスタマイズ】2個目・3個目の見出し2直前にアドセンスを追加する方法

  /

WordPressテーマ『JIN』の2個目や3個目の見出し直前にアドセンス（広告）を追加したい！

WordPressテーマ『JIN』には、もともと下記の4ヶ所へのアドセンス挿入や、記事ごとに表示・非表示を切り替える機能がついています。

  1. 記事タイトル下（タイトルとアイキャッチの間）
  2. 記事見出し２上（1個目の見出し2の直前）
  3. 記事下
  4. 関連記事下

もし、「2個目の見出し2の直前」や「3個目の見出し2の直前」などにアドセンスを導入したい場合は、自分でアドオンを入れたり［functions.php］を編集したりしなければなりません。

ただ、ネット上のWordPressのカスタマイズ記事をもとにアドセンスを追加するだけだと、『JIN』の広告表示のON／OFFと連動しないので、「この記事はアドセンスを表示したくないな」という場合は、その記事だけさらに追加でカスタマイズする必要があります。

そこで今回は、「『JIN』の広告表示ON／OFF機能と連動させつつ、本文中の2個目と3個目の見出し2の直前にアドセンスを追加する方法」についてご紹介させていただきます。

▼この記事でできること

  • 本文の2個目や3個目の見出し2（h2）の上にアドセンスを追加
  • 記事作成画面の「この記事で広告を表示しない」にチェックが入っているときは広告を非表示
  • テーマのバージョンアップ時の影響を最小限に抑えるために、子テーマの導入をおすすめします。
  • この記事では［functions.php］を編集します。必ず、バックアップを取ってから作業してください。
  • カスタマイズは自己責任でお願いします。

 

確認環境

本カスタマイズを実施した時点の、当ブログのWordPress本体と『JIN』のバージョン情報です。

『JIN』は非常に活発に開発が行われており、どんどんバージョンアップしているWordPressテーマなので、カスタマイズ開始前にあなたの環境を必ず確認してください。

  • 記事作成日：2018年7月22日
  • WordPressのバージョン：4.9.7
  • JINのバージョン：1.610

 

『JIN』の2個目・3個目の見出しh2直前にアドセンスを追加するカスタマイズ

カスタマイズ方法は、下記のコードを［functions.php］に追加するだけです。

  • 「スポンサーリンク」という文字については、あなたのブログでどのように表記しているかに合わせて修正してください。
  • 「■■2つ目の広告タグを挿入（PC表示用）■■」などと記載している部分を削除して、広告タグを貼り付けます。
//////////////////////////////////
// H2タグ前に広告を挿入
//////////////////////////////////
function content_insert_ad_own($the_content) {
  //2つ目の広告タグを挿入（PC表示用）
  $ad2_pc = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">
■■2つ目の広告タグを挿入（PC表示用）■■
</div></div></div>
EOF;
  //3つ目の広告タグを挿入（PC表示用）
  $ad3_pc = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">
■■ 3つ目の広告タグを挿入（PC表示用）■■
</div></div></div>
EOF;
  //2つ目の広告タグを挿入（モバイル表示用）
  $ad2_mobile = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">
■■ 2つ目の広告タグを挿入（モバイル表示用） ■■
</div></div></div>
EOF;
  //3つ目の広告タグを挿入（モバイル表示用）
  $ad3_mobile = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">
■■ 3つ目の広告タグを挿入（モバイル表示用） ■■
</div></div></div>
EOF;

  global $post;
  // 投稿のみに適用
  if (!is_single() || is_singular('cta')) {
    return $the_content;
  }
  $h2_ad = get_post_meta($post->ID, 'custom_ad_off', true);
  if( ! $h2_ad == 'この記事で広告を表示しない' ){
    if ( is_single() && !wp_is_mobile() ) {//投稿ページ（PC）
      $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
      if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {
          if ( $h2s[0] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad2_pc.$h2s[0], $the_content);
          }
          if ( $h2s[0] ) {//3番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad3_pc.$h2s[0], $the_content);
          }
        }
      }
    } else if ( is_single() && wp_is_mobile() ) {//投稿ページ（モバイル）
      $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
      if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {
          if ( $h2s[0] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad2_mobile.$h2s[0], $the_content);
          }
          if ( $h2s[0] ) {//3番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad3_mobile.$h2s[0], $the_content);
          }
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','content_insert_ad_own');

 

今回のカスタマイズでやっていること

「自分は2個目と3個目の見出し2上じゃなくて、3個目と4個目が良いんだ！」とか「もっと違うカスタマイズがしたい！」という方のために、何をやっているかをちょっとだけ説明。

 

広告表示のON／OFFにチェックが入っているかどうか

$h2_ad = get_post_meta($post->ID, 'custom_ad_off', true);

→「この記事で広告を表示しない（custom_ad_off）」にチェックが入っているかどうかで条件を分岐。

Chromeなどのブラウザの「開発者向けツール」で、管理画面の項目のラベル名を調べれば、「○○にチェックが入っている時は～」など、自分の好きな条件でカスタマイズもできるかも？

 

○番目の見出し2上

$h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
  if ( $h2s[0] ) {
    if ( $h2s[0] ) {//2番目のH2見出し手前に広告を挿入
      $the_content  = str_replace($h2s[0], $ad2_pc.$h2s[0], $the_content);
    }
    if ( $h2s[0] ) {//3番目のH2見出し手前に広告を挿入
      $the_content  = str_replace($h2s[0], $ad3_pc.$h2s[0], $the_content);
    }
  }
}

本文中に見出し2が存在するか確認して、何番目の見出し2の上にアドセンスを追加するかを記載している場所。

  • ［0］［1］→2個目の見出し2の上
  • ［0］［2］→3個目の見出し2の上
  • ［0］［3］→4個目の見出し2の上
  • ［0］［4］→5個目の見出し2の上

※↑は大括弧［］を全角で記載していますが、実際には半角で記載してください。

例えば、「2個目の見出し2の上に［ad2_pc］の広告を挿入する」といった記載になりますので、自分の好きな場所（数字）に調整してください。

（数を増やすことももちろん可能です。あまりおすすめはしませんが……）

 

まとめ

今回の記事のように、テーマに無い機能を自分で追加する場合は、何を追加したのかを必ず管理しておいてください。

僕は3年ほど『こまろくNOTE』という雑記ブログを運営しているのですが、「親テーマをバージョンアップしたら、自分が過去に追加したカスタマイズのせいで表示がめっちゃ崩れて大パニック！」といった経験を何度かしていますので……（汗）

また、テーマのバージョンアップが公開された場合には、どこが修正されているのかを確認しましょう。

「もしかしたら自分が追加した機能が競合するかも？」という部分があれば、一旦、該当の場所を削除したうえでテーマをバージョンアップして、その後に改めて機能を追加し直す、など慎重にブログを運営いただければと思います。

「『JIN』でこんなカスタマイズがしたいけどできない！」という悩みがある場合は、コメントやTwitterでご連絡いただけば調査しますよ（できる範囲で）。

以上、TSUNJI（@tsunji1983_web）でした。

RELATED POST