「アクセスする度に背景画像を変えてほしい」との依頼を請けまして
忘れないように書いておこうというのが今回の趣旨。
CSS単体ではこれを実現出来ないので、Javascriptで画像を指定しておき
それを乱数で取得してbackground-imageを書き換えればいいか、と作業開始。
画像が三枚ある場合、各自に001-003.jpgと名前を付けて、
テンプレートディレクトリ内の「img」フォルダに格納しておき、
テーマのfooter.phpの/bodyタグ直前に以下を記述。
<script type="text/javascript"> (function() { var bg = ["<?php bloginfo('template_directory'); ?>/img/001.jpg", "<?php bloginfo('template_directory'); ?>/img/002.jpg", "<?php bloginfo('template_directory'); ?>/img/003.jpg"]; var r = Math.floor(Math.random() * bg.length); document.getElementById("wrapper").style.backgroundImage = "url(" + bg[r] + ")"; })() </script>
そして、切り替える背景画像はbodyタグに指定したので
header.phpにあるbodyタグにwrapperというIDを付けておく。
指定した3枚の画像をランダムに選んでIDがwrapperのbackgroun-imageを書き換える、と。
これで新しい読み込みが発生する度に背景画像を切り替える事に成功しました。