WordPress在后台文章列表编辑特色图像

首页 WordPress教程 WordPress在后台文章列表编辑特色图像
    • 正文
    • WordPress直接在后台文章列表编辑特色图像是一个非常实用的功能,不需要每一篇文章点进去编辑文章后编辑特色图像,它能使我们在WordPress后台编辑文章时方便很多,这很大程度的节省了我们的时间,

      功能最终效果图如下图所示:

      WordPress在后台文章列表编辑特色图像

      如果你的主题不支持缩略图请首先在functions.php中添加

      //开启文章缩略图
      
      add_theme_support( 'post-thumbnails' );

      首先我们在后台文章列表添加数组, 复制下面的代码到你的functions.php中。

      /*
       * 添加数组到文章列表
       */
      add_filter('manage_post_posts_columns', 'lb_featured_image_column');
      function lb_featured_image_column( $column_array ) {
      	$column_array = array_slice( $column_array, 0, 1, true )
      	+ array('featured_image' => '特色图像')
      	+ array_slice( $column_array, 1, NULL, true );
       
      	return $column_array;
      }
       
      /*
       * 使用钩子完善数组
       */
      add_action('manage_posts_custom_column', 'lb_render_the_column', 10, 2);
      function lb_render_the_column( $column_name, $post_id ) {
      	if( $column_name == 'featured_image' ) {
      		if( has_post_thumbnail( $post_id ) ) {
      			$thumb_id = get_post_thumbnail_id( $post_id );
      			echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';
      		} else {
      			echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';
      		}
      	}
      }

      然后,我们添加一些CSS样式来美化数组。

      add_action( 'admin_head', 'lb_custom_css' );
      function lb_custom_css(){
       
      	echo '<style>
      		#featured_image{
      			width:120px;
      		}
      		td.featured_image.column-featured_image img{
      			max-width: 100%;
      			height: auto;
      		}
       
      		/* some styles to make Quick Edit meny beautiful */
      		#lb_featured_image .title{margin-top:10px;display:block;}
      		#lb_featured_image a.lb_upload_featured_image{
      			display:inline-block;
      			margin:10px 0 0;
      		}
      		#lb_featured_image img{
      			display:block;
      			max-width:200px !important;
      			height:auto;
      		}
      		#lb_featured_image .lb_remove_featured_image{
      			display:none;
      		}
      	</style>';
       
      }

      完成以上步骤后,在后台文章就可以查看效果了。

      WordPress在后台文章列表编辑特色图像

      接下来添加JS代码使特色图像可以快速编辑和更新,首先排队加载WordPress默认上传:

      add_action( 'admin_enqueue_scripts', 'lb_include_myuploadscript' );
      function lb_include_myuploadscript() {
      	if ( ! did_action( 'wp_enqueue_media' ) ) {
      		wp_enqueue_media();
      	}
      }

      然后在后台文章页面添加快速编辑字段:

      add_action('quick_edit_custom_box',  'lb_add_featured_image_quick_edit', 10, 2);
      function lb_add_featured_image_quick_edit( $column_name, $post_type ) {
       
      	if ($column_name != 'featured_image') return;
      	echo '<fieldset id="lb_featured_image" class="inline-edit-col-left">
      		<div class="inline-edit-col">
      			<span class="title">特色图像</span>
      			<div>
      				<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="lb_upload_featured_image">设置特色图像</a>
      				<input type="hidden" name="_thumbnail_id" value="" />
      			</div>
      			<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="lb_remove_featured_image">移除特色图像</a>
      		</div></fieldset>';
       
      }

      最后就是更新保存了,添加下面代码即可。

      add_action('admin_footer', 'lb_quick_edit_js_update');
      function lb_quick_edit_js_update() {
       
      	global $current_screen;
      	if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))
      		return;
       
      		?><script>
      		jQuery(function($){
       
      			$('body').on('click', '.lb_upload_featured_image', function(e){
      				e.preventDefault();
      				var button = $(this),
      				 custom_uploader = wp.media({
      					title: '设置特色图像',
      					library : { type : 'image' },
      					button: { text: '设置特色图像' },
      				}).on('select', function() {
      					var attachment = custom_uploader.state().get('selection').first().toJSON();
      					$(button).html('<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();
      				}).open();
      			});
       
      			$('body').on('click', '.lb_remove_featured_image', function(){
      				$(this).hide().prev().val('-1').prev().html('设置特色图像');
      				return false;
      			});
       
      			var $wp_inline_edit = inlineEditPost.edit;
      			inlineEditPost.edit = function( id ) {
      				$wp_inline_edit.apply( this, arguments );
       				var $post_id = 0;
      				if ( typeof( id ) == 'object' ) { 
      					$post_id = parseInt( this.getId( id ) );
      				}
       
      				if ( $post_id > 0 ) {
      					var $edit_row = $( '#edit-' + $post_id ),
      							$post_row = $( '#post-' + $post_id ),
      							$featured_image = $( '.column-featured_image', $post_row ).html(),
      							$featured_image_id = $( '.column-featured_image', $post_row ).find('img').attr('data-id');
       
       
      					if( $featured_image_id != -1 ) {
       
      						$( ':input[name="_thumbnail_id"]', $edit_row ).val( $featured_image_id ); // ID
      						$( '.lb_upload_featured_image', $edit_row ).html( $featured_image ); // 图像 HTML
      						$( '.lb_remove_featured_image', $edit_row ).show(); // 移除链接
       
      					}
      				}
       		}
      	});
      	</script>
      <?php
      }

      这篇WordPress如何在文章列表编辑特色图像的教程到此就结束了,教程看到这里,你也应该能够自己实现在后台文章列表编辑特色图像的功能了吧?

      WordPress在后台文章列表编辑特色图像

      扫码关注wp主题君

      精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

      记住我们的网址:ztJun.com

      收藏 (0)
      打赏 支付宝打赏 微信打赏
      点赞 (3)

      标题:WordPress在后台文章列表编辑特色图像

      分类:WordPress教程

      链接:https://www.ztjun.com/1690.html

      版权:

好久不见,甚是想念

相关文章