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 功能集成 (十一): 小工具的制作方法

订单服务

媒体中心

服务支持

使用条款

关于公司