码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-05-06 00:35:29      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/doocii/p/5463568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!