flickr、web、wordpress、文字日記

隨機更換WordPress預設佈景主題的Header Image

3 則留言

如果眼尖的人應該會發現到
我的header image是會隨機更換的
因為我覺得佈景主題如果一成不變太無趣了 😛
這是利用數十行的javascript程式所達成的效果
是修改自Kaie大大這篇文章所提到的程式

其實這原理只是單純的用javascript去更改CSS
以wordpress的預設佈景主題為例子的話
程式碼應該會是這樣

banner[0]="https://vicjuan.org/wp-content/themes/default/images/kubrickheader.jpg";
t_align[0]="center";
t_color[0]="white";

banner[1]="https://vicjuan.org/wp-content/themes/default/images/kubrickheader3.jpg";
t_align[1]="left";
t_color[1]="white";

banner[2]="https://vicjuan.org/wp-content/themes/default/images/kubrickheader4.jpg";
t_align[2]="right";
t_color[2]="#73a0c5";

var random=Math.round(2*Math.random());

document.write("

");

看起來有點暴力
我也暫時想不到更漂亮的寫法
所以就只好照用了
請注意第18行的 Math.round(2*Math.random())
這裡的數字2就是陣列最高的索引值
也就是所使用的圖片數量減一
所以說如果要更換的圖片變多了
數字也得跟著改

我的版本除了更換圖片以外
還順便更改標題位置以及顏色
不過這道理其實都一樣
所以相信大家應該都能輕易舉一反三地應用在其他地方

知道了更換圖片的方法
接著我要介紹如何產生wordpress預設佈景主題的header image
我所有的header image其實都是在這個名為Kubrickr的網站上產生出來的
這個網站是利用flickr相簿內的圖片來產生Kubrick佈景主題的header image
而Kubrick就是wordpress預設佈景主題的名字
只需要三個步驟就能產生出自己想要的header image

第一個步驟是填入你想要的照片的tag
如果怕找出一大堆其他人的照片
你也可以額外填入照片所屬使用者的名字
因此就算不是自己的照片也是能拿來用的
只要那張圖片的授權方式是下列幾種其中之一就行
Attribution License
Attribution-NonCommercial License
Attribution-NonCommercial-ShareAlike License
Attribution-ShareAlike License
特別要注意的是
圖片的content要設定成photo才能使用
如果是screenshot或者是art性質的圖片是不會被Kubrickr抓取的

如果成功的話
在第二步驟會列出所有符合條件的照片
點選你想使用的照片之後
進入第三步驟
會在照片上出現一個長條虛線區域
讓你選擇照片上想要被拿來當作header image的部分
按下按鈕之後
你就能取得一張自製的header image了 😀

當然
其實這個網站也不是說完全沒缺點的
最大的缺點就是
它也只能產生預設佈景主題專用的header image XD
(這也就是為什麼我只用預設佈景主題的原因了...)

歷史上的今天...

Powered by

在〈隨機更換WordPress預設佈景主題的Header Image〉中有 3 則留言

  1. Mozilla Firefox 1.5.0.11 Ubuntu Linux

    我之前有用過「寫一個 php function」的方式來做到類似的效果。
    在 html 方面，可能會有類似
    然後在那個 ooxx.php 裏頭，程式碼約略如下：
    ————–
    function _make_seed()
    {
    list($usec, $sec) = explode(‘ ‘, microtime());
    return (float) $sec ((float) $usec * 100000);
    }

    function _banner()
    {
    $root = getcwd() . ‘/files/banner’;
    $front = ”;
    $files = array();
    if( $rhandle = opendir( $root ) ) {
    while( false !== ($dir = readdir( $rhandle )) ) {
    if( $dir == “.” || $dir == “..” ) continue;
    $file = $dir;
    if( !is_file( “$root/$file” ) ) continue;
    $files[] = $file;
    }
    closedir( $rhandle );

    $number = count( $files );
    if( !$number )
    return ”;
    srand(_make_seed());
    $randval = rand();
    $index = $randval % $number;
    $front = $files[$index];
    }
    return $front;
    }
    echo _banner();
    ———————————-

    回覆

發表迴響