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 外的其它內容。