【WordPress】でランダムに広告を表示させたい場合

ブログ運営

こちらの記事では、予め用意した広告をランダムに表示させる方法を記録として残しました。

ランダムに広告を表示させる代表例としては、グーグルアドセンスの広告が比較的有名です。

既存のシステムではA8.netでは、「A8内で取り扱っている広告」であれば、ランダムに表示させるローテーションバナーというサービスがあります。

複数のASPであったり、直接企業で契約している場合、複数の広告をランダムで表示させる方法をまとめてみました。今回紹介する方法では、データベースには触れず、新規にプラグインを追加する方法は採用していません。独自にファイル作成もしくは既存のファイルを編集するだけです。ただし、ある程度の知識が必要となります。

実装手順

手順1:Javascriptファイルを作成する

javascriptファイルを作成します。ファイル名は何でも良いですが「random-ad.js」とします。

もしCocoonのテーマを使っている場合は、「外観」→「テーマ編集エディタ」→「javascript.js」のファイルに追加するだけです。

追加するコードは以下のようになります。下記の例では、3件のみですが、必要であれば何件でも追加が可能です。

document.addEventListener('DOMContentLoaded', function() {
var ads = [
'<!-- ASPから提供された広告タグ1 -->',
'<!-- ASPから提供された広告タグ2 -->',
'<aaa>サンプルタグ<aaa>'
];

var randomIndex = Math.floor(Math.random() * ads.length); // ランダムなインデックスを生成
var adHtml = ads[randomIndex]; // 選択された広告タグを取得

// 広告をページに追加
document.getElementById('randomAd').innerHTML = adHtml;
});

広告のタグをシングルクォーテーションで囲まれた部分にコピペします。コピペして貼り付けする際に、改行があるとコードエラーになりますので、貼り付けるタグは1行になるように、改行は無い状態にしてください。

サンプルの広告タグに改行がある場合、
<aaa>サンプルタグ
</aaa>

<aaa>サンプルタグ<aaa> ←改行を取り、コピペしてください。

手順2:headタグを追記

新規にjsファイルを作成した場合は、Headタグの中に下記のソースを記載します。Cocoonなどで既存のjsファイルにコードを追加した場合は、手順2の修正は不要です。

<script src="path/to/random-ad.js"></script>

path/to/random-ad.jsは、実際のファイルのパスに置き換えてください。

手順3:実際に広告を掲載したい場所にコードを貼り付け

広告を追加したい場所に直接下記のコードを追加します。

<div id="randomAd"></div>

直接編集することも可能ですが、ウィジェットを追加して、コードを貼り付けるとメンテナンスがしやすいかと思います。テーマがCocoonの場合なら、広告を表示したいウィジェットを選び、テキスト形式で追加しましょう。

他の使い道

別のセットを作りたい

ランダムに表示したい広告が1セットできました。別のセットを作りたい場合ですが、手順1のソースは、追加したコードの下に同じものを作り「randomAd」のところの文字列を「randomAd2」にするだけでOKです。手順3のウィジェットに貼り付けるコードは、「randomAd2」なので、この部分を修正すれば完了です。

グーグルアドセンスなどの広告に頼らず、自身でブログにマッチし成約率が高そうなものを選びたい場合は、複数の広告を扱うと良いです。広告の貼り方と選び方で収益の差が出てきます。

広告以外の応用

今回紹介したサンプルプログラムコードでは、広告をランダムに表示させる目的ですが、広告以外にも応用ができます。たとえば、ランダムに表示させるサンプルとして以下のようなものがあります。

  • 挨拶文
  • 写真
  • 自身のブログのお勧め記事

同じものを掲載し続けるだけではなく、ちょっとした変化を取り入れるのも、ブログの面白い運営方法ではないでしょうか?

さいごに

今回紹介したサンプルは、知識がある方にとっては簡単すぎる内容かもしれません。全く分からない人にとっては、なんだろう?と思うかもしれませんが、ブログを運営するにあたり、また1つ勉強できたのではないでしょうか?

著者より

記事は参考になりましたでしょうか?ブログが気に入って頂けたらブックマークをお願いします。ご意見ご感想がありましたら、お気軽に問い合わせフォームよりお願いします。時々メッセージを頂きます。ありがとうございます。

またSNSアカウントもあります。フォローして頂けたら嬉しいです。執筆者のプロフ

スポンサーリンク
スポンサーリンク
ブログ運営
記事をシェアする
両毛(管理人)をフォローする
タイトルとURLをコピーしました