<轉>wordpress小工具制作前台背景全解析

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

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

在新制作的主題檔案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代碼。

到這裡，在背景拖拽幾個小工具到這個挂件區吧。

我們用下面的代碼再前台調用背景設定好的挂件區：

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

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

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

我們将所有代碼先列出來，放置到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']) ? ' ' : $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>修改為你自己的内容，則前台顯示為你修改的内容。）

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

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

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

在背景将該小工具拖拽到挂件區展開後你會看到該函數中規定的内容。我的這個小工具隻是顯示一個标題設定框和一段文字。

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

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

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

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

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

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