如何能在WordPress后台不打开文章页面，也能编辑文章中使用的自定义字段呢？WordPress提供了 quick_edit_custom_box 钩子，使用这个HOOK可以在快速编辑面板中添加自定义内容，下面一起通过一个例子来学习它。
首先在你的主题 functions.php 文件，或者任意插件php文件中加入如下代码。
复制
add_action( 'quick_edit_custom_box', 'dmd_quick_edit_fields', 10, 2 );
function dmd_quick_edit_fields( $column_name, $post_type ) {
switch( $column_name ) {
case 'test': {
?>
<fieldset class="inline-edit-col-left">
<div class="inline-edit-col">
<label>
<span class="title">TEST</span>
<input type="text" name="test">
</label>
</div>
<?php
break;
}
}
}完成此步骤后，这些字段应出现在您的快速编辑中。下面的代码用来保存我们填入的自定义字段的值。
复制
add_action( 'save_post', 'dmd_quick_edit_save' );
function dmd_quick_edit_save( $post_id ){
// check inlint edit nonce
if ( ! wp_verify_nonce( $_POST[ '_inline_edit' ], 'inlineeditnonce' ) ) {
return;
}
$test = ! empty( $_POST[ 'test' ] ) ? absint( $_POST[ 'test' ] ) : 0;
update_post_meta( $post_id, 'test', $test );
}这下提交更改后就能保存自定义字段的内容了。但是在点击快速编辑时，快速编辑面板中我们自定义的编辑框中并没有内容，它将使用js来进行填充。填充之前我们需要给wp_list_table中添加一列，用来显示我们需要编辑的自定义的字段值。继续添加代码：
复制
add_filter( 'manage_post_posts_columns', 'dmd_test_columns' );
function dmd_test_columns( $column_array ) {
$column_array[ 'test' ] = 'TEST';
return $column_array;
}
add_action( 'manage_posts_custom_column', 'dmd_populate_both_columns', 10, 2 );
function dmd_populate_both_columns( $column_name, $post_id ) {
switch( $column_name ) {
case 'test': {
$test = get_post_meta( $post_id, 'test', true );
echo $test ?$test : '';
break;
}
}
}
添加显示这列数据的目的是为了方便后面的JS填充内容，由于js无法访问PHP内容，所以填充内容需要js读取html标签的值。
在主题的js文件夹下创建一个用于测试的 test.js 文件，填入如下代码
复制
jQuery( function($){
const wp_inline_edit_function = inlineEditPost.edit;
// we overwrite the it with our own
inlineEditPost.edit = function( post_id ) {
// let's merge arguments of the original function
wp_inline_edit_function.apply( this, arguments );
// get the post ID from the argument
if ( typeof( post_id ) == 'object' ) { // if it is object, get the ID number
post_id = parseInt( this.getId( post_id ) );
}
// add rows to variables
const edit_row = $( '#edit-' + post_id )
const post_row = $( '#post-' + post_id )
const productPrice = $( '.column-test', post_row ).text() // remove $ sign
// populate the inputs with column data
$( ':input[name="test"]', edit_row ).val( productPrice );
}
});要填充不同字段，请自行修改js里面的字段名称。
最后再回到前面编辑的PHP文件，添加一段用来加载这个js文件的代码。
复制
function dmd_scripts_method() {
wp_enqueue_script( 'test-script', get_stylesheet_directory_uri() . '/js/test.js', array( 'jquery' ),1.0,true );
}
add_action( 'admin_enqueue_scripts', 'dmd_scripts_method',10,5);到此，给wordpress快速编辑添加自定义字段功能完成，试试吧。
评论 （0）