WordPressで広告管理に便利なAdrotateプラグイン

 ASP(アフィリエイト・サービス・プロバイダ)のバナー広告を管理するのに便利な「Adrotate」プラグインの紹介と、使い方の解説をします。

 表示したい場所ごとにグループ化し、複数のバナー広告を登録してランダムに表示する、といった使い方をします。表示回数やクリック回数などの統計機能もついているので、成約率の高い広告を比較するのにも便利です。

 また、表示期限の設定もできるので、ASP のキャンペーンにあわせて広告を切り替えたりすることもできます。

目標

サイドバーの上部に 300X250px、記事の下部に 300X250px の広告をふたつ横に並べたレイアウトを設置してみます。

20151022_1

インストール

管理画面の「プラグイン」→「新規追加」と移動し、検索窓に「Adrotate」と入力してエンターキーを押すと表示されるので、「今すぐインストール」ボタンからインストールできます。

20151022_2

こちらから ZIP ファイルをダウンロードし、解凍したものを plugins フォルダにコピーしてインストールすることもできます。

AdRotate Banner Manager — WordPress プラグイン

インストール後、プラグインを有効化してください。有効化すると「Adrotate」と表示されるので、ここから設定を行っていきます。

20151022_3

設定

グループの管理

「新規追加」をクリックします。

20151022_4

まずはサイドバー上部に表示する広告のグループを作成しました。管理しやすいように、わかりやすい名前をつけましょう。

20151022_5

「Save Group」ボタンで保存します。

広告管理

「新規追加」をクリックし、ASP で入手したバナー広告の HTML ソースを登録していきます。

20151022_6

「タイトル」に好きな名前をつけて、「AdCode」に ASP からコピーした HTML を貼り付けてください。

20151022_7

画面を見るといろいろと設定できそうな雰囲気ですが、

rel="nofollow"をアフィリエイトリンクで使えるか調査してみた

リンク先にあるように、国内の大手 ASP は生成されたアフィリエイトリンクのソースコードの加工などをほぼ認めていませんので、ソースコードをコピペして終了です。

20151022_8

「Schedule your advert」の Start date や End date を設定すると、広告表示の有効期限を設定できます。

「Maximum Clicks」は何回までクリックさせるかを設定します。「Maximum Impressions」は何回まで広告を表示させるかを設定します。

「グループを選択」で先ほど作成したグループを選択します。

20151022_9

「Save Advert」ボタンで保存してください。

補足

広告を登録すると、Schedule your advert の End date は 180 日後に自動で初期設定されます。期限が近付いた場合、管理画面のプルダウンメニューで更新するようにしてください。

20151022_10

サイドバーに広告を表示

ウィジェット

管理画面の「外観」→「ウィジェット」に移動すると、「AdRotate」というウィジェットアイテムがあるはずなので、これをサイドバーに登録します。

20151022_11

タイプを「広告グループ-グループ ID を使ってください。」に切り替え、グループ ID を指定して保存してください。

20151022_12

sidebar.php

使っているテーマの sidebar.php に直接次のようなソースコードを追記することでも、広告を表示することができます。

対応するグループ ID に注意してソースコードを修正してください。

記事の下に広告を横にふたつ並べてみる

記事の下に表示する広告グループを作成します。「グループ管理」→「新規追加」で移動します。

20151022_13

先ほど同様、管理しやすいようにわかりやすいグループ名をつけます。今度は Mode を「Block Mode」、Block size を 1 行 2 列、Advert size の幅を 600 ピクセルに設定します。幅の 600px は、幅 300px の広告がふたつだからです。高さは 1 行の場合、特に設定しなくてかまいません。

Select adverts でグループに追加したい広告を設定します。

20151022_14

広告は複数のグループに登録することができるので、先ほどサイドバーに登録した広告を記事の下でも表示することができます。最後に「Save Group」ボタンで保存してください。

表示する方法はふたつありまして、ひとつは記事の投稿画面でテキストエディタにショートコードを記述すること。

20151022_15

もうひとつは、テーマの single.php にサイドバーのときと同じように、

のようにソースコードを修正します。こちらの方法だと、毎回記事にショートコードを書かずに済みます。

こうなります。

20151022_16

調整

先ほどの記事の下の広告のグループの管理画面を開いてください。

広告同士の間隔

広告同士の間隔は設定画面から決めることができます。Advanced の「Advert Margin」を試しに 10 ピクセルに設定してみます。

20151022_17

テキストの挿入

設定画面から広告の前後に挿入するテキストを設定することができます。例えば、Wrapper code に次のように設定したとします。Google アドセンスを意識してみました。

20151022_18

こうなります。

20151022_19

両方の広告に表示されて少し格好悪いですね。例えば、スタイルシートで次のようにカスタマイズしてみます。

グループ ID などによって、出力される class 属性などが微妙に異なることに注意してください。こうなります。

20151022_20

微調整して高さなどをそろえます。

「display: none;」にすると margin が効かなかったので、「visibility: hidden;」に変更しました。地味にハマります。

スタイルシートでデザインをカスタマイズ

最後に CSS を修正して、広告を中央に配置してみます。

先ほど Advert Margin で 10 ピクセルの間隔をあけたので、

300 + 10 + 300 = 610 ピクセル

だと思っていましたが、610 ピクセルだと表示が崩れます。右の広告にも右側に 10 ピクセルはいっていることが原因のようです。

300 + 10 + 300 + 10 = 620 ピクセル

で width を指定してあげてください。これにて完成です。ブラウザの更新ボタンを何度か押して、広告がランダムに切り替わるのを確認してみてください。お疲れ様でした。

20151022_21

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

  1. 1
    .
    名前:名無しさん ID:g1NDc5Nzc

    困ったことに
    div.g-2 {
    の部分の’2’がidで可変なんですよね。。。

    この辺りは外部ファイルになっていないので、プラグインを直接いじって調整しました。。。

  2. 2
    .
    名前:管理人 ID:gyMDE5MDA

    コメントありがとうございます。

    例えば、あなたの環境が
    div.g-3 {
    であれば、CSSを’3’に編集したほうが良いかと。

    プラグインはアップデートされると自分が編集した部分がもとに戻ってしまう
    危険があります。プラグインを直接いじれるほどの知識をお持ちであるなら、
    CSSで対応したほうがはるかに簡単ではないでしょうか。

  3. 3
    .
    名前:the Day ID:A1NzYwMTY

    はじめまして。

    adrotateの説明とてもわかりやすく参考にさせていただきました。
    ありがとうございます。
    1つお伺いしたいのですが、

    新規追加でHTMLを入れるとショートコードを割り当ててくれるので簡単に置き換えることが出来るのですが、

    「●参考 〜〜」といった具合に(〜〜)にショートコードを入れてプレビューすると同列に収まらず2列になってしまいます。
    その為、HTMLを直接記入すれば同列に収まるのでショートコードを使いたくないのですが、
    直接HTMLを記入してもadrotateの統計には反映されるのでしょうか?

    お手数ですがよろしくお願いします。

  4. 4
    .
    名前:Naokix ID:k5Mzg2ODE

    the Day様
    メール致しました。
    届いていない場合、再度コメント欄で教えて頂けますでしょうか?
    お手数ですがよろしくお願いします。

  5. 5
    .
    名前:みやみつ ID:E0NjYwMzk

    非常に分かりやすく勉強になりました。
    参考にさせて頂き広告を横並びに表示できたのですが、モバイル画面では、横スペースは十分なのに、何故か縦に分割されて表示されてしまいます。

    そんなことないでしょうか?もし対策ご存知でしたら教えて頂けたら助かります。

  6. 6
    .
    名前:管理人 ID:cyMzEyMDY

    みやみつ様
    コメントありがとうございます。

    状況がよくわからないのですが、横にふたつ並べていた広告が
    モバイル画面だと縦2列になるという認識であっていますか?

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP