你是否想像 Nometet.com 這個網站一樣讓每篇博客文章的背景看起來都不一樣呢？這個網站的設計確實是非常酷的，因為它允許作者通過上傳圖片來自定義文章背景，而且甚至圖片的尺寸也沒有特別的規定。上傳並不困難，只要在 meta 盒裏執行一個上傳軟件就可以了，主要還是在選擇圖片上，讓我們來看看究竟如何實現的呢？
考慮到後面需要用上傳軟件將圖片的 URL 地址保存到一個自定義字段裏，所以我們先將自定義字段建好，這樣一來你只需要將 URL 收到自定義字段裏並將其顯示為背景即可，代碼非常簡單:
| <?php $bg = get_post_custom_values("background"); if ( is_array($bg) ) { ?> <style type="text/css" media="screen"> body{ background: url(<?php echo $bg ?>) fixed no-repeat; } </style> <?php } ?> |
不過你還得修改圖片尺寸並將 URL 拷貝到自定義字段裏。
自定義 meta 上傳軟件
我們需要一個上傳軟件，究竟該如何實現呢？通過對 WooThemes 的研究，我發現他們的主題裏有一個 admin-custom.php 文件 （在/functions 目錄下），這是他們用來加上傳軟件以及其他自定義 meta 盒的地方。
你可以從這裏下載此文件。
下載完之後，複製所有代碼並將其粘貼到你的 functions.php 文件裏 （注意要粘貼在結束的?> 標籤之後） 。
接着，需要啓動 meta 盒，可以用下面的代碼來實現：
| $woo_metaboxes = array( "image" => array ( "name" => "bg", "label" => "Background", "type" => "upload", "desc" => "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough." ), ); update_option('woo_custom_template',$woo_metaboxes); |
這段代碼必需添加在其他代碼之後結束的?> 標籤之前。保存並上傳文件，這樣就你就有了上傳軟件，它會將圖片保存到自定義字段 『bg』 裏。
調整圖像大小
最後需要使用 timthumb 來調整圖像的寬度為 1920 像素，首先下載 TimThumb.php，並將它上傳到你的主題 tools 文件裏，頭部的代碼要遵守 timbthumb 的句法：
| body{ background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat; } |
你會發現使用上面的代碼是行不通的，因為 timthumb 不喜歡自定義字段裏的圖片 URL 地址 http://… 。
最後別人告訴我需要將 URL 地址編譯才行，於是把上面的代碼替換成：
| body{ background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat; } |
宣告成功！