WordPress 置顶文章高亮显示
很多博客都有自己的置顶文章,在默认情况下WP对置顶文章只是将它们的位置排在前面,格式显示跟其他文章是没有任何区别的,没法突出置顶文章的重要性!
那我们怎样才能将它们区别开来呢?
这里有几种方法:
一、WordPress如何设置文章置顶?
很多朋友应该都知道WordPress有置顶文章的功能,设置文章置顶很简单,打开文章编辑页,右边栏的【发布】栏目即可设置,如下图:
二、置顶文章的标题处添加高亮
置顶文章要用到的函数也只有一个is_sticky(),这个函数用于判断该文章是否为置顶文章。
置顶文章一般只显示在首页,打开你的主题目录下的index.php,例如:
vim wp-content/themes/officefolders/index.php
查找:the_title();
然后将其改成:
<h2> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to '); ?><?php the_title(); ?>"> <?php if(is_sticky()) echo '<span style="color:red;">【置顶】</span>'; the_title(); ?> </a> </h2>
三、置顶文章不显示文章摘要
同样是打开index.php,例如:
vim wp-content/themes/officefolders/index.php
查找:the_content
或 the_excerpt
,给它添加一个判断,这样置顶文章就不显示摘要了,如:
或
四、给置顶文章添加边框或背景等
这个方法不需要判断是否为置顶文章,只需给它添加一个CSS样式即可。
打开主题目录下的index.php,例如:
vim wp-content/themes/officefolders/index.php
找到每篇文章所在的div,一般的主题查找:class="post" 这个div就是每篇文章所在的div,我们现在给个这个div添加一个类,如将 <div class="post"> 改成(可将以下代码中的class="post"去除,保留也行):
添加上 post_class(); 后的class样式为:
如果是置顶文章,会自动给这个div添加一个类.sticky,现在打开主题目录下的style.css,例如:
vim wp-content/themes/officefolders/style.css
添加类属性:
说明: .sticky 样式在上面添加上 post_class(); 后的class样式里已经有了
class="post-8468 post type-post status-publish format-standard sticky hentry category-startup tag-2-0 tag-proxy tag-2084 tag-278 tag-2217 tag-2282 tag-3677 tag-3675 tag-3638 tag-3308 tag-3676"
这样置顶文章就有了背景和边框,你可以根据需要修改这个类属性,获得你满意的效果。
成功案例
米扑博客,就是基于WordPress搭建,并定制了许多个性化的样式。
文章置顶的效果如下:
米扑博客网址:
参考推荐:
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2015-06-04 04:15:27
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!