目前很多 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. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
源码资源库 » WordPress如何为后台文章列表添加缩略图
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
源码资源库 » WordPress如何为后台文章列表添加缩略图
