如何使用 WordPress Setting API
像素鱼丸
03-18
143
0

使用 WordPress 的 Setting API 是在插件或主题中创建和管理设置页面的标准方式。它提供了一种结构化、安全的方式来保存和获取用户配置的选项。


✅ 一、Setting API 简介

WordPress 的 Setting API 允许你:

  • 创建设置页面(Settings Page)
  • 注册设置字段(Settings Field)
  • 验证和保存设置数据
  • 使用表单提交来更新设置

✅ 二、基本步骤

1. 注册设置(register_setting)


function my_plugin_register_settings() {
    register_setting( 'my-plugin-settings-group', 'my_plugin_option_name' );
}
add_action( 'admin_init', 'my_plugin_register_settings' );
  • my-plugin-settings-group:设置组名称,用于分组
  • my_plugin_option_name:存储的选项名(通常与数据库中的 option_name 对应)

2. 添加设置页面(add_settings_section)


function my_plugin_add_settings_section() {
    add_settings_section(
        'my-plugin-main-section', // ID
        'My Plugin Settings',     // 标题
        'my_plugin_section_callback', // 回调函数(可选)
        'my-plugin'               // 页面 slug
    );
}
add_action( 'admin_init', 'my_plugin_add_settings_section' );

3. 添加设置字段(add_settings_field)


function my_plugin_add_settings_field() {
    add_settings_field(
        'my_plugin_field_id',       // ID
        'My Plugin Field',          // 标题
        'my_plugin_field_callback', // 回调函数
        'my-plugin',                // 页面 slug
        'my-plugin-main-section'    // section ID
    );
}
add_action( 'admin_init', 'my_plugin_add_settings_field' );

4. 回调函数(回调函数)

a. 设置字段显示内容


function my_plugin_field_callback() {
    $option = get_option('my_plugin_option_name');
    echo "<input type='text' name='my_plugin_option_name' value='" . esc_attr($option) . "' />";
}

b. 设置部分说明(可选)


function my_plugin_section_callback() {
    echo '<p>这是我的插件设置部分。</p>';
}

5. 创建设置页面(settings page)


function my_plugin_settings_page() {
    add_options_page(
        'My Plugin Settings',      // 页面标题
        'My Plugin',               // 菜单标题
        'manage_options',          // 权限
        'my-plugin',               // 页面 slug
        'my_plugin_render_settings_page'
    );
}
add_action('admin_menu', 'my_plugin_settings_page');
function my_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('my-plugin-settings-group'); // 输出隐藏的 nonce
            do_settings_sections('my-plugin');           // 输出所有设置段
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

✅ 三、完整示例代码


// 注册设置
function my_plugin_register_settings() {
    register_setting( 'my-plugin-settings-group', 'my_plugin_option_name' );
}
add_action( 'admin_init', 'my_plugin_register_settings' );
// 添加设置段
function my_plugin_add_settings_section() {
    add_settings_section(
        'my-plugin-main-section',
        'My Plugin Settings',
        'my_plugin_section_callback',
        'my-plugin'
    );
}
add_action( 'admin_init', 'my_plugin_add_settings_section' );
// 添加设置字段
function my_plugin_add_settings_field() {
    add_settings_field(
        'my_plugin_field_id',
        'My Plugin Field',
        'my_plugin_field_callback',
        'my-plugin',
        'my-plugin-main-section'
    );
}
add_action( 'admin_init', 'my_plugin_add_settings_field' );
// 设置部分回调
function my_plugin_section_callback() {
    echo '<p>这是我的插件设置部分。</p>';
}
// 设置字段回调
function my_plugin_field_callback() {
    $option = get_option('my_plugin_option_name');
    echo "<input type='text' name='my_plugin_option_name' value='" . esc_attr($option) . "' />";
}
// 添加设置页面
function my_plugin_settings_page() {
    add_options_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin',
        'my_plugin_render_settings_page'
    );
}
add_action('admin_menu', 'my_plugin_settings_page');
function my_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>My Plugin Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('my-plugin-settings-group');
            do_settings_sections('my-plugin');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

✅ 四、获取设置值


$my_option = get_option('my_plugin_option_name');
echo esc_html($my_option);

✅ 五、验证和过滤设置值(可选)

你可以通过 register_setting 的第三个参数添加一个验证回调函数:


register_setting(
    'my-plugin-settings-group',
    'my_plugin_option_name',
    'my_plugin_validate_callback'
);
function my_plugin_validate_callback($input) {
    return sanitize_text_field($input); // 或其他验证逻辑
}

✅ 六、注意事项

  • 所有设置都保存在 WordPress 的 wp_options 表中。
  • 使用 settings_fields()do_settings_sections() 来生成表单结构。
  • 设置页面建议使用 add_options_page() 创建,这样会出现在“设置”菜单下。

✅ 七、进阶功能

  • 多个设置组(groups)
  • 多个设置页面
  • 自定义字段类型(如 checkbox, select, textarea)
  • 使用 sanitize_callback 过滤输入

如果你需要更复杂的设置(比如多选项卡、多组设置),可以使用 add_settings_section()add_settings_field() 多次调用。


? 总结

步骤 函数 作用
注册设置 register_setting() 注册选项
添加设置段 add_settings_section() 添加设置区域
添加设置字段 add_settings_field() 添加具体设置项
渲染设置页面 add_options_page() 创建设置页面
获取设置值 get_option() 读取用户设置

如果你需要我帮你写一个完整的插件结构或者处理某个特定字段类型(比如 Checkbox、Select 等),也可以告诉我 ?

收藏
打赏
详解 WordPress 的评论设置
上一篇
Mirage 主题 v2.93.0 发布
下一篇

发表评论

注册不是必须的

像素鱼丸
153 文章
0 评论
4 喜欢
最新文章

Mirage 主题 v3.6.0 发布

下载地址 Gitee下载地址:https://gitee.com/vthemecn/mirage/releases/tag/v3.6.0 Github下载地址:https://github.com/vthemecn/mirage/releases/tag/v3.6.0 更新内容 – feat 新增导航菜单悬浮顶部切换设置 – feat 增加隐藏登录按钮的设置 – feat 增加在前台显示登录按钮的 […]

网站的 Cookie 弹窗

在当前的法规环境下(截至2026年4月),一个合规的Cookie弹窗设计必须遵循“透明、公平、明确”的原则,核心是确保用户拥有真正的选择权。 以下是现阶段设计合规Cookie弹窗的关键要点: 现阶段合规设计要点 禁止默认同意 弹窗出现时,所有非必要Cookie的选项都不能被预先勾选。用户必须通过一个明确的、主动的动作(如点击按钮或勾选方框)来表示同意。 提供平等的选择权 “拒绝”按钮必须在视觉上和 […]

网页设计中 banner、jumbotron、hero 都有什么区别

在网页设计和开发中,banner、jumbotron、hero 这些词通常指代页面顶部最引人注目的区域,但它们在具体含义和使用场景上有所区别。 🎯 核心概念辨析 Banner (横幅/条幅广告) 这是一个非常广泛的术语,通常指网页上任何矩形的广告或信息区域,可以出现在页面的顶部、侧边或底部。它更偏向于广告或信息展示的功能。 Jumbotron (巨幕) 这个词源于 Bootstrap 等前端框架, […]

宝塔 Nginx 拦截了 WordPress 返回 404 的状态

REST api 接口中,有段代码返回404,但是没有正常返回错误json: $wp_response = new \WP_REST_Response(array('error'=>'没有找到数据')); $wp_response->set_status(404); return $wp_response; 返回内容是: <html> <head><tit […]
生成中...
扫描二维码
扫描二维码
用户登录