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

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

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

  1. <script type='text/javascript'>
  2. var banner= new Array();
  3. var t_align = new Array();
  4. var t_color = new Array();
  5.  
  6. banner[0]="http://vicjuan.org/wp-content/themes/default/images/kubrickheader.jpg";
  7. t_align[0]="center";
  8. t_color[0]="white";
  9.  
  10. banner[1]="http://vicjuan.org/wp-content/themes/default/images/kubrickheader3.jpg";
  11. t_align[1]="left";
  12. t_color[1]="white";
  13.  
  14. banner[2]="http://vicjuan.org/wp-content/themes/default/images/kubrickheader4.jpg";
  15. t_align[2]="right";
  16. t_color[2]="#73a0c5";
  17.  
  18. var random=Math.round(2*Math.random());
  19.  
  20. document.write("<style>");
  21. document.write("#header {");
  22. document.write(' background:url("' + banner[random] + '") no-repeat bottom center;');
  23. document.write(" }");
  24. document.write("h1 {");
  25. document.write(" text-align: " + t_align[random]);
  26. document.write(" }");
  27. document.write("#headerimg .description {");
  28. document.write(" text-align: " + t_align[random]);
  29. document.write(" }");
  30. document.write("h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {");
  31. document.write(" color: " + t_color[random]);
  32. document.write(" }");
  33.  
  34. document.write("</style>");

看起來有點暴力
我也暫時想不到更漂亮的寫法
所以就只好照用了
請注意第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

3 thoughts on “隨機更換WordPress預設佈景主題的Header Image”

  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();
    ———————————-

發表迴響