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

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

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

如果你的主题不支持缩略图请首先在

1
functions.php
中添加


1
2
3
//开启文章缩略图

add_theme_support( 'post-thumbnails' );

首先我们在后台文章列表添加数组, 复制下面的代码到你的

1
functions.php
中。


1
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样式来美化数组。


1
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
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默认上传:


1
2
3
4
5
6
add_action( 'admin_enqueue_scripts', 'lb_include_myuploadscript' );
function lb_include_myuploadscript() {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
}

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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" 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>';
 
}

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


1
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
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

未经允许不得转载:主题君 » WordPress在后台文章列表编辑特色图像
赞(297)

账号密码登录