您想在 WordPress 中创建自己的自定义小部件吗？小部件允许您将非内容元素添加到侧边栏或网站的任何小部件就绪区域中。
您可以使用小部件向您的网站添加横幅、广告、新闻通讯注册表单和其他元素。
在本文中，我们将向您展示如何逐步创建自定义 WordPress 小部件。
注意：本教程适用于学习 WordPress 开发和编码的 DIY WordPress 用户。
什么是 WordPress 小部件？
WordPress 小部件包含可添加到网站侧边栏或小部件就绪区域的代码段。
将它们视为可用于向网站添加不同元素和功能的模块。
默认情况下，WordPress 附带一组标准小部件，您可以将它们与任何 WordPress 主题一起使用。有关更多详细信息，请参阅有关如何在 WordPress 中添加和使用小部件的初学者指南。
WordPress 还允许开发人员创建自己的自定义小部件。
许多高级 WordPress 主题和插件都带有自己的自定义小部件，您可以将它们添加到侧边栏。
例如，您可以将联系表单、自定义登录表单、照片库、电子邮件列表注册表单等添加到侧边栏，而无需编写任何代码。
话虽如此，让我们看看如何在 WordPress 中轻松创建自己的自定义小部件。
在 WordPress 中创建自定义小部件之前
如果您正在学习 WordPress 编码，那么您将需要一个本地开发环境。这使您可以自由地学习和测试东西，而不必担心您的网站是否上线。
您可以使用 MAMP 在 Mac 上本地安装 WordPress，或使用 WAMP 在 Windows 上安装 WordPress。
如果您已经有一个实时站点，那么您可以将其移动到本地主机。有关更多详细信息，请参阅我们的指南，了解如何将实时 WordPress 网站移至本地。校准服务器。
之后，有多种方法可以在 WordPress 中添加自定义小部件代码。
理想情况下，您可以创建一个特定于站点的插件并将您的小部件代码粘贴到那里。这使您可以向 WordPress 添加不依赖于您的 WordPress 主题的代码。
您还可以将代码粘贴到主题的functions.php 文件中。但是，它仅在该特定主题处于活动状态时才可用。
您可以使用的另一个工具是代码片段插件，它允许您轻松地将自定义代码添加到您的 WordPress 网站。
在本教程中，我们将创建一个简单的小部件来迎接访问者。这里的目标是熟悉 WordPress 小部件类。
准备好了吗？让我们开始吧。
创建基本的 WordPress 小部件
WordPress 附带了一个内置的 WordPress Widget 类。每个新的 WordPress 小部件都扩展了 WordPress 小部件类。
共有18种方法WordPress 开发者手册中提到的可与 WP Widget 类一起使用。
但是，为了本教程的目的，我们将重点关注以下方法。
- __construct() ：这是我们创建小部件 ID、标题和描述的部分。
- widget：这是我们定义小部件生成的输出的地方。
- form：这部分代码是我们为后端创建带有小部件选项的表单的地方。
- 更新：这是我们在数据库中保存小部件选项的部分。
>
让我们研究以下代码，我们在 WP_Widget 类中使用了这四个方法。
// 创建小部件
类 wpb_widget 扩展 WP_Widget {
// 构造部分
函数 __construct() {
}
// 创建小部件前端
公共函数小部件（$args，$instance）{
}
// 创建小部件后端
公共函数形式（$实例）{
}
// 更新小部件，用新实例替换旧实例
公共职能更新时（$new_instance，$old_instance）{
}
// wpb_widget 类到此结束
}
由 WPCode 与 ❤️ 主办
在 WordPress 中一键使用
最后一段代码是我们实际注册小部件并将其加载到 WordPress 中的地方。
函数 wpb_load_widget() {
register_widget(‘wpb_widget’);
}
add_action( ‘widgets_init’, ‘wpb_load_widget’ );
由 WPCode 与 ❤️ 主办
在 WordPress 中一键使用
现在让我们将所有这些放在一起来创建一个基本的 WordPress 小部件。
您可以将以下代码片段复制并粘贴到您的functions.php 文件、特定于站点的插件中或使用代码片段插件。
// 创建小部件
类 wpb_widget 扩展 WP_Widget {
函数 __construct() {
父级::__构造(
// 你的小部件的基本 ID
‘wpb_widget’,
// 小部件名称将出现在 UI 中
__(‘WPBeginner Widget’, ‘wpb_widget_domain’),
// 小部件描述
array( ‘description’ => __( ‘示例小部件基础d WPBeginner 教程’, ‘wpb_widget_domain’ ), )
）；
}
// 创建小部件前端
公共函数小部件（$args，$instance）{
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
// 之前和之后的小部件参数由主题定义
回声 $args[‘before_widget’];
if ( !empty( $title ) )
回显 $args[‘before_title’] 。 $标题。 $args[‘after_title’];
// 这是运行代码并显示输出的地方
echo __( ‘你好，世界！’, ‘wpb_widget_domain’ );
回声 $args[‘after_widget’];
}
// 小部件后端
公共函数形式（$实例）{
if ( isset( $instance[ ‘标题’ ] ) ) {
$title = $instance[ ‘标题’ ];
}
别的 {
$title = __( ‘新标题’, ‘wpb_widget_domain’ );
}
// 小部件管理表单
?>
<label for="get_field_id( ‘标题’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name="get_field_name( ‘标题’ ); ?>” type=”text” value=””/>
<?php
}
// 更新小部件，用新实例替换旧实例
公共函数更新（$new_instance，$old_instance）{
$实例=数组();
$instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
返回$实例；
}
// wpb_widget 类到此结束
}
// 注册并加载小部件
函数 wpb_load_widget() {
register_widget('wpb_widget');
}
add_action( 'widgets_init', 'wpb_load_widget' );
由 WPCode 与 ❤️ 主办
在 WordPress 中一键使用
将代码添加到 WordPress 后，您需要转到 WordPress 管理面板中的外观 » 小部件页面。
然后，单击“加号”添加块图标并搜索“WPBeginner Widget”并选择新的小部件。
这个小部件只有一种形式要填写的字段。
您可以添加文本并单击“更新”按钮来存储您的更改。
现在，您可以访问 WordPress 网站来查看正在运行的自定义小部件。
在 WordPress 经典编辑器中添加自定义小部件
如果您使用经典的小部件编辑器向您的网站添加新小部件，则过程将类似。
可用小部件列表中将有一个名为“WPBeginner Widget”的新小部件。您需要将此小部件拖放到侧边栏中。
然后，输入标题并单击“保存”以保存您的小部件设置。
您的新自定义小部件现在将在您的网站上上线。
现在，让我们再次研究一下代码。
首先我们注册了“wpb_widget”并加载了我们的自定义小部件。之后我们定义了该小部件的功能以及如何显示小部件后端。
最后，我们定义了如何处理对小部件所做的更改。
现在您可能想问一些事情。例如，wpb_text_domain 的用途是什么？
WordPress 使用“gettext”来处理翻译和本地化。这个 wpb_text_domain 和 __e 告诉“gettext”使字符串可用于翻译。要了解更多信息，请参阅我们的指南，了解如何找到可翻译的 WordPress 主题。
如果您要为主题创建自定义小部件，则可以将 wpb_text_domain 替换为主题的文本域。
或者，您可以使用 WordPress 翻译插件轻松翻译 WordPress 并创建多语言 WordPress 网站。
我们希望本文能帮助您了解如何轻松创建自定义 WordPress 小部件。您可能还想查看我们关于域名和网络托管之间差异的指南，以及我们的专家精选的最佳免费网站托管比较。
如果您喜欢这篇文章，请订阅我们的 YouTube 频道WordPress 视频教程。您还可以在 Twitter 和 Facebook 上找到我们。
网 
网