ASP（アフィリエイト・サービス・プロバイダ）のバナー広告を管理するのに便利な「Adrotate」プラグインの紹介と、使い方の解説をします。
表示したい場所ごとにグループ化し、複数のバナー広告を登録してランダムに表示する、といった使い方をします。表示回数やクリック回数などの統計機能もついているので、成約率の高い広告を比較するのにも便利です。
また、表示期限の設定もできるので、ASP のキャンペーンにあわせて広告を切り替えたりすることもできます。
目標
サイドバーの上部に 300Ｘ250px、記事の下部に 300Ｘ250px の広告をふたつ横に並べたレイアウトを設置してみます。
インストール
管理画面の「プラグイン」→「新規追加」と移動し、検索窓に「Adrotate」と入力してエンターキーを押すと表示されるので、「今すぐインストール」ボタンからインストールできます。
こちらから ZIP ファイルをダウンロードし、解凍したものを plugins フォルダにコピーしてインストールすることもできます。
AdRotate Banner Manager — WordPress プラグイン
インストール後、プラグインを有効化してください。有効化すると「Adrotate」と表示されるので、ここから設定を行っていきます。
設定
グループの管理
「新規追加」をクリックします。
まずはサイドバー上部に表示する広告のグループを作成しました。管理しやすいように、わかりやすい名前をつけましょう。
「Save Group」ボタンで保存します。
広告管理
「新規追加」をクリックし、ASP で入手したバナー広告の HTML ソースを登録していきます。
「タイトル」に好きな名前をつけて、「AdCode」に ASP からコピーした HTML を貼り付けてください。
画面を見るといろいろと設定できそうな雰囲気ですが、
rel="nofollow"をアフィリエイトリンクで使えるか調査してみた
リンク先にあるように、国内の大手 ASP は生成されたアフィリエイトリンクのソースコードの加工などをほぼ認めていませんので、ソースコードをコピペして終了です。
「Schedule your advert」の Start date や End date を設定すると、広告表示の有効期限を設定できます。
「Maximum Clicks」は何回までクリックさせるかを設定します。「Maximum Impressions」は何回まで広告を表示させるかを設定します。
「グループを選択」で先ほど作成したグループを選択します。
「Save Advert」ボタンで保存してください。
補足
広告を登録すると、Schedule your advert の End date は 180 日後に自動で初期設定されます。期限が近付いた場合、管理画面のプルダウンメニューで更新するようにしてください。
サイドバーに広告を表示
ウィジェット
管理画面の「外観」→「ウィジェット」に移動すると、「AdRotate」というウィジェットアイテムがあるはずなので、これをサイドバーに登録します。
タイプを「広告グループ-グループ ID を使ってください。」に切り替え、グループ ID を指定して保存してください。
sidebar.php
使っているテーマの sidebar.php に直接次のようなソースコードを追記することでも、広告を表示することができます。
1 | <?php echo adrotate_group(1); ?> |
対応するグループ ID に注意してソースコードを修正してください。
記事の下に広告を横にふたつ並べてみる
記事の下に表示する広告グループを作成します。「グループ管理」→「新規追加」で移動します。
先ほど同様、管理しやすいようにわかりやすいグループ名をつけます。今度は Mode を「Block Mode」、Block size を 1 行 2 列、Advert size の幅を 600 ピクセルに設定します。幅の 600px は、幅 300px の広告がふたつだからです。高さは 1 行の場合、特に設定しなくてかまいません。
Select adverts でグループに追加したい広告を設定します。
広告は複数のグループに登録することができるので、先ほどサイドバーに登録した広告を記事の下でも表示することができます。最後に「Save Group」ボタンで保存してください。
表示する方法はふたつありまして、ひとつは記事の投稿画面でテキストエディタにショートコードを記述すること。
もうひとつは、テーマの single.php にサイドバーのときと同じように、
1 | <?php echo adrotate_group(2); ?> |
のようにソースコードを修正します。こちらの方法だと、毎回記事にショートコードを書かずに済みます。
こうなります。
調整
先ほどの記事の下の広告のグループの管理画面を開いてください。
広告同士の間隔
広告同士の間隔は設定画面から決めることができます。Advanced の「Advert Margin」を試しに 10 ピクセルに設定してみます。
テキストの挿入
設定画面から広告の前後に挿入するテキストを設定することができます。例えば、Wrapper code に次のように設定したとします。Google アドセンスを意識してみました。
こうなります。
両方の広告に表示されて少し格好悪いですね。例えば、スタイルシートで次のようにカスタマイズしてみます。
1 2 3 | .g-2 div:last-child .ad-label { display: none; } |
グループ ID などによって、出力される class 属性などが微妙に異なることに注意してください。こうなります。
微調整して高さなどをそろえます。
1 2 3 4 5 6 7 8 9 | .g-2 div:first-child .ad-label { margin-bottom: 5px; margin-left: 3px; } .g-2 div:last-child .ad-label { margin-bottom: 5px; visibility: hidden; } |
「display: none;」にすると margin が効かなかったので、「visibility: hidden;」に変更しました。地味にハマります。
スタイルシートでデザインをカスタマイズ
最後に CSS を修正して、広告を中央に配置してみます。
1 2 3 4 | div.g-2 { width: 620px; margin: 0 auto; } |
先ほど Advert Margin で 10 ピクセルの間隔をあけたので、
300 + 10 + 300 = 610 ピクセル
だと思っていましたが、610 ピクセルだと表示が崩れます。右の広告にも右側に 10 ピクセルはいっていることが原因のようです。
300 + 10 + 300 + 10 = 620 ピクセル
で width を指定してあげてください。これにて完成です。ブラウザの更新ボタンを何度か押して、広告がランダムに切り替わるのを確認してみてください。お疲れ様でした。
Comment
困ったことに
div.g-2 {
の部分の’2’がidで可変なんですよね。。。
この辺りは外部ファイルになっていないので、プラグインを直接いじって調整しました。。。
コメントありがとうございます。
例えば、あなたの環境が
div.g-3 {
であれば、CSSを’3’に編集したほうが良いかと。
プラグインはアップデートされると自分が編集した部分がもとに戻ってしまう
危険があります。プラグインを直接いじれるほどの知識をお持ちであるなら、
CSSで対応したほうがはるかに簡単ではないでしょうか。
はじめまして。
adrotateの説明とてもわかりやすく参考にさせていただきました。
ありがとうございます。
１つお伺いしたいのですが、
新規追加でHTMLを入れるとショートコードを割り当ててくれるので簡単に置き換えることが出来るのですが、
「●参考 〜〜」といった具合に（〜〜）にショートコードを入れてプレビューすると同列に収まらず2列になってしまいます。
その為、HTMLを直接記入すれば同列に収まるのでショートコードを使いたくないのですが、
直接HTMLを記入してもadrotateの統計には反映されるのでしょうか？
お手数ですがよろしくお願いします。
the Day様
メール致しました。
届いていない場合、再度コメント欄で教えて頂けますでしょうか？
お手数ですがよろしくお願いします。
非常に分かりやすく勉強になりました。
参考にさせて頂き広告を横並びに表示できたのですが、モバイル画面では、横スペースは十分なのに、何故か縦に分割されて表示されてしまいます。
そんなことないでしょうか？もし対策ご存知でしたら教えて頂けたら助かります。
みやみつ様
コメントありがとうございます。
状況がよくわからないのですが、横にふたつ並べていた広告が
モバイル画面だと縦２列になるという認識であっていますか？