ヘッダーの背景画像をランダムに表示させたくなって知恵を絞る、の巻

先日追加したテンプレート(x-ran-zatsu)のヘッダー画像が何パターンかあるので
せっかくだから全部使ってしまおうと
ランダムで背景画像を表示するjavascriptを追加してみたら、これがうまくいかない。

うまくいかないといっても、htmlに使えば動くんだけど、wordpress(php)で読み込むと画像が消えてしまう。

これがその時書いたjavascriptで
読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。
phpで使う場合jsの読み込ませる場所が違うのかな?

関係ないけどキーボードの調子がすこぶる悪い。
文字側のenter(テンキー側のは反応する)やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。

さて、粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。
せっかくwordpressでphpを使っているのだから、phpで出来ないかね?と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。

まず画像を表示させてみる

test-sw.phpという名前のファイルを作成して以下を記述

やった、localhostから確認するとheader-2.jpgが表示された。

次にこのphpをcssに読み込ませてみる。
css/test-css.css

test表示用のphpを作ってtest-css.cssを読み込ませる。
test-oya.php

やった、#headerの背景にheader-2.jpgが表示された。

背景画像を表示させる事は出来たので
次は、画像の選び方を考える。

ランダムに切り替えたい背景画像だけを集めたフォルダを作って、そのフォルダ内にある画像を配列に入れられないか?
これが出来れば、いちいちtest-sw.phpを変更する必要がなくて、背景画像を集めたフォルダに画像をぶっこめば済むようになる。

辞書を引くと、opendir()とreadfir()でディレクトリ操作ができるそうだ。
test-sw.phpに追加

出力結果例
[text]
ファイル名:.
ファイル名:..
ファイル名:header-2.jpg
ファイル名:header-3.jpg
ファイル名:header-4.jpg
ファイル名:header-5.jpg
ファイル名:header-6.jpg
ファイル名:header.jpg
[/text]

ん?
ファイル名:.
ファイル名:..

なんだこれ。

よくわからないのであとで調べるとして今はif文で弾いとく、
ついでにマジックナンバー的なフォルダ階層を潰して、抜き出したファイル名を配列に入れる。

test-sw.phpを変更

これで画像が入った配列が完成。
ここからランダムにピックアップさせる方法を調べる。

php4~で「array_rand(配列);」というものがあった、配列のインデックスをランダムに取得できるらしい。
これを使ってみる。
test-sw.phpを変更

readfileはフォルダ階層と配列からの値に変更。

最終的なtest-sw.php

完成。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.