在WordPress插件中,如何使用 settings API 创建选项页面?

2025-01-11 43 0

在WordPress中,使用Settings API创建选项页面通常涉及以下步骤:

  1. 添加设置菜单:使用add_options_page函数添加一个新页面到WordPress管理菜单。
  2. 注册设置:使用register_setting函数注册一个设置组,这样WordPress就可以处理和保存表单数据。
  3. 添加设置部分:使用add_settings_section函数添加一个设置部分到你的选项页面。
  4. 添加设置字段:使用add_settings_field函数添加具体的设置字段到你的设置部分。
  5. 创建表单:在选项页面上创建HTML表单来显示设置字段,并允许用户输入数据。
  6. 保存设置:在表单提交时,WordPress会自动处理保存逻辑。

以下是实现这些步骤的示例代码:

<?php
// 在functions.php文件中或在你的插件文件中添加以下代码

// 1. 添加设置菜单
function my_plugin_add_settings_page() {
    add_options_page(
        'My Plugin Settings', // 页面标题
        'My Plugin', // 菜单标题
        'manage_options', // 权限级别
        'my-plugin-settings', // 页面slug
        'my_plugin_settings_page' // 显示回调函数
    );
}
add_action('admin_menu', 'my_plugin_add_settings_page');

// 2. 注册设置
function my_plugin_register_settings() {
    register_setting(
        'my-plugin-settings-group', // 设置组名称
        'my_plugin_option_name', // 选项名称
        'my_plugin_sanitize_input' // 输入验证回调函数
    );
}
add_action('admin_init', 'my_plugin_register_settings');

// 3. 添加设置部分
function my_plugin_add_settings_section() {
    add_settings_section(
        'my-plugin-settings-section', // ID
        'My Plugin Settings Section', // 标题
        'my_plugin_settings_section_callback', // 回调函数
        'my-plugin-settings' // 页面slug
    );
}
add_action('admin_init', 'my_plugin_add_settings_section');

// 4. 添加设置字段
function my_plugin_add_settings_field() {
    add_settings_field(
        'my-plugin-setting-field', // 字段ID
        'Setting Field', // 字段标题
        'my_plugin_setting_field_callback', // 显示回调函数
        'my-plugin-settings', // 页面slug
        'my-plugin-settings-section' // 设置部分ID
    );
}
add_action('admin_init', 'my_plugin_add_settings_field');

// 5. 创建表单
function my_plugin_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-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// 6. 设置部分回调函数
function my_plugin_settings_section_callback() {
    echo '<p>Enter your settings below:</p>';
}

// 7. 设置字段回调函数
function my_plugin_setting_field_callback() {
    $option = get_option('my_plugin_option_name');
    ?>
    <input type="text" id="my-plugin-setting-field" name="my_plugin_option_name[setting_field]" value="<?php echo isset($option['setting_field']) ? esc_attr($option['setting_field']) : ''; ?>" />
    <?php
}

// 8. 输入验证回调函数
function my_plugin_sanitize_input($input) {
    $sanitized_input = array();
    if (isset($input['setting_field'])) {
        $sanitized_input['setting_field'] = sanitize_text_field($input['setting_field']);
    }
    return $sanitized_input;
}

在这个例子中,我们创建了一个名为"My Plugin Settings"的选项页面,其中包含一个设置部分和一个文本输入字段。用户输入的数据将被保存到数据库中,并且通过my_plugin_option_name选项名称进行访问。记得在创建插件或主题时,替换所有的'my-plugin'和'my_plugin'占位符为你自己的唯一标识符。

相关文章

如何在WordPress插件中使用ajax?
如何通过WordPress函数创建自定义菜单?
在WordPress主题开发中,如何使用WP_Customize_Manager来自定义主题选项?
如何使用WordPress的filter钩子修改输出内容?
如何使用WordPress的action钩子添加自定义JavaScript?
在WordPress插件中,如何使用自定义表单和nonce字段来增强安全性?