1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress后台文章列表添加缩略图

WordPress后台文章列表添加缩略图-云模板目前很多 wordpress 主题都具有缩略图功能,但你想没想过后台文章列表也可以显示缩略图,貌似之前有个插件可以实现这一功能,不过名称忘了,所以今天给大家推荐两个简单的方案。

方法一

就是在您的 wordpress 后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图,很实力的一个小的增强功能,可以更方法的将文章封面展示在列表里,免除了打开内容或是跳转前端确认文章封面特色图片的步骤。找到我们主题的 functions.php 文件在里面添加以下代码:

  1. /**
  2.  * WordPress 后台文章列表设置文章特色图片(缩略图)集成版
  3.  * Plugin Name: Easy Thumbnail Switcher
  4.  */
  5. class doocii_Easy_Thumbnail_Switcher {
  6. 
    
  7.     public $add_new_str;
  8.     public $change_str;
  9.     public $remove_str;
  10.     public $upload_title;
  11.     public $upload_add;
  12.     public $confirm_str;
  13. 
    
  14.     public function __construct() {
  15. 
    
  16.         $this->add_new_str = __( '添加');
  17.         $this->change_str = __( '更改');
  18.         $this->remove_str = __( '移除');
  19.         $this->upload_title = __( '上传特色图片');
  20.         $this->upload_add = __( '确定');
  21.         $this->confirm_str = __( '你确定?');
  22. 
    
  23.         add_filter( 'manage_posts_columns', array( $this, 'add_column' ) );
  24.         add_action( 'manage_posts_custom_column', array( $this, 'thumb_column' ), 10, 2 );
  25.         add_action( 'admin_footer', array( $this, 'add_nonce' ) );
  26.         add_action( 'admin_enqueue_scripts', array( $this, 'scripts' ) );
  27. 
    
  28.         add_action( 'wp_ajax_ts_ets_update', array( $this, 'update' ) );
  29.         add_action( 'wp_ajax_ts_ets_remove', array( $this, 'remove' ) );
  30. 
    
  31.         add_image_size( 'ts-ets-thumb', 75, 75, array( 'center', 'center' ) );
  32. 
    
  33.     }
  34. 
    
  35.     /**
  36.      * 安全检查
  37.      */
  38.     public function add_nonce() {
  39. 
    
  40.         global $pagenow;
  41. 
    
  42.         if( $pagenow !== 'edit.php' ) {
  43.             return;
  44.         }
  45.         wp_nonce_field( 'ts_ets_nonce', 'ts_ets_nonce' );
  46. 
    
  47.     }
  48. 
    
  49.     /**
  50.      * 加载脚本
  51.      */
  52.     public function scripts( $pagenow ) {
  53. 
    
  54.         if( $pagenow !== 'edit.php' ) {
  55.             return;
  56.         }
  57. 
    
  58.         wp_enqueue_media();
  59.         wp_enqueue_script( 'doocii-ets-js', get_template_directory_uri() . 'https://img.2kss.com/js/script.js', array( 'jquery', 'media-upload', 'thickbox' ), '1.0', true );
  60. 
    
  61.         wp_localize_script( 'doocii-ets-js', 'ets_strings', array(
  62.             'upload_title' => $this->upload_title,
  63.             'upload_add' => $this->upload_add,
  64.             'confirm' => $this->confirm_str,
  65.         ) );
  66. 
    
  67.     }
  68. 
    
  69.     /**
  70.      * The action which is added to the post row actions
  71.      */
  72.     public function add_column( $columns ) {
  73. 
    
  74.         $columns['ts-ets-option'] = __( '缩略图');
  75.         return $columns;
  76. 
    
  77.     }
  78. 
    
  79.     /**
  80.      * 显示列
  81.      */
  82.     public function thumb_column( $column, $id ) {
  83. 
    
  84.         switch( $column ) {
  85.             case 'ts-ets-option':
  86. 
    
  87.                 if( has_post_thumbnail() ) {
  88.                     the_post_thumbnail( 'ts-ets-thumb' );
  89.                     echo '<br>';
  90.                     echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
  91.                     echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );
  92.                 } else {
  93.                     echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );
  94.                 }
  95. 
    
  96.                 break;
  97.         }
  98. 
    
  99.     }
  100. 
    
  101.     /**
  102.      * AJAX保存更新缩略图
  103.      */
  104.     public function update() {
  105. 
    
  106.         // 检查是否所有需要的数据都设置与否
  107.         if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) || !isset( $_POST['thumb_id'] ) ) {
  108.             wp_die();
  109.         }
  110. 
    
  111.         //验证
  112.         if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
  113.             wp_die();
  114.         }
  115. 
    
  116.         $id = $_POST['post_id'];
  117.         $thumb_id = $_POST['thumb_id'];
  118. 
    
  119.         set_post_thumbnail( $id, $thumb_id );
  120. 
    
  121.         echo wp_get_attachment_image( $thumb_id, 'ts-ets-thumb' );
  122.         echo '<br>';
  123.         echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
  124.         echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );
  125. 
    
  126.         wp_die();
  127. 
    
  128.     }
  129. 
    
  130.     /**
  131.      * AJAX回调后删除缩略图
  132.      */
  133.     public function remove() {
  134. 
    
  135.         // Check if all required data are set or not
  136.         if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) ) {
  137.             wp_die();
  138.         }
  139. 
    
  140.         // Verify nonce
  141.         if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
  142.             wp_die();
  143.         }
  144. 
    
  145.         $id = $_POST['post_id'];
  146. 
    
  147.         delete_post_thumbnail( $id );
  148. 
    
  149.         echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );
  150. 
    
  151.         wp_die();
  152. 
    
  153.     }
  154. 
    
  155. }
  156. new doocii_Easy_Thumbnail_Switcher();

以下代码保存为 script.js,保存至 主题名/js 目录下:

  1. (function($) {
  2. 
    
  3.     "use strict";
  4. 
    
  5.     if( typeof ts_ets === 'undefined' ) {
  6.         window.ts_ets = {};
  7.         ts_ets.upload_frame = false;
  8.     }
  9. 
    
  10.     $(document).on( 'click', 'button.ts-ets-remove', function() {
  11. 
    
  12.         ts_ets.tmp_id = $(this).data('id');
  13.         ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');
  14. 
    
  15.         if( !confirm( ets_strings.confirm ) ) {
  16.             return;
  17.         }
  18. 
    
  19.         $.ajax({
  20.             url: ajaxurl,
  21.             method: "POST",
  22.             data: {
  23.                 action: 'ts_ets_remove',
  24.                 nonce: $('#ts_ets_nonce').val(),
  25.                 post_id: ts_ets.tmp_id
  26.             },
  27.             success: function( data ) {
  28.                 if( data != '' ) {
  29.                     ts_ets.tmp_parent.HTML( data );
  30.                 }
  31.             }
  32.         });
  33. 
    
  34.     });
  35. 
    
  36.     $(document).ready(function() {
  37. 
    
  38.         ts_ets.upload_frame = wp.media({
  39.             title: ets_strings.upload_title,
  40.             button: {
  41.                 text: ets_strings.upload_add,
  42.             },
  43.             multiple: false
  44.         });
  45. 
    
  46.         ts_ets.upload_frame.on( 'select', function() {
  47. 
    
  48.             ts_ets.selection = ts_ets.upload_frame.state().get('selection');
  49. 
    
  50.             ts_ets.selection.map( function( attachment ) {
  51.                 if( attachment.id ) {
  52.                     $.ajax({
  53.                         url: ajaxurl,
  54.                         method: "POST",
  55.                         data: {
  56.                             action: 'ts_ets_update',
  57.                             nonce: $('#ts_ets_nonce').val(),
  58.                             post_id: ts_ets.tmp_id,
  59.                             thumb_id: attachment.id
  60.                         },
  61.                         success: function( data ) {
  62.                             if( data != '' ) {
  63.                                 ts_ets.tmp_parent.html( data );
  64.                             }
  65.                         }
  66.                     });
  67.                 }
  68.             });
  69. 
    
  70.         });
  71. 
    
  72.     });
  73. 
    
  74.     $(document).on( 'click', 'button.ts-ets-add', function(e) {
  75. 
    
  76.         e.preventDefault();
  77. 
    
  78.         ts_ets.tmp_id = $(this).data('id');
  79.         ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');
  80. 
    
  81.         if( ts_ets.upload_frame ) {
  82.             ts_ets.upload_frame.open();
  83.         }
  84. 
    
  85.     });
  86. 
    
  87. })(jQuery);

方法二

这款是给大家一个更简单的版本,减少了上传与删除功能,只是一个显示调用功能,方便大小进行缩略图查看,因为更多的用户习惯是进入文章上传特色图片,很少人会通过后台列表就直接上传缩略图,所以今天给大家推荐一个更简单的方案。将下面的代码复制到当前 wordpress 主题的 functions.php 模板文件中,保存即可:

  1. if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
  2.  // for post and page
  3.  add_theme_support('post-thumbnails', array( 'post', 'page' ) );
  4.  function fb_AddThumbColumn($cols) {
  5.  $cols['thumbnail'] = __('Thumbnail');
  6.  return $cols;
  7.  }
  8.  function fb_AddThumbValue($column_name, $post_id) {
  9.  $width = (int) 35;
  10.  $height = (int) 35;
  11.  if ( 'thumbnail' == $column_name ) {
  12.  // thumbnail of WP 2.9
  13.  $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
  14.  // image from gallery
  15.  $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
  16.  if ($thumbnail_id)
  17.  $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
  18.  elseif ($attachments) {
  19.  foreach ( $attachments as $attachment_id => $attachment ) {
  20.  $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
  21.  }
  22.  }
  23.  if ( isset($thumb) && $thumb ) {
  24.  echo $thumb;
  25.  } else {
  26.  echo __('None');
  27.  }
  28.  }
  29.  }
  30.  // for posts
  31.  add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
  32.  add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
  33.  // for pages
  34.  add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
  35.  add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
  36.  }

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/99374

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注