这个功能很简单就是在您的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);
1. 如有链接无法下载、失效或广告,请联系QQ:181289218 处理!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
- 我的微信
- 这是我的微信扫一扫
- 站长技术资源群
- QQ群:431710796
评论