摘要：这个功能很简单就是在您的wordpress后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图，很实力的一...
这个功能很简单就是在您的wordpress后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图，很实力的一个小的增强功能，可以更方法的将文章封面展示在列表里，免除了打开内容或是跳转前端确认文章封面特色图片的步骤，而且操作方法也是简单易学，下面大挖把代码贴出来分享给大家，喜欢wordpress的小伙伴可以动手折腾一下。
首页还是找到我们主题的functions.php文件在里面添加以下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
/** * 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 目录下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
(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); |
