WordPress 功能集成 (十一): 小工具的製作方法

WordPress 使用側邊欄小工具，或者其它位置的小工具很是方便，但是默認的那幾個小工具完全不夠用，今天就講解一下如何製作一個小工具，然後接下來的幾篇教程，給出幾個小工具的實例。

今天我們以製作一個按瀏覽量排布的熱門文章小工具。

小工具有三個部分，一、後台顯示，二、數據保存，三、前台顯示。當然如果你的小工具不需要在後台設置什麼數據，那數據保存可以省掉了。一般來講，一個小工具至少應該有這三個部分。

第一步，在自己的主題中新建一個小工具文件，隨便命名，比如我新建一個文件夾 widget 然後在裏面新建一個文件 hotposts.php 。

小工具是一個類，像側邊欄一樣，你還得用代碼註冊它，它在能在後台使用。基本代碼代碼基本上一成不變：

<?php
//定義小工具類 AshuPostViews
class AshuPostViews extends WP_Widget{
function AshuPostViews(){
//這是定義小工具信息的函數，也是類的構建函數
}
function form($instance){
//這是表單函數，也就是控制後台顯示的
}
function update($new_instance,$old_instance){
//這是更新數據函數, 小工具如果有設置選項，就需要保存更新數據
}
function widget($args,$instance){
//這是控制小工具前台顯示的函數
}
}
function AshuPostViews(){
//註冊小工具
register_widget('AshuPostViews');
}
//widges_init，小工具初始化的時候執行 AshuPostViews 函數，
add_action('widgets_init','AshuPostViews');
?>

上面代碼中，三個基本函數 form 、 update 、 widget 函數名是固定的，小工具一般都要有着三個函數，當然小工具還能添加一下自定義的輔助函數。

一、類的構建函數

function AshuPostViews(){
$widget_ops = array('classname'=>'widget_postviews','description'=>'按瀏覽量顯示文章');
$this->WP_Widget(false,'熱門瀏覽',$widget_ops);
}

主要就是配置小工具的基本顯示參數，WP_Widget 函數的參數還能添加其它的。這裏先不做介紹。

二、後台表單函數 form()

這個函數也很簡單，輸出一個表單，誰不會呢？

//參數 $instance 為之前保存過的數據
function form($instance){
//如果之前沒有數據的話，設置兩個默認量
$instance = wp_parse_args((array)$instance,array(
'title'=>'熱評文章','showPosts'=>10
));
$title = htmlspecialchars($instance['title']);
$showPosts = htmlspecialchars($instance['showPosts']);
//表格佈局的輸出表單
$output = '<table>';
$output .= '<tr><td> 標題:</td><td>';
$output .= '<input id="'.$this->get_field_id('title') .'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';
$output .= '</td></tr><tr><td> 文章數量：</td><td>';
$output .= '<input id="'.$this->get_field_id('showPosts') .'" name="'.$this->get_field_name('showPosts').'" type="text" value="'.$instance['showPosts'].'" />';
$output .= '</td></tr></table>';
echo $output;
}

只需要處理一下傳入參數，其它的毫無壓力。。圖森破。
三、數據更新函數 update()
這個函數也很簡單，就是根據傳入函數處理一下數據。

//參數 $new_instance 是提交的數據
function update($new_instance,$old_instance){
$instance = $old_instance;
//數據處理
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
$instance['showPosts'] = strip_tags(stripslashes($new_instance['showPosts']));
//返回
return $instance;
}

不解釋了。。
四、前台顯示函數 widget()

//$args 是註冊側邊欄的註冊的幾個變量
//$instance 是小工具的設置數據
function widget($args,$instance){
extract($args); //將數組展開
$title = apply_filters('widget_title',emptyempty($instance['title']) ? ' ' : $instance['title']);
$showPosts = emptyempty($instance['showPosts']) ? 10 : $instance['showPosts'];
echo $before_widget;
echo $before_title . $title . $after_title;
echo '<ul>';
$this->ashu_get_hotpost($showPosts); //使用 ashu_get_hotpost 函數獲取文章
echo '</ul>';
echo $after_widget;
}

這裏的幾個變量 $before_widget 等是在我們註冊側邊欄的時候頂下的，都保存在數組 $args 中，使用 extract 函數可將數組展開為幾個變量。回顧一下注冊側邊欄的時候：

register_sidebar(array(
'name'=>'首頁側邊欄',
'id'=>'sidebar-1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

有了這幾個基本函數，即可製作一個小工具了，我們還少了一個函數，在 widget 函數中我調用了一個函數 ashu_get_hotpost 來獲取文章，但是這個文章沒有定義，所以我們得添加上這個函數，不然就出錯了。

五：獲取文章函數

//$showposts 參數為顯示文章的數量
function ashu_get_hotpost($showposts){
global $wpdb;
//使用自定義 sql 查詢語句, 注意, 我的文章瀏覽量是保存在自定義字段 post_views_count 中
$result = $wpdb->get_results("SELECT post_id,meta_key,meta_value,ID,post_title FROM $wpdb->postmeta key1 INNER JOIN $wpdb->posts key2 ON key1.post_id = key2.ID where key2.post_type='post' AND key2.post_status='publish' AND key1.meta_key='post_views_count' ORDER BY CAST(key1.meta_value AS SIGNED) DESC LIMIT 0 , $showposts");
$output = '';
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
//計算標題長度
if( mb_strlen($post->post_title,"UTF-8")>18 ){
$title = strip_tags($post->post_title);
$short_title = trim(mb_substr($title ,0,14,"UTF-8"));
$short_title .= '...';
}else{
$short_title = $post->post_title;
}
$output .= '<li class=""><a href="' . get_permalink($postid) . '" title="' . $title .'">' . $short_title .'</a><br /> <span class="">'.$post->meta_value .'Views</span></li>';
}
echo $output;
}

一個完整的按瀏覽量顯示的小工具代碼就只做完成了。。

但是別忘了還有最後一步，，，加載這個小工具文件

在 functions.php 中加入代碼包含這個文件即可，比如我需要加載 widget/hotposts.php：

include_once(TEMPLATEPATH .'/widget/hotposts.php');

完整代碼

<?php
/*
Plugin Name: 熱門瀏覽
Plugin URI:http://www.kutailang.com
Description: 熱門瀏覽
Version:1.0
Author: 樹是我的朋友
Author URI:http://www.kutailang.com
*/
//類
class AshuPostViews extends WP_Widget{
function AshuPostViews(){
$widget_ops = array('classname'=>'widget_postviews','description'=>'按瀏覽量顯示文章');
$this->WP_Widget(false,'熱門瀏覽',$widget_ops);
}
//表單
function form($instance){
$instance = wp_parse_args((array)$instance,array(
'title'=>'熱評文章','showPosts'=>10
));
$title = htmlspecialchars($instance['title']);
$showPosts = htmlspecialchars($instance['showPosts']);
$output = '<table>';
$output .= '<tr><td> 標題:</td><td>';
$output .= '<input id="'.$this->get_field_id('title') .'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';
$output .= '</td></tr><tr><td> 文章數量：</td><td>';
$output .= '<input id="'.$this->get_field_id('showPosts') .'" name="'.$this->get_field_name('showPosts').'" type="text" value="'.$instance['showPosts'].'" />';
$output .= '</td></tr></table>';
echo $output;
}
function update($new_instance,$old_instance){
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
$instance['showPosts'] = strip_tags(stripslashes($new_instance['showPosts']));
return $instance;
}
function widget($args,$instance){
extract($args);
$title = apply_filters('widget_title',emptyempty($instance['title']) ? ' ' : $instance['title']);
$showPosts = emptyempty($instance['showPosts']) ? 10 : $instance['showPosts'];
echo $before_widget;
echo $before_title . $title . $after_title;
echo '<ul>';
$this->ashu_get_hotpost($showPosts);
echo '</ul>';
echo $after_widget;
}
function ashu_get_hotpost($showposts){
global $wpdb;
$result = $wpdb->get_results("SELECT post_id,meta_key,meta_value,ID,post_title FROM $wpdb->postmeta key1 INNER JOIN $wpdb->posts key2 ON key1.post_id = key2.ID where key2.post_type='post' AND key2.post_status='publish' AND key1.meta_key='post_views_count' ORDER BY CAST(key1.meta_value AS SIGNED) DESC LIMIT 0 , $showposts");
$output = '';
foreach ($result as $post) {
$postid = $post->ID;
if( mb_strlen($post->post_title,"UTF-8")>18 ){
$title = strip_tags($post->post_title);
$short_title = trim(mb_substr($title ,0,14,"UTF-8"));
$short_title .= '...';
}else{
$short_title = $post->post_title;
}
$output .= '<li class=""><a href="' . get_permalink($postid) . '" title="' . $title .'">' . $short_title .'</a><br /> <span class="">'.$post->meta_value .'Views</span></li>';
$i++;
}
echo $output;
}
}
function AshuPostViews(){
register_widget('AshuPostViews');
}
add_action('widgets_init','AshuPostViews');
?>

WordPress 功能集成 (十一): 小工具的製作方法

WordPress 功能集成 (十一): 小工具的製作方法

訂單服務

媒體中心

服務支持

使用條款

關於公司