本文作者:问几许

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

问几许 4年前 ( 2019-07-15 ) 1543 抢沙发
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、代码更新之后,刷新你的网站,你就看到你完整的小工具了。


文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/124.html发布于 4年前 ( 2019-07-15 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,1543人围观)参与讨论

还没有评论,来说两句吧...