如何在 WordPress 中创建设置页面

如果您正在创建 WordPress 插件，您可能想知道如何为其创建设置页面。 WordPress 是否为此提供了某种“标准”机制？ 是否有任何新工具或框架可用于创建现代设置页面？ 创建设置页面是个好主意吗？ 好吧，今天我们将讨论所有这些，我将回答您的问题。

决定，而不是选择

WordPress是一个旨在使网络民主化的平台。 这句话听起来很不错，但同时又很抽象，是一种表达“我们希望任何人都能够使用 WordPress”的方式。 而且，不管你信不信，设置页面可能是，事实上在许多情况下，这是一个障碍。 不相信我？ 嗯，WordPress 自己说：

在做出决定时，这些是我们首先考虑的用户。 这种考虑的一个很好的例子是软件选项。 每次您给用户一个选项时，您都是在要求他们做出决定。 当用户不关心或不理解该选项时，这最终会导致挫败感。 作为开发人员，我们有时会觉得为所有事情提供选项是一件好事，你永远不会有太多的选择，对吧？ 最终，这些选择最终成为技术选择，普通最终用户不感兴趣的选择。作为开发人员，我们有责任做出明智的设计决策，避免将技术选择的重心放在我们的最终用户身上。

WordPress哲学

因此，在创建设置页面之前，请仔细考虑您希望为用户提供的选项、为什么希望他们能够访问这些选项以及这样做是否必要或有用。

过滤器作为替代品

即使我知道我不应该为我的用户提供太多选择，我也不得不承认，作为一名开发人员，我并不总是很容易做出决定而不是提供一个选项。 有时我希望我的用户能够选择，尽管我知道我公开的选项很复杂。 那么在这些情况下我该怎么办？ 我是否遵循 WordPress 的建议并限制我的高级用户？

幸运的是，WordPress 为这个困境提供了一个完美的解决方案：过滤器。 当您设计一个插件并希望您的（高级）用户能够调整其行为时，不要创建设置页面或类似的东西。 相反，通过 WordPress 的过滤机制使您的插件可定制。

如果您使用过滤器，您的大多数用户将享受默认行为（“决定”，还记得吗？），因为他们将使用在您的过滤器中设置的默认值的插件，而高级用户将能够修改这些通过钩子做出决定（因此您也有“选择”）。 两全其美的！

WordPress 设置

好的，既然我们已经意识到为我们的用户做出决定的重要性，并且已经了解了如何通过过滤器绕过这个限制（如果有必要），那么是时候看看我们如何在 WordPress 中创建一个设置页面了。 因为，是的：有时候我们真的需要让我们的用户选择根据他们的喜好做出决定。

WordPress 中的设置 API

设置 API 是在 WordPress 版本 2.7 中添加的。 这是一组标准化设置页面创建的功能，允许您定义可用的选项、编辑每个选项的用户界面（本质上是表单上的字段）以及如何验证、保存，并检索它们的值。

我认为最好的学习方式是通过示例，所以让我们一步一步地使用设置 API 创建我们的第一个设置页面。

创建新的设置页面

创建设置页面需要做的第一件事是（惊喜，惊喜！）创建一个页面来显示设置。 为此，只需在admin_menu操作期间使用add_options_page函数并注册页面：

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

如您所见，我们使用此功能唯一要做的就是注册一个新页面，该页面将出现在 WordPress设置菜单下，包括其标题、菜单中的名称、用户必须具备的访问权限, 和操作系统。 最后一个参数nelio_render_settings_page是负责渲染所述页面的函数的名称：

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

设置页面本身相对容易创建。 我们只需要添加一个form ，其内容将由 WordPress 半自动生成。 一方面，我们调用settings_fields函数，它基本上在表单中添加了一个随机数以使其“安全”。 接下来，我们要求 WordPress 使用do_settings_sections函数呈现我们为插件创建的所有设置。 最后，我们只需将按钮添加到提交表单。

我们设置页面中的实际设置

接下来，我们必须注册将成为设置页面一部分的每个选项。 为此，我们将使用两个函数： register_setting ，它允许我们指示我们将在数据库中保存设置的名称，以及add_settings_field ，它添加每个单独的选项：

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

前面的代码片段有几件事值得特别注意。 一方面，请注意register_setting函数的第三个参数： nelio_validate_example_plugin_settings 。 这是将被调用以验证用户选择的值的回调函数的名称（请记住，您始终必须验证和清理表单字段）。 这个函数是这样的：

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

我们从$input中检索每个提交的字段并将其清理为$output以便我们确定，无论我们最终保存在数据库中的是什么，都是有效且正确的。

我想关注的第二件事是，我们定义的每个字段还包含一个函数引用，它告诉 WordPress 每个字段应该如何呈现。 例如，我们示例中的字段回调可能是这样的：

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

本质上，所有这些回调所做的是检索他们应该呈现的字段的当前值（使用get_option ）并呈现允许用户设置一个值或另一个值的 HTML（在本例中， input字段为输入text或number ）。

你问最后的结果是什么？ 这：

最后的想法

如您所见，创建设置页面相对简单。 我个人不太喜欢整个过程，因为它非常重复，我们必须一遍又一遍地编写相同的样板代码……但它仍然很容易。

但是，为了进一步简化此过程，有一些在线代码生成器，通过简单的用户界面，您可以在设置页面上定义所需的不同字段。 几个例子是：

• WP 设置 API
• WordPress选项页面生成器

而且，当然，总是有可能使用 React 等技术创建设置页面……但这是另一个时代的故事，你不觉得吗？

Rima Kruciene 在 Unsplash 上的特色图片。