STINGER5 サイドバー右上広告枠のみアドセンス広告以外のバナーに変える方法

このブログで使っているWordPressテンプレート、「STINGER5」のアドセンス広告配置について。

今回は、「STINGER5」(ver.20141011)のデフォルトのアドセンス広告配置を部分的にカスタマイズし、サイドバー右上広告枠のみアドセンス広告以外のバナーに変える方法をご紹介。

そもそもこのカスタマイズをする理由は、記事の途中にアドセンス広告を入れたいから。

Google AdSenseでは同一ページに3つまでしか入れられないルールがあるのはみなさんご存知だと思いますが、「STINGER5」のデフォルトの設定通りにアドセンスを設置すると、3つのバナー枠を使い果たしてしまい、記事の途中にアドセンスを設置することができない。

デフォルト設定でも悪くはないが、効果の高い記事中にアドセンスを設定できないのはちょっと痛い。別にサイトを運営しているが、アドセンスの枠の実績は「記事下>記事途中>右上」の順で効果が出ている。

なので、サイドバー右上の広告枠にアドセンス以外のバナーを設置し、余ったアドセンスの枠を記事中に設置するカスタマイズを行うことが今回の目的。

以下、僕が実際に行った広告配置の全体像も合わせてご紹介します。

※2016.7 このブログのテンプレートをアルバトロスに変更しました。

photo by MIKI Yoshihito

STINGER5でアドセンスを記事の途中に表示する

実施したい広告バナー配置方法

僕が今回目指したのは下の図のような広告配置。①、②、③はアドセンス、④はアドセンス以外のバナー。

stinger_adsense1_600

これを実現するためにカスタマイズを行うわけだが、実際の修正方法の話をする前に、デフォルトではどのように広告バナーが配置されるかを確認しておきたいと思います。

デフォルトの広告配置

こちらが「STINGER5」(ver.20141011)のデフォルト設定の設置パターン。

stinger_adsense2_600

「STINGER5」のデフォルト設定だと、ウィジェットの所定の箇所にアドセンスコードを入れると、①、②のような配置でアドセンスを出すことができる仕様になっている。設定方法は下図の通り。

stinger_adsense3

上の図のように、「STINGER5」ではウィジェットの「Googleアドセンス用336px」に336×280サイズのアドセンスコードを入れると自動的に①の箇所(PC2箇所)にバナーを配置してくれる。

また、同じく「Googleアドセンスのスマホ用300px」に300×250サイズのアドセンスコードを入れると自動的に②の箇所(PC1箇所、SP3箇所)にバナーを配置してくれる。

今回修正するのは上の図の「②右上アドセンス300×250」の位置。ここに自動的にバナーが表示されないようにした上で、アドセンス以外のバナーを設置する。

カスタマイズ方法

修正するファイルはsidebar.phpの下記の箇所。

マーカーをした部分がサイドバー右上に自動的にアドセンスを出しているコード。この記述によって、ウィジェットの「Googleアドセンスのスマホ用300px」に300×250サイズのアドセンスコードを入れるとサイドバー右上にアドセンスが出ている。

なので、この部分を削除し、アドセンス以外の広告バナーのコードを入れればOK。(※要バックアップ)

例えばエックスサーバーの広告バナーを設置するなら、まずASPから300×250のバナーのリンクコードを取得して下図のようにそのまま貼付ける。

stinger_adsense5

すると下図のように表示される。

stinger-adsense101

スマホで確認しても、レスポンシブルデザインによって記事エリアの下に回り込んだサイドバーの同位置に、同様の広告が表示される。

これでアドセンスの枠がひと枠減り、記事の途中にアドセンスを置けるようになる。

応用編:Post Snippetsを使って右上バナーを簡単差し替え

上記のカスタマイズを行えば、右上にアドセンス以外の広告バナーを設置することができるが、この方法だと右上のバナーを差し替えるたびにテンプレートファイル(sidebar.php)の修正を行わなければならず、あまり良い運用とは言えない。

そこで応用編として、テンプレートファイルの該当箇所にショートコードを埋め込み、「Post Snippets」というプラグインを使って、簡単にバナーの差し替えをする方法をご紹介。

作業手順は下記の通り。

①Post Snippetsのインストール
②Post Snippetsの設定
③sidebar.phpへショートコードの埋め込み

以下、順番にご案内します。

①Post Snippetsのインストール

まずはWordPressのプラグイン、「Post Snippets」をインストール。

ちなみに「Post Snippets」はHTMLやPHPのコードを登録しておき、ショートコードで呼び出せるプラグイン。今回の作業は、右上の広告バナーエリアに、バナーを表示するためのショートコードをあらかじめ設置しておき、「Post Snippets」でその広告バナーを管理することでテンプレートファイル(sidebar.php)の直接編集を避けようとするもの。

では、WordPress管理画面「プラグイン」の「新規追加」から「Post Snippets」と検索し、インストール。

stinger_adsense6

インストール出来たら「有効化」を行う。(この辺りは基本的な操作なので詳しい説明は省きます)

インストールし「有効化」を行うと、WordPress管理画面「設定」に「Post Snippets」が追加される。

stinger_adsense7

設定は次の作業で行います。

②Post Snippetsの設定

次に、「Post Snippets」の設定画面を開く。

stinger_adsense8

まず設定画面下部の「Add New Snippets」をクリック。そうすると上のような枠が出てくるので、以下のように入力。

Title:
任意のタイトル。仮に「AD1」としました。
Variables:
空欄で大丈夫です。
Snippet:
ここに300×250のバナーのリンクコードをそのまま入力します。
Shortcode:
ここにチェックを入れます。

最後に、「Update Snippets」をクリックすれば上書き保存され、これでショートコードの設定は完了。

この設定例の場合は、ショートコードは[AD1]となる。

③sidebar.phpへショートコードの埋め込み

それでは最後に「STINGER5」テンプレートファイルsidebar.phpに先ほど設定したショートコードを埋め込む作業。(※要バックアップ)

埋め込む箇所は最初にご紹介した下記の場所。

先ほどご説明した通り、マーカーをした部分がサイドバー右上に自動的にアドセンスを出しているコード。ここの部分を削除し、先ほど設定したショートコードを出力するためのコードを記載する。

上のマーカー部分の通りに記載すればOK。先ほどの例でいくと、上の「先ほど設定したショートコード名」の部分に「AD1」が入る。

これで全ての設定は完了。変更を更新して実際に確かめてみてください。

サイドバー右上広告バナーの差し替え方

もうおわかりかもしれないが、サイドバー右上広告バナーの差し替え方について一応記載。

広告バナーを差し替えたい場合は、「Post Snippets」の設定画面から行う。

stinger_adsense8

先ほど設定した、

Snippet:
ここに300×250のバナーのリンクコードをそのまま入力。

上記の枠に記載したバナーのリンクコードを差し替え、上書き保存するだけでOK。

これで作業はおしまいです。

おわりに

サイドバー右上広告枠にアドセンス以外の広告バナーを置いておき、記事途中にアドセンスを設置する手法は、「STINGER」開発者のENJIさんが実際に紹介している方法。

参考STINGERでアドセンスをより効果的に貼る方法

今回ご紹介したやり方で設置されているかは定かではないが、少なくともこの方法なら同じ貼り方を実現でき、簡単に管理することが可能。

また、今回ご紹介した方法で、ショートコードの内容を広告バナーのリンクコードではなく、「プロフィール情報」にすれば(HTMLで記載します)、サイドバー右上の位置にプロフィールを出すこともできる。

興味のある方は、ぜひ試してみてください。

なお、ご紹介した方法はテンプレートファイルを修正するため、修正前はバックアップを取ることをお勧めします(作業については自己責任でお願いします)。

最新テンプレート「AFFINGER4」