先日追加したテンプレート（x-ran-zatsu）のヘッダー画像が何パターンかあるので
せっかくだから全部使ってしまおうと
ランダムで背景画像を表示するjavascriptを追加してみたら、これがうまくいかない。
うまくいかないといっても、htmlに使えば動くんだけど、wordpress（php）で読み込むと画像が消えてしまう。
これがその時書いたjavascriptで
読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。
phpで使う場合jsの読み込ませる場所が違うのかな？
window.onload=function(){
headsw();
}
function headsw(){
var dt = new Date();
ms=dt.getMilliseconds();
//console.log("ms:"+ms);
if(ms%2==0){
document.getElementById("header").style.backgroundImage="url(img/common/header.jpg)"
}else{
document.getElementById('header').style.backgroundImage='url(img/common/header-2.jpg)'
}
}
関係ないけどキーボードの調子がすこぶる悪い。
文字側のenter（テンキー側のは反応する）やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。
さて、粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。
せっかくwordpressでphpを使っているのだから、phpで出来ないかね？と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。
まず画像を表示させてみる
test-sw.phpという名前のファイルを作成して以下を記述
<?php
header('Content-Type: image/jpeg');
readfile("img/common/header-2.jpg");
?>
やった、localhostから確認するとheader-2.jpgが表示された。
次にこのphpをcssに読み込ませてみる。
css/test-css.css
#header{
background:url(../test-sw.php) no-repeat;
border:1px solid #f33;
height:400px;
width:400px;
}
test表示用のphpを作ってtest-css.cssを読み込ませる。
test-oya.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link href="css/test-css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">head</div> </body> </html>
やった、#headerの背景にheader-2.jpgが表示された。
背景画像を表示させる事は出来たので
次は、画像の選び方を考える。
ランダムに切り替えたい背景画像だけを集めたフォルダを作って、そのフォルダ内にある画像を配列に入れられないか？
これが出来れば、いちいちtest-sw.phpを変更する必要がなくて、背景画像を集めたフォルダに画像をぶっこめば済むようになる。
辞書を引くと、opendir()とreadfir()でディレクトリ操作ができるそうだ。
test-sw.phpに追加
$dn=opendir(img/header);
while($file=readdir($dn)){
echo "ファイル名：$file<br>";
}
closedir($dn);
出力結果例
ファイル名：. ファイル名：.. ファイル名：header-2.jpg ファイル名：header-3.jpg ファイル名：header-4.jpg ファイル名：header-5.jpg ファイル名：header-6.jpg ファイル名：header.jpg
ん？
ファイル名：.
ファイル名：..
？
なんだこれ。
よくわからないのであとで調べるとして今はif文で弾いとく、
ついでにマジックナンバー的なフォルダ階層を潰して、抜き出したファイル名を配列に入れる。
test-sw.phpを変更
$headimgdir='img/header';
$dn=opendir($headimgdir);
while($file=readdir($dn)){
if($file!='.' && $file!='..'){
$files[]=$file;
}
}
closedir($dn);
これで画像が入った配列が完成。
ここからランダムにピックアップさせる方法を調べる。
php4～で「array_rand(配列);」というものがあった、配列のインデックスをランダムに取得できるらしい。
これを使ってみる。
test-sw.phpを変更
$imgnum= array_rand($files);
$imgpath=$files[$imgnum];
header('Content-Type: image/jpeg');
readfile($headimgdir.'/'.$imgpath);
readfileはフォルダ階層と配列からの値に変更。
最終的なtest-sw.php
<?php
$headimgdir='img/header';
$dn=opendir($headimgdir);
while($file=readdir($dn)){
if($file!='.' && $file!='..'){
$files[]=$file;
}
}
closedir($dn);
$imgnum= array_rand($files);
$imgpath=$files[$imgnum];
header('Content-Type: image/jpeg');
readfile($headimgdir.'/'.$imgpath);
?>
完成。
関連記事かもしれん:
乱雑モックアップのフィード