Stinger8

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

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

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

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

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

アドセンス関連の記事は以下の通りです。

【WordPress】Stinger8で記事一覧の間にアドセンスを挿入する方法【Google Adsense】
今回は記事一覧の中にアドセンスを挿入する方法です。なお、こちらの記事はstinger8に関する記事です。stingerplus2の場合はこちらそこまで難しくはなくコピペでできますが、カスタマイズになるので、子テーマを使用しましょう。子テーマ...
【Google Adsense】アドセンスが表示されない場合の対処法
たまーにコメントでいただくことがあります。それは、アドセンスを横並びにすると、アドセンスが消えた!!ということです。ここで言うアドセンスの広告は、投稿した記事の下にある広告を指しています。なお、使用しているテーマは「stinger8」です。...
【WordPress】STINGER8で記事下のアドセンスを横並びにする方法
前回はアドセンスを記事下などに設置しましたが、記事下のアドセンスは、単に設置した場合、アドセンスは縦に2つ続いて設置されているはずです。今回はこれを横並びにする方法を説明します。横並びにする場合もカスタマイズなので、子テーマを使用しましょう...
スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

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

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

また、カスタマイズになるので、
子テーマを使用しましょう。
子テーマについてはこちら!

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ?なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する!子テーマを導入する方法は2通りあります。1つは親テーマと一緒にダウンロードする!もう1つは自分で子テー...

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のカスタマイズ記事まとめはこちら!↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

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

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

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

コメント