【STINGER5】Google Adsenseの位置を変更する

Google AdSenseの凄さを実感しているAndoTV（@andohiroyukiTV）です。

前回は「STINGER5」のカスタマイズのうち、Google Analyticsの導入方法と自分のアクセスを解析から除く方法をお話をさせて頂きました！
【STINGER5】Google Analytics導入と自分のアクセスを除外する方法

今回は、STINGERを使われている人なら、結構気になるGoogle AdSenseのお話をさせて頂きたいと思います！

スポンサーリンク

今まで行ったカスタマイズはこちら

・子テーマ作成
・テーマ内に必要ファイルをコピー
・SNSボタンを変更
・Googleアナリティクスを導入
・自分のアクセスをカウントをしないようにする

　↓今日はここ
・Adsense位置の変更
・人気記事ランキングをサイドバーに導入
・サイドバーの並び順変更
・トップページのサイドバー広告のカスタマイズ
・各記事のサイドバー広告のカスタマイズ
・最新記事の説明文を除き、更新日を入れる

過去に紹介したカスタマイズは、記事のリンクを貼らせていただいたので、知りたい項目をクリックして頂けると助かります！

Google AdSense（アドセンス）ってなに？

Google AdSenseという言葉を初めて聞く方もいらっしゃると思うので、簡単に説明させてもらいます。
Google AdSense（アドセンス）は、Wikipediaにはこう書かれています。

Google AdSense（グーグルアドセンス）はGoogleの提供している検索連動型およびコンテンツ連動型広告の広告配信サービスの総称である。

最近のBlogやニュースのまとめサイトで、こんなものをよく見かけると思います。
これがGoogle AdSenseの広告になります。
スポンサードリンクと書かれているからGoogle AdSenseだと断定は出来ませんが、広告であることは間違いありません。

またYouTubeなどを視聴すると出てくる広告もGoogle AdSenseであると言えます。
挙げだしたら、たくさんあるのですが、Google AdSenseとは、Googleの提供する広告だと覚えて下さい！

Google AdSenseの設定方法

Google AdSenseはGoogleアカウントがあれば、すぐに作成することが出来ます。

AdSenseの登録をする

Google AdSenseのサイトにアクセスし、「今すぐ開始」をクリック。
そうすると次の画面が出てくるので、「はい（Googleアカウントでログインする）」をクリック。

その後、広告を貼りたいウェブサイトのURLや申込人の情報などを入力して、登録をします。
AndoTVのオススメは、GmailやGoogle Analyticsなどのアカウントと統一する方法です！
最近、Google AdSenseとAnalyticsのリンクが簡単になりましたし、いちいちアカウントを切り替える必要が無いからです。

AdSenseのコードをサイトに貼る

Google AdSenseの申し込みが済んだら、AdSenseの広告を作り、コードを申請したサイトに貼ります。
STINGER5の場合は、ウィジェットの中にAdSense用のものが用意されているので、「Google アドセンス用336px」の所に「336×280」の広告のコードを貼ります。
すると広告が挿入される場所に空白のスペースが出現します。

Googleの承認が降りるまで待つ

後は、GoogleからAdSenseの承認が降りるまでひたすら待ちます。
早い人だと1日くらいで承認のメールが登録したアドレスに届きます。
メールが届いて、少しすると先程の空欄に広告が表示されるようになります。

承認のスピードは個人差がかなりあるようです。
AndoTVはYouTubeの登録が先だったので、承認メールをもらうまで非常に苦労しました。
承認してもらうまでの道のりは、こちらの記事をご覧ください。

Googleアドセンスが表示されない。。。
Google AdSenseの基礎を知りたい方は、こちらの本を読むとほとんど網羅できます。
AndoTVもお世話になりました！

Google AdSenseの位置を変更する

STINGER5では、ウィジェットでGoogle AdSenseのコードが簡単に貼り付けられるようになっています。
デフォルトだとこのような表示になっています。

それをこのように変えていきます。
サイドバーに別の広告を入れているのは、Google AdSenseは1つのサイトに基本3つまでしか広告を設置することが出来ないからです。

リード文の後にAdSense（300×250）を設置する

リード文の下にAdSenseを設置するのですが、リード文の後にAdSenseを設置する方法は色々あるようです。
AndoTVはENJIさんのSTINGERでアドセンスをより効果的に貼る方法を参考にさせて頂き、functions.phpにコードを記述して、ショートコードで設置する方法にしました！

functions.phpに下記のコードを記入

//アドセンス
function showads() {
 return '
<p>スポンサードリンク</p>
ここにアドセンスのコード';
}
add_shortcode('adsense', 'showads');

文字と広告の隙間を調節

これだけだと「スポンサードリンク」の文字と広告の間に隙間が空いてしまいます。
その隙間が気になったので、以下のように場所を調節しました。

//アドセンス
function showads() {
    return '
<p style="margin-bottom:5px;">スポンサードリンク</p>
ここにアドセンスのコード';
}
add_shortcode('adsense', 'showads');

これでアドセンスを入れたいところに[ adsense ]（記載する際はスペースを削除してください）と入力すれば、AdSenseを設置することが出来ます。
AdSenseのコードはレクタングル（中）（300×250）なので、お間違えのないように。

サイドバーのAdSense（300×250）を削除する

リード文の下にAdSenseを新しく加えたので、サイドバーのアドセンスを削除します。
sidebar.phpにある以下のコードを削除するだけでアドセンスを削除することが出来ます。

 <!-- スマホだけのアドセンス -->
<?php if (is_404()) { ?>
<?php } else { ?>
  <?php if(is_mobile()) { //スマホの場合 ?>
  <div style="padding-top:10px;">
    <?php get_template_part('ad'); //アドセンス読み込み ?>
  </div>
  <?php } else { //PCの場合 ?>
  <?php } ?>
<?php } ?>
  <!-- /スマホだけのアドセンス -->

こちらのコードを消すだけだとスマホで表示するときにGoogle AdSenseが消えてしまいます。
そのため、スマホで表示するときだけAdSense（300×250）を表示するように後ほどします。

サイドバーに広告をカテゴリー別に設置する

ここまででPCで表示する際のGoogle AdSenseの設定は終了です！
ですが、サイドバーの部分が空いてしまって、寂しいので、カテゴリーに合った広告を設置することにしました。

その際には、こちらの記事を参考にさせて頂きました！
STINGER5でアドセンスを記事内へ、サイドバーに別の広告をカテゴリ別に入れてみた

カテゴリ別に広告を設定するのとPC、スマホなど条件によって広告の種類を変えられる便利なプラグイン【Widget Logic】を導入しました！
プラグインを有効化すると、ウィジェットの表示の所に以下の表示が出るようになります。

Widget Logicの欄に条件の分岐設定することで、カテゴリーごとに表示を変えることが出来ます。

AndoTVは先程の記事を参考に
・トップページとアーカイブではサイドバーにアドセンスを表示
・投稿ページではサイドバーにアドセンス以外の広告の表示
・スマホではアドセンスが[リード文の下]と[記事下]と[関連記事下]に表示

する形にしました。

広告を用意する

最初にGoogle AdSense（300×250）とカテゴリ別に設置したい広告（300×250のサイズ）を用意します。
AndoTVはAdSense以外の広告は主にA8.netさんからカテゴリーに合いそうな広告を探して、設置をしています！

設置したい広告を見つけたら、【Googleアドセンスのスマホ用300px】へテキストを配置して、コードを入力します。
テキスト1つにつき、1つの広告になるので、広告の数だけテキストがあることになります。

広告の設置が終わったら、次は広告をカテゴリーごとやPC、スマホなど分岐する条件をWidget Logicの欄に記入していきます！

Google AdSense（300×250）を追加

【Googleアドセンスのスマホ用300px】にアドセンスのレクタングル中（300×250）を2つ追加します。
それぞれに下記の条件分岐をWidget Logicの入力欄に記入します。

・!is_single()
・is_mobile()&&is_single()

こうすることで、先ほど削除した【Googleアドセンスのスマホ用300px】の代わりに、投稿ページ以外すべてとスマホの投稿ページにAdSenseが表示されるようになりました。

AdSense以外の広告に条件の分岐設定を行う

最後にそれぞれの広告のWidget Logicの欄に分岐条件を記述していきます。
例えば【AdSense以外の広告】をカテゴリID　1と２に表示するには、ウィジェットに置いた【AdSense以外の広告】のWidget Logicの入力欄に下記を記入します。

(!is_archive()&&in_category( array( 1,2 )))&&!is_mobile()&&!is_front_page()

カテゴリIDについては、こちらをご覧ください。
記事ID・カテゴリIDを確認する方法

分岐条件については、こちらをご覧ください。
条件分岐タグ – WordPress Codex 日本語版

今回のまとめ

Google AdSenseの設置記事を書き始めたら、かなり長くなってしまいました。。。

スマホで表示する際は少し変えている部分があるので、それについては、後日書きたいと思います！
Google AdSenseの変更点など情報は、Google AdSense公式ブログから。

AdSenseが初めてという方にオススメの本です！
AndoTVもお世話になりました！

LINE@はじめました！
登録はこちらから。