ブログカスタマイズ

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

 

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

 

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

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

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

 

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

 

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

 

事前準備として

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

 

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

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

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

 

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

 

今回のカスタマイズでは、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] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad2_pc.$h2s[0], $the_content);
          }
          if ( $h2s[0] ) {//5番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad3_pc.$h2s[0], $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] ) {//2番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad2_mobile.$h2s[0], $the_content);
          }
          if ( $h2s[0] ) {//5番目のH2見出し手前に広告を挿入
            $the_content  = str_replace($h2s[0], $ad3_mobile.$h2s[0], $the_content);
          }
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','content_insert_ad_own');

 

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

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

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

  • スポンサーリンク」の文字を広告の上に表示
  • 2番めと5番目の見出し(h2)の上に表示させている
  • モバイル表示用には、Googleアドセンスの「ラージモバイルバナー(320×100)」を表示している
  • PC表示用には、Googleアドセンスの「レスポンシブ広告(自動サイズ)」を表示している

 

さいごに動作確認を

 

functions.phpを編集したので、

  • サイトが真っ白になってないか?
  • 設定通りに、サイトマップが表示されているか?
  • 他に不具合が出てないか?

以上を確認してください。

 

問題がなければ、カスタマイズは終わりです!

おつかれさまでした~!

 

まとめ

 

プラグインを使わず、CSSの追加だけで記事のなかに自動でGoogleアドセンス(広告)を表示させてみました。

やってみると、意外とかんたんにできてしまったのでよかったです!

広告を記事内に表示させるかどうかは、ユーザーによって考えは違うので、導入するしないはご自由にお願いします。

 

最後まで読んでいただきありがとうございました!

 

ではでは(^_^)v

 

 

 

効率的に資格を勉強したい!

スキルアップのために資格を取ろうと思ったとき、どう勉強したらいいか悩んだことはありませんか?

どんな学習方法がベストなのか、学習ブロガーであるりゅうやん。がご紹介します!

効率的に学ぶ方法を知りたい!

通信教育なら『フォーサイト』がオススメ!

学習ブロガーとしては、通信教育フォーサイトをオススメしています!

  1. 図解とフルカラーでわかりやすいテキスト
  2. 講義DVDやCDなどのコンテンツが充実
  3. ネット環境があれば、いつでもどこでも学べる
  4. 徹底したフォロー体制と手厚いサポート
  5. リーズナブルな受講費用

 

僕もフォーサイトで「社会保険労務士講座」を受講中です!

一緒に資格取得を目指してみませんか?

 

RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA