如何在文章列表编辑特色图像

文章编辑特色图像,看到这句话大概就知道今天要分享的是什么功能了。

具体效果如下图所示:

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_' );
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>';
 
}

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

WordPress如何在文章列表编辑特色图像
思源源码基地https://www.rmb4.cn所有源码资源均聚合于互联网各大会员资源站,仅用于您下载学习,如需商用,请您支持正版! 转载请注明出处!
源码基地-站长之家-网站模板-网站源码-源码之家-html模板-网页模板-Wordpress主题-织梦模板 » 如何在文章列表编辑特色图像

源码基地,源码之家,全网网站源码,APP源码,免费下载,采集规则免费教学!

立即赞助 发布资源