创建 WordPress 小工具

  • A+
所属分类:WordPress教程

对于非程序员要创建一个WordPress站点,小工具是很棒的。它们能够添加菜单、列表供稿、文本以及更多东西到小工具区,并且不限于侧边栏。现在许多主题都在页脚添加了小工具区,并且大主题框架通常在多个位置设有小工具区,如头部或内容的上下方。

你可以在小工具中添加任何内容——静态文本、从数据库查询输出的内容、来自其他网站的订阅以及更多。

创建小工具类

首先是创建一个新类来拓展 WP_Widget 类,将下面代码复制进主题的 functions.php(本主题新建的图片小工具):

  1. <?php
  2. class PicWidget extends WP_Widget {
  3. function __construct() {
  4. //待填充
  5. }
  6. function form( $instance ) {
  7. //待填充
  8. }
  9. function update( $new_instance, $old_instance ) {
  10. //待填充
  11. }
  12. function widget( $args, $instance ) {
  13. //待填充
  14. }
  15. }
  16. ?>

此类共包含4个函数,他们分别的作用是:

  • __construct 函数会完成你所期望的——它会构造一个函数。在这个函数里面你可以做出一些定义,比如 WordPress 小工具的ID、标题和说明。
  • form 函数会在 WordPress 小工具界面创建表单,让用户来定制或者激活它。
  • update 函数确保 WordPress 能及时更新用户在 WordPress 小工具界面输入的任何设置。
  • widget 函数则定义了在网站前端通过 WordPress 小工具输出的内容。

注册小工具

只有通过 WordPress 进行了注册,你的 WordPress 小工具才能工作。在你的新类下面加入以下函数和钩子:

  1. <?php
  2. function register_widgets() {
  3. register_widget( 'PicWidget' );
  4. }
  5. add_action( 'widgets_init', 'register_widgets' );
  6. ?>

register_widget() 函数是一个WordPress函数,它唯一的参数就是你刚刚创建的类的命名。

随后将你创建的函数挂入 widgets_init 钩子,确保它可以被 WordPress 拾起。

现在你已经开始创建你的 WordPress 小工具了。接下来就是填充上面的4个函数:

创建构造函数

你需要在 PicWidget 类里面填充你自己建立的__construct() 函数。找到”构造函数”,编辑如下:

  1. function __construct() {
  2. // Instantiate the parent object
  3. parent::__construct(
  4.      // 小工具ID
  5.        'pic',
  6.        // 小工具名称
  7.         "图片",
  8.         // 小工具选项
  9.         array (
  10.          'description' => "设置侧边栏图片"
  11.         )
  12.     );
  13. }

以上代码定义了创建你的 WordPress 小工具需要的相关参数。它们分别是:

  • WordPress 小工具的唯一ID
  • WordPress 小工具在其界面上的名称
  • 一系列在 WordPress 小工具界面显示的选项,包括选项说明。

创建表单

要为你的小工具创建表单,你需要填充已经添加 PicWidget 类中的 form 函数。找到form函数,编写如下:

  1. function form( $instance ) {
  2.         $depth = $instance[ 'depth' ];
  3.         $link = $instance[ 'link' ];
  4.         $title = $instance['title'];
  5.         //后台选项
  6. ?>
  7.         <p>
  8.         <label for="<?php echo $this->get_field_id('title'); ?>">填写图片标题</label>
  9.         <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
  10.         </p>
  11.  
  12.         <p>
  13.         <label for="<?php echo $this->get_field_id( 'depth' ); ?>">填写图片地址</label>
  14.         <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'depth' ); ?>" name="<?php echo $this->get_field_name( 'depth' ); ?>" value="<?php echo esc_attr( $depth ); ?>">
  15.         </p>
  16.  
  17.         <p>
  18.         <label for="<?php echo $this->get_field_id( 'link' ); ?>">填写图片链接</label>
  19.         <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>">
  20.         </p>
  21. <?php
  22. }

上述代码在后台小工具界面内创建了一个可输入的表单,但是如果你尝试在其中输入一些内容,它不会被保存下来。因此你需要进一步完善让这个表单能保存你所输入的内容。

允许表单更新

要做到这一点你需要处理之前创建的 update 函数。编码如下:

  1. function update( $new_instance, $old_instance ) {
  2.         // 保存小工具选项
  3.         $instance = $old_instance;
  4.         $instance[ 'depth' ] = strip_tags( $new_instance[ 'depth' ] );
  5.         $instance[ 'link' ] = strip_tags( $new_instance[ 'link' ] );
  6.         $instance['title'] = strip_tags($new_instance['title']);
  7.         return $instance;
  8. }

上述代码用新值($new_instance)代替了 depth 字段的旧值($old_instance),并采用 strip_tags 进行消毒。现在你可以在其中进行任意的输入并保存了。

现在你终于为你的WordPress小工具创建了一个工作表单,可以说一切都准备就绪了,那么下一步就是在网站上显示你的WordPress小工具啦。

编辑 widget 函数

下一步你需要做的便是编辑还未填充的 widget 函数。如下面的输出图片:

  1. function widget( $args, $instance ) {
  2.         // 小工具输出
  3.         $url = $instance[ 'depth' ];
  4.         $link = $instance[ 'link' ];
  5.         $title = $instance['title'];
  6.         extract( $args );
  7.         echo $before_widget;       
  8. ?>
  9.         <div class="pic">
  10.             <a href="<?php echo $link; ?>"><img src="<?php echo $url; ?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" style="max-width: 100%;"></a>
  11.         </div>
  12. <?php
  13. }

最终

回顾以上步骤,添加小工具代码全文应如下所示:

  1. class PicWidget extends WP_Widget {
  2.     function __construct() {
  3.         // Instantiate the parent object
  4.         parent::__construct(
  5.             // 小工具ID
  6.             'pic',
  7.             // 小工具名称
  8.             "图片",
  9.             // 小工具选项
  10.             array (
  11.             'description' => "设置侧边栏图片"
  12.             )
  13.         );
  14.     }
  15.     function widget( $args, $instance ) {
  16.         // Widget output
  17.         // kick things off
  18.         $url = $instance[ 'depth' ];
  19.         $link = $instance[ 'link' ];
  20.         $title = $instance['title'];
  21.         extract( $args );
  22.         echo $before_widget;       
  23. ?>
  24.         <div class="pic">
  25.             <a href="<?php echo $link; ?>"><img src="<?php echo $url; ?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" style="max-width: 100%;"></a>
  26.         </div>
  27.     <?php
  28.     }
  29.     function update( $new_instance, $old_instance ) {
  30.         // Save widget options
  31.         $instance = $old_instance;
  32.         $instance[ 'depth' ] = strip_tags( $new_instance[ 'depth' ] );
  33.         $instance[ 'link' ] = strip_tags( $new_instance[ 'link' ] );
  34.         $instance['title'] = strip_tags($new_instance['title']);
  35.         return $instance;
  36.     }
  37.     function form( $instance ) {
  38.         // Output admin widget options form
  39.         $defaults = array(
  40.             'depth' => '-1'
  41.         );
  42.         $depth = $instance[ 'depth' ];
  43.         $link = $instance[ 'link' ];
  44.         $title = $instance['title'];
  45.         // markup for form
  46.     ?>
  47.         <p>
  48.         <label for="<?php echo $this->get_field_id('title'); ?>">填写图片标题</label>
  49.         <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
  50.         </p>
  51.         <p>
  52.         <label for="<?php echo $this->get_field_id( 'depth' ); ?>">填写图片地址</label>
  53.         <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'depth' ); ?>" name="<?php echo $this->get_field_name( 'depth' ); ?>" value="<?php echo esc_attr( $depth ); ?>">
  54.         </p>
  55.         <p>
  56.         <label for="<?php echo $this->get_field_id( 'link' ); ?>">填写图片链接</label>
  57.         <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>">
  58.         </p>
  59.         <?php
  60.     }
  61. }
  62. function register_widgets() {
  63.     register_widget( 'PicWidget' );
  64. }
  65. add_action( 'widgets_init', 'register_widgets' )

小结

创建一个 WordPress 小工具应该包含以下几个步骤:

  • 注册你的小工具
  • 创建类来保存 widget 函数
  • 编写一个 construc t函数来构建你的小工具
  • 为小工具界面上的表单编写一个 form 函数
  • 编写一个 update 函数以便小工具能够在表单中及时更新
  • 编写一个定义输出的 widget函数

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: