WordPress教程

WordPress后台开发,无插件添加列表页快速编辑(Quick Edit)自定义字段

也想出现在这里?联系我们
创客云

WordPress后台开发,无插件添加列表页快速编辑(Quick Edit)自定义字段
在文章列表页,点击“快速编辑”,展开的选项栏叫做快速编辑栏。我们可以把一些经常要修改的文章字段放到快速编辑栏里,这样就可以在列表页直接修改这些字段,而不用进入下级的文章页了,可以从而节约时间。

本文以一个自定义文章类型“product”为例,把字段 product_subtitle 放到快速编辑栏里,下面直接上代码:

也想出现在这里?联系我们
创客主机

1. 先在列表中增加一栏 subtitle

  1. add_filter( 'manage_edit-product_columns', 'brain1981_add_product_columns' );
  2. function brain1981_add_product_columns( $columns ) {
  3. 	$columns['product_subtitle'] = 'Subtitle';
  4. 	return $columns;
  5. }
  6.  
  7. add_action( 'manage_posts_custom_column', 'brain1981_set_product_populate_columns' );
  8. function brain1981_set_product_populate_columns( $column ) {
  9. 	if( get_post_type() == "product"){
  10. 		if ( 'product_subtitle' == $column ) {
  11. 			echo get_post_meta( get_the_ID(), 'product_subtitle', true );
  12. 		}
  13. 	}
  14. }

这一栏既用来显示数据,也用来获取数据,后文会有说明:
WordPress后台开发,无插件添加列表页快速编辑(Quick Edit)自定义字段
2. 在快速编辑栏中添加表单项:

  1. add_action('quick_edit_custom_box',  'brain1981_quick_edit_fields_product', 10, 2);
  2. function brain1981_quick_edit_fields_product( $column_name, $post_type ) {
  3. 	if($post_type=="product" && $column_name=="product_subtitle" ) {
  4. 	?>
  5. 		<fieldset class="inline-edit-col-right">
  6. 			<div class="inline-edit-col">
  7. 				<div class="inline-edit-group wp-clearfix">
  8. 					<label class="alignleft">
  9. 						<span class="title">SubTitle</span>
  10. 						<span class="input-text-wrap"><input type="text" name="product_subtitle" value=""></span>
  11. 					</label>
  12. 				</div>
  13. 			</div>
  14. 		</fieldset>
  15. 	<?php
  16. 	}
  17. }

3. 保存这个字段

  1. add_action( 'save_post', 'brain1981_add_product_fields', 10, 2 );
  2. function brain1981_add_product_fields( $product_id, $product ) {
  3. 	if ( isset( $_POST['product_subtitle'] ) ) {
  4. 		update_post_meta( $product_id, 'product_subtitle', $_POST['product_subtitle'] );
  5. 	}
  6. }

4. 给列表页添加一个 JS 脚本,此脚本用来及时刷新保存的快速编辑字段

  1. add_action( 'admin_enqueue_scripts', 'brain1981_enqueue_quick_edit_population' );
  2. function brain1981_enqueue_quick_edit_population( $pagehook ) {
  3. 	if ( 'edit.php' != $pagehook ) {
  4. 		return;
  5. 	}
  6. 	wp_enqueue_script( 'populatequickedit', get_stylesheet_directory_uri() . '/js/quickedit.js', array( 'jquery' ) );
  7. }

同时新建一个 js 文件放于主题的/js/quickedit.js 路径:

  1. jQuery(function($){
  2. 	var wp_inline_edit_function = inlineEditPost.edit;
  3. 	inlineEditPost.edit = function( post_id ) {
  4. 		wp_inline_edit_function.apply( this, arguments );
  5. 		var id = 0;
  6. 		if ( typeof( post_id ) == 'object' ) {
  7. 			id = parseInt( this.getId( post_id ) );
  8. 		}
  9. 		if ( id > 0 ) {
  10. 			// add rows to variables
  11. 			var specific_post_edit_row = $( '#edit-' + id ),
  12. 				specific_post_row = $( '#post-' + id ),
  13. 				product_subtitle = $( '.product_subtitle', specific_post_row ).text();
  14. 			$( ':input[name="product_subtitle"]', specific_post_edit_row ).val( product_subtitle );
  15. 		}
  16. 	}
  17. });

这个 js 脚本从列表中读取更新的变量值重新写入快速编辑的表单里,从而保障更新的数据不需要刷新页面及时反映在当前列表中。

总结:用“WordPress Quick Edit”做关键词在谷歌搜索,会找到一堆插件和很多有用的范例代码。本文应该是代码量最小的解决方案了。如果你需要加入快速编辑栏的字段较多,也可以借助于相关的插件管理这些字段。但字段多了,列表页免不了会变慢,对于数据量很多的网站,就需要权衡了。

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!