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 目录下:

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

查看更多... 提高网络安全意识,养成良好上网习惯,网络下载文件先扫描杀毒。不要随意点击不明邮件中的链接、图片、文件,适当设置找回密码的提示问题。当收到与个人信息和金钱相关(如中奖、集资等)的邮件时要提高警惕。不要轻易打开陌生人发送至手机的链接和文件。在微信、QQ等程序中关闭定位功能,仅在需要时开启蓝牙。安装手机安全防护软件,经常对手机系统进行扫描。不随意连接不明Wi-Fi、刷不明二维码。保证手机随身携带,建议手机支付客户端与手机绑定,开启实名认证。从官方网站下载手机支付客户端和网上商城 应用。使用手机支付服务前,按要求在手机上安装专门用于安全防范的插件。登录手机支付应用、网上商城时,勿选择"记住密码"选项。通过网络购买商品时,仔细查看登录的网站域名是否正确,谨慎点击商家从即时通讯工具上发送的支付链接。谨慎对待手机上收到的中奖、积分兑换等信息,切勿轻易点击短信中附带的不明网址。资源收集自互联网,仅供用于学习和测试,请勿用于商业。资源如有侵权,请联系站长删除,敬请谅解!

原文
---内容结束💞请分享---
WWW.A5.ORG.CN
👉喜欢💞点赞👍分享🙏
点赞10 分享
相关推荐内容
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容