breezi_placeit (mini)

今年の春先にワードプレスの新テーマ”TwentyThirteen”が公開され、その少々ぶっ飛んだデザインがずっと気になっていました。

色々ありましたが、正式テーマとして公開された日本語版のデモページを公開するところまでこぎ着けました。PonDadです。

TwentyThirteen | 簡単カスタマイズ/デモページ

TwentyThirteen簡単カスタマイズ

  • レスポンシブ・アドセンス設置 ☜ 今ココ
  • フォント・カスタマイズ
  • カラー・カスタマイズ
  • ヘッダー・カスタマイズ
  • フッター・カスタマイズ
  • 投稿ページ・カスタマイズ

簡単カスタマイズの対象と目的

  • 対象ははじめてWordPressをはじめられる方、HTMLやCSSなどあまり詳しく分からない方向けです。
  • 基本「コピペ」でカスタマイズが出来ることを目指します。
  • “TwentyThirteen”の良さであるワンカラム・レスポンシブデザインを生かして、大枠のサイズ変更は行なわず、文字や色、ヘッダーを変更することで、自分だけの特徴あるブログデザインへカスタムすることを目指します。(追記:ちょっと気が変わったのでPC表示を2カラムにしてみようと思います。)

レスポンシブ・アドセンスの設置

さて、”簡単カスタマイズ”と銘打ちましたが、最初にアドセンスの設置を行なおうと思います。過去”TwentyEleven””TwentyTwelve”を少しレイアウト変更して使用していたのですが、細かくカスタムした後、最後にアドセンスを挿入したところ、iPhoneやiPadをはじめとしたモバイル機器でレイアウト崩れを起こしてしまうケースがとても多かったです。

googleがレスポンシブデザインに対応した広告ユニットの提供を始めたこともあり(Inside Adsense : レスポンシブ ウェブデザイン に対応した新しい 広告の提供を開始しました)、それを利用した広告の設置を行なうことで、最終的にレイアウト崩れをせずにカスタマイズを進めたいと思います。

レスポンシブアドセンスのテンプレートを設置する

Modification of the AdSense ad code – AdSense Help こちらにテンプレート例が載っていますので転載します。

<script type="text/javascript"><br />
    var random_number = Math.random();<br />
    google_ad_client = "ca-publisher-id";<br />
    google_ad_width = 728;<br />
    google_ad_height = 90;</p>
<p>    if (random_number < .5){<br />
        google_ad_slot = "1234567890";<br />
    } else {<br />
        google_ad_slot = "2345678901";<br />
    }</p>
<p></script><br />
<script type="text/javascript"<br />
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><br />
</script>

ふむ、しかしこれだけでは不十分なようです。調べたところ、okaoka.net|Google Adsenseがレスポンシブデザインでも柔軟に利用可能にポリシー改訂!Webサイトの収益を更に効率化しよう!こちらの記事で、さらに詳細に変更したコードを記載して頂いていますので、そちらを利用させて頂きました。

《サンプルコード1》

<!-- Googleアドセンス開始 --><br />
		<div><script type="text/javascript"><br />
    google_ad_client = "pub-id";<br />
   /* ↑自分のAdsenseのIDを入れましょう */<br />
    width = document.documentElement.clientWidth;<br />
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */<br />
    google_ad_slot = "1234567890";<br />
   /* ↑デフォルトとなるad_slotのIDを入れましょう */<br />
    google_ad_width = 234;<br />
   /* ↑デフォルトとなるad_slotの幅を入れましょう */<br />
    google_ad_height = 60;<br />
   /* ↑デフォルトとなるad_slotの高さを入れましょう */<br />
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */<br />
        if (width > 728) {<br />
        google_ad_slot = "2345678901";<br />
        google_ad_width = 336;<br />
        google_ad_height = 280;<br />
    }<br />
</script><br />
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><br />
</script><br />
</div><br /><br />
<!-- Googleアドセンス終了 --><br />

IMG_4105.PNG 2013-08-31 23-46-36 (mini)

こちらは、投稿内に表示するユニットの設定例です。デフォルトを234×60で設定します。

「パルプ・フィクション」(制作:1994年:監督:クェンティン・タランティーノ) | TwentyThirteen 2013-08-31 23-45-32 (mini)

iPad表示に合わせ、幅728px以上の場合、336×280のユニットを表示する様に設定しています。

《サンプルコード2》

<!-- Googleアドセンス開始 --><br />
			<div style="text-align:center"><div style="margin-top:8px;"><div style="margin-bottom:2px;"><br />
<script type="text/javascript"><br />
    google_ad_client = "pub-id";<br />
   /* ↑自分のAdsenseのIDを入れましょう */<br />
    width = document.documentElement.clientWidth;<br />
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */<br />
    google_ad_slot = "3456789012";<br />
   /* ↑デフォルトとなるad_slotのIDを入れましょう */<br />
    google_ad_width = 320;<br />
   /* ↑デフォルトとなるad_slotの幅を入れましょう */<br />
    google_ad_height = 50;<br />
   /* ↑デフォルトとなるad_slotの高さを入れましょう */<br />
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */<br />
        if (width > 728) {<br />
        google_ad_slot = "4567890123";<br />
        google_ad_width = 728;<br />
        google_ad_height = 15;<br />
    }<br />
</script><br />
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><br />
</script><br />
</div></div><br />
<!-- Googleアドセンス終了 --><br />

IMG_4106.PNG 2013-08-31 23-43-24 (mini)

こちらは、メニューバーに表示するユニットの設定例です。デフォルトを320×50で設定します。

TwentyThirteen | 簡単カスタマイズ/デモページ 2013-08-31 23-41-57 (mini)

iPad表示に合わせ、幅728px以上の場合、728×15のユニットを表示する様に設定しています。

レスポンシブ・アドセンスのテンプレートを挿入する。

《サンプルコード1》

content.phpの38行目、

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

の下に《サンプルコード1》を挿入します。

投稿ページへのアドセンス挿入時の注意点がふたつ程あります。ひとつ目は、”TwentyThirteen”の投稿ページは11種類ありますので、それぞれの.phpにアドセンスの挿入が必要となります。投稿ページを通常の1種類しか使用しない場合はその必要はありません。

ふたつ目は、上記場所にアドセンスを挿入すると、トップページにもアドセンスが表示されてしまいます。そこでphp内での条件分岐によってアドセンスの表示の出し分けを行ないます。

<?php if ( is_search() ) : ?>

を使って条件を分岐させ、

 <?php elseif( is_home() || is_archive()) : ?>

ホームページもしくはアーカイブページで無かったら、アドセンス未挿入のコンテンツを指定。

<?php else : ?>

もしそうじゃ無かったら、アドセンス挿入のコンテンツを指定。

futapapa|第4回 初心者でも出来るWordPress/TwentyTwelveテーマ変更 「アドセンスの設置」こちらで紹介したやり方と同じです。

《サンプルコード2》

header.phpの48行目

</div><!-- #navbar -->

の下に《サンプルコード2》を挿入します。少しヘッダー画像に寄り過ぎてしまうので、CSSで調整しても良いかもしれません。私は、中央に配置して、margin設定で上部8px、下部2pxの空間を空けてみました。ここら辺は好みで調整されると良いと思います。

まとめ

正直、投稿画面11種類全部にこの作業をするのは少々しんどかったですけども、“TwentyThirteen”独特のカラフルな投稿画面を生かして運用したいという気持ちもあり、全部の投稿画面にアドセンスを挿入してみました。

以前は

<?php if (wp_is_mobile()):?>

の関数を使用してアドセンスの出し分けが必要でしたが、今回のGoogle規約でレスポンス・アドセンスの設置が出来る様になり、少し記述自体は楽になったかな、という気もします。

次回は、少々PC表示での投稿タイトルや引用の文字が大きすぎるのでフォントのカスタマイズを行ないたいと思います。では。