2017年9月28日更新

Stinger7：2番目以降のh2の手前にダブルレクタングルの広告を表示させる方法

Thumbnail

今回も、前回と同じようにGoogleAdSenseを使ったカスタマイズを紹介したいと思います。

前回は（Stinger7サイトの一番最初のh2タグの手前にAdSense広告を横並びで2つ表示）（ダブルレクタングル）（リンク）させましたが、今回は2番目、3番目…のh2の手前に広告を2つ表示させる方法です。

カスタマイズ後

↓ 一番最初のh2の手前にAdSense広告を横並びで表示

stinger7-double-rectangle-before-nth-h2-1

↓　スマホ表示は1つのみ表示（AdSense規約のため）

stinger7-double-rectangle-before-nth-h2-2

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

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

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

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

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

1-1. functions.php を編集

Stinger7の functions.php に以下のコードを追加します。

下のコードの に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を編集

Stinger7子テーマの 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;
}
@media only screen and (min-width : 1080px){
    .content-ad-wrap {
        text-align: left;
    }
    .content-ad {
        float: left;
    }
    .content-ad:last-child {
        float: right;
    }
}

保存・更新すると広告が横並びで表示されるようになりました（↓）。

stinger7-double-rectangle-before-nth-h2-1

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

stinger7-double-rectangle-before-nth-h2-2

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

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

（配列の1番目は[0]なので[0][n]ではなく、数字が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ファイルに追加してもらえば大丈夫です。

↓ 3番目のh2の手前に広告を表示（上のコードの[n-1]を[2]に）

stinger7-double-rectangle-before-nth-h2-3

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.