何かランダムづいてる昨今でございますが、これもまた勉強って事で(笑)

今回は表示されてる画像をアクセスの度にランダムに切り替える、というもの。
Wordpressにはそういえば最初からJQueryがインクルードされてるので
そいつを使ってこれを実現しちまおう、というのが今回の趣旨であります。
用意した画像は4枚。テンプレートディレクトリ内にimgフォルダを作ってそこに格納。

まずはJavascriptを書きました。

$j = jQuery
$j(function() {
var array = [
"http://hoge.com/wp/wp-content/themes/hoge/img/1.jpg",
"http://hoge.com/wp/wp-content/themes/hoge/img/2.jpg",
"http://hoge.com/wp/wp-content/themes/hoge/img/3.jpg",
"http://hoge.com/wp/wp-content/themes/hoge/img/4.jpg"
];

var l = array.length;
var r = Math.floor(Math.random()*l);
var imgurl = array[r];
$j("img#randomimg").attr({"src":imgurl});
});

本当は相対パスでも行けそうなもんですが、面倒くさかったので絶対パスにて記述(笑)
いつもならこの手の書き方は$でそのまま行けるんですが
コンクリフトして動かなかったので、$jとして変数を再定義してあります。
13行目でimgタグに対してのIDを指定してありますので、ここは好みに書き換えて下さい。
もちろん最後に書くHTMLもそれに応じてIDを変更が必要です。

このjavascriptファイルをrandomimg.jsと名前をつけ、テンプレートディレクトリに
jsという名前のフォルダを作成してそこに格納。

そしてheader.phpのheadタグ内に以下を記述。

<script type="text/javascript" src="<?php bloginfo("template_directory") ?>/js/randomimg.js"></script>

そしてランダムに画像を表示させたい場所に以下を記述。

<img id="randomimg">

と、これで出来上がり。
サイドバー内のプロフ写真なんぞをランダムに替えたい場合に応用出来ます。