ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

[WordPress]背景画像をランダムに変更する

September 08 2014

「アクセスする度に背景画像を変えてほしい」との依頼を請けまして
忘れないように書いておこうというのが今回の趣旨。

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を書き換える、と。

これで新しい読み込みが発生する度に背景画像を切り替える事に成功しました。

| Posted in Wordpress | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31