今回も、前回と同じようにGoogleAdSenseを使ったカスタマイズを紹介したいと思います。
前回は(Stinger7サイトの一番最初のh2タグの手前にAdSense広告を横並びで2つ表示)(ダブルレクタングル)(リンク)させましたが、今回は2番目、3番目…のh2の手前に広告を2つ表示させる方法です。
目次
カスタマイズ後
↓ 一番最初のh2の手前にAdSense広告を横並びで表示
↓ スマホ表示は1つのみ表示(AdSense規約のため)
1. 2番目に出てくるh2の手前に広告を表示
最初は2番目に出てくるh2の手前に、アドセンス広告を表示させる方法です。
今回のカスタマイズでは、寝ログさんの記事を参考にさせてもらいました。
本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法
ただ、この辺りは自分のPHPの知識が怪しくなってくるので、こっちの方がいいんじゃね?という書き方があるかもしれません。気になる部分があったら編集してください。
1-1. functions.php を編集
Stinger7の functions.php に以下のコードを追加します。
下のコードの に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つだけ表示するように設定しています。
モバイルサイトの場合は、2 つ以上の AdSense 広告を画面に同時に掲載することはできません。
1-2. style.cssを編集
Stinger7子テーマの style.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;}}
保存・更新すると広告が横並びで表示されるようになりました(↓)。
↓ スマホ表示は1つのみ表示(PCで見た場合は、横幅を狭めても広告が2つ表示されます)
2. n番目以降に出てくるh2の手前に広告を表示
3番目以降に出てくるh2の手前に広告を表示するには、[0][1]
の部分を[0][2]
や [0][3]
のように配列の番号を変えれば良いので、n番目のh2の手前に広告を表示するには、以下のようなコードになります。
(配列の1番目は[0]なので[0][n]
ではなく、数字が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ファイルに追加してもらえば大丈夫です。
↓ 3番目のh2の手前に広告を表示(上のコードの[n-1]
を[2]
に)