你是否想像 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; } |
宣告成功！