如何在 WordPress 上创建自定义小部件 

WordPress 小工具（Widgets）可以在网站的指定区域（如侧边栏）添加功能模块，例如文本、页面链接、社交按钮等元素。比如，可以在侧边栏放置一个新闻订阅表单。

这些小工具可以增强网站功能，而无需更改主要内容，让能够灵活添加横幅广告、导航工具等模块。

WordPress 默认自带了一些小工具，例如：归档、日历、分类、标签云、页面、Meta 信息等。此外，还可以自定义小工具，加入个性化内容，比如嵌入社交媒体动态、最近文章或 HTML 标签。

在本文中，我们会展示 三种方法 创建自定义 WordPress 小工具，并讲解如何在特定文章或页面中添加或移除小工具。

什么是 WordPress 小工具？

WordPress 小工具是可以添加到网站特定区域（如侧边栏或页脚）的内容模块。这些小工具本质上是输出 HTML 的 PHP 对象，可实现多种功能，例如显示最新文章、嵌入社交媒体动态、展示分类或添加自定义菜单。

小工具可以在同一小工具区域内重复使用，为网站设计提供了灵活性。根据主题的不同，小工具区域的数量也会有所变化。

此外，WordPress 小工具还能将配置设置保存在数据库中，使其行为和外观管理更加方便。

WordPress 小工具的用途及添加位置

小工具可以以多种方式增强您网站的功能。例如：

• 添加搜索框，方便用户查找内容。
• 添加邮件订阅表单，收集用户注册信息。
• 显示最新文章或热门内容，吸引访问者的注意力。
• 添加社交媒体关注按钮或展示最近动态的实时内容流。
• 显示作者简介，与读者建立联系。
• 列出网站分类，简化导航体验。
• 如果网站做活动，可以使用日历小工具展示即将举行的日期。
• 对于电商网站，小工具可以实现产品筛选等功能。

小工具的添加位置

小工具可以放置在网站的任何“小工具区域”中。大多数主题常见的小工具区域包括侧边栏和页脚，但某些主题可能提供额外的空间。这些区域都可以通过 WordPress 小工具界面进行管理，为网站布局提供简单易用的自定义选项。

为什么要在 WordPress 页面或文章中添加小工具？

在 WordPress 页面或文章中添加小工具，可以通过相关内容增强网站功能。例如：

• 推广优惠活动，吸引用户关注。
• 增加邮件订阅表单，帮助扩大订阅用户群体。
• 添加额外的菜单或搜索框，优化网站导航体验。

此外，小工具还可以用来投放广告或突出显示新内容，同时不会干扰用户的正常浏览。

WordPress 中自定义小工具的工作原理

WordPress 中的自定义小工具通过使用 WP Widget 类实现功能，开发者可以利用它在网站上显示动态内容。每个小工具通过定义特定的函数来确定其输出和设置。

要创建一个功能性小工具，通常需要以下四个关键函数：

1. __construct() 函数
初始化小工具并定义其参数。

2. widget() 函数
确定小工具向用户展示的内容。

3. form() 函数
在 WordPress 管理后台中创建设置界面，用于配置小工具选项。

4. update() 函数
保存用户对设置的更改，确保小工具显示最新信息。

WP Widget 类中提供了大约 20 个函数可供使用，但专注于以上四个核心函数即可实现一个功能性自定义小工具。如需高级功能，可以参考 WordPress 开发者文档以获取更多特性。

如何创建一个 WordPress 自定义小工具？

在某些主题中，默认情况下可能没有提供添加小工具的选项。如果需要这个功能，可以通过手动添加自定义代码来实现。可以使用 SSH 或 SFTP 两种方式操作，任选其一即可。以下是一个默认 WordPress 主题缺少小工具选项的截图（可以插入截图）。

步骤一：启用小工具支持

1. 打开主题文件夹
使用 SSH 或 SFTP 连接到服务器，进入主题所在的文件夹路径：
wp-content/themes/您的主题文件夹/

2. 编辑 functions.php 文件
找到并打开主题中的 functions.php 文件。

3. 添加支持小工具的代码
在 functions.php 文件中，添加以下代码以启用小工具支持：

function theme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Sidebar Widget Area', 'textdomain'),
        'id'            => 'sidebar-1',
        'description'   => __('Add widgets here.', 'textdomain'),
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'theme_widgets_init');

4. 保存并上传文件
保存修改后的文件，并通过 SSH 或 SFTP 上传到服务器。

步骤 2：创建自定义小部件

接下来，让我们创建一个可以在新侧边栏中显示的自定义小部件。在侧边栏注册代码后，将以下代码添加到functions.php文件中。

class My_Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'my_custom_widget', // Base ID
            __('My Custom Widget', 'text_domain'), // Name
            array('description' => __('A Custom Widget for Homepage', 'text_domain')) // Args
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        if (!empty($title)) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<p>Hello, this is my custom widget!</p>'; // Customize this content
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></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
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

说明：此代码定义了一个新的小部件类My_Custom_Widget，其中包括：

• widget()：将在侧边栏中显示的内容。自定义此部分以显示您想要的任何内容。
• form()：一种让用户为小部件设置标题的表单。
• update()：更新时保存表单数据。

函数register_my_custom_widget()注册此小部件，使其在外观>小部件中可用。

步骤 3：将侧边栏添加到主题模板

现在，我们需要修改模板文件（例如index.html或home.html）以显示新的侧边栏。通常可以在主题的主文件夹中找到这些文件。

1. 打开主题文件夹中的 index.html 或 home.html。

2. 用以下代码替换文件中的内容，确保在想要显示的位置添加动态侧边栏占位符：

<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->

    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

说明：此代码添加了页眉、主内容区域和页脚。此处添加的关键内容是动态侧边栏
(<!– wp:dynamic-sidebar {“id”:”custom-sidebar”} /–>)，它显示已注册的侧边栏和自定义小部件。

步骤 4：验证 wp-admin 中的更改

完成上面步骤后：

1. 转到WordPress 管理区域的外观 > 小部件。

2. 应该会看到自定义侧边栏，其中有“我的自定义小部件”选项可用。

3. 将小部件添加到自定义侧边栏，自定义标题，然后保存小部件。

保存后，去网站的前端刷新验证小部件是否按预期显示。

如何在 WordPress 中插入小部件？

要在 WordPress 中添加小部件，可以按照下面步骤操作：

1. 进入小部件界面
从 WordPress 信息中心，导航至外观 → 小部件。这将打开小部件管理屏幕。

2. 选择小部件位置
进入小部件界面后，会看到可以添加小部件的不同区域。这些区域取决于你的 WordPress 主题。单击要编辑区域旁边的箭头以展开它。

3. 使用区块添加内容
选择小部件区域后，可以使用熟悉的区块编辑器添加内容。只需单击加号图标即可插入区块，从内置 WordPress 区块或插件中的任何自定义区块中进行选择。添加后，可以调整区块的设置，例如要显示的帖子数量或特色图片选项。

4. 保存更改
对所有内容的外观满意后，单击“更新”按钮保存更改。小部件就立即在网站上生效了。

如果没有看到小工具菜单，则可能正在使用 WordPress 块主题，该主题通过站点编辑器处理设计。

如何删除 WordPress 中的小部件？

对于这个示例，我们可以删除之前添加的小部件。选择块小部件，单击工具栏中的三个点菜单，然后选择“删除”即可。

如何使用 WordPress 定制器来管理小部件？

还可以通过 WordPress Customizer 管理小部件，这样就可以在网站上实时预览更改。操作方法如下：

• 在 WordPress 仪表板中导航至外观→自定义。

• 在定制器侧栏中，选择“Widgets”。

• 从可用选项列表中选择小部件位置（只会看到你正在预览的当前页面上可见的位置）。

• 使用提供的界面添加或编辑小部件。

• 可以单击实时预览上的铅笔图标直接自定义特定的小部件。

如何在特定帖子或页面上显示 WordPress 小部件？

默认情况下，添加到网站的任何小部件都会显示在小部件可用空间的所有区域。例如，如果将小部件放在主侧边栏中，它将显示在具有侧边栏的每个页面上。

但是，如果只想在特定内容上显示小部件，例如特定的帖子、页面，甚至是类别或标签。

如果用块小部件，则可以使用添加可见性条件的插件（例如“块可见性” ）控制它们的出现位置。

安装并激活插件后，导航到小部件界面并找到想要自定义的小部件。

当编辑这个小部件时，侧边栏设置中会出现一个新的可见性部分。

• 在这个区域中，可以设置何时显示或隐藏小部件的规则，例如仅在特定帖子上显示它。

结论

创建自定义 WordPress 小工具可以给网站添加特定功能，例如个性化内容展示、改进的导航功能，或者自定义工具，如社交媒体动态或搜索栏。