在本系列文章中，我们将回顾一些可用于构建更易于维护的 WordPress 插件的技巧和策略，并且我们将通过利用选项卡式元框的插件的上下文来实现这一切.
在上一篇文章中，我们专门为我们的选项卡实现了功能，并且还实现了第一个 textarea ，它将用于捕获一些用户输入。对于那些一直关注的人来说，您知道我们只做到了：
- 使选项卡发挥作用
- 引入用户可以与之交互的单个 UI 元素
我们尚未完成清理、验证和保存数据的实际过程，也没有费心介绍其余选项卡的内容。在接下来的两篇文章中，我们将正是这样做的。
具体来说，在本文中，我们将继续介绍用户界面的其余部分，然后我们将继续实际编写负责验证用户输入并将其与给定帖子关联的代码。
这些都摆在我们面前，让我们开始吧。
重新审视选项卡模板
如前所述，在上一篇文章中，我们在草稿选项卡中引入了 textarea。如果您一直在遵循教程和/或使用可用存储库中的代码，那么您应该会看到如下内容：
草稿标签背后的想法很简单：用户可以在此处记下笔记、收集想法，并且基本上有一个记事本可以帮助他们收集想法在写帖子之前。
资源
资源s标签怎么样？此选项卡背后的想法是，用户将能够收集与他们想要编写的内容相关的页面、推文、图像和其他信息的各种 URL，以便他们可以在帖子中嵌入、链接和/或引用它们.
其工作原理如下：
- 将有一个按钮允许用户添加其他字段
- 单击按钮后，按钮上方将添加一个输入字段以捕获用户的输入。
- 如果用户提供信息，则在保存帖子时也会保存该信息。
- 如果用户未提供任何信息，则不会保存该信息。
就最后两项而言，我们将在下一篇文章中解决。现在，让我们来动态添加输入字段。
找到 admin/views/partials/resources.php 并将代码更新为如下所示：
登录后复制
接下来，我们在 admin/assets/js 中创建一个文件，并将其命名为 resources.js。删除该文件，使其如下所示：
(function( $ ) {
'use strict';
$(function() {
});
})( jQuery );
登录后复制
接下来，我们需要设置一个事件处理程序，以便当用户点击添加资源按钮时，它会执行以下操作：
以下是完整注释的代码，说明如何实现此目的，并提供以下更多信息：
/**
* Creates a new input element to be appended to the DOM that's used to represent a single
* resource (be it an address, tweet, image URL, etc.) to be referenced in the post.
*
* @since 0.4.0
* @param object $ A reference to the jQuery object
* @return object An input element to be appended to the DOM.
*/
function createInputElement( $ ) {
var $inputElement, iInputCount;
/* First, count the number of input fields that already exist. This is how we're going to
* implement the name and ID attributes of the element.
*/
iInputCount = $( '#authors-commentary-resources' ).children().length;
iInputCount++;
// Next, create the actual input element and then return it to the caller
$inputElement =
$( '' )
.attr( 'type', 'text' )
.attr( 'name', 'authors-commentary-resource-' + iInputCount )
.attr( 'id', 'authors-commentary-resource-' + iInputCount )
.attr( 'value', '' );
return $inputElement;
}
(function( $ ) {
'use strict';
$(function() {
var $inputElement;
$( '#authors-commentary-add-resource' ).on( 'click', function( evt ) {
evt.preventDefault();
/* Create a new input element that will be used to capture the users input
* and append it to the container just above this button.
*/
$( '#authors-commentary-resources' ).append ( createInputElement( $ ) );
});
});
})( jQuery );
登录后复制
在上面的代码中，有一个函数专门用于创建输入元素并使用预先存在的元素的数量来帮助为其提供唯一的名称和 ID。
还有一个 DOM 就绪处理程序，它设置一个函数，以便在用户点击添加资源按钮时触发。单击按钮时，将调用上述函数，然后将输入元素附加到父容器。
为了确保它看起来最好，我们需要编写一些样式。就像我们对 JavaScript 源代码所做的那样，找到 admin/assets/css/admin.css ，然后将以下代码添加到文件底部：
#authors-commentary-resources input[type="text"] {
width: 100%;
margin-bottom: 10px;
}
登录后复制
这将确保每个输入元素的宽度为 100%，以便它们各自位于自己的行上。
最后，我们需要将用 WordPress 编写的 JavaScript 排入队列，以便它正确响应我们在部分中显示的元素。为此，请在 admin/class-authors-commentary.php 中找到 enqueue_admin_scripts 函数，并更新该函数，使其如下所示：
