酒とロック

WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

stinger WordPress

WordPressのSTINGER 5でヘッダ(記事上)にスマホ用のアドセンスを挿入する手順

2014/11/20

スマホだけヘッダの下(記事上)にバナーを追加したい

STINGER 5のデフォルト設定は、デバイスがスマホの場合アドセンスの広告が2つ表示されるようになっています。その際、記事下に2つ表示される仕様になっているため、記事が長くなればなるほど、ユーザーに広告を表示してくれるまで時間が多くかかってしまいます。

モニタ上、 初見でアドセンスが 表示される領域

PCの場合は、ファーストビューで右上のバナーを表示されるのに、スマートフォンはずいぶんとスクロールしないと広告が表示されません。

最近は、スマホユーザーが急増しており、アドセンスの効率化を図るためにも、記事の上の方にバナーを表示させたいと考えました。

スマホだけヘッダ(記事上)にアドセンスを表示したい

別に新しいことでも難しいことでもありませんが、WordPress初心者向けの手順指南となれば幸いです(私も初心者同様ですが…)。

なお、スマホの画面上一杯にバナーが表示されるようなアドセンスの貼り方は規約違反になります。300×250のサイズではなく、スマホ用サイズに最適化された320×100の横長バナーを使用します。

AdSense(アドセンス)で新規バナーを作成

まずはアドセンスの管理画面から、挿入すべきバナー広告を作成します。

画面上のメニューから「広告の設定」を選択し、「新しい広告ユニット」をクリック。
新しい広告ユニット

続いて広告ユニット名を入力し、320×100のラージモバイルバナーを選択。
アドセンス300×100

保存してコードを取得します。アドセンスのコードが画面が表示されますので、これをコピーしておきます。
アドセンス広告コード

WordPressブログのheader.phpにコードを貼り付ける

上記準備が完了したら、WordPressのテーマにある「header.php」に先ほどコピーしておいたコードを貼り付けます。

当然ながら「header.php」は、WordPressのデータが置いてあるサーバーにあります。

FTPなどでログイン後、wp-content > themes > stinger5ver2014**** と進みます。
ここでは、私が使用しているテーマのSTINGER5を例にしてあげてています(*印はバージョンによって英数字が入ります)。

stinger5ver2014**** フォルダを開くと「header.php」が見つかるはずです。
header.phpの場所

「header.php」を編集する前に、必ずバックアップをとってから作業を行うようにしましょう。

97行目から102行目付近にかけて以下のコードが入力されているはずです。

このコードの直後に、以下のコードを入れればOK。

スマホのみアドセンス広告を表示させたいので、phpの条件分岐を使用してアドセンスのコードを貼り付けます。

php 条件分岐でアドセンスの表示を振り分ける

できました。
07

まとめ

難しいことはありません。作業にして5分ぐらいでしょうか。WordPressでブログを書くならば、やはりphpの条件分岐は覚えておきたいです。

photo credit: Nikolay Bachiyski via photopin cc

-stinger, WordPress