wordpress后台增加功能,将文章例表集成特色图片功能

云墨
云墨
云墨
647
文章
0
评论
2018年1月14日 评论 2,186

这个功能很简单就是在您的wordpress后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图,很实力的一个小的增强功能,可以更方法的将文章封面展示在列表里,免除了打开内容或是跳转前端确认文章封面特色图片的步骤,而且操作方法也是简单易学,下面大挖把代码贴出来分享给大家,喜欢wordpress的小伙伴可以动手折腾一下。

首页还是找到我们主题的functions.php文件在里面添加以下代码

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

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

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

 

1. 如有链接无法下载、失效或广告,请联系QQ:181289218 处理!
2. 本站的所有资源为购买、网络收集,或者用户投稿的资源,版权归原作者及网站所有!
3. 如若侵犯了您的权利,请及时联系站长删除!
4. 本站提供的资源,都不包含技术服务请大家谅解!
5. 此软件“仅限学习交流,不能用于商业用途”!
6. 如用于商业用途,请到官方购买正版软件,追究法律责任与“云墨SEO”站点无关!
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2018年1月14日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/1026.html
做一个网站要花多少钱?WordPress网站成本分析 网站建设

做一个网站要花多少钱?WordPress网站成本分析

做一个网站要花多少钱?这是一个复杂的问题,最直接的回复就是从几十块钱到几万块钱不等,当然还有更高的具体价格取决于你的需求,这个视频我会和大家分享三种建站方式,这三种方式成本相差巨大,最后再分享用wor...
如何为WordPress网站配置SMTP发信邮局 网站建设

如何为WordPress网站配置SMTP发信邮局

默认情况下,WordPress使用不可靠的PHP邮件功能,并且所发出的电子邮件经常会被邮件服务商标记为垃圾邮件。使用SMTP服务器是确保WordPress电子邮件可传递性的最佳方法。 在本教程中,我们...
WordPress程序设置404.php模板 网站建设

WordPress程序设置404.php模板

当你访问的WordPress站点的网址不存在时,WordPress会调用主题的404.php模板来返回404错误信息,比如: 最近,我需要一种编程方式来触发我的一个免费WordPress插件中的404...
匿名

发表评论

匿名网友