WordPress如何在后台所有文章编辑特色图像

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

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

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

<code>//开启文章缩略图
add_theme_support( 'post-thumbna<span class="xiomao-448-mypl" data-mark="seo"></span>ils' );</code>

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

<code>/*
* 添加<span class="xiomao-603-mypl" data-mark="seo"></span>数组到文章列表
*/
add_filter('man<span class="xiomao-630-mypl" data-mark="seo"></span>age_post_posts_col<span class="xiomao-648-mypl" data-mark="seo"></span>umns', 'lb_featured_image<span class="xiomao-675-mypl" data-mark="seo"></span>_column'<span class="xiomao-684-mypl" data-mark="seo"></span>);
function lb_featur<span class="xiomao-705-mypl" data-mark="seo"></span>ed_image_column( $co<span class="xiomao-725-mypl" data-mark="seo"></span>lumn_array ) {
$column_array = array_slice( $<span class="xiomao-770-mypl" data-mark="seo"></span>column_arr<span class="xiomao-780-mypl" data-mark="seo"></span>ay, 0, 1, true )
+ array('featured_<span class="xiomao-816-mypl" data-mark="seo"></span>image' => '特色图像')
+ array_slice( $co<span class="xiomao-858-mypl" data-mark="seo"></span>lum<span class="xiomao-861-mypl" data-mark="seo"></span>n_array, 1, NULL, true );
return $column_array;
}
/*
* 使用<span class="xiomao-918-mypl" data-mark="seo"></span>钩子完善数组
*/
add_action('manage_posts_custom_column', <span class="xiomao-972-mypl" data-mark="seo"></span>'lb_render_the_<span class="xiomao-987-mypl" data-mark="seo"></span>column', 10, 2);
function lb_render_the_colu<span class="xiomao-1032-mypl" data-mark="seo"></span>mn( $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( $th<span class="xiomao-1276-mypl" data-mark="seo"></span>umb_id ) . '" />';
} else {
echo '&lt<span class="xiomao-1320-mypl" data-mark="seo"></span>;img data-id="-1" src="' . get_stylesheet_directory_uri(<span class="xiomao-1380-mypl" data-mark="seo"></span>) . '/placeholder.p<span class="xiomao-1400-mypl" data-mark="seo"></span>ng" />';
}
}
}</code>

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

<code>add_action( 'admin_head', 'lb_custom_css' );
function lb_custom_c<span class="xiomao-1593-mypl" data-mark="seo"></span>ss(){
echo '<style>
#featured_image{
width:120px;
}
td.featured_image.column-fea<span class="xiomao-1680-mypl" data-mark="seo"></span>tured_image img{
max-width: 100%;
height: auto;
}
/* some styles to make Quick E<span class="xiomao-1760-mypl" data-mark="seo"></span>dit meny beauti<span class="xiomao-1775-mypl" data-mark="seo"></span>ful */
#lb_featured_image .title{margin-top:10px;display:block;}
#lb_featured_image a.lb_upload_featured_image{
display:inline-bl<span class="xiomao-1904-mypl" data-mark="seo"></span>ock;
margin:10px 0 0;
}
#lb_featur<span class="xiomao-1938-mypl" data-mark="seo"></span>ed_image img{
display:block;
max-width:200px !important;
height:auto;
}
#lb_fe<span class="xiomao-2016-mypl" data-mark="seo"></span>atured_image .lb_remove_featured_image{
display:none;
}
</style>';
}</code>

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

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

<code>add<span class="xiomao-2414-mypl" data-mark="seo"></span>_action( 'admin_enqueue_scripts', <span class="xiomao-2451-mypl" data-mark="seo"></span>'lb_include_myuploadscript' );
function lb_include_myuploadscript() {
if ( ! did_action( 'wp_enqueue_media<span class="xiomao-2560-mypl" data-mark="seo"></span>' ) ) {
wp_enqueue_media();
}
}</code>

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

<code>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 ($colu<span class="xiomao-2860-mypl" data-mark="seo"></span>mn_name != 'featured_image') return;
echo '<fieldset id="lb_f<span class="xiomao-2928-mypl" data-mark="seo"></span>eatured_image" class="inline-edit-col-left">
<div class="inline-edit-col">
<spa<span class="xiomao-3024-mypl" data-mark="seo"></span>n class="title"><span class="xiomao-3045-mypl" data-mark="seo"></span>特色图像</span>
<div>
<a href="#" rel="nofollow"  rel="nofollow"  rel="external nofollow"  rel="external nofollow"<span class="xiomao-3180-mypl" data-mark="seo"></span>  rel="external nofollow"  rel="external nofollow"  clas<span class="xiomao-3240-mypl" data-mark="seo"></span>s="lb_upload_featured_image">设置特色图像</a>
<input type="hidden" name="_thumbnail_id" value="" />
</div>
<a href="#" rel="nofollow<span class="xiomao-3402-mypl" data-mark="seo"></span>"  rel="nofol<span class="xiomao-3416-mypl" data-mark="seo"></span>low<span class="xiomao-3420-mypl" data-mark="seo"></span>"  rel="external nofollow"  rel="external nofollow"  rel="e<span class="xiomao-3484-mypl" data-mark="seo"></span>xternal nofollow"  rel="external nofollow"  class<span class="xiomao-3536-mypl" data-mark="seo"></span>="lb_remove_featured_image">移<span class="xiomao-3570-mypl" data-mark="seo"></span>除特色图像<span class="xiomao-3575-mypl" data-mark="seo"></span></a>
</div>&l<span class="xiomao-3600-mypl" data-mark="seo"></span>t;/fieldset>';
}</code>

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

<code>add_action('a<span class="xiomao-3738-mypl" data-mark="seo"></span>dm<span class="xiomao-3740-mypl" data-mark="seo"></span>in_footer', 'lb_quick_edit_j<span class="xiomao-3770-mypl" data-mark="seo"></span>s_update');
function lb_quick_edit_js_update() {
global $current_<span class="xiomao-3836-mypl" data-mark="seo"></span>scre<span class="xiomao-3840-mypl" data-mark="seo"></span>en;
if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))
return;
?><script>
jQuery(function($){
$('body').on('c<span class="xiomao-4004-mypl" data-mark="seo"></span>lick', '.lb_upload_f<span class="xiomao-4026-mypl" data-mark="seo"></span>eatured_image', function(e){
e.preventDefault();
var button = $(this),
custom_uploader = wp.media({
title: '设置特色图像',
library : { type : 'image' }<span class="xiomao-4176-mypl" data-mark="seo"></span>,
button: { text: '设置特色图像' },
}).o<span class="xiomao-4212-mypl" data-mark="seo"></span>n('se<span class="xiomao-4218-mypl" data-mark="seo"></span>lect'<span class="xiomao-4224-mypl" data-mark="seo"></span>, function() {
var attachment = custom_uploader.<span class="xiomao-4272-mypl" data-mark="seo"></span>sta<span class="xiomao-4275-mypl" data-mark="seo"></span>te(<span class="xiomao-4278-mypl" data-mark="seo"></span>).get('selection').first().toJSON();
$(button).html('<img src=<span class="xiomao-4346-mypl" data-mark="seo"></span>"' +<span class="xiomao-4352-mypl" data-mark="seo"></span> attachment.url + '" />').next().val(attachment.id).parent().n<span class="xiomao-4420-mypl" data-mark="seo"></span>ext().show();
}).open();
});
$('body').on('<span class="xiomao-4466-mypl" data-mark="seo"></span>click', '.lb_remo<span class="xiomao-4485-mypl" data-mark="seo"></span>ve_featured_ima<span class="xiomao-4500-mypl" data-mark="seo"></span>ge', function(){
$(this).hide().prev().val('-1').pr<span class="xiomao-4554-mypl" data-mark="seo"></span>ev().html('设置特色图像');
return false;
});
var $wp_inline_edit = inlineEditPost.edit;
inlineEditPost.edit = f<span class="xiomao-4661-mypl" data-mark="seo"></span>unction( id ) {
$wp<span class="xiomao-4680-mypl" data-mark="seo"></span>_inline_edit.apply( this, arguments );
var $post_id = 0;<span class="xiomao-4736-mypl" data-mark="seo"></span>
if ( typeo<span class="xiomao-4747-mypl" data-mark="seo"></span>f( id ) =<span class="xiomao-4756-mypl" data-mark="seo"></span>= '<span class="xiomao-4760-mypl" data-mark="seo"></span>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<span class="xiomao-5012-mypl" data-mark="seo"></span> = $( '.column-featured_image', $post_row ).find('img').attr('data-id');
if( $featured_image_id !<span class="xiomao-5115-mypl" data-mark="seo"></span>= -1 ) {
$( ':input[name="_thumbnail_id"]', $edit_row ).val( $fea<span class="xiomao-5184-mypl" data-mark="seo"></span>tured_image_id ); // ID
$( '.lb_upload_featured_image', $edit_ro<span class="xiomao-5250-mypl" data-mark="seo"></span>w ).html( $featured_image ); // 图像 HTML
$( '.lb_remov<span class="xiomao-5304-mypl" data-mark="seo"></span>e_featured_image', $edit_row ).show(); // 移除链<span class="xiomao-5350-mypl" data-mark="seo"></span>接
}
}<span class="xiomao-5355-mypl" data-mark="seo"></span>
}
});
</script>
<?php
}</code>

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

该文章转载来自暖岛网

人已赞赏
wordpress教程网站教程

WordPress屏蔽后台自带默认小工具

2020-10-28 22:01:49

wordpress教程网站教程

WordPress纯代码实现提交评论ajax翻页效果

2020-10-28 22:01:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索