WordPress直接在后台文章列表编辑特色图像是一个非常实用的功能，不需要每一篇文章点进去编辑文章后编辑特色图像，它能使我们在WordPress后台编辑文章时方便很多，这很大程度的节省了我们的时间，
功能最终效果图如下图所示：
如果你的主题不支持缩略图请首先在
1 | functions.php |
2
3
add_theme_support( 'post-thumbnails' );首先我们在后台文章列表添加数组， 复制下面的代码到你的
中。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* 添加数组到文章列表
*/
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样式来美化数组。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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默认上传：
2
3
4
5
6
function lb_include_myuploadscript() {
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}然后在后台文章页面添加快速编辑字段：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function lb_add_featured_image_quick_edit( $column_name, $post_type ) {
if ($column_name != 'featured_image') return;
echo '<fieldset id="lb_featured_image" class="inline-edit-col-left">
<div class="inline-edit-col">
<span class="title">特色图像</span>
<div>
<a href="#" rel="external nofollow" rel="external nofollow" class="lb_upload_featured_image">设置特色图像</a>
<input type="hidden" name="_thumbnail_id" value="" />
</div>
<a href="#" rel="external nofollow" rel="external nofollow" class="lb_remove_featured_image">移除特色图像</a>
</div></fieldset>';
}最后就是更新保存了，添加下面代码即可。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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
原文链接：https://xiaohost.com/1690.html，转载请注明出处。
