为您的网站创建自定义 WordPress Widget 插件

WordPress 通过小部件实现其众所周知的拖放设计功能。这些组件最初的设想是允许用户通过 WordPress 主题以简化的方式添加设计和结构控制元素。

小部件添加和扩展了 WordPress 网站元素的功能。用户可以决定小部件在网站上的位置，并添加/修改网站的各种功能，而无需向网站添加代码。

在本教程中，我将解释如何为 WordPress 创建和自定义小部件插件。

插件创建

WordPress 插件是基于代码的组件，开发人员可以在 WordPress 网站上安装和激活。 WordPress 通过循环获取所有已安装的插件，并将它们列在 WordPress 管理的相关选项卡上。

打开wp-content/plugins文件夹。创建一个新目录并将其命名为“ wpblog ”。如果您愿意，可以为此文件夹选择任何其他名称。

在wpblog文件夹中，创建一个名为“ wpblog-plugin.php ”的新文件，并在文件中添加以下插件描述注释：

/*插件名称: Wpblog Plugin For WidgetPlugin URI: https://wpblog.com/Description: Wpblog Plugin for widgetVersion: 1.0*/ 123456 /*插件名称: Wpblog Plugin For Widget插件 URI: https://wpblog.com/描述: Wpblog 小部件插件版本: 1.0 */

保存您的文件。此时，插件wpblog-plugin.php文件已准备好运行！好吧，目前，该插件不执行任何操作，但 WordPress 可以识别它。要检查这一点，请转到 WordPress 管理，然后进入插件菜单。您可以看到该插件出现在已安装插件列表中：

小部件创建

接下来，我将为 WordPress 创建小部件插件。该小部件将是一个 PHP 类，扩展了核心 WordPress 类 WP_Widget。

类 wp_blog_plugin 扩展 WP_Widget { 函数 wp_blog_plugin() { 父级::WP_Widget(false, $widget_name = __('Wpblog Widget', 'wp_widget_plugin') ); } 函数形式($instance) { if( $instance) { $text = esc_attr($instance['text']); $textarea = esc_textarea($instance['textarea']); } else { $text = ''; $textarea = ''; } ?> <!– 这是出现在小部件区域的 HTML 表单 –> <p> <label for="<?php echo $this->get_field_id('text'); ?>"><? php _e('文本：', 'wp_widget_plugin'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text') ); ?>" type="text" value="<?php echo $text; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('textarea' ); ?>"><?php _e('文本区域:', 'wp_widget_plugin'); ?></label> <textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea' ); ?>"><?php echo $textarea; ?></textarea> </p> <?php } // 更新函数更新数据库输入字段中的插入值 function update($new_instance, $old_instance) { $instance = $old_instance; // 用于在数据库中插入数据的字段 $instance['text'] = strip_tags($new_instance['text']); $instance['textarea'] = strip_tags($new_instance['textarea']);返回$实例； } // 显示小部件值 function widget($args, $instance) { extract( $args ); $text = $instance['text']; $textarea = $instance['textarea'];回显$before_widget； echo '<div class="widget-text wp_widget_plugin_box">'; // 条件检查 if( $text ) { echo '<p class="wp_widget_plugin_text">'.$text.'</p>'; } if( $textarea ) { echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>'; } 回显'</div>';回显$after_widget； }}// 注册 widgetadd_action('widgets_init', create_function('', 'return register_widget("wp_blog_plugin");')); 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152类 wp_博客_插件 延伸 WP_Widget {功能 wp_博客_插件( ) {父:: WP_Widget (假, _ $小部件名称 = __ ( 'Wpblog 小部件' , 'wp_widget_plugin' ） ） ； } 功能 形式（ $实例） { 如果（ $实例） { $文本 = esc_attr ( $ instance [ '文本' ] ) ; $文本区域 = esc_textarea ( $ instance [ 'textarea' ] ) ; } 别的 { $文本 = '' ; $文本区域 = '' ; } ？ > < ！ — 这 是 HTML表单出现在_ _ 小部件区域 — > <p> <标签= " < ? php 回声 $this- > get_field_id ( '文本' ) ; ?> >> < ?php _e ( '文本：' , 'wp_widget_plugin' ) ; ?> < /标签> <输入类= “widefat” id = " <?php 回声 $this- > get_field_id ( '文本' ) ; ？> ” 名称= " <?php 回声 $this- > get_field_name ( '文本' ) ; ？> ” 类型= “文本” 值= " <?php 回声 $文本； ？> ” / > < / p > < p > <标签= “ <?php 回声 $this- > get_field_id ( 'textarea' ) ; ?> >> < ?php _e ( '文本区域：' , 'wp_widget_plugin' ) ; ?> < /标签> < textarea class = "widefat" id = " <?php 回声 $this- > get_field_id ( 'textarea' ) ; ？> ” 名称= " <?php 回声 $this- > get_field_name ( 'textarea' ) ; ?> >> < ?php 回声 $文本区域； ? > </textarea> </p> < ? _ _ _ php } // 更新函数更新数据库中输入字段的插入值 功能 更新（ $ new_instance ， $旧实例） { $实例 = $旧实例； // 用于在数据库中插入数据的字段$ instance [ 'text' ] = strip_tags ( $ new_instance [ '文本' ] ) ; $实例[ '文本区域' ] = strip_tags ( $ new_instance [ 'textarea' ] ) ;返回 $实例； } // 显示小部件值 功能 小部件（ $ args ， $实例） {提炼（ $参数 ） ； $文本 = $实例[ '文本' ] ; $文本区域 = $实例[ '文本区域' ] ;回声 $ before_widget ;回声 '<div class="widget-text wp_widget_plugin_box">' ; // 条件检查if ( $文本 ） {回声 '<p class="wp_widget_plugin_text">' 。 $文本. '</p>' ; }如果（ $文本区域 ） {回声 '<p class="wp_widget_plugin_textarea">' 。 $文本区域. '</p>' ; }回显 '</div>' ;回声 $ after_widget ; } } // 注册小部件add_action ( 'widgets_init' , 创建函数（ '' ， '返回register_widget("wp_blog_plugin");' ） ） ；

上述（相当长）代码的结果如下：

代码说明

函数 wp_blog_plugin() { 父::WP_Widget(false, $widget_name = __('Wpblog Widget', 'wp_widget_plugin') ); } 123功能 wp_博客_插件( ) {父:: WP_Widget (假, _ $小部件名称 = __ ( 'Wpblog 小部件' , 'wp_widget_plugin' ） ） ； }

上面的代码片段是定义小部件名称的构造函数的一部分。我只会向其中添加一行代码。

函数形式($instance) { if( $instance) { $text = esc_attr($instance['text']); $textarea = esc_textarea($instance['textarea']); } else { $text = ''; $textarea = ''; } ?> <!– 这是出现在 wdiget 区域的 Html 表单 –> <p> <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e ('文本：', 'wp_widget_plugin'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text') ); ?>" type="text" value="<?php echo $text; ?>" /> </p> <p> <label for="<?php echo $this->get_field_id('textarea' ); ?>"><?php _e('文本区域:', 'wp_widget_plugin'); ?></label> <textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea' ); ?>"><?php echo $textarea; ?></textarea> </p> <?php } 1234567891011121314151617181920功能 形式（ $实例） { 如果（ $实例） { $文本 = esc_attr ( $ instance [ '文本' ] ) ; $文本区域 = esc_textarea ( $ instance [ 'textarea' ] ) ; } 别的 { $文本 = '' ; $文本区域 = '' ; } ？ > < ！ — 这 是 Html形式出现在_ 数字区 — > <p> <标签= " < ? php 回声 $this- > get_field_id ( '文本' ) ; ?> >> < ?php _e ( '文本：' , 'wp_widget_plugin' ) ; ?> < /标签> <输入类= “widefat” id = " <?php 回声 $this- > get_field_id ( '文本' ) ; ？> ” 名称= " <?php 回声 $this- > get_field_name ( '文本' ) ; ？> ” 类型= “文本” 值= " <?php 回声 $文本； ？> ” / > < / p > < p > <标签= “ <?php 回声 $this- > get_field_id ( 'textarea' ) ; ?> >> < ?php _e ( '文本区域：' , 'wp_widget_plugin' ) ; ?> < /标签> < textarea class = "widefat" id = " <?php 回声 $this- > get_field_id ( 'textarea' ) ; ？> ” 名称= " <?php 回声 $this- > get_field_name ( 'textarea' ) ; ?> >> < ?php 回声 $文本区域； ? > </textarea> </p> < ? _ _ _ php }

上面的代码片段在 WordPress 管理中创建了小部件。这是输入数据（将在网站上显示）的位置。

函数更新($new_instance, $old_instance) { $instance = $old_instance; // 用于在数据库中插入数据的字段 $instance['text'] = strip_tags($new_instance['text']); $instance['textarea'] = strip_tags($new_instance['textarea']);返回$实例； update() 函数非常简单，更新每个字段。 function widget($args, $instance) { extract( $args ); $text = $instance['text']; $textarea = $instance['textarea'];回显$before_widget； echo '<div class="widget-text wp_widget_plugin_box">'; // 条件检查 if( $text ) { echo '<p class="wp_widget_plugin_text">'.$text.'</p>'; } if( $textarea ) { echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>'; } 回显'</div>';回显$after_widget； } 123456789101112131415161718192021222324功能 更新（ $ new_instance ， $旧实例） { $实例 = $旧实例； // 用于在数据库中插入数据的字段$ instance [ 'text' ] = strip_tags ( $ new_instance [ '文本' ] ) ; $实例[ '文本区域' ] = strip_tags ( $ new_instance [ 'textarea' ] ) ;返回 $实例； }更新（ ） _ 功能 是 真的很简单， 和 更新每个字段。功能 小部件（ $ args ， $实例） {提炼（ $参数 ） ； $文本 = $实例[ '文本' ] ; $文本区域 = $实例[ '文本区域' ] ;回声 $ before_widget ;回声 '<div class="widget-text wp_widget_plugin_box">' ; // 条件检查if ( $文本 ） {回声 '<p class="wp_widget_plugin_text">' 。 $文本. '</p>' ; }如果（ $文本区域 ） {回声 '<p class="wp_widget_plugin_textarea">' 。 $文本区域. '</p>' ; }回显 '</div>' ;回声 $ after_widget ; }

上面的widget()函数为访问者输出网站上的内容。要进一步自定义此功能，您可以包含 CSS 类和特定标签以匹配主题显示元素。代码非常简单，您只需检查变量是否已设置即可。如果失败然后尝试打印它，您将收到一条错误消息。

结论

正如您所看到的，为 WordPress 创建和自定义小部件插件并不复杂。我讨论了如何创建输入字段。在接下来的帖子中，我将介绍更复杂的字段类型和显示选项。

如果您需要有关代码的进一步帮助或想加入讨论，请发表评论，我会尽快回复您。