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

    发表评论

  • 如本资源侵犯了您的权益,请联系投诉邮箱meng@yimiaonet.com进行举报!我们将在收到邮件的1个小时内处理完毕。

  • 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用!

  • OKMG(芒果源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售!

  • OKMG(芒果源码)客服QQ:29139260

  • OKMG(芒果源码)商务电话(仅对企业客户/个人用户请联系QQ客服):010-86463891

  • 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
  • 免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260

    售后服务:

    • 售后服务范围 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: 29139260@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系客服
    开通VIP 享更多特权,建议使用 QQ 登录