WordPressテーマ「STINGER3」の広告収入を最大化するカスタマイズ
2015/06/01
当ブログは、検索エンジン最適化（SEO）に強いと言われているWordPressテーマ「STINGER3」を使用しています。
前回は、このWordPressテーマ「STINGER3」の広告位置をプチカスタマイズしました。
前回の記事はこちら参照⇒WordPressテーマ「STINGER3」の広告位置をプチカスタマイズ
今回は、「STINGER3」を大幅にカスタマイズし、広告収入を最大化させます。
というのも、別ブログの「俺の開発研究所」も、「STINGER3」へテーマを変更したのですが、広告収入が急激に落ち込んでしまったのです。
それもそのはず。
これまで安定してクリック数を稼いでいた広告が入れ替わり、以前はあった記事下のダブルレクタングルもなくなるなど、設置している広告数が圧倒的に少なくなったからです。
また、「STINGER3」はGoogle AdSenseなどの広告はウィジェットに設定するだけで、最適な位置に表示してくれるお手軽なものなのですが、3箇所に表示される広告を個別に設定できません。
つまり、どの位置の広告が何回クリックされているのかなどの分析もできません。
これは何とかしないと…というわけです。
そういうことで、「STINGER3」の広告に関して、その仕組みから見直し、広告収入を最大化させるために、徹底的にカスタマイズします。
なお、今回のバージョンは以下です。
- WordPress 3.9.1
- STINGER3_ver20140327
スポンサード リンク
目次
「STINGER3」のレイアウト（PC）
まずは、WordPressテーマ「STINGER3」のデフォルトのレイアウトを確認しよう。
PCの場合の、投稿ページのレイアウトはこちら。
これを今回は、以下のようにカスタマイズしようと思う。
最もクリック率が高いと言われる「右上」、「記事下」に、3つのGoogle AdSenseを配置する。
「記事下」は「ダブルレクタングル」と言われる、Google AdSenseの「レクタングル」広告を2つ横並びに配置する方法を採用する。
また、「記事内」にも広告を配置し、記事本文と溶け込むようにする。
もし、「記事内」の広告クリック率が好調で「右上」の広告を超えるようであれば、入れ替えてもいいかもしれない。
ちなみに、Google AdSenseの広告ユニットの1ページ内に配置できる上限は3つまでなので、注意が必要。
4つ以上配置すると、ポリシー違反を食らい、大変なことになりますので。
「STINGER3」のレイアウト（スマートフォン）
続いて、スマートフォンの場合の、投稿ページのレイアウトはこちら。
これを今回は、以下のようにカスタマイズしようと思う。
デフォルトのレイアウトでは、1ページに3つまで配置できるGoogle AdSenseが2つしか配置されていない。
これは大変勿体無い。
また、スマートフォンのレイアウトはどうしても縦長になってしまい、下の方に行くまでかなりスクロールが必要なので、下の方の広告にクリックはあまり期待できない。
そのため、できるだけ上の方に配置することを意識し、「記事上」、「記事内」、「記事下」にGoogle AdSenseを配置する。
なお、PC／スマートフォンともにGoogle AdSense以外の「その他広告」には、「忍者AdMax」を使用している。
「忍者AdMax」は、Google AdSenseと同様にクリックされたら報酬が発生するクリック型広告、広告が表示されたら報酬が発生するインプレッション広告で、審査不要でアカウントを作成すれば即時広告設置可能です。
「忍者AdMax」への登録は、下記リンクより行うことができます。
「STINGER3」の広告表示の仕組み
前回の記事でも少し解説したが、WordPressテーマ「STINGER3」の仕組みを、もう少し掘り下げてみる。
Google AdSense、Amazonアソシエイトなどの広告は専用のウィジェットに設定するだけで、上記で説明した効果の高い各位置に設定されるような作りになっている。
このウィジェットは、「functions.php」（テーマのための関数）ファイル内の、以下の箇所で生成されているようだ。
なお、「register_sidebars」関数は、テーマで使用するサイドバーを登録する関数である。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
//ウイジェット追加 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) register_sidebars(1, array( 'name'=>'サイドバー1', 'before_widget' => '<ul><li>', 'after_widget' => '</li></ul>', 'before_title' => '<h4 class="menu_underh2">', 'after_title' => '</h4>', )); register_sidebars(1, array( 'name'=>'スクロール広告用', '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'=>'Googleアドセンス用', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4 style="display:none">', 'after_title' => '</h4>', )); register_sidebars(1, array( 'name'=>'Googleアドセンスのスマホ用width300', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4 style="display:none">', 'after_title' => '</h4>', )); |
各ウィジェットに設定した広告は、テンプレートパーツの「ad.php／scroll-ad.php」ファイル内で、ウィジェットを読み込んでいる。
なお、「dynamic_sidebar」関数は、ウィジェットを読み込む関数で、引数はID（追加したウィジェット順に連番）、もしくは名前を指定する。
「STINGER3」では、IDで表示するウィジェットを指定している。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if(is_mobile()) { ?> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : ?> <?php endif; ?> <?php }else{ ?> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?> <?php endif; ?> <?php } ?> |
そして、このテンプレートパーツ「ad.php／scroll-ad.php」ファイルを各ページ内で読み込み、広告を表示させている。
なお、「get_template_part」関数は、テンプレートパーツを読み込む関数である。
|
1 2 3 |
<div style="padding:20px 0px;"> <?php get_template_part('ad');?> </div> |
以上のことをまとめると、以下のような流れ（仕組み）になっており、これらを経て、広告表示に至る。
- 「functions.php」でウィジェット追加
- ウィジェットに広告を設定
- テンプレートパーツ「ad.php／scroll-ad.php」でウィジェットに設定した広告を読込
- 各ページでテンプレートパーツ「ad.php／scroll-ad.php」を読込
また、広告を表示している箇所は、以下です。
- 「archive.php」…アーカイブ／カテゴリー
- 「page-itiran.php」…ページ一覧（テンプレート）
- 「page.php」…固定ページ
- 「search.php」…検索結果
- 「sidebar.php」…サイドバー
- 「single.php」…投稿ページ
コンテンツの幅を600px（+50px）に
WordPressテーマ「STINGER3」の仕組みとレイアウトが理解でき、新レイアウトがまとまったところで、早速カスタマイズへと入っていきたいと思う。
まずは、ダブルレクタングル（レクタングル（中：300×250px）が2つ）が入るように、コンテンツの幅（width）を600px（+50px）にしていく。
「style.css」ファイルの以下の5箇所を、それぞれ+50pxにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/*----------------------------- BASE ------------------------------*/ .shadow:before, .shadow:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 550px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } /*----------------------------- 基本構造 ------------------------------*/ #header-in, #wrap-in, #navi-in, #footer-in, #gazou-in { width: 1036px; margin-right: auto; margin-left: auto; } #wrap #wrap-in #main { float: left; width: 600px; padding-right: 39px; padding-left: 39px; padding-top: 20px; border: 1px solid #ccc; background-color: #FFF; border-radius: 4px 4px 4px 4px; padding-bottom: 20px; } .post .entry .entry-content { float: right; width: 430px; padding-left: 20px; } /*----------------------------- コンテンツ ------------------------------*/ .sumbun { float: left; width: 480px; padding-left: 20px; } |
「functions.php」ファイルの以下の2箇所を、それぞれ+50pxにする。
|
1 2 3 4 5 6 7 8 9 10 11 |
//カスタムヘッダー $args = array( 'width' => 1036, 'height' => 150, 'flex-height' => true, 'default-image' => get_template_directory_uri() . '/images/stinger3.png', ); add_theme_support( 'custom-header', $args ); //contents widthの指定 if ( ! isset( $content_width ) ) $content_width = 596; |
コンテンツの余白を微調整
以上のように、+50pxにしたら結構横幅が長くなりすぎたので、余白を少し削り、全体の幅を少し縮めたいと思う。
「style.css」ファイルの以下の6箇所を、それぞれ微調整する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/*----------------------------- 基本構造 ------------------------------*/ #header-in, #wrap-in, #navi-in, #footer-in, #gazou-in { width: 998px; margin-right: auto; margin-left: auto; } #wrap #wrap-in #main { float: left; width: 600px; padding-right: 20px; padding-left: 20px; padding-top: 20px; border: 1px solid #ccc; background-color: #FFF; border-radius: 4px 4px 4px 4px; padding-bottom: 20px; } /*---------------------------- コメント ------------------------------*/ #comments { font-size: 14px; line-height: 20px; color: #333; background-color: #EDF2FA; margin-left: -21px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 31px; margin-bottom: 20px; border-left-width: 1px; border-left-style: solid; border-left-color: #5484D2; } /*---------------------------- 引用 -----------------------------*/ .post blockquote { background-color: #f3f3f3; background-image: url(images/quote.png); background-repeat: no-repeat; background-position: left top; padding-top: 70px; padding-right: 20px; padding-bottom: 20px; padding-left: 21px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: -21px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCC; } /*----------------------------- 基本のhタグ ------------------------------*/ /*中見出し*/ .demo h2 { font-size: 24px; padding-top: 10px; padding-right: 10px; padding-bottom: 20px; padding-left: 56px; color: #000; line-height: 30px; margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: -46px; background-image: url(images/cah2-bk.png); background-repeat: no-repeat; background-position: left top; } h2 { font-size: 24px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 16px; border-left-width: 5px; border-left-style: solid; border-left-color: #1a1a1a; color: #333; line-height: 30px; margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: -21px; } |
同様に、「functions.php」ファイルの以下の1箇所を、微調整する。
|
1 2 3 4 5 6 7 8 |
//カスタムヘッダー $args = array( 'width' => 998, 'height' => 150, 'flex-height' => true, 'default-image' => get_template_directory_uri() . '/images/stinger3.png', ); add_theme_support( 'custom-header', $args ); |
テーマサブフォルダ「ad」の作成と広告用テンプレートファイルの作成
WordPressテーマ「STINGER3」は、Google AdSenseなどの広告はウィジェットに設定するようになっていますが、この方式を今回のカスタマイズでは廃止しようと思います。
なぜなら、配置する広告の箇所を増やすので、このデフォルトの方式に従うと、ウィジェットの数をかなり増やす必要があるからです。
また、PC／スマートフォンの分岐させる処理が、ある箇所ではテンプレートパーツ「ad.php／scroll-ad.php」にあったり、別のある箇所では投稿ページ（「single.php」）にあったり、WordPressプラグイン「Widget Logic」で行っていたりと、とても煩雑になってしまうのを避けるためです。
というわけで、この方式を廃止します。
そして、Google AdSenseなどの広告箇所は、テーマサブフォルダ「ad」を作成し、この中に各箇所の広告をテンプレートファイルとして作成し、各ページから呼び出すようにします。
PC／スマートフォンの分岐は、各ページでのテンプレートファイル呼び出し時に行います。
ということで、テーマサブフォルダ「ad」に以下のファイルを作成しました。
- 「page-bottom1-pc.php」…記事下1（PC用）
- 「page-bottom1-sp.php」…記事下1（スマートフォン用）
- 「page-bottom2-pc.php」…記事下2（PC用）
- 「page-bottom2-sp.php」…記事下2（スマートフォン用）
- 「page-in-pc.php」…記事内（PC用）
- 「page-in-sp.php」…記事内（スマートフォン用）
- 「page-top.php」…記事上
- 「sidebar-scroll-pc.php」…サイドバースクロール広告（PC用）
- 「sidebar-scroll-sp.php」…サイドバースクロール広告（スマートフォン用）
- 「sidebar-top.php」…サイドバー上
実際のテンプレートファイルの中身をいくつか見てみると、以下のよう。
「page-bottom1-pc.php」（記事下1（PC用））はこちら。
「div」タグのスタイルに「float:left;」の指定で、横並びのダブルレクタングルを実現している。
広告の見出しなどは、基本的にデフォルトのレイアウトと同様の内容にしている。
|
1 2 3 4 5 6 7 8 9 10 11 |
<h4 style="display:none">スポンサード リンク</h4> <div style="float:left;"> … （Google AdSenseのコード） … </div> <div> … （Google AdSenseのコード） … </div> |
「page-bottom1-sp.php」（記事下1（スマートフォン用））はこちら。
|
1 2 3 4 5 6 |
<h4 style="display:none">スポンサード リンク</h4> <div> … （Google AdSenseのコード） … </div> |
「sidebar-scroll-pc.php」（サイドバースクロール広告（PC用））はこちら。
|
1 2 3 4 5 6 7 8 |
<ul><li> <h4 class="menu_underh2" style="text-align:left;">おすすめ</h4> <div> … （Amazonアソシエイトのコード） … </div> </li></ul> |
「sidebar-scroll-sp.php」（サイドバースクロール広告（スマートフォン用））はこちら。
|
1 2 3 4 5 6 7 8 |
<ul><li> <h4 class="menu_underh2" style="text-align:left;">おすすめ</h4> <div> … （Amazonアソシエイトのコード） … </div> </li></ul> |
なお、デフォルトの広告テンプレートファイル「ad.php」、「scroll-ad.php」は不要なので、削除しておいてもよい。
各ページでの広告テンプレートファイルの呼び出し
広告テンプレートファイルが完成したら、それらを以下の各ページで呼び出し、広告を表示させる。
なお、デフォルトのレイアウトでは、トップページ（home.php）で記事下の広告は表示させていないのだが、せっかくカスタマイズするので表示させようかと。
- 「archive.php」…アーカイブ／カテゴリー
- 「home.php」…トップページ
- 「page-itiran.php」…ページ一覧（テンプレート）
- 「page.php」…固定ページ
- 「search.php」…検索結果
- 「sidebar.php」…サイドバー
- 「single.php」…投稿ページ
実際のテンプレートファイルの中身をいくつか見てみると、以下のよう。
「single.php」（投稿ページ）はこちら。
広告の位置は、追加したもの以外は基本的にデフォルトのレイアウトと同様の位置にしている。
PC／スマートフォンの分岐は、「functions.php」（テーマのための関数）に用意されている「is_mobile()」関数を使用して分岐させる。
また、テンプレートファイルの呼び出しには「get_template_part」関数を使用している。
「get_template_part」関数の使い方はこちらの記事参照⇒「functions.php」で関数「get_template_part」を使用しテンプレートファイルを読込
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="kizi"> <?php if(is_mobile()) { ?> <div style="padding-bottom:20px;text-align:center;"> <?php get_template_part('ad/page-top');?> </div> <?php } else { ?> <?php } ?> <h1 class="entry-title"> <?php the_title(); ?> </h1> <?php the_content(); ?> <?php wp_link_pages(); ?> </div> <div style="padding:20px 0px;text-align:center;"> <?php if(is_mobile()) { ?> <?php get_template_part('ad/page-bottom1', 'sp');?> <?php } else { ?> <?php get_template_part('ad/page-bottom1', 'pc');?> <?php } ?> </div> <div class="blog_info contentsbox"> <p> <?php the_category(', ') ?> <?php the_tags('', ', '); ?> <br> 公開日： <time class="entry-date" datetime="<?php the_time('c') ;?>"> <?php the_time('Y/m/d') ;?> </time> <br> <?php if ($mtime = get_mtime('Y/m/d')) echo '最終更新日：' , $mtime; ?> </p> </div> |
「sidebar.php」（サイドバー）はこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="side"> <div class="sidead"> <?php if(is_mobile()) { ?> <?php } else { ?> <?php get_template_part('ad/sidebar-top');?> <?php } ?> </div> … （省略） … <!--アドセンス--> <div id="ad1"> <div style="text-align:center;"> <?php if(is_mobile()) { ?> <?php get_template_part('ad/sidebar-scroll', 'sp');?> <?php } else { ?> <?php get_template_part('ad/sidebar-scroll', 'pc');?> <?php } ?> </div> </div> </div> <!-- /#side --> |
投稿内での広告テンプレートファイルの呼び出し
最後に、記事内の広告については、ショートコードを追加し、それを記事内の任意の場所に記述し、広告を呼び出すようにした。
「functions.php」（テーマのための関数）に、以下のように記事内広告取得関数を追加し、ショートコードを追加する。
「get_template_part」関数を使用し、テンプレートファイルを呼び出しているが、記事内では通常のままではうまく表示できないので、以下のようにしている。
また、「STINGER3」の記事内の広告がスタイルシート（class=”post kizi”）によって見切れてしまうのを防ぐために、広告前後に「