1. 橘子皮首页
  2. 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.     return $column_array;
  10. }
  11. /*
  12.  * 使用钩子完善数组
  13.  */
  14. add_action(‘manage_posts_custom_column’, ‘lb_render_the_column’, 10, 2);
  15. function lb_render_the_column( $column_name, $post_id ) {
  16.     if( $column_name == ‘featured_image’ ) {
  17.         if( has_post_thumbnail( $post_id ) ) {
  18.             $thumb_id = get_post_thumbnail_id( $post_id );
  19.             echo ‘<img data-id=“‘ . $thumb_id . ‘” src=“‘ . wp_get_attachment_url( $thumb_id ) . ‘” />’;
  20.         } else {
  21.             echo ‘<img data-id=“-1” src=“‘ . get_stylesheet_directory_uri() . ‘/placeholder.png” />’;
  22.         }
  23.     }
  24. }

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

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

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

三、添加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.     if ($column_name != ‘featured_image’) return;
  4.     echo ‘<fieldset id=“lb_featured_image” class=“inline-edit-col-left”>
  5.         <div class=“inline-edit-col”>
  6.             <span class=“title”>特色图像</span>
  7.             <div>
  8.                 <a href=“#” class=“lb_upload_featured_image”>设置特色图像</a>
  9.                 <input type=“hidden” name=“_thumbnail_id” value=“” />
  10.             </div>
  11.             <a href=“#” class=“lb_remove_featured_image”>移除特色图像</a>
  12.         </div></fieldset>’;
  13. }

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

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

文章整理,作者:橘子皮,如若转载,请注明出处:https://www.juzip.cn/1579.html

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

发表评论

电子邮件地址不会被公开。 必填项已用*标注