複数の画像や広告をランダムで表示させたいと、思ったことはありませんか？
JavaScriptを使えば、ランダムに表示できます。
こうすることで、訪問者個別に違った見せ方ができます。
特に、同じ広告が表示されると、つまらないと思いますので、アクセスのたびに内容を変えたほうが、新鮮さがあっていいと思います。
最後に、応用編として、パソコンとスマートフォンに分けてランダムに画像を表示させます。
WordPress無料テーマCocoon使用の場合、記事内に[<script>]タグを使用すると[<body>]最下部に出力されフッター下部に表示されるようです。なのでテーマ「Cocoon」はこの方法が使用できません（2018 8/13時点）
サンプル動作
3枚の画像の中から一つ表示します。
このサイトはWordPressテーマに「Cocoon」を使用しています。Cocoonでscriptタグを本文内に使用してもフッター下に表示されるようなので別にHTMLファイルを作成してインラインフレームで表示させています。
ランダムの画像が表示される動作は変わりありません。
ソース
/* 画像のタグを配列に表示 */
var img = new Array();
img[0] = '<img src="/wp-content/uploads/2017/02/20170204190350.png" alt="サンプル画像1">';
img[1] = '<img src="/wp-content/uploads/2017/02/20170204190523.png" alt="サンプル画像2">';
img[2] = '<img src="/wp-content/uploads/2017/02/20170204190554.png" alt="サンプル画像3">';
/* 画像をランダムに表示させる関数 */
function img_random(){
num = Math.floor( Math.random() * 3);
document.write(img[ num ]);
}
[javascript.js]
配列に画像タグを入れてランダム表示させる関数で表示させています。
また、シングルクォーテーション「’」、 ダブルクォーテーション「”」に注意します。
[‘<img src=“url“>‘]
[“<img src=‘url‘>“]
タグを貼り付けるときは、どちらかに統一させます。
[‘<img src=‘url‘>‘]
は使えません。
特に広告タグはダブルクォーテーション「”」がほとんどなので、広告タグを囲むときはシングルクォーテーション「’」を使います。
【応用編】パソコンとスマートフォン（iPad）で分ける
『JavaScriptでパソコンとモバイルでメッセージを変える方法』の記事から、応用してパソコンとスマートフォンで、出したい画像を分けてランダムに表示させます。
サンプル
上のプログラムと同じよう感じですが、パソコンとスマートフォンで分けて3枚の画像をランダムで一つ表示させてます。
こちらも、テーマCocoon使用のためインラインフレームで表示しています。ランダムで表示される画像の動作は同じです。
パソコンで見ると、先ほどの画像と同じものが表示されます。
スマートフォンではこのような画像3枚のうち、1枚が表示されます。
ソース（応用）
/* 画像のタグを配列に表示 */
var img = new Array();
img[0] = '<img src="/wp-content/uploads/2017/02/20170204190350.png" alt="サンプル画像1">';
img[1] = '<img src="/wp-content/uploads/2017/02/20170204190523.png" alt="サンプル画像2">';
img[2] = '<img src="/wp-content/uploads/2017/02/20170204190554.png" alt="サンプル画像3">';
/* スマホ用画像のタグを配列に表示 */
var imgsp = new Array();
imgsp[0] = '<img src="/wp-content/uploads/2017/02/20170204190844.png" alt="サンプルスマホ画像1">';
imgsp[1] = '<img src="/wp-content/uploads/2017/02/20170204190929.png" alt="サンプルスマホ画像2">';
imgsp[2] = '<img src="/wp-content/uploads/2017/02/20170204191004.png" alt="サンプルスマホ画像3">';
var usag = navigator.userAgent;
/* PCとスマホに分けて、画像をランダムに表示させる関数 */
function imgsp_random(){
if ((usag.indexOf('iPhone') > 0 || usag.indexOf('iPad') > 0) || usag.indexOf('iPod') > 0 ||usag.indexOf('Android') > 0){
num = Math.floor( Math.random() * 3);
document.write(imgsp[ num ]);
}
else{
num = Math.floor( Math.random() * 3);
document.write(img[ num ]);
}
}
上に同じく、[javascript.js]の外部ファイルで、関数を呼び出しています。
これを使うと、例えば、パソコンの広告とスマートフォンの広告を分けて、ランダムで表示できます。
まとめ
サクッとですが、説明しました。
広告などを複数ランダム表示させるとき、数が多くなると[list.js]、[javascript.js]のように配列と関数でファイルを分けると管理しやすいです。
もし、「表示」の下にリンクなどあってワンテンポ遅れて表示すると、誤操作になるかもしれないで、表示させるもののサイズを統一させたほうがいいかと思います。
テーマCocoonで正常動作しません
2018年8/13時点のCocoonバージョン1.1.2では上記プログラムは正常に動作しません。
どうもCocoonのテーマ使用で記事内に<script>タグを入れても表示の時は<body>最下部に移動されフッター下に出力（表示）されるようです。
プラグインの干渉やサーバーキャッシュの問題かとも思いましたが、新規にインストールしたWordPressにテーマCocoonだけインストールして記事本文にサンプルコード書いても同じくフッター下に表示されました。
<script>document.write("Hello World");</script>
※JavaScriptで「Halo World」を表示するサンプルコード
Cocoonでは使えませんが、Simplicityで正常に動作することを確認しています。
