WordPress 创建自定义小工具的方法

如何让 WordPress 主题支持小工具的方法,默认的情况,只有不几个小工具,而且在国内这些小工具好多都不太常用。

如果你想给你的主题添加一个自定义小工具,或者你要开发一个添加小工具的插件,那就需要查看本文了。

创建小工具

创建一个小工具,需要使用 register_widget() 函数挂载一个继承于 WP_Widget 类的类,下边是一个简单的例子,创建了一个随机文章小工具。

注意,register_widget() 函数需要在 widgets_init 钩子上调用。

class widget_tags extends WP_Widget {
	//添加小工具
	function __construct() {
		$this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
	}
	//小工具内容
	function widget( $args, $instance ) {
		//导入当前侧边栏设置
		extract( $args, EXTR_SKIP );
		//输出小工具前代码
		echo $before_widget;
		//输出小工具标题
		echo $before_title . '随机文章' . $after_title;
		//随机文章
		query_posts( 'orderby=rand&showposts=10' );
		if( have_posts() ):
		                echo '<ul>';
		while( have_posts() ):
		                        the_post();
		printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
		endwhile;
		echo '</ul>';
		endif;
		//输出小工具后代码
		echo $after_widget;
	}
}
function Bing_add_widget_tags() {
	register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

这样,后台就会出现了一个随机文章小工具,拖动到侧边栏上,会在前台显示十篇随机文章。

小工具设置

但我们会发现这个小工具并没有设置选项,那如何给这个小工具添加设置选项呢?设置选项涉及类的两个函数,update()(更新小工具设置时的处理函数)和 form()(设置表单)。

下边的代码添加了一个标题设置和显示文章数量的设置:

class widget_tags extends WP_Widget {
	//添加小工具
	function __construct() {
		$this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
	}
	//小工具内容
	function widget( $args, $instance ) {
		//导入当前侧边栏设置
		extract( $args, EXTR_SKIP );
		//输出小工具前代码
		echo $before_widget;
		//输出小工具标题
		echo $before_title . '随机文章' . $after_title;
		//随机文章
		query_posts( 'orderby=rand&showposts=10' );
		if( have_posts() ):
		                echo '<ul>';
		while( have_posts() ):
		                        the_post();
		printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
		endwhile;
		echo '</ul>';
		endif;
		//输出小工具后代码
		echo $after_widget;
	}
	//更新选项
	function update( $instance, $old_instance ) {
		$instance['title'] = strip_tags( $instance['title'] );
		$instance['number'] = (int) strip_tags( $instance['number'] );
		return $instance;
	}
	//选项表单
	function form( $instance ) {
		//添加默认设置
		$instance = wp_parse_args( $instance, array(
		            'title' => __( '随机文章', 'Bing' ),
		            'number' => 10
		        ) );
		//设置表单
		?>
		        <p>
		            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' );
		?>:</label>
		            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
		        </p>
		        <p>
		            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' );
		?>:</label>
		            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
		        </p>
		<?php
	}
}
function Bing_add_widget_tags() {
	register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

这样再展开小工具,就能看到设置了:

然后,在生成小工具内容的时候使用选项,就能达到用户自定义的效果。

class widget_tags extends WP_Widget {
	//添加小工具
	function __construct() {
		$this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
	}
	//小工具内容
	function widget( $args, $instance ) {
		//导入当前侧边栏设置
		extract( $args, EXTR_SKIP );
		//添加小工具标题过滤器
		$title = apply_filters( 'widget_name', $instance['title'] );
		//输出小工具前代码
		echo $before_widget;
		//输出小工具标题
		echo $before_title . $title . $after_title;
		//随机文章
		query_posts( 'orderby=rand&showposts=' . $instance['number'] );
		if( have_posts() ):
		                echo '<ul>';
		while( have_posts() ):
		                        the_post();
		printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
		endwhile;
		echo '</ul>';
		endif;
		//输出小工具后代码
		echo $after_widget;
	}
	//更新选项
	function update( $instance, $old_instance ) {
		$instance['title'] = strip_tags( $instance['title'] );
		$instance['number'] = (int) strip_tags( $instance['number'] );
		return $instance;
	}
	//选项表单
	function form( $instance ) {
		//添加默认设置
		$instance = wp_parse_args( $instance, array(
		            'title' => __( '随机文章', 'Bing' ),
		            'number' => 10
		        ) );
		//设置表单
		?>
		        <p>
		            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' );
		?>:</label>
		            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
		        </p>
		        <p>
		            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' );
		?>:</label>
		            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
		        </p>
		<?php
	}
}
function Bing_add_widget_tags() {
	register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

评论

暂无评论,开始撰写精彩评论吧!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注