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

我们在使用 wordpress 系统建站的过程中,会发现 WordPress 允许我们为每篇文章设置“特色图片”,也就是通常所说的缩略图,但是默认情况下我们只能够在文章编辑页面进行设置,但是有时我们需要在后台文章列表中添加、更改或者删除特色图片,如果能实现这个功能我想就大大的方便我们管理文章了。

我们就向大家推荐一款好用的 WordPress 插件 – Easy Thumbnail Switcher,这款 WordPress 插件可以让我们直接在后台文章列表中添加、更改或者删除特色图片,非常的方便。在后台的插件中搜索 Easy Thumbnail Switcher,在线安装或者点击此处下载 Easy Thumbnail Switcher 插件,上传到服务器空间激活即可。
WordPress如何在后台文章列表编辑特色图像-云模板感兴趣的朋友可以下载此款 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. 			height: auto;
  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>';

完成以上步骤后,在后台文章就可以查看效果了。
WordPress如何在后台文章列表编辑特色图像-云模板接下来添加 JS 代码使特色图像可以快速编辑和更新,首先排队加载 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="#" rel="external nofollow"  rel="external nofollow"  class="lb_upload_featured_image">设置特色图像</a>
  10. 				<input type="hidden" name="_thumbnail_id" value="" />
  11. 			</div>
  12. 			<a href="#" rel="external nofollow"  rel="external nofollow"  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. }

上面我们介绍了两种实现方法,各有千秋喜欢那种就使用那种,使用 WordPress 的原则就是能不使用插件就尽量不要使用插件,动动手不妨学习一下。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/85663

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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

51建站客服微信二维码
点击这里购买