对于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、代码更新之后,刷新你的网站,你就看到你完整的小工具了。
还没有评论,来说两句吧...