WordPress REST API的许多重要用途之一是改进插件或主题设置屏幕。 添加自定义REST API端点后，获取在AJAX中保存的设置并在AJAX中保存设置(即，在不更新其他页面的情况下保存设置)会更容易。
使用WordPress REST API而不是admin-ajax不仅可以提高性能，还可以使WordPress核心完成大部分清理和验证任务。
在本文中，您将逐步完成创建安装表单页面的各个步骤，并使用WordPress REST API处理表单。
添加设置页
在开始设计设置页面之前，必须将菜单项或菜单项添加到WordPress仪表板中。 可以在这里配置安装表单。 此页要求加载CSS文件和JavaScript文件。
这是入门班：
在此类中，使用add_menu_page创建顶级菜单，但如果需要，也可以使用add_sub_menu创建子菜单。
这里有两件事需要注意。
首先是如何使用wp_localize_script ()。 此函数提供了一种在每次加载由第一个参数指定的脚本时使用PHP创建全局范围JavaScript变量的方法。 最初是为了向浏览器提供翻译的本地化字符串而设计的。 这就是我们使用的部分。 提供可翻译的成功和错误消息。 但是，它也可以用于传递当前站点的URL，在本例中为动态值，如REST API端点和随机数。 所有这些功能在JavaScript中都是必需的，但每个站点都不同，因此必须使用PHP立即生成。
另外，请注意，脚本的根URL是作为对类的依赖关系传递的。 因为此URL可能用于插件或主题的其他位置，并且您想在一个位置修改或过滤整个插件。
实例化类时，必须指定URL。 这一点的好处是，在根插件文件中使用plugin_dir_url ()会生成正确的URL。 让我们看看设置这个的主要插件文件。
现在，我们使用“init”操作加载这样的类。 已确保REST API端点的占位符。 插件屏幕准备好后，使用它保存数据。
表单设置
我不会太深入设定表格本身，为此我可以写整个系列。 相反，我们只添加了两个字段来显示重要内容。 然后，可以编写JavaScript将表单值发送回服务器。
这是render_admin方法，使用带有两个字段的字段进行更新。
确保每个字段都有ID。 这允许您使用jQuery.val ()搜索每个对象并获取值。 这对于维护HTML语义也很重要，因为字段标签的属性必须与字段ID相对应。 将ID传递给表单，并添加了ID为“反馈”的空元素。 可以在此动态放置保存和错误消息。
同样，表格可能会更复杂，但让我们开始吧。
添加REST API路由
在编写JavaScript并将数据通过AJAX发送到服务器之前，必须提供REST API路由。 为此写了很多，但值得通过一条具有GET和POST端点的非常简单的自定义路由。
业务逻辑分离
我确信REST API路由的类只涉及处理请求，而不涉及这些请求所需的业务逻辑。 在这种情况下，“业务逻辑”是指读写实际设置。 首先，让我们创建一个可以处理这个问题的类。
此类是get_option (和update_option ) (具有几个基本验证)的简单包。 此类具有get_settings ) )方法。 此方法检索保存的值(wp_parse_args ) )来填充我们所保存数组的所有缺少索引。 另外，还有save_settings ()方法。 此方法确保只有要保存的数组的白名单键位于要保存的最后一个数组中。
REST API路由
现在，就有了可以用任何方法寻址的读写方法。 让我们创建一个用作rest风格的接口的REST API路由。 根包括GET端点和POST端点。
如果您从未创建自定义的REST API端点，建议您阅读文档。 我们还介绍了与本主题相关的Torque文章和WordPress TV talks :精选的链接列表。
这是REST API路由类。
回调函数非常简单，因为它只包装了上一节中创建的设置类。 了解配置类在某些设计中没有检查或清理操作的权限是很重要的。 但是，权限检查和清理非常重要。
这些REST API端点提供了这一点。 POST方法在每个字段中指定sanitize_callback参数。 这样，在数据到达之前可以相信是安全的。 此外，这两个路由都使用“permissions_callback”，因此只能从具有“管理_选项”功能的路由访问。 跳过其中一个步骤是危险的。
现在，您只需通过“rest_api_init”操作实例化此类，使端点存在。 这也是为实现此目的而修改的主要插件文件。
//*
* Plugin Name: Apex Plugin
p>*/add_action( 'init', function(){
$assets_url = plugin_dir_url( __FILE__ );
//Setup menu
if( is_admin() ){
new Apex_Menu( $assets_url );
}
//Setup REST API
});
在“设置”页面中使用REST API
现在我们有了端点，让我们在设置页面上使用它们。我们将编写两个AJAX调用。第一个将获取保存的设置，并使用这些设置更新表单。这将由页面加载触发。第二个将由表单保存按钮触发，并将用于更新设置。
在本教程的前面，我们告诉WordPress在此管理页面上加载JavaScript文件。现在该使用该文件了。
这是第一个AJAX调用的样子。它的工作是获取保存的设置并使用以下内容更新表单：
请注意此处的两个重要事项。首先，我使用之前通过wp_localize_script()设置的APEX全局对象来告诉jQuery请求什么URL。另外，我正在使用beforeSend()方法添加包含该对象中随机数的标头。否则，在API请求处理期间将不会认为用户已登录，因此我们的权限检查将失败。
API请求完成后，使用jQuery.val()将设置添加到表单字段。为了安全起见，我使用Object.hasOwnProperty()确保它们在响应中。这是很重要的验证，但是随着设置数量的增长而无法很好地扩展-这是我使用VueJS进行这种事情的众多原因之一。
现在，当您加载页面时，它应该获取已保存的设置(此时可能是默认值)并更新表单。很好，但是所有这些的真正意义在于能够更新设置。因此，我们将需要第二个AJAX调用，该调用将在提交表单时运行POST请求。
这是带有保存AJAX调用的更新后的JavaScript：
第二个调用非常相似，除了它使用POST并包装在与表单的commit事件绑定的闭包中。这样，它在表单提交时运行，我们可以防止该事件的默认操作发生。
您应该在这里查看成功和错误方法。它们用于将文本(位于APEX.string对象中)本地化的消息添加到#feedback元素中。该对象中的“错误”消息非常笼统。但是大多数失败的请求都会生成一条带有消息的响应。因此，如果已设置，我们将改用它。
自己去实践吧
一旦有了一个良好的起点，就可以更新表单中的字段以符合您的需求。另外，您可能应该使用JavaScript框架来简化此过程，因为随着表单的复杂性增加，您将越来越难以使用jQuery进行管理并且会变得更加简单，并且如果您使用VueJS或React ，会提供更好的用户体验。
本文向您展示了使用WordPress REST API 添加 WordPress设置页面的所有部分。我们添加了一个菜单页面，将我们的JavaScript和CSS入队，添加了一个用于读取和写入设置的类，添加了两个REST API端点作为这些设置的RESTful和安全接口，并使用jQuery AJAX根据我们的设置表单更新了设置。代码量很多，但我希望您已经了解了如何使用这些基础知识来改进自己的设置页面，或者从头开始构建自己的设置页面并从那里发展。
拓展阅读：创建WordPress插件设置页面的5种方法