在帖子列表中添加特色图片

时间:2019-03-17 作者:Ayush Oli

进入帖子后添加特色图片并不难。但有些人希望它在循环之外做到这一点。那么,有没有一种方法可以在帖子列上添加一个按钮,在帖子列表中添加一个特色图片,而不必进入帖子内部,像以前那样操作??这是一件简单的事情,但可能很难编码。也许有了AJAX,就可以做到这一点。

2 个回复
最合适的回答,由SO网友:jsmod 整理而成

是的,这很容易做到。有一个很棒的教程Misha Rudrastyh 在…上how to add Featured Images to Quick Edit. 我最近应用了它,可以确认它是有效的。您将能够在管理区帖子列表中看到特色图片,并使用快速编辑轻松更改它们。这是使用插件的一个很好的替代方法。

将以下内容复制并粘贴到functions.php 文件:

/*
*
* Add Featured Image Column to Admin Area and Quick Edit menu
* Source: https://rudrastyh.com/wordpress/quick-edit-featured-image.html
*
*/

/*
 * This action hook allows to add a new empty column
 */
add_filter(\'manage_post_posts_columns\', \'misha_featured_image_column\');
function misha_featured_image_column( $column_array ) {

    // I want to add my column at the beginning, so I use array_slice()
    // in other cases $column_array[\'featured_image\'] = \'Featured Image\' will be enough
    $column_array = array_slice( $column_array, 0, 1, true )
    + array(\'featured_image\' => \'Featured Image\') // our new column for featured images
    + array_slice( $column_array, 1, NULL, true );

    return $column_array;
}

/*
 * This hook will fill our column with data
 */
add_action(\'manage_posts_custom_column\', \'misha_render_the_column\', 10, 2);
function misha_render_the_column( $column_name, $post_id ) {

    if( $column_name == \'featured_image\' ) {

        // if there is no featured image for this post, print the placeholder
        if( has_post_thumbnail( $post_id ) ) {

            // I know about get_the_post_thumbnail() function but we need data-id attribute here
            $thumb_id = get_post_thumbnail_id( $post_id );
            echo \'<img data-id="\' . $thumb_id . \'" src="\' . wp_get_attachment_url( $thumb_id ) . \'" />\';

        } else {

            // data-id should be "-1" I will explain below
            echo \'<img data-id="-1" src="\' . get_stylesheet_directory_uri() . \'/placeholder.png" />\';

        }

    }

}

add_action( \'admin_head\', \'misha_custom_css\' );
function misha_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 */
        #misha_featured_image .title{margin-top:10px;display:block;}
        #misha_featured_image a.misha_upload_featured_image{
            display:inline-block;
            margin:10px 0 0;
        }
        #misha_featured_image img{
            display:block;
            max-width:200px !important;
            height:auto;
        }
        #misha_featured_image .misha_remove_featured_image{
            display:none;
        }
    </style>\';

}

add_action( \'admin_enqueue_scripts\', \'misha_include_myuploadscript\' );
function misha_include_myuploadscript() {
    if ( ! did_action( \'wp_enqueue_media\' ) ) {
        wp_enqueue_media();
    }
}

add_action(\'quick_edit_custom_box\',  \'misha_add_featured_image_quick_edit\', 10, 2);
function misha_add_featured_image_quick_edit( $column_name, $post_type ) {

    // add it only if we have featured image column
    if ($column_name != \'featured_image\') return;

    // we add #misha_featured_image to use it in JavaScript in CSS
    echo \'<fieldset id="misha_featured_image" class="inline-edit-col-left">
        <div class="inline-edit-col">
            <span class="title">Featured Image</span>
            <div>
                <a href="#" class="misha_upload_featured_image">Set featured image</a>
                <input type="hidden" name="_thumbnail_id" value="" />
                <a href="#" class="misha_remove_featured_image">Remove Featured Image</a>
            </div>
        </div></fieldset>\';

        // please look at _thumbnail_id as a name attribute - I use it to skip save_post action

}

add_action(\'admin_footer\', \'misha_quick_edit_js_update\');
function misha_quick_edit_js_update() {

    global $current_screen;

    // add this JS function only if we are on all posts page
    if (($current_screen->id != \'edit-post\') || ($current_screen->post_type != \'post\'))
        return;

        ?><script>
        jQuery(function($){

            $(\'body\').on(\'click\', \'.misha_upload_featured_image\', function(e){
                e.preventDefault();
                var button = $(this),
                 custom_uploader = wp.media({
                    title: \'Set featured image\',
                    library : { type : \'image\' },
                    button: { text: \'Set featured image\' },
                }).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\', \'.misha_remove_featured_image\', function(){
                $(this).hide().prev().val(\'-1\').prev().html(\'Set featured Image\');
                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
                        $( \'.misha_upload_featured_image\', $edit_row ).html( $featured_image ); // image HTML
                        $( \'.misha_remove_featured_image\', $edit_row ).show(); // the remove link

                    }
                }
        }
    });
    </script>
<?php
}
如果您想了解更多有关这项工作原理以及代码每个部分的功能的详细信息,refer to the tutorial by Misha Rudrastyh.

SO网友:Christina

我用过这个插件Admin Columns Pro 为此,除了许多有用的;省时功能,允许您在帖子列表(或任何帖子类型列表)中添加一列,显示特色图片。如果将其设置为允许对该列进行内联编辑,则可以直接从列表视图添加特色图像。它为我节省了大量时间,客户也发现它很容易使用。

Screenshot of Posts view with Admin Column Pro featured image column allowing inline editing.

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件,它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作,我理解其中的一些原因。我已经更新了代码,现在需要一种方法来测试更新后的代码,然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装,但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装,以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式,还是有更快的测试环境可用。