ワードプレスでアドセンス収益アップ!カスタマイズ2

2014年10月13日stinger3 備忘録アドセンス広告stinger3 備忘録

stinger3

ワードプレスでアドセンス収益アップ!カスタマイズ2

 

ワードプレス(stinger 3)でアドセンス広告の収益アップさせる為に、トップページや固定ページに広告を表示するやり方を解説します。

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。

 

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

バックアップは忘れずに!!!

 

ブログにアドセンス広告を表示させているブロガーは少しでも収益の事を考えますよね。

STINGER3は非常に簡単にGoogleアドセンス広告を配置できるので、そこに魅力を感じてSTINGERを選んだ人もいると思います。

 

より一層アドセンス広告を宣伝しちゃおう。という事で前回はブログ記事内等のカスタマイズを解説しました。んで今回第2回目として、ブログトップページと固定ページにアドセンス広告を表示させるやり方を解説します。

 

ブログトップページのアドセンス配置

 

stinger 3トップページのアドセンス広告表示は以下のようになっていると思います。

adosens top page genjou pc

観て判るとおり現状ではサイドバーに一つしか表示されていません。
アドセンス広告の規定では、「1ページ内に3個まで表示させてもいいよ」との事なので、トップページに3個表示できるようカスタマイズしてみました。

adosens top page henkou pc

 

ブログトップページにアドセンス広告を3個表示させる

 

ブログトップページにある記事一覧の上下と、一覧の中にアドセンス広告を表示させます。

 

まずは、「home.php」を開いてください。

「index.php」では無く「home.php」です。(stingerには両方ありますがhome.phpをいじります)

 

ブログトップページの記事一覧の上に表示させる

下記コードを探す。

[php]
</pre>
<div class="post kizi">
<!–ループ開始–>
<div id="dendo"> </div>
<!– /#dendo –>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
[/php]

「<div class=”post kizi”> 」の前に

[php]
<?php if(is_mobile()) { ?>
<div align="center">
SPONSORED LINK<br>
— ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下が最適 —
<br><br>
</div>
<?php } else { ?>
<div align="center">
SPONSORED LINK<br>
— ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は横幅(width)は500px,高さ(height)は100px前後がベスト —
<br><br>
</div>
<?php } ?>
[/php]

上記コード内の指定箇所(「–   –」等を削除してから)にスマホ用とパソコン用の広告コードを記述します。

 

ファイルを更新」をクリックします。
これでブログトップページ一覧の上にアドセンス広告が表示されたと思います。

 

ブログトップページの記事一覧の下にに表示させる

下記コードを探す。

[php]
<!– .entry-content –>

<div class="clear"></div>
</div>
<!–/entry–>

<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

<!–ページナビ–>

<?php if (function_exists("pagination")) {
pagination($wp_query->max_num_pages);
} ?>
<!–ループ終了–>
</div>
<!– END div.post –>
<?php get_footer(); ?>
[/php]

「<?php endif; ?>」と「<!–ページナビ–>」の間に、あなたのアドセンスコードを貼り付けます。

 

[php]
<?php if(is_mobile()) { ?>
<div align="center">
SPONSORED LINK<br>
— ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下が最適 —
<br><br>
</div>
<?php } else { ?>
<div align="center">
SPONSORED LINK<br>
— ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は横幅(width)は500px,高さ(height)は100px前後がベスト —
<br><br>
</div>
<?php } ?>
[/php]

上記コード内の指定箇所(「–   –」等を削除してから)にスマホ用とパソコン用の広告コードを記述します。

 

ファイルを更新」をクリックします。
これでブログトップページ一覧の下にアドセンス広告が表示されたと思います。

 

ブログトップページの記事一覧の中に表示させる

今度はブログトップページの記事一覧の中にアドセンス広告を表示させるやり方を解説します。

指定した記事数の間でランダムに、アドセンス広告位置を変化させます。

 

まずは、「home.php」を開いてください。

下記コード探します。

[php]
<div class="post kizi">

<!–ループ開始–>
<div id="dendo"> </div>
<!– /#dendo –>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
[/php]

 

乱数を生成させるため

[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
[/php]

を削除します。

 

そこに下記コードをコピペする。

[php]
<?php if (have_posts()) :$ransuu = rand(5, 8);
while (have_posts()) : the_post(); $loop_count++; ?>
[/php]

 

以下のようなコードになると思います。

[php]
<div class="post kizi">

<!–ループ開始–>
<div id="dendo"> </div>
<!– /#dendo –>
<?php if (have_posts()) :$ransuu = rand(5, 8);
while (have_posts()) : the_post(); $loop_count++; ?>
<div class="entry">
[/php]

 

rand(5, 8)は最小値1、最大値8の範囲で乱数(ランダムな数)を作っています。この数が何番目の記事と記事の間に広告を入れるかを決定するので、トップページの表示記事数によって好みで変える。よく分からなければまずはこのままでいいと思います。

 

僕の場合、トップページの表示記事数が15個なので、中間の意味で5から8に設定して、その間で表示場所をランダムにしています。

 

次に以下コードを探します。

[php]
<!–/entry–>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

<!–ページナビ–>

<?php if (function_exists("pagination")) {
pagination($wp_query->max_num_pages);
} ?>
<!–ループ終了–>
[/php]

 

見つけたら「<!–/entry–>」と「<?php endwhile; else: ?>」の間に、下記コードを追記する。

[php]
<?php if ( $loop_count == $ransuu ) : ?>
<?php if(is_mobile()) { ?>
<div align="center">
SPONSORED LINK<br>
— ここにスマホ表示用の AdSense等の広告コードを入力 —
— ただしスマホ用なので横幅(width)は320px以下が最適 —
<br><br>
</div>
<?php } else { ?>
<div align="center">
SPONSORED LINK<br>
— ここにpc表示用のGoogle AdSense等の広告コードを入力 —
— pc用は横幅(width)は500px,高さ(height)は100px前後がベスト —
<br><br>
</div>
<?php } ?>
<?php endif; ?>
[/php]

 

上記コード内の指定箇所(「–   –」等を削除してから)にスマホ用とパソコン用の広告コードを記述します。

 

ファイルを更新」をクリックします。
これでブログトップページ一覧の中にアドセンス広告が表示されたと思います。

以上でブログトップページ内に3個のアドセンス広告を表示させるやり方を解説しました。

 

まとめ

 

いかがだったでしょうか?

2回に分けて「アドセンス広告のカスタマイズ」のやり方を解説してきましたが、せっかくSEO効果が高くてカスタマイズ性に優れたSTINGERを使っているなら、デザインと同時に広告配置も合わせてカスタマイズしてみてはどうでしょうか?

 

今回のカスタマイズは絶対と言えるものではありません。

もっといい物があると思うので、あくまでも私がカスタマイズしたやり方です。

そこは人それぞれ、自分が納得いくやり方でやるのが一番だと思います。

 

最後に今回は「php」ファイルをカスタマイズしております。

バックアップは忘れずにお願いいたします。