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

作者 : OKMG 发布时间: 2020-05-7 文章热度:48 共3697个字,阅读需10分钟。 本文内容有更新 字体:
  • 文章介绍
  • 网站建设

    文章列表编辑特色图像,看到这句话大概就知道今天要分享的是什么功能了。

    具体效果如下图所示:

    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如何在文章列表编辑特色图像的教程到此就结束了,这篇教程由主题笔记原创,本站为转载。

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    购买的源码有问题 怎么办?
    郑重声明:仅限于商业源码可以提供技术支持且保证源码安全可用。 其余源码仅供参考学习。 而且源码在逐步下架。预计两个月内,本站所有源码 全部都是商用源码。
    买完的源码不想要了,可以退款么?
    非常抱歉,因为源码的可复制性和传播性。所有源码一经出售不得退款。 并非我们这样,所有的IT开发行业都是如此。
    源码没有我想要的,怎么办?
    非常不好意思呦!因为优秀的成品源码是有限的,如果平台上没有符合您需求的源码,可以联系OKMG客服解决,定制或者二开。 不过为了给大家一个良好的体验,平台发布的所有商业源码都是我们认可,且测试过的。 优秀才推荐,优秀才出售。
    我有源码,可以发布到平台上么?
    可以的,如果你是正版作者 可以联系我们。 但盗版勿扰。
    我是作者,你们家源码有我的盗版怎么办?
    非常抱歉,由于大部分源码都是互联网上收集的。收集到的源码 其中一部分 我们已经找到了作者 并且替换为正版代理。剩余的盗版 有些是因为时间紧 还没整理完成,还有部分是没有找到原作者的联系方式。 可以联系平台客服提供软著或证据 我们五分钟内下架处理。也可以与我们合作。 OKMG向正版致敬! 正因为我们是同行,所以我们清楚正版的创作是多么艰辛。
    芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:925296647
    芒果源码 » WordPress如何在文章列表编辑特色图像

    发表评论

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: meng@yimiaonet.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果对这款程序不满意,还可以联系我们定制开发哟!

    联系OKMG技术专家

    @OKMG
    https://www.okmg.cn

    扫码关注「OKMG」微信公众号

    730+

    总资源

    730+

    实用教程

    821+

    本站会员

    1081天+

    累计服务

    323968次+

    总访问次数

    01:52:18