【WordPress】Javascriptを使って記事内にランダムに広告を表示する方法

ランダムに表示する理由

記事の中に同じ広告を表示すると、その広告に興味がない人が見れば、永遠にクリックされることはありません。

しかし、広告を変更することが出来れば、訪問者の興味のある広告になる可能性があがります。

そういった意味で、広告をランダムに変えていくということは大切です。

ランダムに表示する方法

では、ランダムに表示する方法をシェアします。

今回紹介する方法は、３つの広告をランダムに表示する方法です。

Javascriptを使います。非常に簡単なプログラムなので安心して下さい。

1. Javascriptファイルを作成する　

Javascriptのコードを書く為のファイルを作成します。

テキストエディター（メモ帳、Mery等）を開いて、『adchange.js』というファイル名で保存しふぁいうるを作成して下さい。

2. ファイルにコードを記入する

ファイルに下のコードを記載し、保存します。

var adarray =[
`広告タグ１`,
`広告タグ２`,
`広告タグ３`]; 
var random = Math.floor( Math.random() * 3 );

document.write(`${adarray[random]}`);

広告タグ１、広告タグ２、広告タグ３に表示させたい広告のタグを記入します。

注意して欲しいのは、広告タグそれぞれを囲んでいるのは『`(バッククォート)』です。『‘(シングルクォート)』ではありません。

キーボードによって異なりますが、キーボードのPの横の『＠マーク記号』に『Shift』で入力できると思います。

分からない場合は、上記のコードをコピペして、広告タグの部分を書き換えて下さい。

また、表示させたい広告が４つの場合は下記のコードになります。広告タグが増えているのと、７行目の数字が３から４になっています。このように広告タグを変更する場合は数を合わせて下さい。

var adarray =[
`広告タグ１`,
`広告タグ２`,
`広告タグ３`,
`広告タグ４`
]; 
var random = Math.floor( Math.random() * 4 );

document.write(`${adarray[random]}`);

3. ファイルをサーバーにアップロード

FTPソフト（FileZillaなど）を使用して、作成したファイルadchange.jsをサーバーにアップロードします。

public_htmlの下にprogramというフォルダを作成して、そのフォルダにアップロードします。

4. 記事に貼り付ける

最後に、記事にコードを貼り付けます。

コードを貼り付ける時はカスタムHTMLの追加で、下記のコードを貼り付けて下さい。

<script src=".//program/adchangge.js"></script>

実際に貼り付けたスクリーンショットは下記になります。

入れたい場所にコードを追加して下さい。これで完成です。

まとめ

広告の数が少ないと、同じ広告が表示されることがありますので注意して下さい。

また、広告タグの部分を画像のタグにすれば、画像をランダムに表示するような応用が出来ます。

是非、色々と試してみて下さいね。