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 功能整合 (十一): 小工具的製作方法

訂單服務

媒體中心

服務支援

使用條款

關於公司