WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 数码解说
    • 生活趣事
    • 生活日记
  • 全球科技
    • 新浪博客
    • A5资讯
    • 环球网新闻
  • 编程教学
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
  • 专题
  • 基友
  • 隐私
  • 云优化
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君

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

夏柔4月 19, 2020

WordPress如何为后台文章列表添加缩略图?-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 );
 }

 

0
分享
夏柔 站长
文章 709评论 23
赞赏
夏柔
相关文章
  • 自定义onion域名
  • 宝塔linux面板一键工具箱
  • 7种提高代码阅读能力的方法
  • 保护你的WordPress,修改服务器默认用户名root
  • Python多线程扫描端口
  • ThnBo-一款针对WordPress开发的缩略图美化插件,为广大站长提供缩略图的美化便利
  • WordPress去除index.php的方法
  • WordPress美化-文字渐变特效
  • WordPress美化-抖动图片
  • 使用HBuilderX封装H5
27 5月, 2020
9岁女孩退化婴儿:不称职的父母如何毁掉自己的孩子?
夏柔
站长
夏山如碧 - 怀柔天下
709文章
23评论
58144K获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
拜登公布战时抗疫计划
1月 22, 2021
31省区市新增确诊103例 本土94例
1月 22, 2021
科兴疫苗在智利获紧急使用许可
1月 21, 2021
更多
每日快讯
美共和党议员提交弹劾拜登条款
1月 22, 2021
江苏镇江一人核酸检测结果可疑
1月 22, 2021
美媒曝光特朗普离任后第一天动态
1月 22, 2021
男子骂防疫人员:我证件你敢看吗
1月 22, 2021
拜登公布战时抗疫计划
1月 22, 2021
31省区市新增确诊103例 本土94例
1月 22, 2021
巨大火球深夜划过日本上空
1月 21, 2021
科兴疫苗在智利获紧急使用许可
1月 21, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号