WordPress - 侧栏小工具(Widget)开发及其案例

摘要： 对于wordpress站点，侧栏小工具是一个很实用的部件，可以显示自己想要显示的任何内容，而且它也不限于侧边栏，现在的好些主题通常在多个位置设有小工具区，比如头部、脚部和内容的上下...

对于wordpress站点，侧栏小工具是一个很实用的部件，可以显示自己想要显示的任何内容，而且它也不限于侧边栏，现在的好些主题通常在多个位置设有小工具区，比如头部、脚部和内容的上下方，使用起来更为灵活。

这篇文章就是简单的介绍小工具的开发，并且编写出完整的Widget。

1、创建小工具

首先就是第一步就是创建小工具。在你WordPress的 wp-content/plugins 目录下创建一个新的文件夹，然后命名为 example-widget，在该文件夹下创建同样名字的php文件 example-widget.php。并编写一下代码：

<?php 
  /*Plugin Name: Example Widget
    URI: http://wenjixu.com/
    Description: 这是一个示例小工具
    Version: 1.0
    Author: Kongkong
    Author URI: http://wenjixu.com
    License: GPL
  */
?>

然后，你就会在后台界面的【插件】-【已装插件】列表里看到这些信息，当然，自己的写的小工具就需要写上自己的署名和链接。

2、创建小工具类

接着，需要创建一个新类来拓展WP_Widget类。

<?php
    class Example_Widget extends WP_Widget {
        function __construct() {
        
        }
        function form( $instance ) {
        
        }
        function update( $new_instance, $old_instance ) {   
            
        }
        function widget( $args, $instance ) {
        
        }
    }
?>

• __construct 构造函数--就是定义小工具，比如ID、标题和说明

• form函数--是在WordPress小工具界面创建表单，让用户来定制或者激活它

• update函数--就是为了及时更新用户在小工具界面表单里输入的内容到小工具

• widget函数--则定义了网站通过小工具输出的内容

3、注册小工具

接下来，小工具创建好了，我们需要通过Wordpress注册，才能让小工具进行你想要的工作。只要在你刚输入的四个函数的下面添加一下函数和钩子：

<?php
    function register_example_widget() { 
        register_widget( 'Example_Widget' ); 
    }
    
    add_action( 'widgets_init', 'register_example_widget' );
?>

register_widget()函数是一个WordPress函数，它唯一的参数就是你刚刚创建的类的命名。随后将你创建的函数挂入 widgets_init 钩子，确保它可以被WordPress拾起。

4、小工具定义

function __construct() {    // WordPress 小工具的ID、标题和说明
    parent::__construct(
        'example-widget',    // 小工具ID
        "示例小工具",   // 小工具名称
        array (   // 小工具选项
            'description' => "这厮是一个小工具"
        )
    );
}

5、创建表单

function form( $instance ) {  // 在 WordPress 小工具界面创建表单，让用户来定制或者激活它
      // 表单配置：标题、传入参数
      $instance = wp_parse_args(
        (array) $instance,
        array(
          'title' => '',
          'param' => '',
        )
      );
      ?>
        <p>
          <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:' ); ?></label>
          <input class="widefat" type="text" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>" />
        </p>

        <p>
          <label for="<?php echo esc_attr( $this->get_field_id( 'param' ) ); ?>"> 参数：</label>
          <input class="widefat" type="text" id="<?php echo esc_attr( $this->get_field_id( 'param' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'param' ) ); ?>" value="<?php echo esc_attr( $instance['param'] ); ?>" />
          <br />
          <small>这里填写你填入的参数介绍或者要求</small>
        </p>
      <?php
}

6、表单更新

function update( $new_instance, $old_instance ) { // 确保 WordPress 能及时更新用户在 WordPress 小工具界面输入的任何设置
    return $new_instance;
}

7、网站输出

function widget( $args, $instance ) { // 定义了在网站前端通过 WordPress 小工具输出的内容。
    $title = ! empty( $instance['title'] ) ? $instance['title'] : '示例小工具';
    $param = ! empty( $instance['param'] ) ? $instance['param'] : '' ;
    
    if (!empty($param)) {
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        
        //
        //    在这可以编写自己想要展示的内容。
        //    ?>
        //        <p><?php echo $title ; ?></p>
        //        <p><?php echo $param ; ?></p>
        //    <?php
        //
        
        echo $args['after_widget'];
    }
}

8、代码更新之后，刷新你的网站，你就看到你完整的小工具了。