STINGER5でアドセンスを記事内へ、サイドバーに別の広告をカテゴリ別に入れてみた

1ページあたり3つの広告を設置できるアドセンス。STINGERでは記事下に２つ、サイドバーの一番上に１つ、計3つが簡単に配置ようになっています。しかしSTINGER作者のENJIさんのブログや多くのブログをみてみると、記事の途中にアドセンスを表示させていますね。

記事途中にアドセンスを配置する効果については多くのブロガーさんの記事でも取り上げられています。私もなんとかその効果にあやかりたいと目論み、サイドバートップのアドセンスを記事途中に配置しようと考えました。尚且つサイドバーの空いた場所にASPなどの別の広告をカテゴリ別に配置するやり方をご紹介したいと思います。

アドセンスを記事の途中に表示する

目指すのは下の画像の①にアドセンス以外の広告。②にアドセンスの設置です。

記事中にアドセンスを配置する方法は多々あるようですが、私はENJIさんの記事STINGERでアドセンスをより効果的に貼る方法を参考にさせていただき、functions.phpにコードを記述しショートコードを作成する方法にしました。

functions.phpにアドセンスのショートコードを記述

下記のコードをfunctions.phpへ

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

記事の途中に配置するアドセンスのコードは【レクタングル（中）（300×250）】です。記事内にアドセンスを入れたいところに[●adsense]（記載する際は●を削除してください）と入力します。

プラグインAddQuicktagで設定しておくとショートコードを簡単に呼び出せるので便利ですね。

私はスマホで見たときにアドセンスが左に寄ってしまうのが気になったのでcssに下記を記述して、functions.phpに記述しているアドセンスのコードにクラス名を追記しました。※PCで見たときも中央に配置されます。

アドセンスを記事内で中央寄せにする

style.cssに記述

.ad_center{
	margin:0 auto 24px;
	text-align:center;
}

<p>スポンサーリンク</p>の前に<div class=”ad_center”>、アドセンスコード最後の</sprict>の後に</div>を追記すると中央寄せになります

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

アドセンスを記事内に設置したので、サイドバーの一番上が空いてしまいます。そこには300×250のサイズの広告のリンクをウィジェットの【Googleアドセンスのスマホ用300px】に貼り付ければいいだけなのですが、カテゴリ別に、PC、スマホなど条件によって広告の種類を変えたい時ってあると思います。そんなときとても便利なプラグインがありました。

ウィジェットの表示を条件で分岐できるWidget Logic

こちらのプラグインは条件によってウィジェットの表示を変えることができます。プラグインは管理画面のプラグインのインストールから「Widget Logic」と検索で追加か、ダウンロードはこちらから。

プラグインを追加するとウィジェットに【Widget Logic】の入力欄が出現します。

この入力欄にカテゴリやスマホなどの分岐の条件を入力していくのです。

ウィジェットに条件の分岐設定を行う

投稿ページではサイドバーにアドセンス以外の広告の表示
アーカイブではサイドバーにアドセンスを表示
スマホではアドセンスが[記事途中]と[記事下]と[関連記事下]に表示

このようになる設定をウィジェット内で行っていきます

Widget Logicでアドセンス以外の広告の設定

まずは、カテゴリ別に設置したいだけのアドセンス以外の広告（300×250のサイズ）を用意します。それを【Googleアドセンスのスマホ用300px】へ配置します。テキスト一つあたり一つの広告です。

ウィジェットに置いた広告一つひとつに分岐条件を割り当て、の入力欄に記述します。

例えば【広告１】をカテゴリID　1と2と3と4に表示するには、ウィジェットに置いた【広告１】のWidget Logicの入力欄に下記を記述します。カテゴリIDは記事ID・カテゴリIDを確認する方法が参考になるのでご確認ください。

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

in_categoryという条件分岐はカテゴリーの中の記事とそのカテゴリーを示します。アーカイブにはアドセンスを表示したいので!is_archiveとしています。さらにスマホ画面はこの【広告１】ではなくアドセンスにしたいので!is_mobileにしています。

Widget Logicでアドセンスの設定

次に、【Googleアドセンスのスマホ用300px】にアドセンスのレクタングル中（300×250）を2つ追加します。

それぞれに下記の条件分岐をWidget Logicの入力欄に記述

!is_single()

is_mobile()&&is_single()

これで【Googleアドセンスのスマホ用300px】のアドセンスは投稿ページ以外すべてと更にスマホの投稿ページに表示されるようになります。

しかしスマホの投稿ページにアドセンスを全て表示してしまうと、記事途中にもアドセンスを挿入してしているため４つ表示されるようになってしまいます。それはとてもまずいので、スマホ画面では一番下のアドセンスを非表示にしたいと思います。

sidebar.phpの記述を削除

sidebar.phpの以下の記述を削除します。

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

もしくは、<?php get_template_part(‘ad’); //アドセンス読み込み ?>だけ削除し、別の広告を入れてもいいですね。

以上で設定は終了です。

POINT

「Widget Logic」はウィジェット内で使えますので、アドセンスだけでなくサイドバー全般の広告にも使えそうですね。今回は必要な分岐条件しかご紹介しませんでしたが、その他のこまかな条件の分岐の方法はWordPress Codexでご確認ください。

条件分岐タグ – WordPress Codex 日本語版

まとめ

わたしのブログは結婚や育児のことなどカテゴリの幅が広いので、sidebar.phpに直接コードを書き込むのがめんどくさいなーと思ってプラグインを使ってウィジェットで条件を分岐しました。

同じような条件の方にご参考になれば幸いです。それではちゅんこ@shufulifeがお送りしましたー。

2014.9.3追記
こちらのエントリーとご紹介していただきました！うれしい！！

STINGER5カスタマイズまとめ！知りたい全てはここにある！