[开发篇]六个步骤轻松搞定wordpress主题小工具开发和创建
wordpress主题里自带很多可延展的部分，其中小工具可扩展的空间最为强大，不仅仅可以在原生wordpress程序的基础上优化现有小工具，而且可以注册和开发更多的新的功能和样式的工作而且很方便的添加到主题不同的位置和不同的样式调整，可以说是另外一种自定义功能的实现。举个栗子，他可以自定义顶部的菜单、自定义侧边栏的文章列表样式及位置、可以无限的浮动或是固定、可以显示在各页面的不同位置；下面测速网将通过五个步骤的说明教大家如何注册编写应用一个小工具到已有的wordpress主题内
开发一款wordpress主题小工具通常是以下面五个步骤来实现的；
第一步：注册属于你的特定小工具名称
第二步 创建一个类用来保存 widget 函数
第三步 编写一个 construc t函数来构建你的小工具
第四步 为小工具界面上的表单编写一个 form 函数
第五步 编写一个 update 函数以便小工具能够在表单中及时更新
第六步 编写一个定义输出的 widget函数
创建小工具类：
首先是创建一个新类来拓展 WP_Widget 类，将下面代码复制进主题的 functions.php（本主题新建的图片小工具）：
161718192021222324252627282930313233<?phpclass PicWidget extends WP_Widget {function __construct() {//待填充}function form( $instance ) {//待填充}function update( $new_instance, $old_instance ) { //待填充}function widget( $args, $instance ) {//待填充}}?>此类共包含4个函数，他们分别的作用是：__construct 函数会完成你所期望的——它会构造一个函数。在这个函数里面你可以做出一些定义，比如 WordPress 小工具的ID、标题和说明。form 函数会在 WordPress 小工具界面创建表单，让用户来定制或者激活它。update 函数确保 WordPress 能及时更新用户在 WordPress 小工具界面输入的任何设置。widget 函数则定义了在网站前端通过 WordPress 小工具输出的内容。注册小工具：只有通过 WordPress 进行了注册，你的 WordPress 小工具才能工作。在你的新类下面加入以下函数和钩子： <pre ><?phpfunction register_widgets() {register_widget( 'PicWidget' );}add_action( 'widgets_init', 'register_widgets' );?>
register_widget() 函数是一个WordPress函数，它唯一的参数就是你刚刚创建的类的命名。
随后将你创建的函数挂入 widgets_init 钩子，确保它可以被 WordPress 拾起。
现在你已经开始创建你的 WordPress 小工具了。接下来就是填充上面的4个函数：
创建构造函数：
你需要在 PicWidget 类里面填充你自己建立的__construct() 函数。找到”构造函数”，编辑如下：
12345678910111213function __construct() {// Instantiate the parent objectparent::__construct( // 小工具ID'pic',// 小工具名称"图片",// 小工具选项array ('description' => "设置侧边栏图片"));}以上代码定义了创建你的 WordPress 小工具需要的相关参数。它们分别是：
WordPress 小工具的唯一ID
WordPress 小工具在其界面上的名称
一系列在 WordPress 小工具界面显示的选项，包括选项说明。
创建表单：
要为你的小工具创建表单，你需要填充已经添加 PicWidget 类中的 form 函数。找到form函数，编写如下：
16171819202122function form( $instance ) {$depth = $instance[ 'depth' ];$link = $instance[ 'link' ];$title = $instance['title'];//后台选项?><p><label for="<?php echo $this->get_field_id('title'); ?>">填写图片标题</label><input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p> <p><label for="<?php echo $this->get_field_id( 'depth' ); ?>">填写图片地址</label><input type="text" id="<?php echo $this->get_field_id( 'depth' ); ?>" name="<?php echo $this->get_field_name( 'depth' ); ?>" value="<?php echo esc_attr( $depth ); ?>"></p> <p><label for="<?php echo $this->get_field_id( 'link' ); ?>">填写图片链接</label><input type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>"></p><?php}上述代码在后台小工具界面内创建了一个可输入的表单，但是如果你尝试在其中输入一些内容，它不会被保存下来。因此你需要进一步完善让这个表单能保存你所输入的内容。
允许表单更新：
要做到这一点你需要处理之前创建的 update 函数。编码如下：
12345678function update( $new_instance, $old_instance ) {// 保存小工具选项$instance = $old_instance;$instance[ 'depth' ] = strip_tags( $new_instance[ 'depth' ] );$instance[ 'link' ] = strip_tags( $new_instance[ 'link' ] );$instance['title'] = strip_tags($new_instance['title']);return $instance;}
上述代码用新值（$new_instance）代替了 depth 字段的旧值（$old_instance），并采用 strip_tags 进行消毒。现在你可以在其中进行任意的输入并保存了。
现在你终于为你的WordPress小工具创建了一个工作表单，可以说一切都准备就绪了，那么下一步就是在网站上显示你的WordPress小工具啦。
编辑 widget 函数：
下一步你需要做的便是编辑还未填充的 widget 函数。如下面的输出图片：
12345678910111213function widget( $args, $instance ) {// 小工具输出$url = $instance[ 'depth' ];$link = $instance[ 'link' ];$title = $instance['title'];extract( $args );echo $before_widget;?><div ><a href="<?php%20echo%20$link;%20?>"><img src="<?php%20echo%20$url;%20?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" ></a></div><?php}
最终：
回顾以上步骤，添加小工具代码全文应如下所示：
1617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465class PicWidget extends WP_Widget {function __construct() {// Instantiate the parent objectparent::__construct( // 小工具ID'pic',// 小工具名称"图片",// 小工具选项array ('description' => "设置侧边栏图片"));}function widget( $args, $instance ) {// Widget output// kick things off$url = $instance[ 'depth' ];$link = $instance[ 'link' ];$title = $instance['title'];extract( $args );echo $before_widget;?><div ><a href="<?php%20echo%20$link;%20?>"><img src="<?php%20echo%20$url;%20?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" ></a></div><?php}function update( $new_instance, $old_instance ) {// Save widget options$instance = $old_instance;$instance[ 'depth' ] = strip_tags( $new_instance[ 'depth' ] );$instance[ 'link' ] = strip_tags( $new_instance[ 'link' ] );$instance['title'] = strip_tags($new_instance['title']);return $instance;}function form( $instance ) {// Output admin widget options form$defaults = array('depth' => '-1');$depth = $instance[ 'depth' ];$link = $instance[ 'link' ];$title = $instance['title'];// markup for form ?><p><label for="<?php echo $this->get_field_id('title'); ?>">填写图片标题</label><input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p><p><label for="<?php echo $this->get_field_id( 'depth' ); ?>">填写图片地址</label><input type="text" id="<?php echo $this->get_field_id( 'depth' ); ?>" name="<?php echo $this->get_field_name( 'depth' ); ?>" value="<?php echo esc_attr( $depth ); ?>"></p><p><label for="<?php echo $this->get_field_id( 'link' ); ?>">填写图片链接</label><input type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>"></p><?php}}function register_widgets() {register_widget( 'PicWidget' );}add_action( 'widgets_init', 'register_widgets' )
上一篇：[赋能]纯代码为wordpress主题添加倒计时功能
下一篇：wordpress上传中文名称图片文件自动重命名的方法
wordpress主题