如何构建WordPress插件(第2部分)

在我们的 first part of our tutorial series，我们介绍了创建WordPress插件、使用 WordPress Plugin Boilerplate、使用其非常方便的 generator的基础知识，并学习了如何添加、消毒和保存基本输入类型。

如果你错过了那部分，一定要去检查一下。- How to build a WordPress Plugin part 1

在第2部分中，我们将介绍:

• 巩固我们的插件;
• 添加不同的输入类型，如颜色选择器和文件上传;
• 将整个页面划分为多个选项卡;
• 创建实际将对前端/后端执行某些操作的函数;
• 我们插件的最终测试;
• 然后将我们的插件发送到 WordPress存储库小组进行审查.

我们将处理第1部分中的代码基，所以如果您还没有完成，请确保 grab the code from part 1 on GitHub.

使您的插件可翻译(国际化或il18n)

在深入研究代码之前，让我解释一下为什么让插件可以翻译是很重要的。

将插件添加到WordPress存储库将使您成为WordPress社区的一部分-这是巨大的！所以，你可能会明白，很多来自不同国家的人可能会使用它。其中一些人可能英语或你的主要语言不流利。让您的插件可以轻松地被翻译，而不需要触及其核心代码，这是非常有意义的。

plugin boilerplate附带一个 languages 文件夹，您可能还记得在第一部分中。这就是你的插件语言文件所在的地方。我不会在这里深入研究翻译过程，但我只知道一些应用程序(如 poedit)就是在这里提供帮助的。

让我们对我们现有的代码做一些修改，这样 poedit就能够找到所有可翻译的字符串了:

基本上，我们在这里没有做太多改变，我们只是用以下方法包装了所有硬编码的字符串:

所有这一切只是 echo(_e) 我们的字符串，并将它分配给我们的插件 ($this->plugin_name)。

有关完整的代码更改，请参阅下面的代码:

这里对GIF的唯一更改是 submit_button()。您可以看到第一个参数(即按钮文本)将其文本包装在 __()中。这与 _e()相同，只是返回这个文本而不是回显。

所以现在，所有包装好的字符串都将被引用到我们的插件中， poedit将能够自动获取这些字符串并将其插入到 .pot文件中。

你现在有了一个完全可译的插件，太棒了!

添加更复杂的输入类型

我们已经在插件中添加了许多文件，但是只有两种类型的输入:

• Checkboxes
• Text inputs

现在我们将添加两个不同的和更复杂的输入:

• Color pickers
• File/Media uploads

要做到这一点，让我们添加一个新的部分 login page customization 我们在表单中的插件。在我们已经使用的 html之后插入这个:

我们现在增加了新的变量和所有需要的投入。我们现在还必须从 $options变量中添加一个变量来“缓存”它们的值。他们来这里只是为了获取徽标图像url，因为我们将在我们的选项中保存图像id:

这里没有什么花哨。我们只是简单地使用 wp_get_attachment_image_src将我们的登录 login_logo_id和我们想要的大小传递给它。然后 $login_logo_url将只给我们图像url，这样我们就可以在 img src属性中使用它。

从结果来看，这不是我们所期望的:

为了使这一工作，我们需要添加一些 Javascript和 CSS文件包括在 WordPress核心，以使它显示和正常工作。

打开 admin/class-wp-cbf-admin.php，并将以下内容添加到 public function enqueue_styles()和 public function enqueue_scripts()中:

如您所见，我们正在添加两个样式表: wp-color-picker 和 thickbox。 只有当我们在插件页面上，因为有条件if语句到位时，才会排队:

正如您再次看到的，我们的 JS和 CSS调用都在加载先前添加的依赖项。因此，我们将在其中添加的任何代码都将覆盖默认值:

如果仔细查看 enqueue_scripts()函数，您可能会想知道为什么这里没有 wp-color-picker, media-upload, or thickbox，只作为我们插件的 javascript依赖项加载。

由于WordPress v3.5，媒体Uploader不再使用厚盒。要加载新的媒体上传依赖项，只需添加 wp_enqueue_media()，它将加载所有需要的脚本。

查看这些文档页面以获得更多信息， wp_enqueue_media() 和 wp.media引用。

同样，如果我们在插件的设置页面上，我们只是在添加这些文件。

现在让我们将一些 javascript添加到插件的JS文件中: admin/js/wp-cbf-admin.js

正如注释中所定义的，我们已经将 JS封装在 DOM就绪函数中: $(function(){ ...our code... });它本身包含在自调用的匿名函数中。

首先，我们定义了我们将在Javascript中使用的一些var，然后，对于颜色选择器，我们只将 wpColorPicker()方法调用到我们的颜色选择器字段-没有什么太复杂的。

对于图像上传，我们主要使用 wp.media Javascript引用的改编版本。几乎所有的评论，但让我们通过它一点:

显然，当我们单击 “Upload Logo”按钮时，我们将打开媒体上载框架，该框架由 imgUploadButton.on( 'click', function( event ){ ... frame.open() });

frame是 wp.media的表示形式，可以将一些选项作为:

• 弹出式窗口的标题，在这里: title: 'Select or Upload Media for your Login Logo'
• 右下角按钮文本，在这里: button: {text: 'Use as my Login page Logo'}
• 一个多选择选项(如果您希望能够获取多个图像)，这里设置为 false: multiple: false

然后，我们有一个 frame.on( 'select', function() {})，一旦我们选择上传的图像并将结果返回为附件var在这里表示的 JSON对象，它就会被触发:

您可以将该对象合并到日志中，以查看它从图像中为我们提供了一个完整的属性列表。我们使用它来给我们的 img字段提供一个 src值(使用 attachment.sizes.thumbnail.url，所以我们有一个很好的 150x150px图像)以及隐藏字段的图像 id:

为什么给它一个id值而不是直接的图像url？嗯，这会让消毒更容易，因为它应该只是一个数字。

最后，我们有了 imgDelButton.on('click', function(e){}); 将删除 img 源值。隐藏文件id值，并在单击时将 hidden类添加回预览控制器。

因此，有了这个小JS，你现在有了一个几乎全功能的设置页面，里面有一些最酷的WordPress内置功能。

你现在应该有相同的结果与截图，以下是超级漂亮的虹膜颜色选择。如果你点击任何颜色字段，媒体上传弹出时点击上传，一旦图像被选中，我们的新标志就会很好地显示在那里。

相当整洁，对吧!

但再一次，如果你试图保存所有这些新的价值，什么都不会发生。为了保存和检索新的输入值，我们必须经过消毒和保存/更新。

现在就开始吧。

清理和保存/更新这些复杂字段

正如您可能从 part one中所记得的， register_setting( $this->plugin_name, $this->plugin_name, array($this, 'validate') ); 将负责在验证函数验证后 update/saving我们的 validate值:

这就是我们的 validate函数现在的样子-让我们看一看

对于 login_logo_id 没什么可说的。我们只是检查一下 $input['login_logo_id'] is set, and, if not,我们给它的价值是 0(检查时，它是一个假值 empty()). 如果设置了这个值，那么我们只需确保这个值是一个正整数 absint.

现在，让我们解释一下我们的颜色选择器验证，正如您所看到的更详细:

首先，我们获取我们的 $input输入值，并确保它是设置的，而不是空的:

然后，如果值不是空(这也意味着不是空字符串)，我们将对正则表达式进行测试，以确保它是十六进制字符串。这意味着它必须以 #开头，然后包含 6个字符，这些字符可以是 0-9之间的整数，也可以是 a-f之间的字母:

如果 regex测试失败，我们将添加一些 settings error 它们是 settings_api:

像看到的 add_settings_error 文档，第一个参数是一个唯一的标识符，必须与我们的设置相关。这里: login_button_primary_color.

然后，我们有另一种类型的 slug，它将被添加到错误消息类中，如下所示: login_button_primary_color_texterror.

然后，您想要显示的消息(非常重要的是，使此显化): Please enter a valid hex value color.

最后，作为默认值可选的错误类型是 error。把它写下来总是很好的，这样您就可以直接知道这个错误消息是关于什么的。

下面是为颜色选择器保存非十六进制字符串时的错误屏幕截图:

如果一切都是正确的，那么我们现在可以通过成功通知来保存我们的选择了:

好的，现在我们有了大量的选项，这些选项的值都经过了适当的消毒和保存! 是时候让我们的插件能够改变我们网站的行为了!

创建将改变主题/后端行为的函数

我们还没有使我们的插件与我们的WordPress网站互动。现在情况会变的。我们将把它分成两部分:

• “Clean up”部分将改变我们的网站的前端和登录
• 然后， “Login Customizations”将应用于后端

为了保持代码的良好组织，我们将在其相关文件夹中编写每个部分。我们将使用 public的前端，我们将使用 admin的后端-这是完全合理的。

我们的前端功能

打开 public/class-wp-cbf-public.php 文件并在我们的 enqueue_scripts() 函数:

这里的第一件事是，我们要添加对保存的选项的引用:

因此，我们将能够在我们的功能中使用它。

然后，我们只是添加一些公共函数，每个函数都包含一个 if 条件检查，是否检查了它的相关选项(下面是有用的 $this->wp_cbf_options 引用)。

让我们以 wp_cbf_bobody_class_slug函数为例，查看 body_class documentation on the WordPress Codex 文档，然后向下滚动到 “Add Classes By Filters”，给出下面的示例:

我们可以看到，对于插件，我们使用的格式是相同的，如果我们在页面、附件页面或单个POST是 is_singular的话，我们希望添加 post_name。然后，我们可以返回带有新类的 $classes 数组。

您可能会注意到，在我们的示例中，我们没有像Codex的示例那样应用 add_filter。这是因为我们将把所有前端相关的过滤器和操作添加到 define_public_hooks 私有函数中，将后端相关的操作和过滤器添加到 define_admin_hooks。如果您还记得，这些函数位于类 class-wp-cbf.php文件中的 includes 文件夹中。

让我们这样做，并将我们的操作和过滤器添加到 includes/class-wpcbf.php

首先，您会注意到，我已经注释掉了 enqueue_styles, enqueue_scripts。这是因为这个插件不会添加任何 CSS或 Javascript到我们的网站。如果您需要将插件添加到您的网站的前端，则必须将一些代码写入这些文件 (public/css/wp-cbf-public.css, public/js/wp-cbf-public.js)。我们也留下了这两个行动没有评论。

我们增加了4个动作和2个过滤器，对应于我们的6个功能。让我们解释一下其中一个钩子呼叫。我们将保留我们的 body_class 子块例子:

查看 includes/class-wp-cbf-loader.php中的 add_filter函数(这是我们使用 $this->loader->add_filter调用的函数)，我们有以下内容:

所以我们很容易将它解密为:

• $hook is 'body_class'
• $component is $plugin_public 定义在开头 define_public_hook 我们将在所有 “public”(frontend)钩子调用中使用它
• $callback 在这里，我们的函数名 wp_cbf_body_class_slug 来自 class-wp-cbf-public.php
• $priority 默认值为10时，我们不需要从这个调用中指定它，但有时您需要使用钩子来获得更高的优先级，所以您只需在这里添加一个数字(仅为整数)
• $accepted_args 默认值为1，这里相同，我们只有一个参数传递给我们的函数，所以我们不需要指定它，但是根据您想要调用的钩子，您需要根据文档来调整它

当然，根据您想要更改的内容，您必须搜索文档，以了解需要触发哪个 action/filter以及针对哪个钩子，所有这些都带有什么参数和优先级。

亲爱的，让我们看看现在的结果是什么。

回到你的网站管理和第一次取消检查 ‘Add Post slug to body class`。如果它被选中，保存并转到任何页面或单个帖子。我将转到初始WordPress安装中的默认 “Sample Page”，并从开发人员工具中检查我们的页面主体类。下面是您应该拥有的内容(或多或少取决于您可能已经安装和激活的插件):

现在，让我们激活我们的 “Add Post slug to body class”，然后你应该得到与下面的截图相同的结果。 post/page段现在添加到 body类中:

砰!我们的插件改变了我们的前端，如我们所愿。我们现在只需选中或取消复选框，我们将能够做到这一点，每一个网站，我们想现在。Plugins rock!

当然，你可以，你应该检查我们的所有其他选项发生了什么。现在是我们添加后端函数的时候了。

后端函数

打开 admin/class-wp-cbf-admin.php 之后 validate() 函数, 添加如下:

由于您可以在这里完全不同，这与我们正在添加与管理相关的功能这一事实无关。这仅仅是因为如何使用这些特定的函数，所以这也是一个很好的例子。但是，不变的是，我们必须在 __construct函数中添加对插件选项的引用: $this->wp_cbf_options = get_option($this->plugin_name);

然后我们有三个私有函数，它们只是返回一部分 CSS代码:

• private function wp_cbf_login_logo_css() returns $login_logo_css
• private function wp_cbf_login_background_color() returns $background_color_css
• 返回较长的CSS private function wp_cbf_login_button_color() as $button_color_css

在这三个私有函数下面，我们将在钩子定义中作为回调调用函数。

然后，您可能会想知道最后两个私有函数是什么。这些只是 helpers to emulate sass darken 和 lighten HSL功能，以便我们可以得到一些稍微不同的颜色，我们的 hover 和 active 状态上的按钮或链接。

基本上，这里我们有一个函数，它将编写一个 <style>...our CSS code...</style> 使用前三个私有函数返回的 CSS代码标记到登录页面。

让我们把钩子加进去 includes/class-wp-cbf.php 里面的 define_admin_hooks() 函数中: