WordPress如何添加自定义小工具教程

在 WordPress 网站建设中，侧边栏小工具是提升用户体验的重要组件。默认小工具虽能满足基础需求，但当需要个性化功能（如随机文章展示、自定义表单等）时，就需要开发自定义小工具。本文将通过完整代码示例，详解如何从零创建带交互设置的 WordPress 自定义小工具。

创建小工具

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

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

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

小工具设置

但我们会发现这个小工具并没有设置选项，那如何给这个小工具添加设置选项呢？设置选项涉及类的两个函数，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如何添加自定义小工具的全部教程了，希望对你有些帮助。