小工具

小部件将内容和功能添加到小部件区域(也称为侧边栏). 小工具区域为用户提供了一种自定义其站点的方法。小部件区域可以出现在多个页面上,也可以只出现在一个页面上。您的主题可能只有一个或多个小部件区域。

您可以使用小部件区域的一些方法示例如下:

  • 使用小部件布局主页。这使得网站所有者可以决定主页的每个部分应该显示什么。
  • 创建一个页脚,用户可以使用自己的内容进行自定义。
  • 向博客添加可自定义的侧边栏。

小部件是输出一些HTML的PHP对象。同一类型的小部件可以在同一页面上多次使用(例如文本小部件)。小部件可以将数据保存在数据库中(选项表中)。

当您创建一种新的小部件时,它将出现在用户的管理屏幕中外观>小工具。用户可以将小部件添加到小部件区域,并从WordPress管理员自定义小部件设置。

内置与独立小部件

默认WordPress安装中包含一组小部件。除了这些标准小部件之外,还可以通过主题或插件包含额外的小部件。内置于主题或插件中的小部件的一个优点是提供额外的功能并增加小部件的数量。

缺点是,如果主题被更改或插件被停用,插件或主题小部件的功能将丢失。然而,如果主题或插件被重新激活,小部件中的数据和首选项将保存到选项表中并恢复。

如果在主题中包含一个小部件,则只有在该主题处于活动状态时才能使用它。如果用户决定更改主题,他们将无法访问该小部件。然而,如果小部件包含在插件中,用户可以更改其主题,而不会失去对小部件功能的访问权限。

小工具剖析

从视觉上看,小部件包括两个区域:

  1. 标题区域
  2. 小工具选项

例如,以下是管理员和前端内置文本小部件的布局:

示例可编辑小工具
管理区域中的小部件表单。
网站访问者看到的小部件。
网站访问者看到的小部件。

此小部件的HTML输出如下所示:

<div id=“text-7”class=“widget widget_text”><div class=“widget-wrap”><h4 class=“widgettitle”>这是一个文本小部件</h4><!--。小标题--><div class=“textwidget”>我可以把HTML放在这里<a href=“http://google.com/“>搜索我</a></div><!--。文本小部件--></div><!--。小部件捕获--></div><!--#文本-7-->

每个小部件都有自己的方式输出与所显示数据相关的HTML。小部件的包装标签由显示它的小部件区域定义。

创建类似内置文本小部件的小部件所需的PHP代码如下所示:

<?php(电话)类My_Widget扩展了WP_Widget{公共函数__construct(){父级::__construct(“my-text”,//基本ID“我的文本”//名称);add_action('widgets_init',function(){register_widget(“我的小部件”);});}public$args=数组(“before_title”=>“<h4 class=“widgettitle”>”,“after_title”=>“</h4>”,'before_widget'=>'<div class=“widget-wrap”>',“after_widget”=>“</div></div>”,);公共功能小部件($args,$instance){echo$args[“小部件之前”];if(!空($instance['title']){echo$args[“标题之前”]。apply_filters(“widget_title”,$instance[“title”])$args['after_title'];}echo'<div class=“textwidget”>';echo esc_html__($instance['text'],'text_domain');echo“</div>”;echo$args[‘after_widget’];}公共函数窗体($instance){$title=!空($instance['title'])$实例[“标题”]:esc_html__(“”,“文本域”);$text=!空($instance['text'])$实例['text']:esc_html__('','text_domain');?><p><label for=“<?php echo esc_attr($this->get_field_id('title'));?>”><?php echo esc_html__('标题:','文本域');?></标签><input class=“widefat”id=“<?php-echo esc_attr($this->get_field_id('title'));?>”name=“<?hp-echo esc_attr($this->get_field_name('titel'))”;?>“type=”text“value=”</p><p><label for=“<?php echo esc_attr($this->get_field_id('Text'));?>”><?php echo esc_html__('文本:','文本域');?></标签><textarea class=“widefat”id=“<?php-echo esc_attr($this->get_field_id('text'));?>”name=“<?hp-echo esc_attr($this->get_field_name('text`));”type=“text”cols=“30”rows=“10”><?php echo esc_attr($text);?></文本区域></p><?php(电话)}公共函数更新($new_instance,$old_instance){$instance=数组();$instance['title']=(!empty($new_instance['title']))?strip_tags($new_instance['title']):'';$instance['text']=(!empty($new_instance['text']))$new_instance[“文本”]:“”;return$instance;}}$my_widget=新的my_widget();

本文稍后将详细解释上述代码。

开发小部件

要创建和显示小部件,需要执行以下操作:

  1. 通过扩展标准来创建小部件的类WP_小工具类及其一些函数。
  2. 注册小部件,以便在小工具屏幕。
  3. 确保你的主题至少有一个小部件区域在其中添加小部件。

你的小工具类

这个WP_小工具类位于wp包含/class-wp-widget.php

<?php(电话)类My_Widget扩展了WP_Widget{公共函数__construct(){//实际窗口小部件进程}公共功能小部件($args,$instance){//输出小部件的内容}公共函数表单($instance){//在admin中输出选项表单}公共函数更新($new_instance,$old_instance){//处理要保存的小部件选项}}

这些功能的文档都可以在小部件类代码中找到:

  1. 建造:在管理员中设置小部件的描述、名称和显示宽度。
  2. 小装置:处理小部件选项并在页面上显示HTML。这个$个参数参数提供了可用于显示小部件标题类和小部件内容类的HTML。
  3. 形式:显示将用于设置小部件选项的表单。如果您的小部件没有任何选项,您可以跳过此功能(尽管即使它是空的,也最好包含它)。
  4. 更新:将小部件选项保存到数据库。如果您的小部件没有任何选项,您可以跳过此功能(尽管即使它是空的,也最好包含它)。

注册小工具

这个注册表小部件()函数用于注册小部件。

使用widgets_init挂钩调用此函数:

<?php(电话)add_action(“widgets_init”,“wpdocs_register_widgets”);函数wpdocs_register_widgets(){register_widget(“我的小部件”);}

包装小部件的HTML,以及标题和小部件内容的类,是在您使用注册小部件区域时指定的寄存器sidebar().

示例

示例文本小部件

根据本文开头的示例构建文本小部件。首先,您将设置一个小部件类来扩展WP_小工具类。

在类构造函数中,您将调用父构造函数并将小部件的基ID和名称传递给它。同样在类构造函数中,您将钩住小部件初始化注册小部件的操作。

接下来,您将声明创建小部件时将使用的参数。您必须定义四个参数,标题之前,标题之后(_T),before_widget之前、和桥后。这些参数将定义包装小部件标题和小部件本身的代码。

定义参数后,您将定义小部件函数。此函数采用两个参数$个参数数组,并且$实例它是一个函数,用于处理表单中的选项并在站点前端显示小部件的HTML。在上面的示例中,小部件函数只输出小部件标题,同时通过小部件标题过滤器。然后输出一个简单的小部件包装器和小部件文本字段的内容。如示例中所述,您可以从存储在$实例.

接下来,您将定义表单函数。此函数采用一个参数,$实例,并输出用户用于在小部件管理屏幕中创建小部件的表单。在上面的示例中,函数通过定义$标题$文本变量并将其设置为先前输入的值(如果这些值存在)。然后它输出一个简单的表单,其中包含标题的文本字段和文本内容的文本区域。

最后,您将定义更新函数。此函数采用两个参数,$新实例$old_instance(旧实例),并负责在提交小部件时使用新选项更新小部件。在这里,您只需定义$实例作为空数组。然后将标题和文本键设置为$新实例值(如果存在)。然后你回来$实例.

最后,在定义了以上所有内容后,您可以实例化新的小部件类并测试您的工作。

示例小工具

<?php(电话)/***添加Foo_Widget小部件。*/类Foo_Widget扩展WP_Widget{/***向WordPress注册小部件。*/公共函数__construct(){父级::__construct(“foo_widget”,//基本ID“Foo_Widget”,//名称数组(“description”=>__(“A Foo Widget”,“text_domain”)//参数);}/***控件的前端显示。**@请参阅WP_Widget::Widget()**@param array$args小工具参数。*@param array$instance已从数据库中保存值。*/公共功能小部件($args,$instance){提取($args);$title=应用过滤器(“widget_title”,$instance[“title”]);echo$before_widget;if(!空($title)){echo$before_title$标题$标题之后;}echo __(“你好,世界!”,“text_domain”);echo$after_widget;}/***后台小部件窗体。**@请参阅WP_Widget::form()**@param array$instance以前从数据库中保存了值。*/公共函数窗体($instance){if(isset($instance['title'])){$title=$instance[“标题”];}其他{$title=__(“新标题”,“text_domain”);}?><p><label for=“<?php echo$this->get_field_name('title');?>”><?php_e('标题:');?></标签><input class=“widefat”id=“<?php echo$this->get_field_id('title');?>”name=“<?php echo$this->get_field_name('titel');”>“type=”text“value=”<?php-echo esc_attr($title);?>>“/></p><?php(电话)}/***保存小部件表单值时对其进行消毒。**@请参阅WP_Widget::update()**@param array$new_instance刚刚发送要保存的值。*@param array$old_instance以前从数据库中保存过值。**@return array已更新要保存的安全值。*/公共函数更新($new_instance,$old_instance){$instance=数组();$instance['title']=(!empty($new_instance['title']))?strip_tags($new_instance['title']):'';return$instance;}}//类Foo_Widget

然后可以在widgets_init挂钩中注册此示例小部件:

<?php(电话)//注册Foo_Widget小部件add_action('widgets_init','register_foo');函数register_foo(){register_widget(“Foo_widget”);}

命名空间示例

如果将PHP 5.3与命名空间一起使用,则应直接调用构造函数,如下例所示:

<?php(电话)命名空间a\b\c;类My_Widget_class扩展\WP_Widget{公共函数__construct(){父级::__construct('baseID','name');}// ... 其余功能}

并使用以下命令调用注册小部件:

<?php(电话)//注册Foo_Widget小部件add_action('widgets_init','register_my_widget');函数寄存器_my_widget(){注册表小部件('a\b\c\My_widget_Class');}

请参见堆栈交换的这个答案了解更多详细信息。

特殊注意事项

如果您想在另一个模板文件中而不是在侧栏中使用小部件,可以使用小部件(_widget)以编程方式显示。该函数接受小部件类名。将小部件类名传递给函数,如下所示:

<?php the_title();?><div class=“content”><?php the_content();?></div><!--。内容--><div class=“widget-section”><?php the_widget('My_widget_Class');?></div><!--。小部件部分-->

如果您需要在页面的特定区域中使用小部件,例如在站点首页的某个部分中显示表单旁边的事件列表,或者在导航旁边的兆菜单上显示电子邮件捕获表单,您可能希望使用此方法。