【WordPress】Stinger8でアドセンスを記事内の見出しh2前に表示させる方法!

Stinger8

今回もアドセンス関連です。

アドセンスを記事エリア内にある、
見出しh2の前に表示させます。

当ブログでは前々から導入していましたが、
記事にするのを忘れていました。

簡単に出来るので試してみてください。

アドセンス関連の記事は以下の通りです。
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%a7%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%81%ae%e9%96%93%e3%81%ab%e3%82%a2%e3%83%89%e3%82%bb%e3%83%b3%e3%82%b9%e3%82%92%e6%8c%bf%e5%85%a5%e3%81%99%e3%82%8b/
https://plu-plu.net/%e3%82%a2%e3%83%89%e3%82%bb%e3%83%b3%e3%82%b9%e3%81%8c%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84%e5%a0%b4%e5%90%88%e3%81%ae%e5%af%be%e5%87%a6%e6%b3%95/
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%a7%e8%a8%98%e4%ba%8b%e4%b8%8b%e3%81%ae%e3%82%a2%e3%83%89%e3%82%bb%e3%83%b3%e3%82%b9%e3%82%92%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%81%ab%e3%81%99%e3%82%8b%e6%96%b9/

スポンサーリンク

子テーマ&バックアップは必須です!

今回はfunctions.phpのファイルにコードを追記します。
functions.phpの編集は失敗するエラーになる可能性が高いので、
必ずバックアップを取っておきましょう!

また、カスタマイズになるので、
子テーマを使用しましょう。
子テーマについてはこちら!
https://plu-plu.net/%e3%80%90wordpress%e3%80%91%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%82%92%e3%81%99%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%af%e3%80%81%e5%ad%90%e3%83%86/
https://plu-plu.net/%e3%80%90wordpress%e3%80%91%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e5%b0%8e%e5%85%a5%e6%96%b9%e6%b3%95%e3%81%a8%e4%bd%bf%e3%81%84%e6%96%b9%e3%82%92%e8%a6%9a%e3%81%88%e3%81%a6%e3%82%ac%e3%83%b3/

functions.phpを編集する!

functions.phpのファイルに以下のコードを追記します。

function add_ad_before_h2($the_content) {
$ad1 = <<< EOF
  <p class="ad-title">スポンサーリンク</p>
  <div class="ad-h2">
    【ここに最初の見出し前に表示させる広告コードを挿入してください(スマホ用)】
  </div>
EOF;

/*--pc最初h2前--*/
$ad2 = <<< EOF
  <p class="ad-title">スポンサーリンク</p>
  <div class="ad-h2">
   【ここに最初の見出し前に表示させる広告コードを挿入してください(PC用)】
  </div>
EOF;
  if ( is_single() ) {
    $h2 = '/^<h2.*?>.+?<\/h2>$/im';
    if ( preg_match_all( $h2, $the_content, $h2s )) {
      if ( $h2s[0] ) {
        if (st_is_mobile()){
          if ( $h2s[0][0] ) {
            $the_content = str_replace($h2s[0][0], $ad1.$h2s[0][0], $the_content);
          }
          
        } else {
          if ( $h2s[0][0] ) {
            $the_content = str_replace($h2s[0][0], $ad2.$h2s[0][0], $the_content);
          }
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2');
/*--ここまで--*/

【ここに最初の見出し前に表示させる広告コードを挿入してください(スマホ用)】
【ここに最初の見出し前に表示させる広告コードを挿入してください(PC用)】
上記の箇所をそれぞれに対応するコードに書き換えてください。
個人的には、レスポンシブの広告ユニットでよいと思います。

後は細かいところを調整しましょう。

style.cssを編集する!

スポンサーリンクの文字や、
空間を調整するため、以下のコードを追記します。

.ad-title {
    font-size: 80%;
    color: #333;
    text-align: center;
    margin-bottom: 5px;
}
.ad-h2 {
    margin-bottom:40px;
}

以上で完成です。

まとめ

今回は最初のh2前にアドセンスを表示させる方法でしたが、
最後のh2前にアドセンスを表示させる方法もあります。

しかし記事内に多くのアドセンスがあることは、
読む側としてはあまり好ましくないと思い今回は説明しませんでした。

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

Stinger8のカスタマイズ記事まとめはこちら!↓
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%be%e3%81%a8%e3%82%81/

コメント