WordPress小工具设置项制作方法

2023-06-11 / 452阅

WordPress小工具设置项制作方法

WordPress小工具（Widgets）是一种用于在博客侧边栏、页脚等位置展示特定内容的小块区域，类似于网站内容的模块化组合。在 WordPress 中，我们可以通过添加小工具来增加博客的功能和可扩展性。

小工具通常由一个前端部件和一个后台设置项组成。前端部件是显示在博客网页上的内容，后台设置项则允许管理员配置小工具的外观和功能，这就是我们常说的“小工具设置项”。

下面，我们将介绍如何在 WordPress 中创建小工具的设置项，并提供示例代码来帮助你更好地了解小工具设置项的制作方法。

WordPress 小工具设置项制作步骤

首先，你需要在 WordPress 主题目录下创建一个新的 PHP 文件，文件名为 widget-name.php，其中 widget-name 是你为小工具起的名字。这个文件将负责小工具的后台设置项。
在 widget-name.php 文件中，你需要定义一个继承自 WP_Widget 类的类，这个类负责小工具的前端部件和后台设置项的显示和处理。

class Widget_Name extends WP_Widget {

    // 构造函数
    function __construct() {
        $widget_options = array(
            'classname' => 'widget_name',
            'description' => 'Widget short description.'
        );
        parent::__construct(
            'widget_name', // 小工具ID
            'Widget Name', // 小工具名称
            $widget_options // 小工具选项
        );
    }

    // 前端部件显示函数
    function widget($args, $instance) {
        // 部件显示逻辑
    }

    // 后台设置项显示函数
    function form($instance) {
        // 设置项表单显示逻辑
    }

    // 后台设置项保存函数
    function update($new_instance, $old_instance) {
        // 设置项保存逻辑
    }
}

在上面的代码中，我们定义了一个名为 Widget_Name 的类，继承自 WP_Widget 类。在类的构造函数中，我们为小工具设置了一个 ID 和名称，以及短描述。这些选项将在 WordPress 后台中显示。

在 widget() 方法中，我们编写小工具前端部件的显示逻辑，在 form() 方法中，我们编写后台设置项表单的显示逻辑，在 update() 方法中，我们编写设置项保存逻辑，这些方法的具体实现将在下面的代码中介绍。

继续在 widget-name.php 文件中，我们需要使用 register_widget() 函数来注册小工具，并将其添加到 WordPress 中。这个函数接受一个参数，即小工具的类名。一般来说，我们在主题的 functions.php 文件中执行这个函数。

function register_widget_name() {
    register_widget('Widget_Name');
}
add_action('widgets_init', 'register_widget_name');

在上面的代码中，我们定义了一个 register_widget_name 函数，并在 add_action() 函数中使用 widgets_init 钩子，在 WordPress 加载时注册小工具。

接下来，在 widget() 方法中，我们编写小工具前端部件的显示逻辑。这个方法接受两个参数，即 $args 和 $instance。$args 是一个关联数组，包含了小工具在侧边栏中的位置和名称等信息；$instance 是一个关联数组，包含了小工具的后台设置项中保存的值。

下面是一个简单的示例，显示一个标题和一段文本：

function widget($args, $instance) {
    echo $args['before_widget'];
    if (!empty($instance['title'])) {
        echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
    }
    if (!empty($instance['text'])) {
        echo '<p>' . apply_filters('widget_text', $instance['text']) . '</p>';
    }
    echo $args['after_widget'];
}

在上面的代码中，我们使用 echo 输出 HTML 代码，可以看到，在前后添加了 $args 数组中定义的 before_widget 和 after_widget 标签，以及 before_title 和 after_title 标签。

在 form() 方法中，我们编写小工具后台设置项表单的显示逻辑。这个方法接受一个参数 $instance，即小工具的后台设置项中保存的值。

下面是一个简单的示例，显示一个文本框和一个输入框，并将输入框的值保存在小工具设置项中：

function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $text = !empty($instance['text']) ? $instance['text'] : '';
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
        <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr($title); ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Text:</label>
        <textarea class="widefat" rows="10" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_html($text); ?></textarea>
    </p>
    <?php
}

在上面的代码中，我们使用了 PHP 的 if 语句来判断字段值是否为空，使用 esc_attr() 和 esc_html() 函数来防止 XSS 攻击和 HTML 转义。

最后，在 update() 方法中，我们编写小工具设置项保存的逻辑。这个方法接受两个参数，即 $new_instance 和 $old_instance，分别表示小工具新旧设置项的值。在这个方法中，我们可以将新值保存到数据库。

下面是一个简单的示例，保存标题和文本：

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

在上面的代码中，我们使用 PHP 的 strip_tags() 函数来删除输入字符串中的 HTML 标记，防止 XSS 攻击。

代码总结

上面的代码提供了一个简单的示例，让你了解如何在 WordPress 中创建小工具的设置项。在实际开发中，你需要根据具体的需求来自定义小工具的前端部件和后台设置项，实现自己的功能。

同时，你还可以使用 WordPress 提供的一些帮助函数和 API，来提升小工具的交互性和扩展性，例如使用 WP_Query 类查询数据库、使用 add_settings_section() 和 add_settings_field() 函数创建自定义设置项等。

希望本篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。

阅读文章或者观看视频过程中有任何问题，请下方留言或者联系我Q248758228

大家谈论

我的见解

WordPress小工具设置项制作方法