最近正在研究Wordpress。分享一下创建自定义Widget小工具的方法，希望对大家有用。
开发方法是使用WP_Widget函数来开发自己的Widget小工具。
WP_Widget的基本结构：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php class My_Widget extends WP_Widget { function My_Widget() { // 挂件实例化 } function widget($args, $instance) { // 输出挂件内容 } function update($new_instance, $old_instance) { // 选项保存过程 } function form($instance) { // 在管理界面输出选项表单 } } register_widget('My_Widget'); ?> |
其中：
My_Widget :你的Widget的名字，自己顺便定义，也是你开发插件的构造函数名
widget，update，form都是WordPress默认的名字，不得改变。
widget：为在页面工具栏中输出的挂件内容
update：后台选项更新时候保存设置的函数
form：在后台管理界面显示的Widget维护界面
下面举例创建一个简单的banner广告位Widget
1、创建Widget的完整代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?php class My_Banner extends WP_Widget { function My_Banner() { //Constructor $widget_ops = array( 'classname' => 'ad_widget', //Widget分类名 'description' => '广告位', //Widget描述 ); $this->WP_Widget('Banner', '首页通栏广告位',$widget_ops); //初始化Widget。WP_Widget(Widget名称, Widget后台名称) //$widget_ops，用来保存类名和描述，以便在控制面板正确显示工具信息 //$control_ops 是可选参数，用来定义小工具在控制面板显示的宽度和高度（可选） } function widget($args, $instance) { // prints the widget extract($args); //使用extract函数把数组中的keys转换成变量 $title = $instance['title']; //获取Widget数据中的标题 $image = $instance['image']; //获取Widget数据中的图片地址 $url = $instance['url']; //获取Widget数据中的链接 echo $before_widget; //输出widget统一的开头代码 echo '<div class="banner">'; echo '<a href=" ' . $url . ' " title="'.$title.'"><img alt="'.$title.'" src=" ' . $image . ' " /></a>'; //输出Widget数据，组合出HTML代码。 echo '</div>'; echo $after_widget; //输出widget统一的结尾代码 } function update($new_instance, $old_instance) { //save the widget $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); //保存title字段 $instance['image'] = strip_tags($new_instance['image']); //保存image字段 $instance['url'] = strip_tags($new_instance['url']); //保存url字段 return $instance; } function form($instance) { //widgetform in backend $title = strip_tags($instance['title']); //获取title字段内容 $image = strip_tags($instance['image']); //获取image字段内容 $url = strip_tags($instance['url']); //获取url字段内容 //下面这段代码输出了Widget管理后台的界面 ?> <p><label for="<?php echo $this->get_field_id('title'); ?>">标题: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('image'); ?>">图片地址: <input class="widefat" id="<?php echo $this->get_field_id('image'); ?>" name="<?php echo $this->get_field_name('image'); ?>" type="text" value="<?php echo attribute_escape($image); ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('url'); ?>">链接地址: <input class="widefat" id="<?php echo $this->get_field_id('url'); ?>" name="<?php echo $this->get_field_name('url'); ?>" type="text" value="<?php echo attribute_escape($url); ?>" /></label></p> <?php } } ?> |
2、创建完成后，向Wordpress注册此Widget
3、如何在Wordpress页面中显示此Widget小工具？
首先要激活工具栏：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if ( function_exists('register_sidebar') ){ register_sidebar( array( 'name' => __( '自定义小工具', '我的小工具' ), //定义工具栏名称 'id' => 'MyWidget', //工具栏id。下面的四个变量可以为空。 'before_widget' => '', 'after_widget' => "", 'before_title' => '', 'after_title' => '', ) ); } ?> |
在页面模板中，需要显示此工具栏的位置加入以下代码：
|
1 2 3 |
<?php if ( ! dynamic_sidebar( 'MyWidget' ) ) : ?> <?php the_widget('My_Banner'); ?> <?php endif;?> |
在小工具管理后台添加相应的内容即可。
8 Comments
呵呵 发送失败你都知道啊
呵呵 等主题发布出来，你就知道了
拭目以待啦！~~~看来我这网站速度太慢。。。发评论容易失败吧
有很多。。等主题发布你就知道了
这个很有用。。在我新的主题里用到了
是哪个小工具呢？
有用的东西啊，只是代码似乎不完整？
刚才没有转换尖括号，现在可以了。是完整的代码呢。