WordPress如何添加自定义小工具-利剑分享-科技生活
利剑分享-科技生活-利剑分享-科技生活
利剑分享-科技生活

WordPress如何添加自定义小工具

WordPress如何添加自定义小工具

今天给大家带来一篇WordPress添加一个自定义小工具的教程,之前wp自学笔记分享了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(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="{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}s" title="{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}s">{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}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  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  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="{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}s" title="{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}s">{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}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  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  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' );

文章到这里就已经完成了WordPress如何添加自定义小工具的全部教程了,希望对你有些帮助。

 

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享