打造更为强健的 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 来达到更细化的导航效果,只要自己好好将它们组合起来,强健的导航栏也不是什么神奇的东西。

Tag(s): ,
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
Shawn Published@19:52 / 2008-10-23 / Trackback / Skip
25 Comments Contributed by Visitors
  1. rebutton无招之击 / 20:13@2008-10-23 1
    无招之击

    这个样式非常酷啊,看来是wp专家级的了,不过在firefox下看雅黑字体直接是一种折磨

  2. rebuttonShawn / 20:16@2008-10-23 2
    Shawn

    @无招之击: 是不是有字体高低不一的问题?还是发虚?我用 GDI++ 渲染了系统字体,所以没发现问题,看来有机会得找台没渲染过的系统看看有多难看。。。

  3. rebuttonShawn / 20:21@2008-10-23 3
    Shawn

    @Shawn: 可惜我周围的电脑全都遭了我"毒手",都是渲染过的。。。

  4. rebutton无招之击 / 20:23@2008-10-23 4
    无招之击

    我可以帮你截图,可惜传不过去

  5. rebuttonShawn / 20:24@2008-10-23 5
    Shawn

    @无招之击: 非常感谢,明天我自己看吧,不麻烦您了。

  6. rebutton无招之击 / 20:29@2008-10-23 6
    无招之击

    哈哈,看pr和排名都差不多,做过链接吧?

  7. rebuttonShawn / 20:33@2008-10-23 7
    Shawn

    @无招之击: 我加好了:)

  8. rebutton无招之击 / 20:37@2008-10-23 8
    无招之击

    我加上了

  9. rebuttonShawn / 20:40@2008-10-23 9
    Shawn

    @无招之击: 谢谢。我换了 Verdana,应该会好些。

  10. rebuttonvimcoder / 20:41@2008-10-23 10
    vimcoder

    相当拉风的 导航

  11. rebuttonShawn / 20:44@2008-10-23 11
    Shawn

    @vimcoder: 谢谢,因为你留言,所以我发现了不错的 WP 插件 :grin:

  12. rebutton无招之击 / 21:25@2008-10-23 12
    无招之击

    我找了半天才找到,怎么不是加在首页的吗?

  13. rebuttonShawn / 21:29@2008-10-23 13
    Shawn

    @无招之击: 不好意思,我这里首页只是随机展示5个链接,其余的放在链接页面。如果您对这个方式不太满意,请直接告诉我。

  14. rebutton老所 / 21:54@2008-10-23 14
    老所

    shawn出品,必属精品,先顶再看

  15. rebutton老所 / 22:01@2008-10-23 15
    老所

    嗯,很酷,下个目标,照这个细化,哈哈~

  16. rebuttonShawn / 22:03@2008-10-23 16
    Shawn

    @老所: 其实你那个主题的导航栏要更酷一点,所以维持原状更好,哈哈。

  17. rebuttonNickyYe / 22:09@2008-10-23 17
    NickyYe

    你的设计想法真的很多很好,佩服~
    学习到不少

  18. rebuttoniColor / 23:00@2008-10-23 18
    iColor

    有创意,,不过你的固定页面我有看啊,,,呵呵

    如果加个类似">"符号会更友好一些

  19. rebuttoniColor / 23:05@2008-10-23 19
    iColor

    @老所:
    你那个导航好像没有鼠标over提示,,虽然图标很好认,但我还是下意识看到状态栏看看是到了哪个页面 :smile:

  20. rebuttonxiaorsz / 23:07@2008-10-23 20
    xiaorsz

    每篇日志都能带来新的东西!精彩不容错过啊!

  21. rebuttonShawn / 23:11@2008-10-23 21
    Shawn

    @NickyYe: 谢谢:)
    @iColor: 有空会加上的,要做到趋向完美 :grin:
    @xiaorsz: 我最近写 Wordpress 有点多。。。

  22. rebuttoniColor / 23:11@2008-10-23 22
    iColor

    可能大多人不会注意页面,,但比如我刚看评论时提到友情链接的事,我就想直接打开友情链接页面,之前直接点就行了,但现在要先返回主页,,,
    所以似乎对小部分人/小部分情况这种设置还是不够友好,,期待你能想出最佳方案,,又给你出难题了.....
    或者可以在文章页面的右侧栏"统计数据"上面加上页面菜单项??(主页面不用出现)

  23. rebuttonShawn / 23:18@2008-10-23 23
    Shawn

    @iColor: 嗯,不难。我会在非首页或页面的时候把固定页面放在侧栏。至于导航那里,其实更像是路径一类东西。

  24. rebuttoniColor / 23:24@2008-10-23 24
    iColor

    说到这再提个小问题吧,,,是不是应该在首页的最近评论那块,比如小头像后面加个小图标表示你回复过,,没有小图标表示没有回复过呢??,,,这样更友好,,,
    就类似那种图标,一个圆,中间一个转向箭头,挺常见的那种,,,
    要不每次打开首页都不确定你是不是回复了,还要再打开文章页才行,,,

    P.S. 我今天是来找茬的 :cool:

  25. rebuttonShawn / 23:31@2008-10-23 25
    Shawn

    @iColor: 哈哈,你这个想法真好。不过这倒是难住我了,因为 Wordpress 并没有直接的方式可以检测是否有被回复,如果用了 Threaded Comments 倒比较好实现。不过我还是会想想怎么做的。。。

  26. rebuttonfisio / 23:42@2008-10-23 26
    fisio

    对呀,光想到用这个判断来写页面标题,怎么就没想到这么用呢

  27. rebuttonShawn / 23:47@2008-10-23 27
    Shawn

    @fisio: 可能我一天比较闲吧。。。

  28. rebuttonEvan / 0:57@2008-10-24 28
    Evan

    这个很有用!

  29. rebuttonShawn / 0:59@2008-10-24 29
    Shawn

    @iColor: 比较曲线地实现了。
    @Evan: 你的 Blog 地址?下次留一个吧。

  30. rebuttonfqch / 7:21@2008-10-24 30
    fqch

    很强的博客,能学到不少东西呀.我会常来的呀!~

  31. rebuttonleehow / 8:19@2008-10-24 31
    leehow

    即使不懂,我也必顶必顶~

  32. rebuttoniColor / 8:55@2008-10-24 32
    iColor

    @Shawn:
    怎么比较曲线地实现的??
    我怎么看不到效果...

  33. rebuttonZH CEXO / 10:58@2008-10-24 33
    ZH CEXO

    很好很强大,我收藏着!

  34. rebuttonShawn / 11:41@2008-10-24 34
    Shawn

    @iColor: 等我回复了你,你就看见了。。:)
    @fqch: 欢迎 :smile:

  35. rebuttoniColor / 12:01@2008-10-24 35
    iColor

    哈哈,,看到了,,,,嗯,,有个提示就行 :cool:

  36. rebuttonShawn / 13:12@2008-10-24 36
    Shawn

    @iColor: 这个提示很傻,只有我在第一位,也就是全都回复了以后,才会显示。

  37. rebuttonasiapan / 19:00@2008-10-24 37
    asiapan

    @Shawn: GDI++渲染后的页面,是不是整个看起来会比没渲染时要灰蒙蒙,要设置什么字体会好看点?

  38. rebuttonShawn / 19:03@2008-10-24 38
    Shawn

    @asiapan: 不会,只要调整好就很正常。当然你还得选一个合适的字体,默认的宋体拿GDI++渲染基本没有效果,还变得很虚。

  39. rebuttonvoidman / 13:30@2008-10-26 39
    voidman

    很不错的想法。

  40. rebuttonaunsen / 13:46@2008-10-26 40
    aunsen

    相当漂亮 :eek:

  41. rebuttonTox / 22:12@2009-01-05 41
    Tox

    这用法对我新主题有益,收下了,谢谢

Leave Comments Here...

必填

必填&保密

随您

支持Ctrl+Enter快捷提交

  • 已部署"白忙活" Anti-Spam 系统,猪肉 Spammer 请注意查看源代码链接处。
  • 本站不会泄露您的邮件地址,敬请放心。
  • 支持常用 HTML 代码调用,插入 PHP 代码需注意:< = &lt;> = &gt;
  • 仅当某人针对您的评论做出回应时,您才会收到由本站发出的通知信件。
  • 如您希望以相同方式通知某位网友,请点击 Reply 按钮,或自行输入 @对方名字:
  • 鼠标移至评论列表中的 @someone: 区域即可自动显示 someone 的评论内容。

Shawn Blog

Focus on Wordpress, Firefox, Web 2.0, Webhosting