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

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

[WordPress]表示される画像をJQueryにてランダムに切り替える

September 09 2014

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

今回は表示されてる画像をアクセスの度にランダムに切り替える、というもの。
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">

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

| 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