たまに見かけるアクセスするたびに違う画像を表示するやつです。
最近はjQueryのスライダーとか使うことが多いからあまり使う機会が無いかもしれませんが、そういうのをつくる機会があったのでメモっておきます。
画像とは言ってますが、実際にはウィジェットをランダムで表示させてるので、画像以外にも使えます。

仕組みを考える

アクセスするたびにメッセージや画像を変更できて、尚且つそれらの差し替えが簡単な方法、ということで、今回はウィジェットを利用することにしました。
jQueryのトリガーになるクラスをもったウィジェットを吐き出すダイナミックサイドバーを1こ作っておいて、そこに管理画面からどんどんウィジェットを登録します。そして、それをjQueryで制御して、必要なウィジェットだけを表示するようにすればよさそうですね。

 

作ってみる

まずは、functions.phpでウィジェットを登録します。

つぎに、切り替え機能を付けたい場所にウィジェットを表示するコードを記述します。
例えば、index.phpだったり、header.phpなどでしょうか。

そして、jQueryのコードを書きます。

最後にCSSで見えちゃ困るウィジェットたちを非表示にします。

これでIndexEyeCatchというサイドバーに入っているウィジェットのなかから1つだけランダムで表示できるようになります。
ImageWidgetをたくさんつっこめばアクセスするたびに違う画像をランダム表示するようにもできますし、テキストウィジェットを詰め込めばランダムで挨拶を表示したり、今日の格言みたいなコーナーも作れそうですね。

ポイント（ってほどのものでもないですが…）

var target = $(‘.randomEyeCatch’);
操作する対象をクラスで指定します。なんどか呼び出すので変数に入れておきます。
こうするとコードも短くできるし指定ミスも減らせるし、ついでに高速化にも繋がるようです。
var itemCnt = target.size();
上でしていしたターゲットの数をかぞえます。
結果は1からの整数が戻ります。
var rndCnt = Math.floor(Math.random()*itemCnt);
乱数を発生させます。
Math.random()*itemCnt; とすると0からターゲット数にギリギリ行かない範囲の乱数が出てきます。
つまりitemCntが5なら0から4.99999999…の範囲です。
これをMath.floorで小数点以下を切り捨てることで0からitemCnt -1 の範囲のランダムな数値を得られます。
ターゲットの数よりすくない範囲じゃダメじゃないの？って思うかもしれませんが、
配列のn番目を決めるのに使うため、これでOKです。
なぜなら配列は0からスタート、さっきのsize();の結果は1からスタートのため、食い違ってしまうんですよね。
でもMath.random();もまた0からスタートになるので、ちょうどピッタリになるわけです。
ちなみに切り捨てじゃなくて、切り上げや四捨五入したい場合は、Math.floorの部分をceilとかroundとかにすればよさそうですね。
小数点以下の扱いが変わるため、多少乱数の出方が変わるかもしれません。ほとんど変わらないかもしれません。
ただ、もし切り上げや四捨五入する場合、乱数の最大値が配列の数より1個多くなってしまいますので、

の部分を

とかにして乱数の範囲を予め下げておいてあげないといけないので要注意です。