WordPress教程 2020年02月25日
0 收藏 0 点赞 1,493 浏览 3609 个字
摘要 :

在文章列表编辑特色图像,看到这句话大概就知道今天要分享的是什么功能了。 具体效果如下图所示: 这是一个非常实用的功能,它能使我们在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"  class="lb_upload_featured_image">设置特色图像</a>
				<input type="hidden" name="_thumbnail_id" value="" />
			</div>
			<a href="#" 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如何在文章列表编辑特色图像的教程到此就结束了,这篇教程由主题笔记原创,本站为转载。

微信扫一扫

支付宝扫一扫

本文网址:https://www.wpjc.net/974.html

相关推荐
测试
日期:2022-10-21 点赞:0 阅读:700
WordPress获取文章内第一张图片为缩略图
如果你的站点文章数量很多,那么每一篇文章都要手动设置缩略图必然会是个繁杂的步骤,之前我们分享过一篇《WordPress文章随机显示缩略图的实…
日期:2020-12-16 点赞:0 阅读:2,416
一行代码让你的网站变灰进入哀悼模式
深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞, 愿逝者安息,愿生者奋发,愿祖国昌盛。 让我们一起接力,一起变灰,一起哀悼。 网站变灰的方…
日期:2020-12-16 点赞:0 阅读:1,893
WordPress添加网址加载时间
最近比格经常在别的博客上看到“页面加载时间n秒”的效果,然后群里也有人在问,所以比格今天就写一篇Wordpress添加网址加载时间的Word…
日期:2020-12-16 点赞:0 阅读:1,808
WordPress纯代码免插件配置SMTP邮件功能教程
SMTP邮件功能在WordPress中是很常用的功能, 例如:网站注册登录、评论回复等风,虽然WordPress自带了mail函数,但是使用…
日期:2020-12-16 点赞:0 阅读:2,397
WordPress后台只显示当前用户的文章和媒体文件
在我们使用WordPress多用户主题的时候,WordPress后台会默认显示的所有用户文章、媒体文件,这样的情况会导致大家都可以看到其他用…
日期:2020-12-16 点赞:0 阅读:1,817
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站