この前、サイトを見てくれている方から「賢威7サイトに任意のh2の上に広告を出す方法を教えてほしい」というコメントをもらいました。
前回は一番最初のh2の手前にダブルレクタングルの広告を表示させましたが、今回は2番目や3番目など、「n番目」に出てくるh2の手前に広告を表示させたいと思います。
目次
カスタマイズ後
↓ PC表示
↓ スマホ表示(AdSense規約の関係で広告は1つだけ表示)
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つだけ表示するように設定しています。
モバイルサイトの場合は、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;}}
↓ コード編集後
↓ スマホ表示は1つのみ表示(PCで見た場合は横幅を狭めても広告が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ファイルに追加してもらえば大丈夫です。