スマートフォンページのアドセンス効果的な配置

ヘッダーのタイトル、説明文の下
記事中に１つ
記事下に１つ

記事下の広告はスマートフォンページでは１つ減らすので、その代わりにヘッダーのタイトル、説明文の下にモバイルバナーを１つ張るのが一般的です。

注意点としてはスマートフォンページの場合、ヘッダーのタイトル下に設置する広告はモバイル用（320×100）の物を使用します。

レクタングル（300×250）のような大き目のサイズの広告を貼ると、コンテンツを押し下げる広告になってしまい、これもアウト。検索順位に影響する可能性もあるので注意。

WordPressにアドセンスを貼る時に必須なのが条件分岐

「PCページでは表示」して「スマートフォンページでは非表示」とか、PCページとスマートフォンページで広告サイズを分けるという時に絶対に必要になるので先にちょっとざっくりと説明します。

１．もし個別ページなら広告を表示

1

2

3

<?php if ( is_single() ) : ?>
ここに広告のコード
<?php endif; ?>

２．もしスマートフォン（モバイル）ページなら広告を表示

1

2

3

<?php if (wp_is_mobile()) :?>
ここに広告のコード
<?php endif; ?>

３．PCページだけ広告を表示（スマートフォンでは非表示）

1

2

3

<?php if (!wp_is_mobile()) :?>
ここに広告のコード
<?php endif; ?>

＊条件分岐の部分に「!」を入れる事で「それ以外」という条件分岐ができる。
４．PCページとスマートフォンページでサイズを分ける場合

1

2

3

4

5

<?php if (wp_is_mobile()) :?>
ここにスマートフォン用の広告のコード
<?php else: ?>
ここにPC用の広告コード
<?php endif; ?>

とりあえず基本的な物は以上ですが、２つの条件をミックスする事もできます。

1

2

3

<?php if (wp_is_mobile() && is_single()) :?>
ここに広告のコード
<?php endif; ?>

このように「&&」を入れて条件を繋げると「スマートフォンページ」で「個別ページ」なら広告を表示という風にもできます。

この条件分岐はWordPressで頻繁に使うのでこれを使ってアドセンスの広告を設置していきましょう。

個別ページ、固定ページは別のテンプレートになるので、まずは個別ページの記事下にアドセンスを入れる方法を解説します。

個別ページの記事下にアドセンスを入れる

記事下に縦に２つ並ぶタイプです。

記述するのは「single.php」もしくは「content.php」ですが、基本的には「single.php」の方が多いかと思いますが、singel.phpではなくてcontent.phpにアドセンスを追加します。content.phpの方が簡単です（余計な位置調整などが少ないため）

➀「content.php」から次の記述を探します。

1	`</div><!-- .entry-content -->`

上記のコードが記事の終わりの部分（entry-contentの終わり部分）になりますので、この「直前」にアドセンスの設置コードを追加していきます。

※もしこのコードがない場合には適当な位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみます。

<?php if ( is_single() ) : ?>
 
<p class="ad-label">スポンサーリンク</p>
  
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用サイズ（300x250）の広告
</div>
  
<?php else: ?>
  
<div class="ad-bottom">
ここにPC用の広告1つ目
</div>
  
<div class="ad-bottom">
ここにPC用の広告２つ目
</div>
  
<?php endif; ?>
 
<?php endif; ?>

２つの条件分岐を使っているので、最後の「php endif;」が２つになります。

これでスマートフォンでは記事下に広告が１つ。PCページでは記事下に広告が２つという設置ができます。

固定ページにアドセンスを入れる

固定ページのアドセンスは「content-page.php」に記述します。

content-page.phpにはこのような記述を探します。

1	`</div><!-- .entry-content -->`

この部分が記事の終わりの部分になるので、上記コードの「直前」に以下のコードを入れてます。

<p class="ad-label">スポンサーリンク</p>
 
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用の広告のコード
</div>
<?php else: ?>
<div class="ad-bottom">
ここにPC用の広告コード１つ目
</div>
<div class="ad-bottom">
ここにPC用の広告コード２つ目
</div>
<?php endif; ?>

トップページにアドセンスを入れる

トップページ「メインインデックスのテンプレート(index.php)」に次の記述があります。

1 2	`</div><!-- #content -->` `</div><!-- #primary -->`

この記述の「前」に先ほどと同じコードを入れます。（下記）

<p class="ad-label">スポンサーリンク</p>
 
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用の広告のコード
</div>
<?php else: ?>
<div class="ad-bottom">
ここにPC用の広告コード１つ目
</div>
<div class="ad-bottom">
ここにPC用の広告コード２つ目
</div>
<?php endif; ?>

ここまで設置できたら個別ページ、それと固定ページの記事下広告は完了。

サイドバーに広告を貼る。（アドセンス以外の広告も同じ手順です。）

➀WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーに「テキスト」を追加します。

「テキスト」をクリックして開きタイトルに「スポンサーリンク」を入力してアドセンスの「ユニット広告」のコードを入れます（アドセンス広告の場合）。必要であればこのコードの下にリンクユニットのコードも追加できます。

広告ユニットとリンクユニット「200×90 – 縦長（特大）」を設置する。

最後に広告とラベル（スポンサードリンク）の位置調整をスタイルシート（CSS）で処理します。

ラベル（スポンサーリンクの部分）：「ad-label」
記事下の広告PC：「ad-bottom」
記事下の広告スマートフォン：「ad-bottom-sm」
スマートフォンのヘッダー部分：「ad-top」
サイドバーの広告：「side-ad」

基本的にはこのように分けておくと位置調整がしやすいです。子テーマのCSS（スタイルシート）の一番下に位置調整のコードを追加していきます。

ラベル（スポンサーリンクの部分）と広告を中央に寄せたい場合には次のコード（スタイルシートの一番下に追加）

1

2

3

4

p.ad-label { text-align:center;}
.ad-bottom { text-align:center;}
.mid-ad { text-align:center;}
.side-ad { text-align:center;}

「margin-top:10px;」とか「margin-bottom:10px;」とかそれぞれに記述を加えれば「上の余白」や「下の余白」も調整できます。

中央寄せが嫌なら「text-align:center」を消して「margin-left:15px」とかでも左に余白を作る事もできます。

p.ad-label {
  margin-left:20px;
  margin-top:15px;
}
 
.ad-bottom {
  margin-top:15px;
}
 
.ad-bottom-sm {
  margin-top:15px;
}

この辺は様子を見ながら数値を変更して下さい。

スマートフォン用の広告は普通横幅300pxの広告を利用する場合が多いですが、スマートフォンで確認すると右に寄って画面から少しだけはみ出している場合があります。

1

2

3

4

5

@media screen and (max-width:599px){
.side-ad{magin-left: -10px;} 
.ad-bottom-sm{margin-left:-10px}
.mid-ad{margin-left:-10px}
}

この「@media screen and (max-width:599px)」というのがブラウザの画面が599px以下ならという条件分岐、つまりスマートフォンページならという書き方です。

ここにマイナス値の「magin-left」を入れると数値の分だけ左に寄るのでこれで対策できます。

以上WordPressにアドセンス広告の設置は完了です。PC、スマートフォン両方で確認して規約に違反する部分がないか確かめて下さい。

今更聞けないWordPress備忘録

初心者がワードプレスを始める基礎知識のまとめ