WordPress 管理员列表：扩展快速编辑功能

到目前为止，在我们关于 WordPress 管理表的系列文章中，我们已经研究了自定义 WordPress 管理表布局的各种方法，包括如何添加新列。 在本系列的最后一篇文章中，我们将看看您可能要考虑的另一个自定义……扩展管理表中的“快速编辑”功能。

让我们开始吧！

扩展快速编辑字段

对于本教程中的示例，我们将添加一个自定义字段，该字段将显示一个 URL，该 URL 将被描述为“源”，我们将使用链接到与我们的文章相关的一些附加信息的 url 填充该 URL。 我们将看到如何在帖子管理屏幕的快速编辑区域中添加它，以及如何保存对该字段所做的更新。

第一步：添加自定义字段

我们在 WordPress 自定义字段入门一文中介绍了如何创建“源”字段。 为简洁起见，我们不会在这里重复这些说明。 您当然可以创建任何您喜欢的自定义字段。

如果您不熟悉我们如何添加“来源”自定义字段或任何其他自定义字段，请查看我们的文章。 添加适当的自定义字段后，就可以进行下一步了。

第二步：添加自定义列

我们需要在我们的管理表中添加一个自定义列。 我们在自定义 WordPress 管理表：入门一文中深入解释了如何执行此操作。 看看并按照步骤操作。

最终，您应该在活动主题的functions.php中得到一些代码，如下所示：

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

现在您应该在 Posts Admin 表中看到新列。

添加自定义快速编辑框

让我们转到我们的帖子列表，然后单击我们其中一篇帖子下的“快速编辑”链接。

我们将在这里看到的是 WordPress 在快速编辑屏幕中提供的所有默认可用选项。 目前我们看不到新的“源”字段。

我们将使用 WordPress 提供的quick_edit_custom_box钩子来添加它。 此操作通过对包括自定义列在内的每一列执行一次来解析“快速编辑”模式下的所有默认操作。

它的结构如下： do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) 。 参数是$column_name ，它是要编辑的列的名称， $post_type是帖子类型 slug，如果需要的话， $taxonomy是分类名称。

在您的functions.php文件中，添加以下行：

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

请记住，我们通过回显$post->source; .

现在，如果您刷新页面并再次单击“快速编辑”，您现在应该会看到具有正确值的“源”字段。

第三步：保存内联编辑

要将数据输入保存到我们的自定义字段中，我们将使用更新帖子时触发的save_post操作。

在我们进行快速编辑的示例中，在save_post执行后，帖子的数据存储在$_POST中。

实现这一点所需的代码如下，应插入到functions.php文件中：

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

没有这已经完成，让我们尝试将字段的输入值更改为“https://random.url”之类的其他内容，然后点击右下角的更新按钮。

您注意到我们的源字段中的值已按预期更新。 但是，如果您再次单击“快速编辑”按钮并再次查看您的自定义字段（在我们的示例中为“源”），您将看到编辑框中的值没有更改。

更改值多次，您将始终在管理表列单元格中看到更改，但此输入不会反映在快速编辑字段中。

那么，为什么会这样呢？

请记住，我们通过回显$post->source; . 快速编辑内容在用户按下“编辑”按钮时被填充，这意味着它是动态创建的，而不是在加载帖子管理屏幕时预先填充的。 我们无法通过 PHP 代码检索元数据来正确显示元数据，因为我们总是会看到进入管理屏幕时填充的值而不是新值。

相反，我们必须使用 JavaScript 来收集我们的值。 所以在我们继续之前，我们将进入我们之前的 PHP 代码并通过替换这一行来删除回显的值......

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

……有了这个：

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

第四步：使用 JS 检索输入值

首先，我们必须通过将这些行添加到您的functions.php文件来包含我们的 JS 脚本：

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

因此，例如，如果您创建一个extend-quick-edit.js文件并将其放在您的活动主题文件夹下，那么在上面的代码中，您应该将 'UNIQUE-SCRIPT-NAME' 替换为 'extend-quick-edit-script ' 和 '/PATH-TO-YOUR-JS-FILE' 与get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

在array('jquery','inline-edit-post' )中我们添加了 jQuery，因为我们的脚本使用了 jQuery，并定义了原始的inline-edit-post函数将被修改。

在extend-quick-edit.js中，内容将如下所示：

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

让我们分解一下我们在这里做了什么。

首先，我们获取inlineEditPost.edit对象，如果您想进一步研究它，它会在/wp-admin/js/inline-edit-post.js WordPress 核心文件中引入。 所以我们现在在$inline_editor变量中得到了对象的副本。

之后，我们通过应用$inline_editor.apply( this, arguments);中现有的功能来修改inlineEditPost.edit功能； 并在之后添加我们想要的额外功能。

因此，在接下来的 JS 代码行中，我们最终要做的是将快速编辑区域的“Source”输入字段的值替换为“Source”列单元格的值。

现在一切都应该按预期工作。 如果您保存该值并重新打开快速编辑区域，则源输入也应更改。

如果自定义字段已经与其自定义列一起注册，我们的工作流程将如下所示：

结论

向管理员列表表的快速编辑模块添加自定义字段并不容易。 但是，如果您要添加一个定期更新的字段，那么从长远来看，它显然可以节省大量时间。 与往常一样，在 WordPress 中可以实现的目标是无限的。 直接开箱即用，它允许进行广泛的定制，但通过一些额外的编码，你不能做太多事情！