WordPress 的 Widget 小工具是個非常實用的功能,它讓非技術型 WordPress 使用者也可以根據自己對版面的需求輕鬆定製主題,WordPress 無數的 widgets 讓使用者得以盡情發揮自己的創意。 在很多人的意識裡,widget 就是出現在側邊欄的小工具,不過實際上它可以出現在主題的任何地方。 這篇文章我們就來看一下怎樣用簡單的步驟讓主題的其它版塊也支援 widget 。 最後還會送上幾個 widget 使用技巧。

第一步

在當前主題的 functions.php 檔案裡新增下面這段程式碼:

if (function_exists(‘register_sidebar’)) {

register_sidebar(array(
‘name’ => ‘Widgetized Area’,
‘id’ => ‘widgetized-area’,
‘description’ => ‘This is a widgetized area.’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘


));

}
第一步就是這麼簡單。 程式碼新增完畢後就可以繼續下一步了。下面是對第一步過程的解釋,沒興趣的可以跳過。

上面的程式碼用以確保當前使用的 WordPress 版本支援 widget,並宣告一個用來建立主題 widget 區域的值的陣列。 下面我們來看看這些值:

Name——將要顯示在 WP 管理介面的新 widget 區域的名稱
Id——新 widget 區域的唯一識別符號
Description——對新 widget 區域的說明
Before_widget——使用者新增 widget 小工具前生成的批註
after_widget——使用者新增 widget 小工具後生成的批註
Before_title——新增 widget 小工具的使用者名稱前的批註
After_title——新增 widget 小工具的使用者名稱後的批註
有了這些引數,我們的新 widget 區域最後會得到以下輸出 (假設我們在新的 widget 區域新增的是一個內建搜尋工具):

Search

需要注意的是為開始

標籤生成的批註 (markup),該批註根據 widget 陣列指定的萬用字元匹配獲取相關的屬性資訊。

下面繼續第二步驟。

第二步

你希望新的 widget 區域顯示在主題的什麼位置,就在相應的主題模板檔案中新增以下程式碼:

Widgetized Area

This panel is active and ready for you to add some widgets via the WP Admin

當這一步驟也完成後,你所選擇的位置上就會出現一個新的支援 widget 的版塊,你可以在這個版塊新增任何一個自己需要的 widget 工具。 接下來就能用相同的方法讓主題的其它位置也支援 widget 工具了。

下面是對第二步驟的解釋。 如果你沒有指定 widget,那麼 If/endif 語句之間的內容會被輸出到瀏覽器。 透過這種形式,使用者能瞭解到,自己可以在 WordPress 後臺的 「小工具」 選單中對內容輸出的位置進行 widget 定製。 程式碼裡還有一個 「pre-widget」 類可以設定 pre-widget 版塊的樣式。 當一個頁面上出現多個 widget 區域時,可以用一個類名稱來保持 widget 樣式統一。

同時也要注意我們要將 widget 陣列 (見第一步) 中指定的 id 作為程式碼第二行 dynamic_sidebar() 的引數值。

多個新 widget 區域

重複第一步和第二步,你就可以讓主題的各個位置支援 widget 了。下面假設你需要在主題的頭部、側邊欄、和底部新增 widget 。 那麼首先你需要把下面的程式碼複製到 functions.php 檔案裡:

if (function_exists(‘register_sidebar’)) {

register_sidebar(array(
‘name’ => ‘Header’,
‘id’ => ‘header’,
‘description’ => ‘This is the widgetized header.’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘


));
register_sidebar(array(
‘name’ => ‘Sidebar’,
‘id’ => ‘sidebar’,
‘description’ => ‘This is the widgetized sidebar.’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘


));
register_sidebar(array(
‘name’ => ‘Footer’,
‘id’ => ‘footer’,
‘description’ => ‘This is the widgetized footer.’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘


));

}
接下來把下面的程式碼分別新增到 header.php 、 sidebar.php 和 footer.php 檔案中。

header.php:

Widgetized Header

This panel is active and ready for you to add some widgets via the WP Admin

sidebar.php:

Widgetized Sidebar

This panel is active and ready for you to add some widgets via the WP Admin

footer.php:

成功! 當然你也可以根據自己的需要調整程式碼中的各種細節,但是以上兩步就是使主題其它版塊支援 widget 的全部過程。 接下來要說的是一些 widget 的技巧。

Widget 使用技巧

管理自定義的 widget 小工具

給主題新增新的 widget 後,你可以新建一個獨立資料夾並命名為 widgets.php,將所有自定義的 widget 都儲存到這個資料夾。 用下面的這行程式碼實現儲存自定義 widget 功能:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

將程式碼新增到 functions.php 檔案裡,然後將所有自定義的 widget 工具儲存到 widgets.php 中。這種方法可以確保所有 widget 都能夠順利載入並且執行在 WordPress 支援 widget 的所有版本上。 如此,你的主題檔案就能夠得到有效管理。

替換 WordPress 預設 widget

WordPress 的很多預設小工具都有需要改進的地方。 但值得慶幸的是,在 WordPress 裡你可以自由替換這些預設小工具。 例如,下面這段程式碼就可以將內建搜尋工具換成你自己需要的 widget 工具。

register_sidebar_widget(__(‘Search’), ‘custom_search_widget’); ?>
隱藏不用的 widget 區域

如果你透過上面的方法讓主題的某個位置支援了 widget,但暫時沒有在這個位置上安排合適的小工具,那麼這個位置就會空出來,從整個版面看上去會很奇怪。 為了避免這種情況,請用下面的程式碼圍繞暫時不用的 widget 區域:
有了上面這段程式碼,支援 widget 的版塊只會在確實包含已啟用小工具的情況下才顯示在前臺。 。 同時需要注意,這段程式碼也支援顯示 widget 外的其它內容。