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 \'\';
  }  />\';
  }
 }
}
</></>
<>然后，我们添加一些>
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%;
   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 \'

  

   特色图像
   

    设置特色图像
    <input type=\"hidden\" name=\"_thumbnail_id\" value=\"\" />
   
   移除特色图像
  
\';
 
}

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

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;
 
  ?>[removed]
  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(\'\'). > ></>
<>这篇>