WP文章

wordpress后台文章列表快速编辑添加特色图像

功能简介

最近发现一个非常好用的功能,能够帮助您在WordPress文章列表中提高不少的效率,所以今天就给大家分享一篇基于WordPress默认上传的快速选择特色图像功能。如果你的主题不支持缩略图请首先在functions.php中添加

  1. add_theme_support( 'post-thumbnails' );  

操作流程

一、在后台文章列表添加数组复制下面的代码到你的functions.php

  1. /* 
  2.  * 添加数组到文章列表 
  3.  */  
  4. add_filter('manage_post_posts_columns', 'lb_featured_image_column');  
  5. function lb_featured_image_column( $column_array ) {  
  6.     $column_array = array_slice$column_array, 0, 1, true )  
  7.     + array('featured_image' => '特色图像')  
  8.     + array_slice$column_array, 1, NULL, true );  
  9.    
  10.     return $column_array;  
  11. }  
  12.    
  13. /* 
  14.  * 使用钩子完善数组 
  15.  */  
  16. add_action('manage_posts_custom_column', 'lb_render_the_column', 10, 2);  
  17. function lb_render_the_column( $column_name$post_id ) {  
  18.     if$column_name == 'featured_image' ) {  
  19.         if( has_post_thumbnail( $post_id ) ) {  
  20.             $thumb_id = get_post_thumbnail_id( $post_id );  
  21.             echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';  
  22.         } else {  
  23.             echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';  
  24.         }  
  25.     }  
  26. }  

二、添加一些CSS来美化数组

  1. add_action( 'admin_head', 'lb_custom_css' );  
  2. function lb_custom_css(){  
  3.    
  4.     echo '<style>  
  5.         #featured_image{  
  6.             width:120px;  
  7.         }  
  8.         td.featured_image.column-featured_image img{  
  9.             max-width: 100%;  
  10.             heightauto;  
  11.         }  
  12.    
  13.         /* some styles to make Quick Edit meny beautiful */  
  14.         #lb_featured_image .title{margin-top:10px;display:block;}  
  15.         #lb_featured_image a.lb_upload_featured_image{  
  16.             display:inline-block;  
  17.             margin:10px 0 0;  
  18.         }  
  19.         #lb_featured_image img{  
  20.             display:block;  
  21.             max-width:200px !important;  
  22.             height:auto;  
  23.         }  
  24.         #lb_featured_image .lb_remove_featured_image{  
  25.             display:none;  
  26.         }  
  27.     </style>';  
  28.    
  29. }  

完成以上步骤时,可以查看效果

三、添加JavaScript使特色图像可以快速编辑和更新
首先排队加载WordPress默认上传

  1. add_action( 'admin_enqueue_scripts', 'lb_include_myuploadscript' );  
  2. function lb_include_myuploadscript() {  
  3.     if ( ! did_action( 'wp_enqueue_media' ) ) {  
  4.         wp_enqueue_media();  
  5.     }  
  6. }  

然后添加快速编辑字段

  1. add_action('quick_edit_custom_box',  'lb_add_featured_image_quick_edit', 10, 2);  
  2. function lb_add_featured_image_quick_edit( $column_name, $post_type ) {  
  3.    
  4.     if ($column_name != 'featured_image') return;  
  5.     echo '<fieldset id="lb_featured_image" class="inline-edit-col-left">  
  6.         <div class="inline-edit-col">  
  7.             <span class="title">特色图像</span>  
  8.             <div>  
  9.                 <a href="#" class="lb_upload_featured_image">设置特色图像</a>  
  10.                 <input type="hidden" name="_thumbnail_id" value="" />  
  11.             </div>  
  12.             <a href="#" class="lb_remove_featured_image">移除特色图像</a>  
  13.         </div></fieldset>';  
  14.    
  15. }  

最后就是更新保存,复制代码

  1. add_action('admin_footer', 'lb_quick_edit_js_update');  
  2. function lb_quick_edit_js_update() {  
  3.    
  4.     global $current_screen;  
  5.     if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))  
  6.         return;  
  7.    
  8.         ?><script>  
  9.         jQuery(function($){  
  10.    
  11.             $('body').on('click', '.lb_upload_featured_image', function(e){  
  12.                 e.preventDefault();  
  13.                 var button = $(this),  
  14.                  custom_uploader = wp.media({  
  15.                     title: '设置特色图像',  
  16.                     library : { type : 'image' },  
  17.                     button: { text: '设置特色图像' },  
  18.                 }).on('select', function() {  
  19.                     var attachment = custom_uploader.state().get('selection').first().toJSON();  
  20.                     $(button).html('<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();  
  21.                 }).open();  
  22.             });  
  23.    
  24.             $('body').on('click', '.lb_remove_featured_image', function(){  
  25.                 $(this).hide().prev().val('-1').prev().html('设置特色图像');  
  26.                 return false;  
  27.             });  
  28.    
  29.             var $wp_inline_edit = inlineEditPost.edit;  
  30.             inlineEditPost.edit = function( id ) {  
  31.                 $wp_inline_edit.apply( this, arguments );  
  32.                 var $post_id = 0;  
  33.                 if ( typeof( id ) == 'object' ) {   
  34.                     $post_id = parseInt( this.getId( id ) );  
  35.                 }  
  36.    
  37.                 if ( $post_id > 0 ) {  
  38.                     var $edit_row = $( '#edit-' + $post_id ),  
  39.                             $post_row = $( '#post-' + $post_id ),  
  40.                             $featured_image = $( '.column-featured_image', $post_row ).html(),  
  41.                             $featured_image_id = $( '.column-featured_image', $post_row ).find('img').attr('data-id');  
  42.    
  43.    
  44.                     if$featured_image_id != -1 ) {  
  45.    
  46.                         $( ':input[name="_thumbnail_id"]', $edit_row ).val( $featured_image_id ); // ID  
  47.                         $( '.lb_upload_featured_image', $edit_row ).html( $featured_image ); // 图像 HTML  
  48.                         $( '.lb_remove_featured_image', $edit_row ).show(); // 移除链接  
  49.    
  50.                     }  
  51.                 }  
  52.         }  
  53.     });  
  54.     </script>  
  55. <?php  
  56. }  
(0)

本文由 SBKKO资源网 作者:Leaf 发表,转载请注明来源!

关键词:

热评文章

发表评论