首页 视频课程 主题开发课程第11章、小工具 WordPress小工具设置项制作方法

WordPress小工具设置项制作方法

2023-06-11 / 381阅

WordPress小工具设置项制作方法

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

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

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

WordPress 小工具设置项制作步骤

  1. 首先,你需要在 WordPress 主题目录下创建一个新的 PHP 文件,文件名为 widget-name.php,其中 widget-name 是你为小工具起的名字。这个文件将负责小工具的后台设置项。

  2. 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() 方法中,我们编写设置项保存逻辑,这些方法的具体实现将在下面的代码中介绍。

  1. 继续在 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 加载时注册小工具。

  1. 接下来,在 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_widgetafter_widget 标签,以及 before_titleafter_title 标签。

  1. 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 转义。

  1. 最后,在 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

大家谈论
    我的见解
    目录