Stinger5カスタマイズ！目指せ収益UP！管理画面のウィジェットのみで広告の場所を変える方法（ダブルレクタングル対応）

Stinger5カスタマイズ！目指せ収益UP！管理画面のウィジェットのみで広告の場所を変える方法（ダブルレクタングル対応）

：2014/12/14 ： STINGER Wordpress

自分のサイトを持っていれば誰もが気になる「サイトの収益」。
収益がすべてではないにしても、やっぱり利益があると嬉しいですよね。

広告の場所を変えてみたり、枠の大きさを変えてみたり、高い収益を上げるためにはしっかりとした分析が重要です。

でもこうした分析って意外と大変。
広告の場所ひとつにしてもコードを直接触らないと変更することはできません。ある程度の知識がないと思うようにはいかないので、初心者の方にはとっつきにくいかもしれませんね。

そこで今回は管理画面のウィジェットだけで広告の表示場所を変える方法をご紹介します。
一度設定してしまえば今後の管理がとっても楽になりますよ。

スポンサーリンク


完成するとこうなるよ！

まずは完成形のご説明から！
今回のカスタマイズを終えると管理画面に各場所ごとのウィジェットが表示されるようになります。

各表示場所ごとのウィジェットが追加されます

たとえばPCの記事下に広告を表示したい場合には「記事下1_(PC)」にコードを入力すればOK。
表示したくない場所は空っぽのままにすれば表示されません。

表示したい場所のみ広告を挿入、したくない場所は空白に

他にスマホだけ表示、PCだけ表示というようにしたければ片方だけコードを入れればOKです。

直接コードを触ること無く広告の表示場所を切り替えられるので、手軽にレイアウトの変更ができるようになります。
また各場所ごとにコードを変更できるので、「どの場所がクリックされやすいのか」といった分析もしやすくなります。

対応している広告の表示場所は下図のとおりです。

表示の対応場所、ダブルレクタングルにも対応しています

ダブルレクタングルを使う場合は記事部分の横幅変更が必須になるので注意してください。

デフォルトではこうなっているよ

カスタマイズに入る前にStingerの広告表示の仕組みをご説明します。ここを理解しているのとしていないのとでは大きく差が出てくるので、しっかり把握しておきましょう。

デフォルトでは管理画面のこの部分にコードを入れると広告が表示されるようになります。

アドセンスコードを入力すると3箇所に表示

たったこれだけでPC、スマホ共に3ヶ所広告が表示されます。表示場所は記事下、サイドバーです。

この便利な機能の元になっているのが「functions.php」と「ad.php」。
たとえば記事ページに広告が表示されるまでをざっくり図で表すとこんな感じです。

広告が表示される仕組み

①ウィジェットを作成
②広告を表示するコードを作成
③コードを読み込んでコードを表示

の3ステップで広告を表示する仕組みになっているんですね。それぞれもう少し詳しく見てみましょう。

functions.phpの役割

functions.phpは管理画面にウィジェットを作成する役割を担っています。

コードの中の

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '
<ul>
<li>',
    'after_widget' => '</li>
</ul>

',
    'before_title' => '
<h4 class="menu_underh2">',
    'after_title' => '</h4>

',
    ));

----------中略-----------

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用300px',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));

 

の部分がウィジェットの作成コードです。

ad.phpの役割

ad.phpは広告コードを読み込む役割とスマホとPCで広告を出し分ける役割の2つを担っています。

コード内の

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : ?>

 

の部分がウィジェットの呼び出しコードです。

たとえばこのコードだと「4つ目のウィジェットの中身をここに表示してね」という意味になっています。
デフォルトでは4つ目がスマホ用、3つ目がPC用のコードになっているのでココの数字を変えることで広告を出し分けているんですね。

ウィジェットの番号

スマホとPCの切り替えには条件分岐タグが使われています。

<?php if(is_mobile()) {
	ここがスマホで表示されます
<?php }else{ ?>
	ここがPCで表示されます
<?php } ?>

このコードはStingerのあちこちで使われているので知らない方はこの機会に覚えておきましょう。

広告の呼び出し方

広告を表示するときは「ad.php」を呼び出せばOKです。

<?php get_template_part('ad'); //アドセンス読み込み ?>

がad.phpの呼び出しコードに当たります。
たとえばsingle.phpだと記事本文の下辺りに2つあるので確認してみてください。

カスタマイズ概要

それではいよいよカスタマイズです！

今回は

Step1:「functions.php」でウィジェットを追加
Step2:「ad.php」を元に「新しいad.php」を作成
Step3:「single.php」「sidebar.php」で読み込みコードを変更

という流れで進めていきます。

カスタマイズ手順

Step1 新しいウィジェットを追加

functions.php内の「//ウィジェット追加」の部分をいかのように書き換えてください。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(26) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '
<ul>
<li>',
    'after_widget' => '</li>
</ul>

',
    'before_title' => '
<h4 class="menu_underh2">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',
    'before_widget' => '
<ul>
<li>',
    'after_widget' => '</li>
</ul>

',
    'before_title' => '
<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事タイトル上_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="margin-bottom:20px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事タイトル上_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="margin-bottom:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下1_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下1_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下2_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div class="smanone" style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下2_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下_ダブルレクタングル左(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding:5px 0px 5px 0px; margin-bottom:20px; overflow:visible;">
<div style="float:left; padding:0px 5px 0px 0px">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'記事本文下_ダブルレクタングル右(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding 0px 5px 0px 0px;">',
    'after_widget' => '</div>
</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下1_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下1_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下2_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div class="smanone" style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下2_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下_ダブルレクタングル左(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding:5px 0px 5px 0px; margin-bottom:20px; overflow:visible;">
<div style="float:left; padding:0px 5px 0px 0px">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'コメント下_ダブルレクタングル右(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding 0px 5px 0px 0px;">',
    'after_widget' => '</div>
</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下1_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下1_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下2_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div class="smanone" style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下2_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding-top:10px;">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下_ダブルレクタングル左(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding:5px 0px 5px 0px; margin-bottom:20px; overflow:visible;">
<div style="float:left; padding:0px 5px 0px 0px">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'関連記事下_ダブルレクタングル右(PC)',
    'description' => '横幅変更必須。「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div style="padding 0px 5px 0px 0px;">',
    'after_widget' => '</div>
</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'サイドバー上_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div class="ad">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'サイドバー上_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '
<div class="ad">',
    'after_widget' => '</div>

',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'サイドバー下_(PC)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));
register_sidebars(1,
    array(
    'name'=>'サイドバー下_(Mobile)',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '
<h4 style="display:none">',
    'after_title' => '</h4>

',
    ));

なおダブルレクタングル部のレイアウトはこちらのサイトを参考にさせて頂きました。
STINGER５でアドセンスの配置を記事下ダブルレクタングルに変更してみました

Step2 新しいad.phpを追加

つづいてad.phpを12個追加します。

phpファイル追加の注意

もともとのad.phpファイルに追記するのではなく、新しくphpファイルを12個作成し、それをFTPソフトなどでサーバーへアップロードします。

サーバーへのアップロードの仕方は、ご利用のサーバーによって異なるので各ホームページを確認してください。

数は多いですが、中身はほとんど同じ。単体用とダブルレクタングル用で基本のコードが少し違ってきます。

単体用

<?php if(is_mobile()) { ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('xxxx_(Mobile)') ) : else : ?>
<?php endif; ?>
<?php }else{ ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('xxxx_(PC)') ) : else : ?>
<?php endif; ?>
<?php } ?>

ダブルレクタングル用

<?php if(is_mobile()) { ?>
<?php }else{ ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('xxxx_ダブルレクタングル左(PC)') ) : else : ?>
<?php endif; ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('xxxx_ダブルレクタングル右(PC)') ) : else : ?>
<?php endif; ?>
<?php } ?>

コード内の「xxxx」の部分をファイルごとに変更します。ファイル名とxxxx部分の組み合わせは以下のとおりです。

ファイル名 xxxx部分のコード
ad_kizititle_ue.php 記事タイトル上
ad_honbun_sita1.php 記事本文下1
ad_honbun_sita2.php 記事本文下2
ad_comment_sita1.php コメント下1
ad_comment_sita2.php コメント下2
ad_kanren_sita1.php 関連下1
ad_kanren_sita2.php 関連下2
ad_sidebar_ue.php サイドバー上
ad_sidebar_sita.php サイドバー下
ad_honbun_sita_double.php 記事本文下
ad_comment_sita_double.php コメント下
ad_kanren_sita_double.php 関連記事下

Step3 呼び出しコードを変更

最後に呼び出しコードを変更します。

まずはsingle.phpから。変更箇所は4ヶ所です。

①記事タイトル上

修正前:

<div id="content" class="clearfix">
  
<div id="contentInner">
    <main>
      
<article>
      
修正後:

<div id="content" class="clearfix">
  
<div id="contentInner">
  <?php get_template_part('ad_kizititle_ue'); ?>
    <main>
      
<article>

②記事本文下

修正前:

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

  <?php } ?>
</div>


修正後:

<div style="padding:20px 0px;">
  <?php get_template_part('ad_honbun_sita_double'); //アドセンス読み込み ?>
  <?php get_template_part('ad_honbun_sita1'); //アドセンス読み込み ?>
  <?php get_template_part('ad_honbun_sita2'); //アドセンス読み込み ?>
</div>

③コメント下

修正前:
<?php if( comments_open() || get_comments_number() ){ comments_template(); } ?>

修正後:
<?php if( comments_open() || get_comments_number() ){ comments_template(); } ?>


<div style="padding:20px 0px;">
  <?php get_template_part('ad_comment_sita_double'); //アドセンス読み込み ?>
  <?php get_template_part('ad_comment_sita1'); //アドセンス読み込み ?>
  <?php get_template_part('ad_comment_sita2'); //アドセンス読み込み ?>
</div>

④関連記事下

修正前:
<!--関連記事-->

<h4 class="point"><i class="fa fa-th-list"></i>   関連記事</h4>

<?php get_template_part('kanren');?>

修正後:
<!--関連記事-->

<h4 class="point"><i class="fa fa-th-list"></i>   関連記事</h4>

<?php get_template_part('kanren');?>

<?php get_template_part('ad_kanren_sita_double'); //アドセンス読み込み ?>
<?php get_template_part('ad_kanren_sita1'); //アドセンス読み込み ?>
<?php get_template_part('ad_kanren_sita2'); //アドセンス読み込み ?>

つづいてsidebar.php。変更箇所は2ヶ所です。

①サイドバー上

修正前:
<?php if (is_404()) { ?>
<?php } else { ?>
  
<div class="ad">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : //アドセンス ?>
    <?php endif; ?>
  </div>

<?php } ?>

修正後:
<?php if (is_404()) { ?>
<?php } else { ?>
  <?php get_template_part('ad_sidebar_ue'); ?>
<?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 } ?>
  <!-- /スマホだけのアドセンス -->
  
<div id="scrollad">
      <?php get_template_part('scroll-ad'); //追尾式広告 ?>
  </div>

  
修正後:
<?php get_template_part('ad_sidebar_sita'); ?>
  
<div id="scrollad">
      <?php get_template_part('scroll-ad'); //追尾式広告 ?>
  </div>

以上でカスタマイズは終了です！
うまくいっていれば管理画面がこんな風に変化していると思います。

各表示場所ごとのウィジェットが追加されます

あとは通常のStingerのようにアドセンスコードを入力するだけです。同時に表示される数が3ヶ所を超えないように気をつけてくださいね。

※注意とお願い

当サイトはSTINGER3を使っているため、今回のカスタマイズはローカル環境のみでテストしています。そのため実際のアドセンスコードが使えず、代わりにダミー画像で動作確認を致しました。

おそらく大丈夫だとは思いますが、実際のコードを使った場合には表示崩れ等があるかもしれません。ご使用は自己責任でお願い致します。

あとがき

収益を分析することはとても大切！
今回と同じ要領でカスタマイズしてもらえれば、他の好きな場所をウィジェット対応させることも可能です。一度設定してしまえばカンタンにいろいろな広告配置を試せるようになるので、ぜひ設定してみてください。最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

 

jimon

-STINGER, Wordpress

関連記事



NICOA
NEW POST
ChatOpsを加速させる！Slack連携アプリをラクに実装するためのOSS「SlackHub」をリリースしました

ChatOpsを加速させる！Slack連携アプリをラクに実装するためのOSS「SlackHub」をリリースしました(AWS CDK+Go lang)

Finderからターミナルを「現在のパスで」秒で開く！Mac拡張機能「cd to」

Finderからターミナルを「現在のパスで」秒で開く！Mac拡張機能「cd to」

Ember Mug 2

ドリンクのラストワンマイルを埋める。自動保温スマートマグカップ「Ember Mug 2」

このカテゴリの他の記事
Stinger5カスタマイズ！記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ

Stinger5カスタマイズ！記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ

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

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

Stingerカスタマイズ！迂闊に「説明文」を消しちゃダメ！アウトラインが崩れるぞ

Stingerカスタマイズ！迂闊に「説明文」を消しちゃダメ！アウトラインが崩れるぞ

【Stingerカスタマイズ！】どこを押しても記事ページに移動！記事一覧全体をリンク化しよう

【Stinger3カスタマイズ！】どこを押しても記事ページに移動！記事一覧全体をリンク化しよう

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから！