最新公告
  • 欢迎您光临七牛站长,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress如何在文章列表编辑特色图像_FF站


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

    具体效果如下图所示:

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

    七牛站长-声明:
    1.本站发布的文章及附件均来源于投稿和网络,仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负。
    2.本站所有资源不带技术支持,下载资源请24小时内删除,如用于违法用途,或者商业用途,一律由用者承担。
    3.如有侵权请邮件联系客服!25816669@qq.com


    七牛站长网 » WordPress如何在文章列表编辑特色图像_FF站

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    七牛站长
    专业分享发布网站建设源码/模板/教程等资源平台
    • 6会员总数(位)
    • 2604资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 201稳定运行(天)

    七牛站长-分享最优质的资源集合