我要投稿

WordPress如何为后台文章列表添加缩略图

猪小侠源码 WordPress教程

2020-06-20 0 1,818

目前很多 wordpress 主题都具有缩略图功能，但你想没想过后台文章列表也可以显示缩略图，貌似之前有个插件可以实现这一功能，不过名称忘了，所以柠檬今天给大家推荐两个简单的方案。

方法一

就是在您的 wordpress 后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图，很实力的一个小的增强功能，可以更方法的将文章封面展示在列表里，免除了打开内容或是跳转前端确认文章封面特色图片的步骤。找到我们主题的 functions.php 文件在里面添加以下代码：

/**
 * WordPress 后台文章列表设置文章特色图片（缩略图）集成版
 * Plugin Name: Easy Thumbnail Switcher
 */
class doocii_Easy_Thumbnail_Switcher {
 
    public $add_new_str;
    public $change_str;
    public $remove_str;
    public $upload_title;
    public $upload_add;
    public $confirm_str;
 
    public function __construct() {
 
        $this->add_new_str = __( \'添加\');
        $this->change_str = __( \'更改\');
        $this->remove_str = __( \'移除\');
        $this->upload_title = __( \'上传特色图片\');
        $this->upload_add = __( \'确定\');
        $this->confirm_str = __( \'你确定?\');
 
        add_filter( \'manage_posts_columns\', array( $this, \'add_column\' ) );
        add_action( \'manage_posts_custom_column\', array( $this, \'thumb_column\' ), 10, 2 );
        add_action( \'admin_footer\', array( $this, \'add_nonce\' ) );
        add_action( \'admin_enqueue_scripts\', array( $this, \'scripts\' ) );
 
        add_action( \'wp_ajax_ts_ets_update\', array( $this, \'update\' ) );
        add_action( \'wp_ajax_ts_ets_remove\', array( $this, \'remove\' ) );
 
        add_image_size( \'ts-ets-thumb\', 75, 75, array( \'center\', \'center\' ) );
 
    }
 
    /**
     * 安全检查
     */
    public function add_nonce() {
 
        global $pagenow;
 
        if( $pagenow !== \'edit.php\' ) {
            return;
        }
        wp_nonce_field( \'ts_ets_nonce\', \'ts_ets_nonce\' );
 
    }
 
    /**
     * 加载脚本
     */
    public function scripts( $pagenow ) {
 
        if( $pagenow !== \'edit.php\' ) {
            return;
        }
 
        wp_enqueue_media();
        wp_enqueue_script( \'doocii-ets-js\', get_template_directory_uri() . \'/js/script.js\', array( \'jquery\', \'media-upload\', \'thickbox\' ), \'1.0\', true );
 
        wp_localize_script( \'doocii-ets-js\', \'ets_strings\', array(
            \'upload_title\' => $this->upload_title,
            \'upload_add\' => $this->upload_add,
            \'confirm\' => $this->confirm_str,
        ) );
 
    }
 
    /**
     * The action which is added to the post row actions
     */
    public function add_column( $columns ) {
 
        $columns[\'ts-ets-option\'] = __( \'缩略图\');
        return $columns;
 
    }
 
    /**
     * 显示列
     */
    public function thumb_column( $column, $id ) {
 
        switch( $column ) {
            case \'ts-ets-option\':
 
                if( has_post_thumbnail() ) {
                    the_post_thumbnail( \'ts-ets-thumb\' );
                    echo \'<br>\';
                    echo sprintf( \'<button type=\"button\" class=\"button-primary ts-ets-add\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->change_str );
                    echo sprintf( \' <button type=\"button\" class=\"button-secondary ts-ets-remove\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->remove_str );
                } else {
                    echo sprintf( \'<button type=\"button\" class=\"button-primary ts-ets-add\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->add_new_str );
                }
 
                break;
        }
 
    }
 
    /**
     * AJAX保存更新缩略图
     */
    public function update() {
 
        // 检查是否所有需要的数据都设置与否
        if( !isset( $_POST[\'nonce\'] ) || !isset( $_POST[\'post_id\'] ) || !isset( $_POST[\'thumb_id\'] ) ) {
            wp_die();
        }
 
        //验证
        if( !wp_verify_nonce( $_POST[\'nonce\'], \'ts_ets_nonce\' ) ) {
            wp_die();
        }
 
        $id = $_POST[\'post_id\'];
        $thumb_id = $_POST[\'thumb_id\'];
 
        set_post_thumbnail( $id, $thumb_id );
 
        echo wp_get_attachment_image( $thumb_id, \'ts-ets-thumb\' );
        echo \'<br>\';
        echo sprintf( \'<button type=\"button\" class=\"button-primary ts-ets-add\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->change_str );
        echo sprintf( \' <button type=\"button\" class=\"button-secondary ts-ets-remove\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->remove_str );
 
        wp_die();
 
    }
 
    /**
     * AJAX回调后删除缩略图
     */
    public function remove() {
 
        // Check if all required data are set or not
        if( !isset( $_POST[\'nonce\'] ) || !isset( $_POST[\'post_id\'] ) ) {
            wp_die();
        }
 
        // Verify nonce
        if( !wp_verify_nonce( $_POST[\'nonce\'], \'ts_ets_nonce\' ) ) {
            wp_die();
        }
 
        $id = $_POST[\'post_id\'];
 
        delete_post_thumbnail( $id );
 
        echo sprintf( \'<button type=\"button\" class=\"button-primary ts-ets-add\" data-id=\"%s\">%s</button>\', esc_attr( $id ), $this->add_new_str );
 
        wp_die();
 
    }
 
}
new doocii_Easy_Thumbnail_Switcher();

以下代码保存为 script.js，保存至主题名/js 目录下：

(function($) {
 
    \"use strict\";
 
    if( typeof ts_ets === \'undefined\' ) {
        window.ts_ets = {};
        ts_ets.upload_frame = false;
    }
 
    $(document).on( \'click\', \'button.ts-ets-remove\', function() {
 
        ts_ets.tmp_id = $(this).data(\'id\');
        ts_ets.tmp_parent = $(this).closest(\'td.ts-ets-option\');
 
        if( !confirm( ets_strings.confirm ) ) {
            return;
        }
 
        $.ajax({
            url: ajaxurl,
            method: \"POST\",
            data: {
                action: \'ts_ets_remove\',
                nonce: $(\'#ts_ets_nonce\').val(),
                post_id: ts_ets.tmp_id
            },
            success: function( data ) {
                if( data != \'\' ) {
                    ts_ets.tmp_parent.html( data );
                }
            }
        });
 
    });
 
    $(document).ready(function() {
 
        ts_ets.upload_frame = wp.media({
            title: ets_strings.upload_title,
            button: {
                text: ets_strings.upload_add,
            },
            multiple: false
        });
 
        ts_ets.upload_frame.on( \'select\', function() {
 
            ts_ets.selection = ts_ets.upload_frame.state().get(\'selection\');
 
            ts_ets.selection.map( function( attachment ) {
                if( attachment.id ) {
                    $.ajax({
                        url: ajaxurl,
                        method: \"POST\",
                        data: {
                            action: \'ts_ets_update\',
                            nonce: $(\'#ts_ets_nonce\').val(),
                            post_id: ts_ets.tmp_id,
                            thumb_id: attachment.id
                        },
                        success: function( data ) {
                            if( data != \'\' ) {
                                ts_ets.tmp_parent.html( data );
                            }
                        }
                    });
                }
            });
 
        });
 
    });
 
    $(document).on( \'click\', \'button.ts-ets-add\', function(e) {
 
        e.preventDefault();
 
        ts_ets.tmp_id = $(this).data(\'id\');
        ts_ets.tmp_parent = $(this).closest(\'td.ts-ets-option\');
 
        if( ts_ets.upload_frame ) {
            ts_ets.upload_frame.open();
        }
 
    });
 
})(jQuery);

方法二

这款是给大家一个更简单的版本，减少了上传与删除功能，只是一个显示调用功能，方便大小进行缩略图查看，因为更多的用户习惯是进入文章上传特色图片，很少人会通过后台列表就直接上传缩略图，所以今天给大家推荐一个更简单的方案。将下面的代码复制到当前 wordpress 主题的 functions.php 模板文件中，保存即可：

if ( !function_exists(\'fb_AddThumbColumn\') && function_exists(\'add_theme_support\') ) {
 // for post and page
 add_theme_support(\'post-thumbnails\', array( \'post\', \'page\' ) );
 function fb_AddThumbColumn($cols) {
 $cols[\'thumbnail\'] = __(\'Thumbnail\');
 return $cols;
 }
 function fb_AddThumbValue($column_name, $post_id) {
 $width = (int) 35;
 $height = (int) 35;
 if ( \'thumbnail\' == $column_name ) {
 // thumbnail of WP 2.9
 $thumbnail_id = get_post_meta( $post_id, \'_thumbnail_id\', true );
 // image from gallery
 $attachments = get_children( array(\'post_parent\' => $post_id, \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\') );
 if ($thumbnail_id)
 $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
 elseif ($attachments) {
 foreach ( $attachments as $attachment_id => $attachment ) {
 $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
 }
 }
 if ( isset($thumb) && $thumb ) {
 echo $thumb;
 } else {
 echo __(\'None\');
 }
 }
 }
 // for posts
 add_filter( \'manage_posts_columns\', \'fb_AddThumbColumn\' );
 add_action( \'manage_posts_custom_column\', \'fb_AddThumbValue\', 10, 2 );
 // for pages
 add_filter( \'manage_pages_columns\', \'fb_AddThumbColumn\' );
 add_action( \'manage_pages_custom_column\', \'fb_AddThumbValue\', 10, 2 );
 }

文章来自猪小侠源码www.yqym.net转载请注明出处，并保留本链接，谢谢!

收藏 (0) 点赞 (0)

：本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
3、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
4、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中，请提前注册好百度网盘账号，下载安装百度网盘客户端或其他网盘客户端进行下载；
6、本站部分资源文件是经压缩后的，请下载后安装解压软件，推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益，请邮件联系： 442469558@qq.com 进行处理！

猪小侠源码-最新源码下载平台 WordPress教程 WordPress如何为后台文章列表添加缩略图 http://www.20zxx.cn/14013/wordpres/wordpressq.html