小竞 (编辑)
wordpress小部件是优秀的自定义工具。您可以使用它来添加文本、社交媒体按钮、横幅、页面或任何其他元素，以扩展您的网站功能。
从技术上讲，它们是一小段代码，您可以将其拖放到wordpress网站的侧边栏（或其他区域，取决于您的主题）中进行显示。
正如我们所说，它们很棒。
有时，现有的小部件恰好是您所需的。但有时，您可能希望它们以某种方式运行或稍微不同的外观。
幸运的是，您可以从头开始开发自定义wordpress小部件并将其实施到您的网站上。或者将其收集到与多个wordpress主题兼容的插件中。
更好的消息是，创建wordpress自定义小部件非常简单。
创建自定义wordpress小部件的4个步骤
以下是您需要做的：
创建自定义wordpress小部件时可以预期的情况
wordpress和php听起来很吓人，但当您将它们结合在一起时，情况会变得更加令人生畏。
但是，现实情况却完全不同。您只需要wordpress和php，就可以在短时间内为您的网站创建一个定制的小部件。
好处
在wordpress中创建自定义小部件有两种方法：
- 您可以编辑function.php文件，或者
- 您可以使用插件开发小部件
如果您对某种方法不太熟悉，您总可以切换到另一种方法。此外，您还可以在本地环境中测试小部件，然后再将其实施到主站点上。
您可以将小部件用于各种目的。从展示最新产品到创建特殊活动或优惠的宣传意识，您可以做很多事情来扩展现有wp小部件的基本功能。这在处理具有有限默认小部件的wordpress主题构建器和网站开发人员时尤其有用。
此外，由于小部件（显然！）是定制的，您可以做出所有创意决策。小部件的外观和放置位置完全取决于您。
问题
在开始开发自定义小部件之前，您需要考虑一些问题。可以将其视为规划会议。正确处理这些问题将有助于您更有效地创建自己的编码领域，而处理不当将使其非常麻烦。
问题在于长期规划并不总是容易的。您必须确定小部件的目的，构思使您的小部件独特的方法，以及准确确定您希望在何处实施您的小部件，等等。
同时，也需要对wordpress和php有基本的了解。否则，一切都会超出您的理解范围，并且在编写代码时可能会出现错误。因此，在开始开发小部件之前，您必须熟悉基础知识。
第1步 – 了解创建自定义wordpress小部件的要求
wordpress是如此受欢迎，以至于连网络托管服务都提供定制的wordpress计划以吸引更多客户，而且很容易明白为什么。它对seo友好，易于管理，安全且免费，但事实上，wordpress高度可定制无疑是其最大的卖点。
这包括创建个性化小部件的能力，这可以使您更轻松地管理您的网站。
有大约18个功能可用于创建自定义小部件。但为了让本文简明扼要，我们将重点介绍wp小部件类中的以下四个主要元素来创建您的小部件。这包括：
- _construct() – 这是构造函数，允许您定义小部件的参数。它决定了您的小部件在管理面板中的外观。
- widget() – 它包含小部件的输出。它处理您的函数并在您的网站前端显示html代码。
- form() – 它确定wordpress仪表板中的小部件设置。在这里，您可以设置表单字段以从小部件的数据库中检索选项值。
- update() – 这使您可以更新小部件设置，之后它们被保存到数据库中。
当然，您还有很多其他选项可以确保额外的功能，但上述四个是任何小部件工作的最低要求。
创建wordpress备份
在进行下一步之前，首先创建整个wordpress网站的完全备份。此外，您可以使用wordpress子主题来防止主题出现故障或其他潜在问题。
第2步 – 开发一个插件以粘贴小部件代码
当您创建wordpress小部件时，您有两个选择：
- 创建一个新的插件来粘贴小部件代码
- 直接将预算代码粘贴到主题的functions.php文件中
在本文中，我们将重点介绍如何使用插件在wordpress中创建一个自定义小部件。一旦您激活此插件，小部件将列在wordpress仪表板的小部件区域中。
提示：在您的wordpress网站的本地安装（或暂存环境）中创建插件。只有在您运行测试以确保其正常工作后，才将其放置在您的实际网站上。这样，即使出现错误，您也不必担心实时故障。
以下是您所需的步骤。
下载一个文本编辑器
创建wordpress插件的第一步是下载一个文本编辑器。
ios用户可以下载nova，而pc用户（以及ios用户）可以使用dreamweaver。
添加您的插件
打开wp-content/plugins文件夹。这将是您添加插件的主文件夹。
在此文件夹中创建一个新目录。虽然您可以根据需要为此目录命名，但在本文中我们将其称为“widget-plugin”。
接下来，创建一个名为“directory-name.php”的新文件（在我们的情况下，它将是“widget-plugin.php”）。打开此文件。
我们建议为您创建的每个插件使用一个新文件夹，即使它只是一个单独的文件，以避免混淆。
添加您的代码
您必须在此阶段添加您的第一行代码。
wordpress对插件有一个非常具体的定义。以下是它在其语言中的外观：
<?php
/*
插件名称：插件名称
插件链接：https://–preciseuri_of_page_describing_plugin_and_updates
描述：插件的简要描述。
版本：插件的版本号，例如1.0
作者：插件作者的名称
作者链接：https://–preciseuri_of_the_plugin_author
许可：gpl2等“slug”许可名称
*/
当你修改这段代码时，输入你选择的插件名称、链接、描述和其他细节，它将如下所示：
<?php
/*
插件名称：我的小部件插件
插件链接：https://–precisewww.wpexplorer.com/create-widget-plugin-wordpress/
描述：这个插件添加了一个自定义小部件。
版本：1.0
作者：john smith
作者链接：https://–precisewww.wpexplorer.com/create-widget-plugin-wordpress/
许可：gpl2
*/
交叉检查插件是否已创建
在输入代码后保存文件。恭喜！你现在已经创建了一个插件。
该插件目前不会做任何事情，但这不是我们的目标。我们的目标是让wordpress识别它。
要交叉检查插件是否实际存在，请转到wordpress的主仪表板，然后点击插件。如果你的插件出现在下拉列表中，说明一切正常，现在可以激活它。
如果没有出现，请重复第2步的说明。
第3步- 在wordpress中创建小部件
最后，进入本文的有趣部分！
现在，这一切对你来说可能看起来很复杂，但如果你仔细阅读每个方面，它实际上并不复杂。
第3步是关于创建小部件本身。这是一个扩展核心wp类wp_widget的php类。以下是如何定义小部件：
// 小部件类
class my_custom_widget extends wp_widget {
// 主要构造函数
public function __construct() {
/* … */
}
// 小部件表单（用于后台）
public function form( $instance ) {
/* … */
}
// 更新小部件设置
public function update( $new_instance, $old_instance ) {
/* … */
}
// 显示小部件
public function widget( $args, $instance ) {
/* … */
}
}
// 注册小部件
function my_register_custom_widget() {
register_widget( ‘my_custom_widget’ );
}
add_action( ‘widgets_init’, ‘my_register_custom_widget’ );
还记得我们在第1步提到的四个关键要素吗？我们将在这里使用它。
如果你仔细阅读代码，你会发现四个要素：
您可以复制并粘贴上面的代码，以便为wordpress提供创建小部件所需的所有信息（当然，在更改相关字段后）。
我们将更详细地解释这四个元素，以便更准确地了解它们的工作原理。让我们快速浏览一下：
元素＃1：构造函数
您的代码的构造函数部分定义了小部件名称及其主要参数。它看起来像这样：
// 主构造函数
public function __construct() {
parent::__construct(
‘my_custom_widget’,
__( ‘my custom widget’, ‘text_domain’ ),
array(
‘customize_selective_refresh’ => true,
)
);
}
您是否看到小部件名称周围的__和（）符号？wordpress使用它们进行翻译，这也是为什么我们建议使用它们使您的主题完全可翻译。
‘customize_selective_refresh’在您在外观 > 自定义下编辑小部件时刷新小部件。因此，只有小部件会被刷新，而不是整个页面。
元素＃2：form()
form()函数负责在wordpress管理区域中创建小部件表单设置。这是您在网站上显示的数据的输入位置。您可以向小部件表单设置中添加文本区域或字段、选择框、复选框等。
点击外观，然后点击小部件，或者点击外观，然后点击自定义，再点击小部件以访问此功能。
请查看下面的form函数代码：
// 小部件表单（用于后端）
public function form( $instance ) {
// 设置小部件默认值
$defaults = array(
‘title’ => ”,
‘text’ => ”,
‘textarea’ => ”,
‘checkbox’ => ”,
‘select’ => ”,
);
// 使用默认值解析当前设置
extract( wp_parse_args( ( array ) $instance, $defaults ) ); ?>
<?php // 小部件标题 ?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>“><?php _e( ‘widget title’, ‘text_domain’ ); ?></label>
<input class=”widefat“ id=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>“ name=”<?php echo esc_attr( $this->get_field_name( ‘title’ ) ); ?>“ type=”text“ value=”<?php echo esc_attr( $title ); ?>“ />
</p>
<?php // 文本框 ?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘text’ ) ); ?>“><?php _e( ‘文本：’, ‘text_domain’ ); ?></label>
<input class=”widefat“ id=”<?php echo esc_attr( $this->get_field_id( ‘text’ ) ); ?>“ name=”<?php echo esc_attr( $this->get_field_name( ‘text’ ) ); ?>“ type=”text“ value=”<?php echo esc_attr( $text ); ?>“ />
</p>
<?php // 多行文本框 ?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘textarea’ ) ); ?>“><?php _e( ‘多行文本：’, ‘text_domain’ ); ?></label>
<textarea class=”widefat“ id=”<?php echo esc_attr( $this->get_field_id( ‘textarea’ ) ); ?>“ name=”<?php echo esc_attr( $this->get_field_name( ‘textarea’ ) ); ?>“><?php echo wp_kses_post( $textarea ); ?></textarea>
</p>
<?php // 复选框 ?>
<p>
<input id=”<?php echo esc_attr( $this->get_field_id( ‘checkbox’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘checkbox’ ) ); ?>” type=”checkbox” value=”1″ <?php checked( ‘1’, $checkbox ); ?> />
<label for=”<?php echo esc_attr( $this->get_field_id( ‘checkbox’ ) ); ?>“><?php _e( ‘复选框’, ‘text_domain’ ); ?></label>
</p>
<?php // 下拉菜单 ?>
<p>
<label for=”<?php echo $this->get_field_id( ‘select’ ); ?>“><?php _e( ‘选择’, ‘text_domain’ ); ?></label>
<select name=”<?php echo $this->get_field_name( ‘select’ ); ?>“ id=”<?php echo $this->get_field_id( ‘select’ ); ?>“ class=”widefat“>
<?php
// 你的选项数组
$options = array(
” => __( ‘选择’, ‘text_domain’ ),
‘option_1’ => __( ‘选项1’, ‘text_domain’ ),
‘option_2’ => __( ‘选项2’, ‘text_domain’ ),
‘option_3’ => __( ‘选项3’, ‘text_domain’ ),
);
// 循环遍历选项，并将每个选项添加到下拉菜单中
foreach ( $options as $key => $name ) {
echo ‘‘. $name . ‘</option>’;
} ?>
</select>
</p>
<?php }
在这段代码中，我们只添加了五个字段 – 标题、文本、文本区域、复选框和选择框 – 到小部件中。
在这里，首先要定义小部件的默认设置。然后下一个函数将使用保存的默认设置来解析小部件的当前设置。我们也不要忘记为每个字段添加html代码。
您可能已经注意到，我们在添加表单字段时使用了esc_attr()。这完全是为了安全目的，以确保您网站上的每个用户定义的变量都得到了很好的过滤。
第三个元素：update()
好消息是wordpress核心开发人员已经创建了一个非常强大的api，大大简化了这个功能。因此，您只需要复制并粘贴以下代码来更新每个字段：
// 更新小部件设置
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[‘title’] = isset( $new_instance[‘title’] ) ? wp_strip_all_tags( $new_instance[‘title’] ) : ”;
$instance[‘text’] = isset( $new_instance[‘text’] ) ? wp_strip_all_tags( $new_instance[‘text’] ) : ”;
$instance[‘textarea’] = isset( $new_instance[‘textarea’] ) ? wp_kses_post( $new_instance[‘textarea’] ) : ”;
$instance[‘checkbox’] = isset( $new_instance[‘checkbox’] ) ? 1 : false;
$instance[‘select’] = isset( $new_instance[‘select’] ) ? wp_strip_all_tags( $new_instance[‘select’] ) : ”;
return $instance;
}
仔细检查每个设置，如果不为空，则保存到数据库中。
在代码中可以找到很多wp_strip_all_tags()和wp_kses_post()函数的编写。这主要是为了在将数据添加到数据库之前对其进行清理。
第一个wp_strip_all_tags()函数除了基本文本以外，移除了所有内容，可以用于任何以字符串作为最终值的字段。另一方面，第二个wp_kses_post()函数用于移除除基本html标签以外的所有标签，包括div、span、链接、图片等。
然而，您必须确保提交到数据库的内容没有任何恶意代码。
元素#4：widget()
widget()函数输出对访问者可见的网站内容。您可以自定义此函数以包含与您的主题匹配的特定标签，以及css类。
以下是它的样子：
//显示小部件
public function widget( $args, $instance ) {
extract( $args );
//检查小工具选项
$title = isset( $instance[‘title’] ) ? apply_filters( ‘widget_title’, $instance[‘title’] ) : ”;
$text = isset( $instance[‘text’] ) ? $instance[‘text’] : ”;
$textarea = isset( $instance[‘textarea’] ) ?$instance[‘textarea’] : ”;
$select = isset( $instance[‘select’] ) ? $instance[‘select’] : ”;
$checkbox = ! empty( $instance[‘checkbox’] ) ? $instance[‘checkbox’] : false;
// wordpress核心before_widget钩子（始终包含）
echo $before_widget;
//显示小部件
echo ‘<div class=”widget-text wp_widget_plugin_box“>’;
// 如果定义了小工具标题，显示标题
if ( $title ) {
echo $before_title . $title . $after_title;
}
// 显示文本字段
if ( $text ) {
echo ‘<p>‘ . $text . ‘</p>’;
}
// 显示文本域字段
if ( $textarea ) {
echo ‘<p>‘ . $textarea . ‘</p>’;
}
// 显示选择字段
if ( $select ) {
echo ‘<p>‘ . $select . ‘</p>’;
}
// 如果复选框为真，显示某些内容
if ( $checkbox ) {
echo ‘<p>something awesome</p>’;
}
echo ‘</div>’;
// wordpress核心after_widget挂钩（始终包括）
echo $after_widget;
}
您可以轻松修改上述代码以满足您的需求。只需检查变量是否已设置。如果没有设置，打印时会出错。
第四步 – 在您的网站上查看自定义小工具
您已添加了代码并修改了每个功能，使小工具完全符合您的要求。
您现在想要检查您的努力是否得到了回报吗？
将小工具添加到侧边栏
在wordpress的主仪表板上，转到外观并点击小工具。您将在可用小工具列表中看到新创建的我的小工具插件。您可以将小工具拖放到侧边栏。
在表单字段中添加文本
唯一剩下的事情是填写表单字段。您可以添加文本，然后点击保存按钮保存更改。前往前端，查看您的小工具实时运行！
完成！转到您的网站，查看您的自定义小工具实时运行。
