WordPress直接在后台文章列表编辑特色图像是一个非常实用的功能，不需要每一篇文章点进去编辑文章后编辑特色图像，它能使我们在WordPress后台编辑文章时方便很多，这很大程度的节省了我们的时间，

功能最终效果图如下图所示：

如果你的主题不支持缩略图请首先在functions.php中添加

//开启文章缩略图add_theme_support( 'post-thumbnails' );

首先我们在后台文章列表添加数组， 复制下面的代码到你的functions.php中。

/* * 添加数组到文章列表 */add_filter('manage_post_posts_columns', 'lb_featured_image_column');function lb_featured_image_column( $column_array ) {$column_array = array_slice( $column_array, 0, 1, true )+ array('featured_image' => '特色图像')+ array_slice( $column_array, 1, NULL, true ); return $column_array;} /* * 使用钩子完善数组 */add_action('manage_posts_custom_column', 'lb_render_the_column', 10, 2);function lb_render_the_column( $column_name, $post_id ) {if( $column_name == 'featured_image' ) {if( has_post_thumbnail( $post_id ) ) {$thumb_id = get_post_thumbnail_id( $post_id );echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';} else {echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';}}}

然后，我们添加一些CSS样式来美化数组。

add_action( 'admin_head', 'lb_custom_css' );function lb_custom_css(){ echo '<style>#featured_image{width:120px;}td.featured_image.column-featured_image img{max-width: 100{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3};height: auto;} /* some styles to make Quick Edit meny beautiful */#lb_featured_image .title{margin-top:10px;display:block;}#lb_featured_image a.lb_upload_featured_image{display:inline-block;margin:10px 0 0;}#lb_featured_image img{display:block;max-width:200px !important;height:auto;}#lb_featured_image .lb_remove_featured_image{display:none;}</style>'; }

完成以上步骤后，在后台文章就可以查看效果了。

接下来添加JS代码使特色图像可以快速编辑和更新，首先排队加载WordPress默认上传：

add_action( 'admin_enqueue_scripts', 'lb_include_myuploadscript' );function lb_include_myuploadscript() {if ( ! did_action( 'wp_enqueue_media' ) ) {wp_enqueue_media();}}

然后在后台文章页面添加快速编辑字段：

add_action('quick_edit_custom_box',  'lb_add_featured_image_quick_edit', 10, 2);function lb_add_featured_image_quick_edit( $column_name, $post_type ) { if ($column_name != 'featured_image') return;echo '<fieldset id="lb_featured_image" ><div ><span >特色图像</span><div><a href="#" rel="external nofollow"  rel="external nofollow"  >设置特色图像</a><input type="hidden" name="_thumbnail_id" value="" /></div><a href="#" rel="external nofollow"  rel="external nofollow"  >移除特色图像</a></div></fieldset>'; }

最后就是更新保存了，添加下面代码即可。

add_action('admin_footer', 'lb_quick_edit_js_update');function lb_quick_edit_js_update() { global $current_screen;if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))return; ?><script>jQuery(function($){ $('body').on('click', '.lb_upload_featured_image', function(e){e.preventDefault();var button = $(this), custom_uploader = wp.media({title: '设置特色图像',library : { type : 'image' },button: { text: '设置特色图像' },}).on('select', function() {var attachment = custom_uploader.state().get('selection').first().toJSON();$(button).html('<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();}).open();}); $('body').on('click', '.lb_remove_featured_image', function(){$(this).hide().prev().val('-1').prev().html('设置特色图像');return false;}); var $wp_inline_edit = inlineEditPost.edit;inlineEditPost.edit = function( id ) {$wp_inline_edit.apply( this, arguments ); var $post_id = 0;if ( typeof( id ) == 'object' ) { $post_id = parseInt( this.getId( id ) );} if ( $post_id > 0 ) {var $edit_row = $( '#edit-' + $post_id ),$post_row = $( '#post-' + $post_id ),$featured_image = $( '.column-featured_image', $post_row ).html(),$featured_image_id = $( '.column-featured_image', $post_row ).find('img').attr('data-id');  if( $featured_image_id != -1 ) { $( ':input[name="_thumbnail_id"]', $edit_row ).val( $featured_image_id ); // ID$( '.lb_upload_featured_image', $edit_row ).html( $featured_image ); // 图像 HTML$( '.lb_remove_featured_image', $edit_row ).show(); // 移除链接 }} }});</script><?php}

这篇WordPress如何在文章列表编辑特色图像的教程到此就结束了，教程看到这里，你也应该能够自己实现在后台文章列表编辑特色图像的功能了吧？

扫码关注wpwp自学笔记

精选优质免费WordPress主题模板，分享最新WordPress实用建站教程！

记住我们的网址：ztJun.com