【WordPress】Stingerのアドセンス位置をカスタマイズしてみた。

Google adsense

有名ブロガーさんのブログを見ているとどうも自分のとGoogleAdsenseの広告の位置が違う。自分の使ってるテーマ「Stinger3」のデフォルトの広告位置がいまいち効果的ではないようなので広告位置をカスタマイズしてみました。

 

Stinger3デフォルトの広告位置

まずはStinger3のデフォルトのアドセンスの位置を見てみましょう。

【PC版】
ad1

 

【スマホ版】
ad3

 

これはこれで良いと思うのですが、より効果的にアドセンスを配置し直したいと思います。

 

完成予定図

PC版は関連記事下のアドセンスは見られる可能性が低いと思われるのでこれは削除して、記事タイトル下に流行りのレクタングル(300×200)を二つ並べた通称「ダブルレクタングル」を配置したいと思います。
さらに記事下のアドセンスは中央揃えにします。

ad2

 

スマホはデフォルトだと2つしかアドセンスが配置されていません。Google Adsenseの規約だと一ページ中に3つまで配置OKなので3つ目をヘッダー下に置きたいと思います。

ad4

 

カスタマイズ方法

1 記事部分の幅を広げる

デフォルトではレクタングル(300×200)を二つ並べられるだけの幅がないので予め、記事部分の幅を広げなければいけません。
すいません、広げ方については省きます。ググッて下さい(>_<)別の機会に記事にします。

 

2 Stinger3デフォルトのウィジェットは使わない

Stinger3には
外観→ウィジェット
でGoogleAdsenseコードを張る用のウィジェットが用意されてるのですが今回は使いませんのでコードを入力している場合は削除しておきます。
※GoogleAdsenseの表示は1ページ中に3つまで。4つ以上は規約違反です。

ad5

 

3 PC,スマホで表示切り替え用のコードを用意する

PCではこっち、スマホではこっちと表示を切り替えるためのコードを用意をします。これです↓

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマホ用の記述
<?php else: ?>
PC用の記述
<?php endif; ?>

 4 header.phpを編集

まず、スマホ版のヘッダー下にラージモバイルバナー(320×100)を配置します。
外観→テーマの編集
からheader.phpを開きます。(予めバックアップしておきましょう。)
画像の場所「</p>」と「<?php } ?>」の間に

ad6

 

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>
<div align=”center”>SPONSORED LINK<br/>
ラージモバイルバナーのコード
</div>
<?php else: ?>

<?php endif; ?>

 

を入力します。「ラージモバイルバナーのコード」部分にはGoooleAdsenseで取得したコードを入力してください。
こんな感じ↓(わかりやすいように<!–広告追加–><!–/広告追加ここまで–>と入れてます。)

ad6

 

5 single.phpを編集

次に記事ページにアドセンスを配置します。
外観→テーマの編集
でsingle.phpを開きます。

画像のそれぞれの箇所に入力していきます。

ad8

その際、記事下、関連記事下部分の

<?php get_template_part(‘ad’);?>

は削除しておくと良いでしょう。これはStinger3デフォルトのGoogleAdsense用のウィジェットを呼び出すためのコードなので今回は必要ありません。

 

タイトル下にはPC版のみダブルレクタングルを配置します。テーブルを組みました↓
記事本文とのスペースを空けるためにテーブル下に<p>&nbsp;</p>を挿入してます。これで一行分のスペースが空きます。

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>

<?php else: ?>
<div align=”center”><caption>SPONSORED LINK</caption>
<table cellspacing=”15″>
<table>
<tr>
<td>PC用GoogleAdsenseレクタングル(300×250)のコード1</td>
<td>PC用GoogleAdsenseレクタングル(300×250)のコード2</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<?php endif; ?>

 

記事下にはPC版、スマホ版それぞれに合ったサイズのアドセンスを配置。

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>
<div align=”center”>SPONSORED LINK<br/>
スマホ用GoogleAdsenseレクタングル(300×250)のコード
</div>
<?php else: ?>
<div align=”center”>SPONSORED LINK<br/>
PC用GoogleAdsenseレクタングル(336×280)のコード
</div>
<?php endif; ?>

 

を入力します。

 

終わりに

これで完成です。出来上がりは当ブログをご覧の通りです。(2016年1月現在)
いろいろ調べたんですけど微妙に専門的で分かりにくいところがあったので記事にしてみました。

 

(追記)

スマホ版ヘッダー下のラージモバイルバナー(320×100)なんですが、自分のiPhone4sで見た場合、幅が大きすぎて画面からはみ出してしまってるのでレスポンシブのアドセンスに変更しました。するとすっきり画面に収まるサイズで表示されました。こっちの方が良さそうです。

コメント

タイトルとURLをコピーしました