最新公告
  • 欢迎您光临老妖网络,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 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 );
     }

    效果如下:

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

    1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2、分享目的仅供大家学习和交流,请不要用于商业用途!
    3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    4、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    老妖网络 » WordPress教程 如何为后台文章列表添加缩略图

    常见问题FAQ

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