WordPress在后台文章列表编辑特色图像

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

扫码关注wp主题君

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

记住我们的网址：ztJun.com