CSSの追加だけで、記事のなかにアドセンス広告を自動表示させてみた！

こんにちは、りゅうやん。です！

ブログ記事の本文中には、Googleアドセンスという広告を表示させています。

表示の方法には、WordPressプラグインでの設定とかでもできますが、ぼくはCSSでのカスタマイズで表示させています。

CSSで表示させるやり方はたくさんありますが、ぼくがいくつか試してきたなかで一番よかったものをまとめました！

こんな人にオススメ！

プラグインを使わず、記事内に自動で広告を表示させたい！
CSSを使ったブログのカスタマイズがしたい！
プラグインの数を減らしたい！
モバイル用（スマホやタブレット）とPC用で、表示する内容を変えたい！
何番めの見出しの上に表示させるか、自分でカスタマイズしたい！

参考にした記事

【JINカスタマイズ】2個目・3個目の見出し2直前にアドセンスを追加する方法

↑でTSUNJIさんが紹介しているコードを、ぼくもコピペでそのまま使わせてもらってます。

Contents

事前準備として
広告を自動で表示させる手順
1. ①子テーマのfunction.phpをひらく
2. ②functions.phpにコピペ
さいごに動作確認を
まとめ

事前準備として

①カスタマイズには子テーマを使う

ブログをカスタマイズするときは、必ず子テーマを使います。

なぜなら、親テーマがアップデートして仕様が変わっても、子テーマでカスタマイズした内容は消えないからです！

もし、親テーマでカスタマイズすると、テーマをアップデートしたときにカスタマイズや設定がリセットされてしまいます。

②バックアップをとっておく

今回のカスタマイズでは、functions.phpを編集するので、事前にバックアップ取っておいてくださいね！

カスタマイズによってサイトが真っ白になっても、エックスサーバーを使っているのであれば、↓のやり方で復旧させることができるので、ご参考に！

ブログのカスタマイズで真っ白になっても、エックスサーバーで解決させる方法を伝授！こんにちは、りゅうやん。です！ブログをやっていると、自分好みにカスタマイズしたいですよね。でも、CSSと...

③広告リンクを取得しておく

記事の本文中に貼りたいGoogleアドセンスのリンクを、あらかじめ取得しておいてくださいね！

もちろん、アドセンスではなく、アフィリエイトのリンクを指定してもいいかもしれません。

広告を自動で表示させる手順

①子テーマのfunction.phpをひらく

ワードプレスのダッシュボードから、

外観 → テーマの編集

と進んで、使用テーマの子テーマのfunctions.phpに入ります。

くれぐれも、別のシートに入らないようにしましょうね！

②functions.phpにコピペ

functions.phpに以下のコードをコピペします。

/**********************
 本文中にアドセンス表示
**********************/
function content_insert_ad_own($the_content) {
  //2つ目の広告タグを挿入（PC表示用）
  $ad2_pc = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">

【Googleアドセンス】

</div></div></div>
EOF;
  //3つ目の広告タグを挿入（PC表示用）
  $ad3_pc = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">

【Googleアドセンス】

</div></div></div>
EOF;
  //2つ目の広告タグを挿入（モバイル表示用）
  $ad2_mobile = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">

【Googleアドセンス】

</div></div></div>
EOF;
  //3つ目の広告タグを挿入（モバイル表示用）
  $ad3_mobile = <<< EOF
<div>
<div class="sponsor-h2-center">スポンサーリンク</div>
<div class="ad-single-h2">
<div class="textwidget">

【Googleアドセンス】

</div></div></div>
EOF;
 
  global $post;
  // 投稿のみに適用
  if (!is_single() || is_singular('cta')) {
    return $the_content;
  }
  $h2_ad = get_post_meta($post->ID, 'custom_ad_off', true);
  if( ! $h2_ad == 'この記事で広告を表示しない' ){
    if ( is_single() && !wp_is_mobile() ) {//投稿ページ（PC）
      $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
      if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {
          if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0][1], $ad2_pc.$h2s[0][1], $the_content);
          }
          if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0][4], $ad3_pc.$h2s[0][4], $the_content);
          }
        }
      }
    } else if ( is_single() && wp_is_mobile() ) {//投稿ページ（モバイル）
      $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
      if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {
          if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0][1], $ad2_mobile.$h2s[0][1], $the_content);
          }
          if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0][4], $ad3_mobile.$h2s[0][4], $the_content);
          }
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','content_insert_ad_own');

8、19、30、41行めにある「スポンサーリンク」の文字は、ご自身のサイトごとで言葉が違うときは変えてくださいね！

12、23、34、45行めにある【Googleアドセンス】の部分に、Googleアドセンスなどの広告リンク（広告タグ）を貼ってくださいね！

ぼくのカスタマイズでは、