[后台增强]在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" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );echo sprintf( ' <button type="button" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );} else {echo sprintf( '<button type="button" 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" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );echo sprintf( ' <button type="button" 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 notif( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) ) {wp_die();}// Verify nonceif( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {wp_die();}$id = $_POST['post_id'];delete_post_thumbnail( $id );echo sprintf( '<button type="button" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );wp_die();}}new doocii_Easy_Thumbnail_Switcher();161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157/** * 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" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );echo sprintf( ' <button type="button" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );} else {echo sprintf( '<button type="button" 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" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );echo sprintf( ' <button type="button" 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 notif( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) ) {wp_die();}// Verify nonceif( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {wp_die();}$id = $_POST['post_id'];delete_post_thumbnail( $id );echo sprintf( '<button type="button" 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);161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687(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文章置顶的设置方法

下一篇：WordPress自动添加已经使用过的文章标签

---