打造更为强健的 Wordpress 导航栏
很多同学喜欢把 Wordpress 的"页面"作为栏目,放在 header 附近。美其名曰:导航。
其实 Wordpress 的"页面"并不是人们经常会访问的内容,我估计我的固定页面甚至都没有人看。既然如此,为什么不让导航栏起到真正的导航作用,让它变得更有趣呢?
Wordpress 有一组代码是拿来给我们应付不同情况的。这些代码原本为人熟知的领域是侧边栏,当需要在不同页面展示不同侧边栏的时候,它们可以大展拳脚。现在不妨将它们用在导航栏上,打造一组多变的导航栏。
先"展示"一下代码:
<?php if(is_home()); ?>, <?php if(is_single()); ?>, <?php if(is_page()); ?>, <?php if(is_category()); ?> 等等等等。。。
它们对应首页、单页、固定页面、分类等内容。
在首页上,展示页面列表无可厚非。可是当访客进入单篇日志,页面列表就没有什么作用了,或许换成类似"路径"的东西会更为实用。
所以我这么写:
<?php if(is_single()) { ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="/">首页</a></li>
<li><?php the_category(', ') ?></li>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
<?php } ?>
意思是,当进入单篇日志,导航栏显示内容为:首页 该文章所属分类 该文章的标题
同时,隐藏原本的导航栏目,也就是页面列表:
<?php if(!is_single()) { ?>
<?php wp_list_pages(); ?>
<?php } ?>
即如果不是单篇文章,则显示原本的页面列表(如果是单篇文章就不显示了)。
还可以这样写:
<?php if(is_home() OR is_page()) { ?>
<?php wp_list_pages(); ?>
<?php } ?>
代表只有在首页或者固定页面的时候才在导航栏显示页面列表。
到这里,我的主要内容就说完了。估计有些同学还不知道我在说什么,所以我决定配点图。以我自己的 Blog 为例。
在首页时,导航栏显示:

在单篇文章页,导航栏显示:

浏览到按月存档时,导航栏又成了这个样子:

还可以用 is_tags、is_year、is_month、is_day 来达到更细化的导航效果,只要自己好好将它们组合起来,强健的导航栏也不是什么神奇的东西。

这个样式非常酷啊,看来是wp专家级的了,不过在firefox下看雅黑字体直接是一种折磨
@无招之击: 是不是有字体高低不一的问题?还是发虚?我用 GDI++ 渲染了系统字体,所以没发现问题,看来有机会得找台没渲染过的系统看看有多难看。。。
@Shawn: 可惜我周围的电脑全都遭了我"毒手",都是渲染过的。。。
我可以帮你截图,可惜传不过去
@无招之击: 非常感谢,明天我自己看吧,不麻烦您了。
哈哈,看pr和排名都差不多,做过链接吧?
@无招之击: 我加好了:)
我加上了
@无招之击: 谢谢。我换了 Verdana,应该会好些。
相当拉风的 导航
@vimcoder: 谢谢,因为你留言,所以我发现了不错的 WP 插件
我找了半天才找到,怎么不是加在首页的吗?
@无招之击: 不好意思,我这里首页只是随机展示5个链接,其余的放在链接页面。如果您对这个方式不太满意,请直接告诉我。
shawn出品,必属精品,先顶再看
嗯,很酷,下个目标,照这个细化,哈哈~
@老所: 其实你那个主题的导航栏要更酷一点,所以维持原状更好,哈哈。
你的设计想法真的很多很好,佩服~
学习到不少
有创意,,不过你的固定页面我有看啊,,,呵呵
如果加个类似">"符号会更友好一些
@老所:
你那个导航好像没有鼠标over提示,,虽然图标很好认,但我还是下意识看到状态栏看看是到了哪个页面
每篇日志都能带来新的东西!精彩不容错过啊!
@NickyYe: 谢谢:)
@iColor: 有空会加上的,要做到趋向完美
@xiaorsz: 我最近写 Wordpress 有点多。。。
可能大多人不会注意页面,,但比如我刚看评论时提到友情链接的事,我就想直接打开友情链接页面,之前直接点就行了,但现在要先返回主页,,,
所以似乎对小部分人/小部分情况这种设置还是不够友好,,期待你能想出最佳方案,,又给你出难题了.....
或者可以在文章页面的右侧栏"统计数据"上面加上页面菜单项??(主页面不用出现)
@iColor: 嗯,不难。我会在非首页或页面的时候把固定页面放在侧栏。至于导航那里,其实更像是路径一类东西。
说到这再提个小问题吧,,,是不是应该在首页的最近评论那块,比如小头像后面加个小图标表示你回复过,,没有小图标表示没有回复过呢??,,,这样更友好,,,
就类似那种图标,一个圆,中间一个转向箭头,挺常见的那种,,,
要不每次打开首页都不确定你是不是回复了,还要再打开文章页才行,,,
P.S. 我今天是来找茬的
@iColor: 哈哈,你这个想法真好。不过这倒是难住我了,因为 Wordpress 并没有直接的方式可以检测是否有被回复,如果用了 Threaded Comments 倒比较好实现。不过我还是会想想怎么做的。。。
对呀,光想到用这个判断来写页面标题,怎么就没想到这么用呢
@fisio: 可能我一天比较闲吧。。。
这个很有用!
@iColor: 比较曲线地实现了。
@Evan: 你的 Blog 地址?下次留一个吧。
很强的博客,能学到不少东西呀.我会常来的呀!~
即使不懂,我也必顶必顶~
@Shawn:
怎么比较曲线地实现的??
我怎么看不到效果...
很好很强大,我收藏着!
@iColor: 等我回复了你,你就看见了。。:)
@fqch: 欢迎
哈哈,,看到了,,,,嗯,,有个提示就行
@iColor: 这个提示很傻,只有我在第一位,也就是全都回复了以后,才会显示。
@Shawn: GDI++渲染后的页面,是不是整个看起来会比没渲染时要灰蒙蒙,要设置什么字体会好看点?
@asiapan: 不会,只要调整好就很正常。当然你还得选一个合适的字体,默认的宋体拿GDI++渲染基本没有效果,还变得很虚。
很不错的想法。
相当漂亮
这用法对我新主题有益,收下了,谢谢