记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > 给WordPress加上文章目录导航

给WordPress加上文章目录导航

Tags: | | 作者:海天无影

不知道大家发现没,海天的BLOG的文章的顶端已经加上了文章目录的导航了。当然这个在很多主题里都有此项功能显示了,但给没有这个功能主题加上还是很不错的,就像现在海天用的powerV3主题。海天还是蛮喜欢加上这样一个导航的,感觉比较正式,特别是有子目录的时候,更方便访客知道页面是在什么项目下的。

此文章目录导航功能,大家见的最多的地方应该是论坛。有了这个文章导航功能,访客就可以方便地知道并访问同类的文章, 并明确文章的所属, 这样对提高用户体验和网站的PV值都很有帮助,闲来看看怎么实现的吧。

文章目录导航功能是在大牛neoease的《WordPress 的文章导航》看到的,可以给文章加上分类或是子分类的导航目录。可能有人在这里会被绕晕了,其实海天举个例子就很好理解了。

只有分类的文章目录导航(不显示子分类) : 首页 > 分类 > 文章
带子分类的文章目录导航(显示子分类) : 首页 > 分类 > 子分类 > 第二层子分类 > ... > 第 N 层子分类 > 文章

想要什么样式的大家应该都能确定下来了,海天加的是有子目录导航的,海天还是喜欢目录导航能长一点的,觉得充实好看,哈哈。现在来在你的主题中加上文章目录导航功能。

1. 不包含父级分类的文章目录导航
这里用到 the_category() 方法的默认模式, 会调用 get_the_category_list() 生成最后一层的子分类 (分类可能不只一个) 组成的 HTML 字符串并打印到页面上. 代码如下:

<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 -->
 &gt; <?php the_category(', '); ?> <!-- 每个分类以逗号分隔 -->
 &gt; <?php the_title(); ?> <!-- 文章链接 -->

2. 包含父级分类的文章目录导航
我们要用的是 the_category() 方法的 multiple 模式, 而他会调用 get_the_category_list()get_category_parents() 两个方法生成一个包含所有父分类的 HTML 字符串并打印到页面上. 代码如下:

<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 -->
 &gt; <?php the_category(' &gt; ', 'multiple'); ?> <!-- 每个分类以 > 分隔, 父级分类在前, 子分类在后 -->
 &gt; <?php the_title(); ?> <!-- 文章链接 -->

选择合适的代码直接加在在需要调用文章目录导航的地方就可以了。

日志信息 »

该日志于2010-04-28 12:28由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

19条评论▼点击进行评论

  1. :lol: 纯帮顶了~

  2. 博主的将鼠标移到导航栏可以显示的~
    能不能发个代码给我
    QQ 15357118

    • 移到导航栏可以显示的?
      是不是指移到导航栏链接上弹出的那个黑底的框啊?

  3. 好东西,我也来帮的顶一下,嘿嘿

    • 可惜你的是PJ
      要不然也能加上了~

  4. 我博客有了,哈哈

    • 呵呵是啊 有的主题是自带的~

  5. 我用的是插件来实现的这个功能,看来有时间也要再去搞一下

    • 额 这个还有插件的啊 没注意
      呵呵 简单加几句代码就好了
      看下你插件的CSS样式,赶快换了吧

  6. 这个好,我要学习下

  7. 这个代码可以从优这个导航条的皮肤上拔下来的,哈哈,比如大名鼎鼎的inove主题,哈哈。

    • 额 我这个代码就是在inove的作者那找的 呵呵

  8. 谢兄弟分享,感觉用途不是特大。。

    • 呵呵 用途说过了哦
      访客就可以方便地知道并访问同类的文章, 并明确文章的所属, 这样应该对提高用户体验和网站的PV值都很有帮助。

  9. 恩 学习下,等换主题了也好用

    • 你现在不是用的和我一样的power吗?
      呵呵,可以加上去啊~

  10. 这个不错哦 有利于SEO

    • 嗯 试试啊,还有利于提高用户体验 呵呵~

  11. 不错,呵呵

    • 呵呵 你BLOG的主题不是没有吗
      将上去呗~

  12. wp让你折腾很久了吧

  13. 博客不错哦~~效果很好! :lol: 支持一下!

  14. 这个好,我看有的主题就自带这个,看来作者本身就改好了,呵呵

    • 恩 你的主题是自带的
      现在好多主题都自带的,有这个方便,呵呵~

  15. 添加成功~~感谢哦

    • 哈哈 客气 客气了
      我也是看人家高手的
      能帮到大家就好~

  16. 添加失败。。。。正在测试中

    • 怎么了 出什么问题了 你要注意我文章里代码的标点符号啊

      • 理解能力不是很好。

        没看懂呢、

        • 额 那你直接加上去呢 注意标点
          不行吗

  17. 这个风格还是挺不错的,尤其是细节上的处理很好,有时间抽空模仿一下。

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« 周杰伦2010新专辑主打歌《烟花易冷》《超人不会飞》 不负如来不负卿 »