使用WP也一段时间了，自从文章页弄成大图置顶的样式后，每次写文章都要考虑去做一张特色图，必竟有图好看呀，时间长了，都成了一种负担了，想写点什么的时候，都要找图，大大影响写作的心情，所以美化了发文章的其它三种形式，其中状态这种就比较适合记录一些简短的想法。在文章页显示的时候，没有特色图的，就直接显示为文本。实现步骤：

1. 把内容标签样式设为透明，这样在显示文章的时候会有个过滤的效果
   
   #pjax-content{opacity: 0;transition: all 1s;}

   1	#pjax-content{opacity: 0;transition: all 1s;}

2. 加入js，加载文章标题，信息等到.article-body前，插入元素可以用append,before等等
   
   var src=$(".article-img img").attr("src"); if (src!= undefined ){ $('#big-baner').append('<img src='+src+'>'); } else { $('#pjax-content').css('margin-top','0px') $('#pjax-content .article-body').before($('#wzy .article-title')) $('#pjax-content .article-title').after($('#wzy .article-meta')) $('#wzy').css('display','none') $('#pjax-content .article-title').css('margin','0 0 10px') } $('#pjax-content').css('opacity','1');

   1 2 3 4 5 6 7 8 9 10 11 12

   var src=$(".article-img img").attr("src");       if (src!= undefined ){     $('#big-baner').append('<img src='+src+'>');     } else { $('#pjax-content').css('margin-top','0px') $('#pjax-content .article-body').before($('#wzy .article-title')) $('#pjax-content .article-title').after($('#wzy .article-meta')) $('#wzy').css('display','none') $('#pjax-content .article-title').css('margin','0 0 10px')     }   $('#pjax-content').css('opacity','1');

这样在没有特色图的时候，就显示这样的简约风格：