[無料WordPressテーマ] CocoonのヘッダーにAdSense広告を表示する

2019/03/24WordPressテーマ

当サイトではLuxeritasで行っているヘッダーロゴの右側に広告を表示させるカスタマイズですが、それをCocoonでもAMP対応した形で実装してみました。

と言っても、専用のウィジェットエリアを作成してそこに設置した広告ウィジェットを表示するだけなので、残念ながらCocoon設定で一元管理出来るような高度な内容ではありませんが、当エントリーではそのカスタマイズ方法を紹介したいと思います。

コンテンツ

1. 今回のカスタマイズは中級者向き？かも？
2. カスタマイズに入る前に
3. カスタマイズ手順
4. カスタマイズ作業は以上です

今回のカスタマイズは中級者向き？かも？

必要なコードは全てコピペするだけで実装出来るようにしてあるので、むしろカスタマイズの練習によさそうな気がしなくもないですが、親テーマから子テーマにファイルをコピーしてきたりfunctions.phpを編集する事を考えると、そういった作業の経験が全く無い方には少々難易度の高いカスタマイズになるかもしれません。

カスタマイズ結果はこんな感じになります。

こちらのデモサイトで実物を確認出来るので、レスポンシブWebデザインチェックツールやデベロッパーツールなどで色々イジってみて下さい。

unlimited chaos Cocoon Demo Site | 無料WordPressテーマ Cocoon のテスト用サイトで

無料WordPressテーマ Cocoon のテスト用サイトです

https://demo.unlimitedchaos.net/wp-cocoon/

自分なりにしつこいくらい動作確認はしたつもりですが、OSやブラウザによっては微妙におかしな事になる可能性は否定出来ません。当エントリーで紹介したコードに不具合があれば確認次第すぐにでも対応を考えますが、環境の違いなどで当方では再現出来ないものに関してはご自分で何とかしていただく事になりますので、あらかじめその点はご了承下さい。

カスタマイズに入る前に

では作業に入る前にいくつか注意事項を。

親テーマのアップデート時は変更されたファイルを確認

今回のカスタマイズに限った話ではありませんが、親テーマからファイルをコピーしてカスタマイズした場合は、親テーマがアップデートされた時にその修正したファイルに変更が入っていないか確認する必要があります。

そうしないとせっかく作者さんが追加してくれた新機能やバグフィックスが反映されない事になるので、とりあえずその点だけは認識しておいて下さいね？

当エントリーでカスタマイズするのはtmpフォルダ内のheader-container.phpというファイルだけなので、それほど頻繁に更新される事は無いと思いますが一応という事で。

広告の表示位置と余白について

レスポンシブだからと言って必ずしも設定した枠いっぱいに広告が表示されるとは限りません。枠よりひと回り小さいサイズで表示される場合がありますが、これはAdSenseの仕様によるものです。

参考類似したサイズのディスプレイ広告を含む広告ユニットを埋め戻す方法 – AdSense ヘルプ

当エントリーでカスタマイズした広告枠も例外ではなく、右寄せにしたはずがセンタリングで表示されたり、高さを中央揃えにしたのに上詰めで表示されたりしますが、AdSense側で挿入されるコードに対しては手を加えたくないので（ポリシー違反的な意味で）そういうものだと思う事にしています。

そんなわけで単に私が技術不足なせいもありますが、その点はひとつご容赦を。もし解決策をご存知の方がみえましたらご教授いただけると幸いです。と言うかむしろぜひお願いしたいです。

汎用性に乏しいかも

それなりに応用が効くようにはしたつもりですが、基本的に自分で使う事を前提とした作りなのでそれ以外の設定では巧く表示出来ない場合があるかもしれません。なので必要に応じて手を加えていただく必要があるかと思います。

全く同じ設定で利用していただければ特に問題は無いと思いますが、そうでない場合は最終的にmax-widthなどの数値はご自分で調整していただいた方がよろしいでしょう。

Cocoon設定の広告設定とは連動しない部分が

Cocoon設定の広告設定からサイト全体の広告を非表示にする事が可能ですが、当エントリーのカスタマイズではAMPページのAdSenseに広告ウィジェットを使用していないので、この部分だけ手動でウィジェットを使用停止中に移動するなりして対応する必要があります。

サイト全体の広告を止めるという状況がまず無いとは思いますが一応という事で。AMP用だけ広告ウィジェットを使わない理由は後ほど説明いたします。

カスタマイズ手順

お待たせしました、前置きが長くなりましたが以下の工程で作業を進めます。

Cocoon設定ヘッダー
ヘッダー広告用エリアの作成
ヘッダー広告用ウィジェットの設置
CSSの編集
ヘッダー広告用ウィジェットをヘッダーに挿入

何だか面倒くさそう…と思われるかもしれませんが、慣れた方ならそれほど時間はかからないと思います。あと今更な感じですが作業は全て子テーマに対して行って下さい。ここ大事ですので、念の為。

ファイルをアップロードする際にFTPの使い方がよくわからないという方は、以下のエントリーが参考になれば幸いです。

FTPクライアント FFFTPの基本的な使い方ファイルのアップロードとダウンロード方法に

最近ではWordPressをはじめとするCMSが管理画面から簡単な設定を行うだけでインストール可能なレンタル ...

https://unlimitedchaos.net/uc/how-to-use-ffftp-upload-and-do...

Cocoon設定ヘッダー

まずはCocoon設定からヘッダーのタブを開いて以下のように設定します。

ヘッダーレイアウト: センターロゴ（デフォルト）

トップメニューにするとサイトのロゴ画像が小さくなってしまうので、デフォルトの状態からCSSで調整するようにしています。

ヘッダーロゴ: 300×100の画像

ロゴ画像をこのサイズ以外にしたい場合はCSSの調整が必要になる場合があります。

キャッチフレーズの配置: ヘッダートップ（デフォルト）

ヘッダーボトムにした場合はモバイル表示の広告とキャッチフレーズの間のマージンを無くした方がいいと思うので、CSSのところであらためて書く事にします。

高さ・高さ（モバイル）・ヘッダーロゴサイズなどは特に設定していません。

ヘッダー広告用エリアの作成

直接編集するなりPC上で修正したファイルをアップロードするなり更新方法はお任せしますが、functions.phpに以下の内容をコピペで追加して保存します。

ヘッダー広告用エリアの作成

/* ヘッダー広告表示用 */
if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'ヘッダー広告エリア',
		'id' => 'header-ad',
		'description' => 'ヘッダーに表示する広告用のウィジェットです。',
		'before_widget' => '<div class="header-ad">',
		'after_widget' => '</div>',
	));

}

ヘッダー広告用ウィジェットの設置

ダッシュボードからウィジェット画面を開くと、こんな感じで先ほど作成したウィジェットエリアが追加されているはずです。

ウィジェット画面にこの部分が表示されない場合は、functions.phpの編集が失敗している可能性があるので確認してみて下さい。

通常ページ用のAdSense

[C]広告ウィジェットにAdSenseレスポンシブ広告ユニットのコードをコピペします。

こんな感じのコードですね。

通常ページ用のAdSense

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

広告フォーマットはバナーを選択します。

自分でdata-ad-format="horizontal"（横長のバナーしか表示されなくなる）を設定した場合と同様になるはずです。

広告ラベルを表示するのチェックを外します。

このウィジェットに設置した広告はAMPページでは表示しないよう表示設定からウィジェットの表示のプルダウンメニューがチェック・入力したページで非表示になっている事を確認して、ページタブからAMPページにチェックを入れます。

もちろん保存ボタンを押す事も忘れないで下さいね？（しつこい）

AMPページ用のAdSense

Cocoonのウィジェットは表示設定によってAMPページに表示する事も非表示にする事も可能ですが、今回のカスタマイズでは先ほど設置した広告ウィジェットをそのままAMPページにも表示させると、Cocoonの自動変換が災いして広告が枠から大きくはみ出してしまいます。

左が作成した広告枠で右が埋め込まれたAdSenseの広告です。

とりあえず理由と対応策についてはこちらのエントリーを参照していただければという事で、ここでは話を先に進める事にします。

[無料WordPressテーマ] CocoonのAMPページで横長のバナー広告をレスポンシブ表示する

Cocoonの広告ウィジェットを利用してGoogle AdSenseの広告ユニットを設置すると、AMPページには自動でA ...

https://unlimitedchaos.net/uc/wordpress-theme-cocoon-how-to-...

AMPページにはカスタムHTMLウィジェットを利用してAMP用のAdSense広告コードを書く形で対応する事にします。

AMPページ用のAdSense

<amp-ad
   layout="fixed-height"
   height="100"
   type="adsense"
   data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
   data-ad-slot="xxxxxxxxxx">
</amp-ad>

今後のCocoonの仕様変更によってこの対策は不要になるかもしれませんが、とりあえず作者さんに余計な負担をかけるのも何だったので今回はこの形で何とかしてみました。

このウィジェットに設置した広告はAMPページだけに表示するよう表示設定からウィジェットの表示のプルダウンメニューをチェック・入力したページで表示に変更して、ページタブからAMPページにチェックを入れます。

CSSの編集

正直なところいつもカスタマイズで一番自信が無いのがこのCSSでして…なにぶん私も独学で素人に毛の生えた程度なので詳しい人が見たらツッコミどころは多分にありそうですが、目的はそれなりに果たせていると思うのでこんな感じで勘弁していただきたい。

とりあえずCocoonオリジナルのCSSをなるべく崩さないようモバイルファーストな感じにしてみました。部分的に説明と言うか言い訳的なものがありますがそれはまたコードの後で。

ヘッダー広告表示対応用CSS

/* ヘッダー広告表示対応 */

/* 基本的な設定 */
.header-ad {
	margin: 0 0 20px;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100px;
	background: rgba(0, 128, 128, .05);
}

/* 340px以上 */
@media screen and (min-width: 340px){

	.header-ad {
		margin: 0 10px 20px;
		max-width: calc(100% - 20px);
	}	

}

/* 768px以上 */
@media screen and (min-width: 768px){

	#header-in {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tagline {
		width: 100%;
	}

	.header-ad {
		margin: 0 10px 0 0;
		max-width: calc(100% - 420px);
	}

	.header-ad .ad-area {
		text-align: right;
	}

}

/* 1200px以上 */
@media screen and (min-width: 1200px){

	.header-ad {
		margin: 0;
		max-width: 728px;
	}

}

基本的な設定

最初は左右に10pxのマージンを空けていましたが、320pxのデバイスで表示した際に最も効果が高いと言われているモバイルビッグバナー（320×100）が表示されなくなってしまうのでこのサイズでは左右のマージンを無しにしてあります。

また、広告サイズの埋め戻しがあった場合に背景が白だと余白が空きすぎてるように見えるのがちょっと嫌だったので、広告枠の背景に薄い透過色がつけてあります。むしろ色がついている方が嫌だという方はこの部分をコメントアウトするか削除してもらって構いません。

340px ～ 767px

ここからは左右に10pxのマージンを取るようにしました。モバイル表示ではマージン不要という事ならこの部分は削除してもよろしいかと思います。

768px ～ 1199px

ここからヘッダーロゴと広告が横並びになります。max-widthは100%から420pxを引いた値にしてありますが、ヘッダーロゴと広告があまり近すぎるのもどうかと思って少し余裕を取ってあるだけなので、最低限ヘッダーロゴと左右のマージンさえ残してあれば多少イジっても大丈夫なはずです。

1200px ～

ヘッダーの外側にマージンが取られるようなのでヘッダー内のマージンは無くしました。max-widthはビッグバナー（728×90）のサイズを上限にしてありますが、これもヘッダーロゴのギリギリまで広げる事は可能です。

キャッチフレーズの配置をヘッダーボトムにした場合

キャッチフレーズをデフォルトのトップからボトムに変更した場合、広告とキャチフレーズの間隔が空きすぎてると思ったら基本的な設定と340px以上の部分のマージンを次のように修正してみるといいかもしれません。

キャッチフレーズの配置をヘッダーボトムにした場合

/* 基本的な設定 */
.header-ad {
	margin: 0;

/* 340px以上 */
@media screen and (min-width: 340px){

	.header-ad {
		margin: 0 10px 0;

AdSense以外にも応用出来ます

適切なサイズでメディアクエリとmax-widthを設定する事でアフィリエイトASPの固定サイズのバナーを表示させる事も可能ですし、あまり高さの無いコンテンツを並べるなど広告以外の用途にも利用出来ますんで、その辺りは自由にカスタマイズして活用していただければ幸いです。

ヘッダー広告用ウィジェットをヘッダーに挿入

親テーマからファイルをコピーして同じ階層構造で子テーマにアップロードします。

header-container.phpのコピー

cocoon-master
  └ tmp
      └ header-container.php

親テーマからこのファイルを

cocoon-child-master
  └ tmp
      └ header-container.php

この形になるよう子テーマにコピーします。

先にファイルだけコピーしておいて後から内容を編集しても、PC上で編集したファイルをアップロードしてもどちらでもやりやすい方法でOKです。

header-container.phpの編集

header-container.phpを開けばどこを編集するかはすぐにわかると思いますが、最終的に以下の形になるよう修正します。

header-container.phpの編集

      <?php //ヘッダー広告表示対応 classからcfを削除 ?>
      <div id="header-in" class="header-in wrap" itemscope itemtype="https://schema.org/WebSite">

        <?php //キャッチフレーズがヘッダー上部のとき
        if (is_tagline_position_header_top()) {
           get_template_part('tmp/header-tagline');
        } ?>

        <?php //ロゴタグの生成
        generate_the_site_logo_tag(); ?>

        <?php //ヘッダー広告エリア
        dynamic_sidebar('header-ad'); ?>

        <?php //キャッチフレーズがヘッダー下部のとき
        if (is_tagline_position_header_bottom()) {
           get_template_part('tmp/header-tagline');
        } ?>

      </div>

それでは簡単ですが変更箇所の説明を。