賢威8でGoogleアドセンスを記事中に貼る方法
こんな人向け
アドセンスを貼りたいけど、どこにどうやって貼ればよいの?
賢威8を購入したけど、賢威の設定で貼れないの?

Googleアドセンスを貼っているブログでよく見る

  • 記事途中
  • 記事下
  • サイドバー

には、賢威の設定だけではアドセンスを貼り付けることはできません。

これらの場所にアドセンスを貼り付けるには、テンプレートのカスタマイズやウィジェットを埋め込む必要があります。でも安心してください。それほど難しくは無いです。

また、この記事では賢威のテンプレートを使っているブログを対象に説明していますが、simplicityなどのテンプレートでも同じ方法が使えます。



Googleアドセンスを貼る位置

まず、Googleアドセンスを貼る位置は、下記の3つとしています。

  • 記事途中
  • 記事下
  • サイドバー

これは、パソコン環境で最適と言われている位置になります。

スマホの場合はサイドバーは、スクロールしていった下のほうになるので、あまり意味ないです。きっちり切り替えるには、テンプレートのカスタマイズ中でも切り替える設定しないといけないです。

ですが、余分にでるだけなので、スマホ環境でも同じ位置にアドセンスを貼る前提で説明します。

広告のサイズはレスポンシブにすればパソコンとスマホ切り替える必要なし

Googleアドセンスの広告は、レスポンシブデザインに対応しており、ブログを見ている環境に合わせて広告の大きさを変えてくれます。

一昔前は固定サイズだったので、パソコンとスマホのどちらでブログにアクセスしているかで、広告のサイズを切り替えてました。しかも、最近はタブレットなどもあり、広告のサイズを固定化すると、広告が記事幅に比べて狭いなどでレイアウトと一致しなくてデザイン性が落ちてしまいます。

しかし、最近はブログのテンプレートもそうですが、レスポンシブデザインが主流になっており、Googleアドセンスの広告も同じです。なので、アクセスする端末に応じて、記事の幅が決まり、広告の幅も合わせて拡大縮小してくれます。

なので、Googleアドセンスで、広告を作るときはサイズしていではなく、レスポンシブにすべきです。

レスポンシブのGoogleアドセンスの広告の作り方

Google Adsenseへアクセスし、下の画像のように「広告ユニット」で「新しい広告ユニット」をクリックして作ります。

広告の作成

広告の種類で「テキスト広告とディスプレイ広告」を選んで作れる広告ユニットで、下の画像のように「広告サイズ」で「推奨」(レスポンシブ)を選ぶだけです。

広告の作成

今回は、

  • 記事途中
  • 記事下
  • サイドバー

の3つの場所に広告を表示するので、同じ手順を3回繰り返して広告を3つ作ります。掲載場所がわかりやすいように広告の名前を、例えば次のようにしておくとよいです。

  • 記事途中 レスポンシブ
  • 記事下 レスポンシブ
  • サイドバー レスポンシブ

「記事途中」へのアドセンスの貼り方

記事中にアドセンスを貼るには、テーマのカスタマイズが必要です。しかも、wordpressの設定ではなく、ftpでファイルをアップロードする必要があります。

パソコンに詳しくないとちょっと難しいですが、頑張ってください。

ad-in-body.phpというファイルを作る

メモ帳などで、下の内容の「ad-in-body.php」という中身がからのファイルを作ります。

そのファイルをレンタルサーバへアップロードする。

それを、ブログのサーバへffftpなどのソフトを使ってftpでアップロードします。レンタルサーバによって違うので、詳しはレンタルサーバのサイトで調べてください。

アップロードする先は、wordpressのインストール先の「/wp-content/themes/keni8-child/ad-in-body.php」です。賢威以外のテンプレートを使っている場合は「keni8-child」の部分をテンプレートの名前に変えれば、同じようにアップロードできます。

wordpressのテーマの編集で広告のコードを埋め込む

あとは、アップロードした「ad-in-body.php」をwordpressの設定で編集して広告を埋め込みます。

編集方法は、「外観 - テーマの編集」を選んで、右側の「テーマファイル」から「ad-in-body.php」を選びます。選ぶと、空でアップロードしたので中身は何もありません。そこに、Googleアドセンスで作成した広告のコードを取得して貼り付けるだけです。(画像の赤枠)

広告の作成

記事からad-in-body.phpが呼び出されるようにする

もう一息です。

先程のテーマの編集のページで、テーマのための関数(functions.php)を選びます。

賢威のテンプレートを適用してカスタマイズをしたことがなければ、コメントだけになっているはずですので、その下に下記のコードをそのまま貼り付けます。

<?php
/*----------------------------------------
    賢威8用 子テーマ
    株式会社 ウェブライダー
----------------------------------------*/

//H2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン

//本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
//H3-H6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}

function add_ads_before_1st_h2($the_content) {
  if ( is_single() ) {//固定ページも表示する場合はis_singular()にする
    ob_start();//バッファリング
    get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入(最初のH2を置換)
      $count = 1;
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

これで、「記事途中」へのアドセンスの貼り付けは終わりです。

「記事下」へのアドセンスの貼り方

記事下にアドセンスを貼るには、テーマのカスタマイズが必要です。カスタマイズように小テーマをブログへ適用している場合は、ftpでファイルをアップロードする必要があります。

パソコンに詳しくないとちょっと難しいですが、頑張ってください。

【小テーマ適用のみ】content-post.phpをアップロードする

賢威のカスタマイズように、賢威のサイトを見て小テーマをブログに適用している場合は、content-post.phpを小テーマへ親テーマからコピーしてくる必要があります。

これは、小テーマ側にcontent-post.phpが無いためです。小テーマ側にcontent-post.phpが無い場合は、親テーマを参照するようになっています。

小テーマ側にcontent-post.phpをコピーしてこれば、小テーマ側のcontent-post.phpを参照するようになります。

まずは、親テーマの中にある「/wp-content/themes/keni80_wp_standard_all_201811200122/template-parts/content-post.php」をパソコンにffftpなどのソフトを使ってftpでダウンロードします。レンタルサーバによって違うので、詳しはレンタルサーバのサイトで調べてください。

「keni80_wp_standard_all_201811200122」は、購入した賢威のバージョンによって日付など多少違うことがあります。読み替えてください。

ダウンロードしたcontent-post.phpを小テーマの「/wp-content/themes/keni8-child/template-parts/content-post.php」へアップロードします。「template-parts」というフォルダはないと思いますので、アップロードするときに作成してください。

記事下に広告のコードを埋め込む

記事中の貼付けと同じようにしてcontent-post.phpを編集します。

編集方法は、「外観 - テーマの編集」を選んで、右側の「テーマファイル」から「template-parts/content-post.php」を選びます。

ファイルの中に下のような「