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

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

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

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>',
));
}

這樣，你進(jìn)入后臺小工具頁面的時(shí)候就會看到一個(gè)名稱叫“首頁邊欄”的小工具掛件區(qū)，在這個(gè)區(qū)域內(nèi)你可以放置多個(gè)小工具，同時(shí)在前臺可以調(diào)用這個(gè)小工具區(qū)。（說明：前臺調(diào)用的只能是工具區(qū)，而不是某個(gè)特定的小工具。）

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

到這里，在后臺拖拽幾個(gè)小工具到這個(gè)掛件區(qū)吧。

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

我們用下面的代碼再前臺調(diào)用后臺設(shè)置好的掛件區(qū)：

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

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

通過上文，你的主題已經(jīng)可以很完美的實(shí)現(xiàn)掛件的調(diào)用、顯示，在不同的位置，不同的頁面顯示不同的掛件了。

二、自己制作一個(gè)小工具實(shí)現(xiàn)特定用途

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

1、所有代碼提前一覽

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

//添加最新評論小工具，需要插件wp-recentcomments支持，顯示的內(nèi)容在插件設(shè)置中設(shè)置，下面的函數(shù)只負(fù)責(zé)將評論插件轉(zhuǎn)化為掛件，可以在小工具中自由放置
class RecentCommentsWidget extends WP_Widget
{
/*
** 構(gòu)造函數(shù)
** 聲明一個(gè)數(shù)組$widget_ops，用來保存類名和描述，以便在控制面板正確顯示工具信息
** $control_ops 是可選參數(shù)，用來定義小工具在控制面板顯示的寬度和高度
** 最后是關(guān)鍵的一步，調(diào)用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').'">標(biāo)題:<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支持，顯示的內(nèi)容在插件設(shè)置中設(shè)置，下面的函數(shù)只負(fù)責(zé)將評論插件轉(zhuǎn)化為掛件，可以在小工具中自由放置</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;
}
}//評論列表小工具類結(jié)束
function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');
//評論列表小工具結(jié)束

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

2、構(gòu)造小工具

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

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

RecentCommentsWidget()

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

form($instance)

在后臺將該小工具拖拽到掛件區(qū)展開后你會看到該函數(shù)中規(guī)定的內(nèi)容。我的這個(gè)小工具只是顯示一個(gè)標(biāo)題設(shè)置框和一段文字。

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

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

update($new_instance,$old_instance)

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

widget($args,$instance)

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

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

雖然上面的過程讓你已經(jīng)了解小工具的前后臺，但你會發(fā)現(xiàn)即使這樣做了卻得不到任何效果，因?yàn)槟愕男」ぞ哌€沒有注冊呢。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。