WordPress小工具制作快速入门教程

众所周知,Wordpress的侧边栏中可以放置小工具,功能各异的小工具可以是用户体验有很大的提升,但Wordpress自带的那几个小工具是显然不够,所以我们要自己制作小工具.

小工具的制作其实并不难,小工具的代码需要包含在function.php中,主要小工具的代码结构如下:

<?php
  //定义小工具类MyOwnWidget
  class MyOwnWidget extends WP_Widget{
    
    function MyOwnWidget(){
      //这是定义小工具信息的函数，也是类的构建函数
    }
    
    function form($instance){
      //这是表单函数，也就是控制后台显示的
    }
    
    function update($new_instance,$old_instance){
      //这是更新数据函数,小工具如果有设置选项，就需要保存更新数据
    }
    
    function widget($args,$instance){
      //这是控制小工具前台显示的函数
    }
 
  }

  function MyOwnWidget(){
    //注册小工具
    register_widget('MyOwnWidget');
  }

  //widges_init，小工具初始化的时候执行MyOwnWidget函数，
  add_action('widgets_init','MyOwnWidget');
?>

由此可见,一个小工具的代码主要由信息声明,后台内容,数据更新,前台内容构成.

我们来以一个显示自定义图片小工具为例,依次讲解这些部分:

1.声明部分

这部分的内容比较固定,仅仅定义一些小工具的信息而已:

function ZwtImg(){
  //这是定义小工具信息的函数，也是类的构建函数
  $widget_ops = array('classname'=>'widget_zwtimg','description'=>'显示自定义图片');   
  $this->WP_Widget(false,'图片',$widget_ops);   
}

相信大家都能看明白这两行东西,实际应用时将”图片”替换为小工具的名称,”显示自定义图片”替换为小工具的描述.

 

2.后台部分

这部分是控制小工具在后台的设置部分:

function form($instance){
  //这是表单函数，也就是控制后台显示的

  //获取旧值
  $title = esc_attr($instance['title']);
  $src = esc_attr($instance['src']);
  $href = esc_attr($instance['href']);
  ?>
    <!-- 显示表单 -->
    <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 $title; ?>"/></label></p>
    <p><label for="<?php echo $this->get_field_id('src'); ?>">图片地址 :</label><input class="widefat" id="<?php echo $this->get_field_id('src'); ?>" name="<?php echo $this->get_field_name('src'); ?>" type="text"  value="<?php echo $src; ?>" placeholder="图片来源地址" /></p>
    <p><label for="<?php echo $this->get_field_id('href'); ?>">点击链接:</label><input class="widefat" id="<?php echo $this->get_field_id('href'); ?>" name="<?php echo $this->get_field_name('href'); ?>" type="text"  value="<?php echo $href; ?>" placeholder="点击图片要到达的地址" /></p>
  <?php
}

后台部分主要就是一些表单,也很容易理解.

 

3.数据更新

这部分是小工具的设置在点击保存是的处理部分,一般无特殊要求直接返回新值就可以了:

function update($new_instance,$old_instance){
  //这是更新数据函数,小工具如果有设置选项，就需要保存更新数据
  return $new_instance;
}

这部分基本是固定的,一般不用去管.

 

4.前台部分

这部分就是真正显示在侧边栏里的东西,视具体应用而定:

function widget($args,$instance){
  //这是控制小工具前台显示的函数
  ?>
  <li id="widget_zwtimg" class="widget widget_img" style="margin-bottom:15px;">
    <h2 class="widgettitle" ><?php echo $instance['title']; ?></h2>
    <a href="<?php echo $instance['href']; ?>">
      <img src="<?php echo $instance['src']; ?>">
    </a>
  </li>

  <?php
}

对于这部分,要完全根据具体应用而定,可以这样获取你在设置页面中定义的变量:

<?php echo $instance['src']; //把src换成你定义的变量名 ?>

至此,一个新的小工具就制作完成了,可以按照这个结构制作你自己的小工具.