WordPress无插件开发文章Tag的排序功能，为分类、标签等后台管理添加快速编辑功能

| 发表评论 | 93 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

之前有介绍过如何自定义WordPress文章列表的快速编辑“Quick Edit”栏（链接：WordPress后台开发，无插件添加列表页快速编辑(Quick Edit)自定义字段），今天我再来介绍一下如何在分类列表中也实现自定义的快速编辑功能。

这次我要开发一套可以给博客的标签做自定义排序的功能，你当然可以用插件Custom Taxonomy Order快速实现这个功能，但是本着深入研究WordPress的目的以及尽可能少用插件的开发原则，让我们尝试自己把他开发出来吧。

Tag其实就是WordPress的一种分类形式，它和文章的分类“Category”没有本质区别，实现了Tag的排序，你只要稍加修改，也可以应用到任何其他的分类形式中去。

实现这个排序功能，主要分以下几步：
1. 为Tag这个分类法新增一个记录排序序号的字段sort_idx，能够在后台保存修改它；
2. 在后台的Tag列表里增加一列sort_idx的显示，并且能让它参与自动排序，方便用户管理；
3. 在后台的Tag列表里增加sort_idx的Quick Editor字段，进一步方便用户管理。
4. 在后台的Post列表里，增加Tag的筛选项，再进一步方便用户管理
1-3体现在界面就是如图这样：
WordPress无插件开发文章Tag的排序功能，为分类、标签等后台管理添加快速编辑功能

第4点属于锦上添花，实现如图这样的筛选功能：

为Tag这个分类法新增一个记录排序序号的字段sort_idx，能够在后台保存修改它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//Custom fields for terms - https://blog.brain1981.com
function brain1981_term_form_fields($tag_object){
	if(!is_string($tag_object)){
		$term_id = $tag_object->term_id;
	}
	if( !empty($term_id) ){//edit term form specific 
		$sort_idx =  get_term_meta( $term_id, 'sort_idx', true );
	}else{
		$sort_idx = "";
	}
	$categories = get_categories( array(
		'parent'  => 0,
		'hide_empty' =>false
	) );
?>
	<div class="form-field term-name-wrap">
		<label for="sort_idx">排序序号</label><br/>
		<input type="number" name="sort_idx" id="sort_idx" value="<?php echo $sort_idx;?>" />
		<p>填写数字，数字越小，排序越靠前</p>
	</div>
<?php
}
add_action( 'post_tag_add_form_fields', 'brain1981_term_form_fields', 10, 1 ); 
add_action( 'post_tag_edit_form', 'brain1981_term_form_fields', 10, 1 ); 
 
//save meta for term
function brain1981_term_save($term_id){
	if ( ! current_user_can( 'manage_categories' ) ) return ;
	if ( isset( $_POST['sort_idx'] ) ) {
		update_term_meta($term_id, 'sort_idx', (int)$_POST['sort_idx']);
	}
}
add_action( 'create_term', 'brain1981_term_save', 10, 1 ); 
add_action( 'edit_term', 'brain1981_term_save', 10, 1 );

在后台的Tag列表里增加一列sort_idx的显示，并且能让它参与自动排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//Display custom fields in term list - https://blog.brain1981.com
//add column name
function brain1981_featured_term_columns($columns){
	return array_merge($columns, array(
		'Sort' =>  'Sort'
	));
}
add_filter('manage_edit-post_tag_columns' , 'brain1981_featured_term_columns');
add_filter('manage_edit-post_tag_sortable_columns' , 'brain1981_featured_term_columns');
 
//list colunm value on the list page
function brain1981_featured_term_columns_values( $deprecated, $column_name, $term_id) {
	if($column_name === 'Sort'){
		$sort_idx =  get_term_meta( $term_id, 'sort_idx', true );
		echo $sort_idx;
	}
}
add_action( 'manage_post_tag_custom_column' , 'brain1981_featured_term_columns_values', 10, 3 );
 
// Customize the query that sorts the 'Sort' column
add_action('parse_term_query', 'brain1981_sort_idx_column');
function brain1981_sort_idx_column($query) {
	$args =& $query->query_vars;
	if ( is_admin() && 'Sort' === $args['orderby'] ) {
		$args['meta_key'] = 'sort_idx';
		$args['orderby']  = 'meta_value_num';
	}
}

在后台的Tag列表里增加sort_idx的Quick Editor字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//quick edit item for custom fields - https://blog.brain1981.com
add_action( 'quick_edit_custom_box', 'brain1981_post_tag_quickedit_fields', 10, 3 );
function brain1981_post_tag_quickedit_fields( $column, $screen, $tax ) {
	if ( $screen !== 'edit-tags' ) return;
	if ( ! current_user_can( 'manage_categories' ) ) return;
	if ( $tax !== 'post_tag' || $column !== 'Sort' ) return;
	?>
	<fieldset>
		<div class="inline-edit-col">
		<label>
			<span class="title"><?php _e('sort_idx'); ?></span>
			<span class="input-text-wrap">
			<input id="sort_idx_quickedit" name="sort_idx" type="number" value="" />
			</span>
		</label>
		</div>
	</fieldset>
	<script>
	jQuery('#the-list').on('click', 'button.editinline', function(){
	var now = jQuery(this).closest('tr').find('td.column-Sort').text();
	console.log('now',now)
	setTimeout(function(){
			jQuery('#sort_idx_quickedit').val( now );
		},100)
	});
	</script>
	<?php
}
 
function brain1981_save_quickedit_values( $term_id ) {
	if ( current_filter() === "edited_post_tag" && current_user_can( 'manage_categories' ) ) {
		$sort_idx = filter_input( INPUT_POST, 'sort_idx', FILTER_SANITIZE_STRING );
		remove_action( current_filter(), __FUNCTION__ );
		update_term_meta( $term_id ,'sort_idx', $sort_idx);
	}
}
add_action( "edited_post_tag", 'brain1981_save_quickedit_values' );

这里面比较Tricky的是如何让自定义列中的数据同步到快速编辑的字段里，在JS里我用了延时100ms，也就是点击编辑后要延迟一点点时间才能读取到当前正在编辑的这个字段，如果你有更好的办法欢迎指出。

如果你打算把这个功能应用到其他分类法中，只需把代码中的“post_tag”改成其他分类名即可。

在后台的Post列表里，增加Tag的筛选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//add tag in post filter on post list page - https://blog.brain1981.com
function brain1981_droplist_post_tag($post_type) {
	if('post'!==$post_type) return;
	$key = 'tag';
	$selection = $_GET[$key]?:'';
	$dropdown_arg = array(
		'show_option_none' => 'All Tags',
		'option_none_value' => '',
		//'orderby' => 'count',
		'orderby' => 'name',
		'order' => 'ASC',
		'name' => $key,
		'value_field' => 'slug',
		'taxonomy' => 'post_tag',
		'selected' => $selection,
	);
	wp_dropdown_categories($dropdown_arg);
}
add_action( 'restrict_manage_posts', 'brain1981_droplist_post_tag');

这里我们把$key写为“tag“，因为tag是WordPress为post_tag分类法在querystring里预设的键名。

以上就是全部内容。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3339.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注