2017年9月28日更新

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

Thumbnail

この前、サイトを見てくれている方から「賢威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コードを貼り付けて下さい。

PHP
コピーする
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コードは前回書いた記事と同じものです）

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]になります）

PHP
コピーする
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ファイルに追加してもらえば大丈夫です。

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.