让代码更简单

WordPress快速编辑添加自定义字段

重要:本文最后更新于2022-11-03 16:32:26,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

如何能在WordPress后台不打开文章页面,也能编辑文章中使用的自定义字段呢?WordPress提供了 quick_edit_custom_box 钩子,使用这个HOOK可以在快速编辑面板中添加自定义内容,下面一起通过一个例子来学习它。

wordpress快速编辑添加自定义字段
wordpress快速编辑添加自定义字段

首先在你的主题 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;
}

}

}
wordpress快速编辑添加自定义字段
wordpress快速编辑添加自定义字段

添加显示这列数据的目的是为了方便后面的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 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询 狗哥推荐