STINGER6でアドセンス広告を最初の見出しH2の直前に表示する方法

ブログの見た目をスッキリさせるために色々とカスタマイズにチャレンジしています。
カッコいいサイトとか見るとマネしたくなったり、こうしたいなぁ~というのをネットで調べて参考にさせていただます。
みなさん丁寧に解説を掲示しており大変ありがたいです。

そのなかで参考にさせていただいたものに自分なりにアレンジを加えたものをこのブログで紹介していきます。
今回はその第1弾です。

まず当ブログの使用環境はWordPress4.4.3、テーマはSTINGER6になります。

広告アドセンスの配置

  • 投稿ページに関しては、記事中に1つと記事下に2つを配置。
  • 固定ページも本文中に1つと本文下に2つを配置。
  • トップページは、記事一覧の1番目の記事と2番目も記事の間に1つと記事一覧の最後に2つを配置。

としてます。
当初、投稿ページの記事中と固定ページの本文中の広告アドセンスの位置は一番頭に配置してました、これがなんか卑しい感じがしてました。

それを最初に出てくる見出しH2タグの直前に表示するようしたいと思います。
この設定についての説明です。

H2タグ直前にアドセンス広告

ライフレシピ様のサイトを参考にさせて頂いてます。

以下のソースをまるまるfunction.phpにコピーして、——広告タグ——-の箇所にアドセンス広告のソースを貼り付け。

見事に記事中の最初のH2タグ直前にアドセンス広告が表示されました。

Fuction.phpに以下のコードを貼り付けます(一番下でもOKです)。

function add_ads_before_1st_h2($the_content) {
  if (is_single()) {
    //広告(AdSense)タグを記入
    $ads = <<< EOF

    ------広告タグ-------
EOF;
    $h2 = '/<h2.*?>/i';//H2見出しのパターン
    if ( preg_match( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      $the_content = preg_replace($h2, $ads.$h2s[0], $the_content, 1);//最初のH2を置換
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

広告タグをヒアドキュメント『$ads = <<< EOF~EOF;』を使用して変数に格納しています。勉強になります。

固定ページもH2タグ直前に広告アドセンスを表示

参考にした表示方法にプラス以下を実現させたい。

  • 固定ページにも同様に最初のH2タグの直前に広告アドセンスを表示したい。
  • レクタングル(300×250)とレクタングル大(336×280)をそれぞれスマホ用とPCブラウザ用に振り分け表示させたい。

の2点を実現させるためのアレンジなります。

アレンジしたソースが以下になります。

function add_ads_before_1st_h2($the_content) {
  if (is_single() || is_page()) {
    if ( function_exists('wp_is_mobile') && wp_is_mobile()) {

      $ads = <<< EOF
      <p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>

      --------- スマホ用 レクタングル(300×250) ---------

EOF;

    } else {

      $ads = <<< EOF
      <p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>
      <div style="text-align:center; margin:5px 0px 20px;">

      --------- PCブラウザ用 レクタングル大(336×280) ---------

      </div>
EOF;
    }

    $h2 = '/<h2.*?>/i';//H2見出しのパターン
    if ( preg_match( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      $the_content  = preg_replace($h2, $ads.$h2s[0], $the_content, 1);//最初のH2を置換
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

アレンジ箇所の解説

  • 2行目に『|| is_page() ←または固定ページの場合』を追加してます。
  • 3行目の『if ( function_exists(‘wp_is_mobile’) && wp_is_mobile()) 』でスマホの場合を判定していて、4行~9行目の箇所にスマホ用レクタングル(300×250)の広告コードを貼り付けます。
  • 12行目の『else』でスマホ以外の場合で、13行~21行目の箇所にPCブラウザ用レクタングル大(336×280)の広告コードを貼り付けます。
  • 16行目のdivはセンター表示のstyleを指定しています、20行目でそのdivを閉じてます。
  • 6行目と15行目は「スポンサーリンク」文言の表示になります。

※10行目、20行目のヒアドキュメント閉じるマーク『EOF;』はインデント(空白やタブを配置)してはいけません。

当ブログの投稿ページの記事中と、固定ページの本文中の広告アドセンスは上記の設定で表示されております。
これで卑しい感じが少し解消されたのかと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする