AdSenseのダブル・レクタングルを表示するために、私はテーマをいじったり、いくつかプラグインを試して失敗したり、うまくいかなくて困っていました。
でも、完璧に、ラクに表示できる方法があったので紹介します。
目次
AdSenseのダブル・レクタングル表示用コード
ダブル・レクタングルを表示するときに、PCとスマホで広告を分けたいですよね。
- PCのときはダブル・レクタングル
- スマホのときはシングル
この条件を実現するのが、下記のコードです。
後ほどAdSenseのダブル・レクタングルを簡単に表示できるプラグイン「Advanced Ads」で設定します。
<!-- AdSense PC:Wレクタングル大、スマホ:レクタングル中 表示切り替え -->
<?php if (wp_is_mobile()) :?>
<div class="sm-ad-bottom">
<!-- ここにスマホ用の広告コード -->
</div>
<?php else: ?>
<div class="ad-bottom-main">
<div class="ad-bottom-left">
<!-- ここに左に設置するPC用の広告コード -->
</div>
<div class="ad-bottom-right">
<!-- ここに右に設置するPC用の広告コード -->
</div>
</div>
<?php endif; ?>
コピーしました
スタイルの指定は下記のコードです。
必ずパックアップを取ってから、テーマのCSSに下記のコードを追加してください。（子テーマだと、より安全です）
/* AdSense PC:Wレクタングル大、スマホ:レクタングル小 表示切り替え */
/* スポンサードリンク・ラベルの部分 */
.ad-bottom-label {
text-align:center; /* 中央寄せ */
margin-top:15px; /* 上に余白 */
}
/* スマホ部分 */
.sm-ad-bottom {
margin-left:15px; /* 左に余白 */
}
/* 横並びPC広告全体部分 */
.ad-bottom-main {
margin-top:20px; /* 上に余白（ラベルとの距離） */
margin-bottom:20px; /* 下に余白（下のコンテンツとの距離） */
}
/* PC広告左 */
.ad-bottom-left{
float:left; /* 広告を左寄せ */
margin-left:0px; /* 左に余白 */
margin-right:20px; /* 右に余白（２つの広告の間の余白） */
}
/* PC広告右 */
.ad-bottom-right{
float:left; /* これも広告の左寄せ */
}
/* 最後に左寄せ解除 */
.ad-bottom-main:after {
content:””;
display:block;
clear:both;
}
テーマによって、微調整が必要になることがあります。
コピーしました
AdSenseのダブル・レクタングルを簡単に表示できるプラグイン「Advanced Ads」
下記のコードを「Advanced Ads」で設定します。
AdSenseのダブル・レクタングル表示を設置する
広告を表示する流れは、
- 「広告」を作る
- 作った広告を設置する
の2つです。
まずは広告を作ります
WordPress管理画面 > Advanced Ads > 広告 > 「新しい広告」
広告パラメーター：上記のコードを挿入して、「PHP コードを実行」にチェックを入れます。（これ大事）
手動で好きな場所に広告を表示するときは、「ショートコードを実行」にチェックを入れます。
画面右上の「公開」ボタンをクリックして、設定を保存します。
（「公開」ボタンをクリックすると、pingが送信されます。WordPressのデフォルト機能やプラグインでping送信を設定しているときは、一時的に送信しない設定に変更する方がいいでしょう。広告の公開後に設定を戻してください）
次に広告を設置します
自動で一括設置するとき
WordPress管理画面 > Advanced Ads > 設置 > 配置の新規作成
から、広告の設置場所を設定します。
配置する場所に「コンテンツ」を選ぶと、
「2番目の見出しの前」「5番目の段落の後」というように指定できます。
手動で好きな場所に設置するとき
ビジュアル・エディタ
クリックして表示される広告のリストがプルダウンより該当の広告を選択して、「ショートコードを追加」をクリックします。
テキスト・エディタ
「広告を新規追加」や「広告編集」画面でショートコードをコピーして、任意の場所にペーストします。
まとめ
お使いのテーマによって、広告の表示に差異が出る可能性があります。
ちなみに「Xeory」ではOKでした。
バックアップを取ってからお試しください。