WordPress 后台文章列表设置文章特色图片(缩略图)集成版

作者 : 优优 本文共4620个字,预计阅读时间需要12分钟 发布时间: 2021-09-3 共1.43K人阅读

我们在使用 wordpress 系统建站的过程中,会发现 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 目录下

访问:http://你的域名/wp-admin/edit.php即可

(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);

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站资源网罗互联网,如遇到加密压缩包,默认解压密码为"www.69ymw.com"其次尝试“zy.prmath.com”,如遇到无法解压的请联系管理员!

优久源码网 » WordPress 后台文章列表设置文章特色图片(缩略图)集成版

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在顶部更多在线反馈留言,或 联络我们。如果是需要解压密码请查看https://www.69ymw.com/unzip
找不到素材资源介绍文章里的示例图片?
对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

Leave a Reply