賢威7:n番目のh2の手前にダブルレクタングルの広告を表示する方法

  • Google+
  • B!はてブ
  • Pocket
  • この前、サイトを見てくれている方から「賢威7サイトに任意のh2の上に広告を出す方法を教えてほしい」というコメントをもらいました。

    前回は一番最初のh2の手前にダブルレクタングルの広告を表示させましたが、今回は2番目や3番目など、「n番目」に出てくるh2の手前に広告を表示させたいと思います。

    カスタマイズ後

    ↓ PC表示

    keni7-double-rectangle-before-nth-h2-1

    ↓ スマホ表示(AdSense規約の関係で広告は1つだけ表示)

    keni7-double-rectangle-before-nth-h2-2

    1. 2番目に出てくるh2の手前に広告を表示

    最初は2番目に出てくるh2の手前に、アドセンス広告を表示させる方法です。

    今回のカスタマイズでは、寝ログさんの記事を参考にさせてもらいました。

    本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法

    ただ、この辺りは自分のPHPの知識が怪しくなってくるので、こっちの方がいいんじゃね?という書き方があるかもしれません。気になる部分があったら編集してください。

    1-1. functions.php を編集

    賢威7本体や子テーマの functions.php に以下のコードを追加します。

    下のコードの <!-- Google Adsense の広告コード --> にAdSenseコードを貼り付けて下さい。

    function content_h2_add_ad($the_content) {
        // 投稿のみ適用
        if (!is_single()) {
            return $the_content;
        }
        $ad = '
    <!-- Google Adsense の広告コード -->
    ';
      // 広告と分かるようにするボックス
      $ad_content = '<div class="content-ad-wrap"><p>スポンサーリンク</p><div class="content-ad">' . $ad . '</div>';
      if ( !wp_is_mobile() ) {
        $ad_content .= '<div class="content-ad">' . $ad . '</div>';
      }
      $ad_content .= '</div>';
      // 正規表現で最初のh2の手前に広告ボックスを付ける
      $h2 = '/<h2.*\/h2>/im';
      if ( preg_match_all( $h2, $the_content, $h2s )) {
          if ( $h2s[0][1] ) {
            $the_content  = str_replace($h2s[0][1], $ad_content.$h2s[0][1], $the_content);    
          }
      }
      return $the_content;
    }
    add_filter('the_content','content_h2_add_ad');
    

    (↑ 記事本文全体をフィルターにかけて、正規表現のパターンにマッチしたものを変換するようなイメージ)

    また、GoogleAdSenseの規約の関係で、スマホの場合は広告を1つだけ表示するように設定しています。

    Google公式:広告の配置に関するポリシー

    モバイルサイトの場合は、2 つ以上の AdSense 広告を画面に同時に掲載することはできません。

    1-2. style.cssを編集

    親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

    (CSSコードは前回書いた記事と同じものです)

    .content-ad-wrap:before {
        content: "";
        display: table;
    }
    .content-ad-wrap:after {
        content: "";
        display: table;
        clear: both;
    }
    .content-ad-wrap {
        width: 100%;
        text-align: center;
    }
    .content-ad-wrap > p {
        color: #888;
        margin-bottom: 5px;
    }
    .content-ad {
        margin-bottom: 30px;
    }
    .content-ad:first-child {
        margin-right: 4%;
    }
    @media only screen and (min-width : 1200px){
        .content-ad-wrap {
            text-align: left;
        }
        .content-ad {
            width: 48%;
            float: left;
        }
    }
    

    ↓ コード編集後

    keni7-double-rectangle-before-nth-h2-1

    ↓ スマホ表示は1つのみ表示(PCで見た場合は横幅を狭めても広告が2つ表示されます)

    keni7-double-rectangle-before-nth-h2-2

    2. n番目以降に出てくるh2の手前に広告を表示

    3番目以降に出てくるh2の手前に広告を表示するには、[0][1]の部分を[0][2][0][3] のように配列の番号を変えれば良いので、n番目のh2の手前に広告を表示するには、以下のようなコードになります。

    (配列の1番目は[0]なので数字が1つずつズレて[0][n-1]になります)

    function content_h2_add_ad($the_content) {
        // 投稿のみ適用
        if (!is_single()) {
            return $the_content;
        }
        $ad = '
    <!-- Google Adsense の広告コード -->
    ';
      // 広告と分かるようにするボックス
      $ad_content = '<div class="content-ad-wrap"><p>スポンサーリンク</p><div class="content-ad">' . $ad . '</div>';
      if ( !wp_is_mobile() ) {
        $ad_content .= '<div class="content-ad">' . $ad . '</div>';
      }
      $ad_content .= '</div>';
      // 正規表現で最初のh2の手前に広告ボックスを付ける
      $h2 = '/<h2.*\/h2>/im';
      if ( preg_match_all( $h2, $the_content, $h2s )) {
          if ( $h2s[0][n-1] ) {
            $the_content  = str_replace($h2s[0][n-1], $ad_content.$h2s[0][n-1], $the_content);    
          }
      }
      return $the_content;
    }
    add_filter('the_content','content_h2_add_ad');
    

    CSSコードは他と全く同じなので、上で紹介したCSSコードをお使いのCSSファイルに追加してもらえば大丈夫です。