创建自定义WordPress管理页面，第2部分

在本系列的上一教程中，我们开始在自定义管理页面上工作。

最终，我们正在努力实现的目标将展示我们如何使用我们自己的自定义代码以及WordPress API来创建比通过标准API之一自然可用的页面更加灵活的页面。

这并不是说我们应该回避或避免WordPress提供的API。 实际上，我是尽可能多地使用它们的粉丝。 但是，当一个项目出现时，您需要引入其他功能或自定义某种方式的执行方式，则该功能的开发将由您自己决定。

其次，我们还使用诸如单一责任原则之类的原则来演示如何才能为编写的代码提供一种组织良好，面向对象的方法。

不过，在进行下一步之前，让我们回顾一下到目前为止所涵盖的内容。

对于第一篇文章...

回想一下，我们提供了单一责任原则的有效定义：

将因相同原因而发生变化的事物聚集在一起。 分开那些因不同原因而改变的事物。

我们用它来帮助指导组织当前子菜单和子菜单页面的创建。

我们还查看了该插件第一个版本的代码，使其可供下载，并为本教程中将要进行的工作奠定了基础。

如果您没有阅读过上一教程，或者至少没有阅读过代码，则强烈建议您阅读； 否则，您可能会想知道为什么我们要做出一些决定，或者为什么某些代码是按原样组织的。

话虽如此，让我们继续。

开始之前

与我的许多教程一样，我希望在继续之前确保您已启动并运行了所有内容。 对于本教程，您将需要以下内容：

• 当地的发展环境
• WordPress的副本已安装并可以使用
• 已安装并激活了先前教程中的插件副本
• 加载了插件并可以进行其他编辑的IDE

如果以上任何一项都没有道理，请查看上一个教程或本系列文章，以了解如何设置本地开发环境。

至于即将到来的代码，我们将逐步进行介绍。 我将确切说明我们在做什么，并将在本教程中同时提供代码注释和注释，以确保您了解此过程中发生的一切。

创建管理页面

当我们继续本文中的插件时，我们将要做的是：

1. 为继承本地WordPress样式的管理页面创建标记。
2. 介绍用户可以与之交互的选项。
3. 在保存选项之前先对其进行消毒。
4. 检索选项的值并将其设置为等于页面中的值。

在本教程中，我们将重点介绍以下两点。 在下一篇文章中，我们将重点讨论第三点和第四点。

对于那些熟悉Settings API的人来说，这似乎有些过头了。 但是，正如您将在本教程和本系列的其余部分中看到的那样，我们有理由将其分解成较小的部分，这是有原因的。

将其列为我们的行动计划，让我们开始吧。

标记页面

当我们最后离开该特定函数时，代码如下所示：

<?php
class Submenu_Page {

    /**
     * This function renders the contents of the page associated with the Submenu
     * that invokes the render method. In the context of this plugin, this is the
     * Submenu class.
     */
    public function render() {
        echo 'This is the basic submenu page.';
    }
}

现在，我们准备开始创建页面的布局。 每当我为客户端使用插件时，我都将它们称为“视图”。

这并不是要与模型视图控制器范例混淆。 但是我也不称它们为模板，因为在WordPress中，模板是用于在前端显示页面内容的模板。

意见就是如此。

我们要做的第一件事是在插件的admin目录内创建一个views目录。

完成后，我们可以将其命名为settings.php简单名称或更具描述性的名称。 这完全取决于您以及所构建内容的复杂性。 由于这是一个简单的插件，因此我坚持使用简单的名称。

接下来，让我们开始创建基本标记，该标记将提供标准WordPress包装器元素以及页面标题：

<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

    <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">
    </form>

</div><!-- .wrap -->

在此请注意，标题是从一个函数派生的，该函数使用的是从我们首次开始使用插件时开始传递给add_options_page函数的值。 接下来，我们还将使用admin_url函数来表示将在何处发布选项（稍后再讨论）。

在这两种情况下，我们都使用esc_html清理功能来确保网页上不会呈现任何恶意字符串。

这是两个示例，它们在可能的情况下使用任何可用于其预期目的的API函数。 假设一切正常，您的页面应如下所示：

现在，为了将其连接到您的插件，我们需要从上方重新访问该功能。 这意味着该函数现在应如下所示：

<?php
public function render() {
    include_once( 'views/settings.php' );
}

很容易，对吧？ 假设一切设置正确，这是您应该看到的内容：

不，要看的内容不多，但我们将对此进行更改。

添加选项

至此，我们准备添加一个选项。 出于本文的目的，我们将允许用户将某些内容输入到输入文本元素中。 这将使我们了解如何清理信息并最终在前端显​​示它。

为此，我们需要掌握关键信息。 也就是说，我们需要知道将要调用input元素的name属性。 这样我们可以将其正确保存到数据库中。

因此，就本示例而言，假设此消息将用于无条件地显示在每个帖子的顶部。 我们不会在本文中讲到重点，但是在下一篇文章中我们将再次进行讨论。

在您的settings.php视图中，添加以下代码。

<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

	<form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">

		<div id="universal-message-container">
			<h2>Universal Message</h2>

			<div class="options">
				<p>
					<label>What message would you like to display above each post?</label>
					<br />
					<input type="text" name="acme-message" value="" />
				</p>
		</div><!-- #universal-message-container -->
	</form>

</div><!-- .wrap -->

如果此时要查看该页面，则应确切看到期望的内容：一个标签和一个输入框。

保护选件

通常，我会在此处显示一个屏幕截图，但我们还没有完成。 我们需要再介绍两件事。

1. WordPress随机数
2. 提交按钮

现在开始吧。 如果您不熟悉nonce值，建议阅读这篇文章 。 简短的是：

随机数是“一次使用的数字”，可帮助保护URL和表单免于某些类型的滥用，恶意或其他形式的滥用。

在我们的settings.php文件中，添加以下代码块：

<?php
    wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );
    submit_button();
?>

最终，我们的代码的最终版本应如下所示：

<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

	<form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">

		<div id="universal-message-container">
			<h2>Universal Message</h2>

			<div class="options">
				<p>
					<label>What message would you like to display above each post?</label>
					<br />
					<input type="text" name="acme-message" value="" />
				</p>
		</div><!-- #universal-message-container -->

		<?php
			wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );
			submit_button();
		?>

	</form>

</div><!-- .wrap -->

页面的最终版本应如下所示：

至此，我们准备保存选项。 现在，要执行此操作，我们需要验证以下几点：

1. 用户是否有权保存选项？
2. 表单是否传递了有效的随机数？

此外，我们需要：

1. 清理信息以确保没有恶意数据进入数据库。
2. 我们需要能够将这些信息从数据库中提取出来并以表格的形式填充。

最后，我们需要在网站的前端显示它。

结论

因此，在接下来的两篇文章中，我们将专注于做到这一点。

不要忘记，您可以从本文中下载当前状态的插件。 当我们逐步阅读本系列文章时，我将在每篇文章中提供最新版本，以便您可以按照每个教程中涵盖的代码进行修改，并准备可能要在评论中提出的问题。 。

附带说明一下，如果您正在寻找其他实用程序来帮助您构建不断增长的WordPress工具集或用于研究代码并变得更加精通WordPress的代码，请不要忘记查看我们提供的工具Envato市场 。

记住，您可以在个人资料页面上捕获我的所有课程和教程，还可以通过@tommcfarlin 在我的博客和/或Twitter上关注我，在那里我讨论了各种软件开发实践以及如何在WordPress中使用它们。

最后，请不要在下面的Feed中留下任何问题或评论。 我会尽力参与并回答您提出的与该项目有关的每个问题或评论。

翻译自: https://code.tutsplus.com/tutorials/creating-custom-admin-pages-in-wordpress-2--cms-26926