wordpress主題制作中對邊欄的處理一直是我們比較煩惱的，我們希望邊欄的變化更多更復雜，今天我們就來具體講解下wordpress邊欄小工具的制作。

一、讓你的主題顯示小工具

有些相當簡單的主題你會發現后臺小工具功能竟然沒有打開，邊欄自然無法自己定義了。那么怎么讓自己的主題支持小工具功能，前臺又如何調用后臺拖拽的小工具呢？如何讓你的小工具多幾個，可以自由安排小工具的位置呢？

1、讓你的主題支持小工具功能

在新制作的主題文件functions.php中加入下面這段代碼（注意，下文的代碼均加入到該文件中，后文不提）：

if(function_exists('register_sidebar')){
register_sidebar(array(
'name'=>'首頁邊欄',
'id' => 'home-sidebar',
'description' => '',
'before_widget' => '<div id="%1$s">',
'after_widget' => '<div></div></div>',
'before_title' => '<div><h3>',
'after_title' => '</h3></div>',
));
}

這樣，你進入后臺小工具頁面的時候就會看到一個名稱叫“首頁邊欄”的小工具掛件區，在這個區域內你可以放置多個小工具，同時在前臺可以調用這個小工具區。（說明：前臺調用的只能是工具區，而不是某個特定的小工具。）

這些字段我想你應該很容易從其英文名稱中得知其用途，name指小工具掛件區的名稱，id是等下在前臺調用時要用到的掛件區標志，description是該掛件區的描述，后臺中可以看到。before_widget/after_widget是前臺顯示每個小工具時放置在每一個小工具前后的html代碼，before_title/after_title則是小工具標題前后的html代碼。

到這里，在后臺拖拽幾個小工具到這個掛件區吧。

2、前臺把小工具顯示出來

我們用下面的代碼再前臺調用后臺設置好的掛件區：

<?php if(is_active_sidebar('home-sidebar'))dynamic_sidebar('home-sidebar'); ?>

前文已經說到，我們將前文定義的掛件區id作為參數給dynamic_sidebar()，如果在前面你定義了多個id不同的掛件區，那么可以在前臺修改這些參數，從而調用不同的掛件區，例如在首頁調用id=home-sidebar的掛件區，在內容頁調用id=post-sidebar掛件區。當然，為了讓主題更完整，你應該考慮當掛件區沒有放小工具的時候的情況，只需要加入else的情況即可。

通過上文，你的主題已經可以很完美的實現掛件的調用、顯示，在不同的位置，不同的頁面顯示不同的掛件了。

二、自己制作一個小工具實現特定用途

wordpress默認的小工具雖然已經夠用，但我們還是希望能增加一些新的小工具，例如調用隨機文章的小工具，讓我可以在首頁邊欄中間位置顯示出來。雖然我們很多主題將自己編制的函數放置到主題文件中，但這樣會使該區域的內容固定，不能讓這個隨機文章區域實現自我安排，還是不爽的，因此我們進行下面的工作，讓我的隨機文章功能成為一個小工具，可以在后臺拖拽放置到特定位置。下文以我制作一個帶頭像評論列表為例，但中間缺失了文章數等，這部分請參看這篇文章。

1、所有代碼提前一覽

我們將所有代碼先列出來，放置到functions.php中，讀者可以在讀代碼過程中自然領會怎么設計自己的小工具。

//添加最新評論小工具，需要插件wp-recentcomments支持，顯示的內容在插件設置中設置，下面的函數只負責將評論插件轉化為掛件，可以在小工具中自由放置
class RecentCommentsWidget extends WP_Widget
{
/*
** 構造函數
** 聲明一個數組$widget_ops，用來保存類名和描述，以便在控制面板正確顯示工具信息
** $control_ops 是可選參數，用來定義小工具在控制面板顯示的寬度和高度
** 最后是關鍵的一步，調用WP_Widget來初始化我們的小工具
*/
function RecentCommentsWidget(){
$widget_ops = array('classname'=>'recent-comments','description'=>'顯示帶頭像評論列表');
$control_ops = array('width'=>250,'height'=>300);
$this->WP_Widget(false,'最新評論',$widget_ops,$control_ops);
}

function form($instance){
$instance = wp_parse_args((array)$instance,array('title'=>'最新評論'));
$title = htmlspecialchars($instance['title']);
echo '<p style="text-align:left;"><label for="'.$this->get_field_name('title').'">標題:<input style="width:200px;" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$title.'" /></label></p>';
echo '<p>最新評論小工具，需要插件wp-recentcomments支持，顯示的內容在插件設置中設置，下面的函數只負責將評論插件轉化為掛件，可以在小工具中自由放置</p>';
}

function update($new_instance,$old_instance){
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
return $instance;
}

function widget($args,$instance){
extract($args);
$title = apply_filters('widget_title',empty($instance['title']) ? '&nbsp;' : $instance['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
?>
<div><?php wp_recentcomments(); ?></div>
<?php
echo $after_widget;
}
}//評論列表小工具類結束
function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');
//評論列表小工具結束

從上面的代碼中你大致能分析出小工具制作的所有要素，接下來詳細講解下。（上面的這個掛件需要你安裝插件wp-recentcomments，你將<div><?php wp_recentcomments(); ?></div>修改為你自己的內容，則前臺顯示為你修改的內容。）

2、構造小工具

構造一個小工具用到上面的類構造class RecentCommentsWidget extends WP_Widget{}，類名可自定。

在該類中，總共有4個函數：RecentCommentsWidget()、form($instance)、update($new_instance,$old_instance)、widget($args,$instance)。

RecentCommentsWidget()

函數名可自定義，是用以對該小工具的名稱、樣式、描述進行定義的。如我的這個小工具名稱“最新評論”描述“顯示帶頭像評論列表”。你只需將這些抄過去即可，修改名稱和描述。

form($instance)

在后臺將該小工具拖拽到掛件區展開后你會看到該函數中規定的內容。我的這個小工具只是顯示一個標題設置框和一段文字。

$instance = wp_parse_args((array)$instance,array('title'=>'隨機文章','showPosts'=>10,'cat'=>0,'class'=>'randomPosts'));
$title = htmlspecialchars($instance['title']);
$showPosts = htmlspecialchars($instance['showPosts']);
$cat = htmlspecialchars($instance['cat']);
$class = htmlspecialchars($instance['class']);

如上，可以增加標題、顯示數量、顯示那些分類下的、顯示的時候用什么樣式名這些文本框，當然你可以增加自己的內容。總之你要理解這個函數是后臺小工具展開時看到的內容即可。

update($new_instance,$old_instance)

更新form()設置的參數值，小工具展開后右下角有個保存按鈕，就是用這個函數進行保存啦。照葫蘆畫瓢修改該函數吧。

widget($args,$instance)

前臺顯示，前臺怎么顯示form()中設置的這些值呢？就是用這個函數來控制啦。照葫蘆畫瓢，修改那幾個echo 的內容就可以了，甚至你可以讓一個小工具顯示一句話，在這里自己編寫就可以了。

3、注冊小工具，最終完成小工具制作

雖然上面的過程讓你已經了解小工具的前后臺，但你會發現即使這樣做了卻得不到任何效果，因為你的小工具還沒有注冊呢。

function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');

修改上面這幾個參數為你自己的類和函數名，趕快到后臺看看吧，是不是已經顯示了該小工具，并可以拖拽了？自己慢慢消化，可以制作自己完美的邊欄掛件啦。

總結

以上是生活随笔為你收集整理的转wordpress小工具制作前台后台全解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。