给文章加个导航目录

摘要

可能有很多童鞋对HotNews Pro 2.7主题使用说明上面的目录导航感兴趣,点击上面的目录文字可以快速跳转到相关内容,适合长文章或者有特殊需求的文章使用。提供两种实现方法: 方法一、为了方便HotNews Pro主题新手阅读,在编辑文章中临时添加的。此方法适合多级目录,但编辑操作比较麻烦。 方法二、通过正则表达式,自动提取带有H3标签的文字为目录索引,使用更为方便……

可能有很多童鞋对HotNews Pro 2.7主题使用说明上面的目录导航感兴趣,点击上面的目录文字可以快速跳转到相关内容,适合长文章或者有特殊需求的文章使用。本文提供三种实现方法:

方法一、为了方便HotNews Pro主题新手阅读,在编辑文章中临时添加的。

首先将文章编辑模式改到文本模式(HTML)。

文章导航目录文字写法:

  1. <div id="directory">   
  2. <ul>   
  3.     <li><a href="#1">下载安装</a></li>   
  4.     <li><a href="#2">主题设置面板</a></li>   
  5.     <li><a href="#3">颜色风格选择</a></li>   
  6.     <li><a href="#4">首页布局设置</a></li>   
  7.     <li><a href="#5">CMS布局设置</a></li>   
  8.     <li><a href="#6">横向滚动图片模块</a></li>   
  9.     <li><a href="#7">顶部热点文章设置</a></li>   
  10.     <li><a href="#8">侧边推荐栏目设置</a></li>   
  11.     <li><a href="#9">特色图片功能</a></li>   
  12.     <li><a href="#10">导航菜单</a></li>   
  13. </ul>   
  14. </div>  

外面套了一个div 标签方便之后CSS控制样式。

目录跳转到的文章内容写法:

  1. <p id="1">下载安装。</p>   
  2. 此处添加正文内容,后面的相同。   
  3. <p id="2">主题设置面板</p>   
  4. <p id="3">颜色风格选择</p>   
  5. <p id="4">首页布局设置</p>   
  6. <p id="5">CMS布局设置</p>   
  7. <p id="6">横向滚动图片模块</p>   
  8. <p id="7">顶部热点文章设置</p>   
  9. <p id="8">侧边推荐栏目设置</p>   
  10. <p id="9">特色图片功能</p>   
  11. <p id="10">导航菜单</p>  

之后,在主题样式文件style.css最后加上:

  1. #directory{   
  2.     padding:0 0 0 4px;   
  3. }   
  4. #directory ul li{   
  5.     float:left;   
  6.     width:130px;   
  7. background:url(../images/icon.png) no-repeat rightright;   
  8. margin:1px;   
  9.     padding:0 0 0 5px;   
  10.     list-style:none;   
  11. text-indent:0;   
  12. border:1px solid #ccc;   
  13. }   
  14. #directory ul li a {   
  15. color#000;   
  16. text-decorationnone;   
  17. }   
  18. #directory ul li a:hover {   
  19. color#0196e3;   
  20. }  

其中:width:130px; 数值可根据字数作适当调整。

此方法适合多级目录,但编辑操作比较麻烦。

方法二、通过正则表达式,自动提取带有H3标签的文字为目录索引,使用更为方便,但只适合单级目录。

首先在主题functions.php中添加:

  1. function article_index($content) {   
  2.     $matches = array();   
  3.     $ul_li = '';   
  4.     $r = "/<h3>([^<]+)<\/h3>/im";   
  5.   
  6.     if(preg_match_all($r$content$matches)) {   
  7.         foreach($matches[1] as $num => $title) {   
  8.             $content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</h4>', $content);   
  9.             $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";   
  10.         }   
  11.         $content = "\n<div id=\"article-index\">
  12.                 <strong>文章目录</strong>  
  13.                 <ul id=\"index-ul\">\n" . $ul_li . "</ul>  
  14.             </div>\n" . $content;   
  15.     }   
  16.     return $content;   
  17. }   
  18. add_filter( "the_content""article_index" );  

编辑文章时目录文字写法:

  1. <h3>我是索引标题</h3>  

在配合相应的样式:

  1.  #article-index {   
  2.     -moz-border-radius: 6px 6px 6px 6px;   
  3.     border1px solid #DEDFE1;   
  4.     floatrightright;   
  5.     margin: 0 0 15px 15px;   
  6.     padding: 0 6px;   
  7.     width200px;   
  8.     line-height23px;   
  9. }   
  10. #article-index strong {   
  11.     border-bottom1px dashed #DDDDDD;   
  12.     displayblock;   
  13.     line-height30px;   
  14.     padding: 0 4px;   
  15. }   
  16. #index-ul {   
  17.     margin: 0;   
  18.     padding-bottom10px;   
  19. }   
  20. #index-ul li {   
  21.     backgroundnone repeat scroll 0 0 transparent;   
  22.     list-style-typedisc;   
  23.     padding: 0;   
  24.     margin-left20px;   
  25. }  

此方法,不能实现多层级的复杂而完善的索引目录功能,如果你需要这些功能可以尝试使用第三种方法。

原文:wordpress:给文章添加一个导航目录

方法三、使用WP自动生成目录的插件

这几个都不错:Content Index for WordPress、jQuery Table of Contents 、WP-TOC等插件,有些可以实现多层云级显示效果。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:67   其中:访客  58   博主  9

    • avatar 每日精品推荐 2

      鸟哥每次的教程都这么贴心啊
      不知道有没有集成到下一版本的打算?还是不太敢自己更改太多源文件。

      • avatar Conners 3

        可惜不适用于HTML5,另外鸟哥的移动版主题好像有问题,回复不了会跑到404

          • avatar 知更鸟 Admin

            @Conners 我的站删除了WP自带的留言程序文件,与主题无关

          • avatar 邀妖淘 1

            鸟哥,现在的wp主题瀑布流很流行。什么时候我们也可以出个啊,,,

              • avatar 知更鸟 Admin

                @邀妖淘 类似的主题已很多,个人感觉只适合弄图片,不实用
                现在更流行自适应模版

                  • avatar 每日精品推荐 2

                    @知更鸟 其实瀑布流是适合懒人用的,不用翻页,只管拨滚轮就可以了。因为现在电脑内存大了,一般承受五个首页的量还是可以的。鸟哥可以考虑一下的,确实省事不少,当然载入太多页数,估计配置差的电脑受不了

                • avatar Aoyu 3

                  好需要这个,太谢谢了。

                  • avatar 在路上 4

                    静候鸟哥新主题发布

                    • avatar 灭焰口才 4

                      鸟哥,能不能告诉我怎样把商店页面变的长一点,显示更多的商品!谢谢鸟哥

                      • avatar 椒盐虾 2

                        鸟哥求教!怎么设定只显示某个分类下的标签,(比如我在首页只要显示‘生活’这个分类下的标签)。

                        • avatar 我运动网 1

                          请教个问题可以吗?
                          新的suffusion主题导航中自带有pages 和categories这两个栏目,请问怎么把他们去掉?第一次留言,望能回复,谢谢。

                          • avatar 淡定 0

                            我想问一下,打开新网站的同时 起初页面也转向新的网址这是为什么?

                            • avatar 行者小猪 1

                              鸟哥,有个问题想问一下,我用了这个主题,编辑器却用不了,换别的主题却又能用了!!!麻烦问下是什么原因啊[img]评论[/img]

                              • avatar 六花 0

                                请问鸟哥,顶部如果有固定的导航栏,这个导航目录跳转后会被顶部导航栏遮挡,该怎么修改呢?

                                • avatar 电商杂记 0

                                  鸟哥,我想把导航栏中的搜索框去了,在哪里改代码操作,谢谢

                                  • avatar 易茈博客 0

                                    鸟哥,,我是使用这个主题的,但是出现 “ XSS跨站脚本漏洞 ” 要怎么修复啊,,

                                    • avatar 愿望已续费 1

                                      鸟叔,我想问一下,怎样建立一个页面,调用其他分类目录或文章 我是新手 谢谢[img]http://www.huxiu.com/tags/[/img]

                                      • avatar 愿望已续费 1

                                        鸟叔 我想问一下 怎样建立一个 单独的网页 类似于 虎嗅网的标签页面 用于分类所有目录并链接 能简单地说一下主要的代码吗?谢谢

                                        • avatar 微IT 2

                                          鸟哥你好。我是Hotnews主题的忠实粉丝,我觉得CMS首页把最新文章放到分类文章下面是不是效果会好一些?因为主页的上部分区域属于热敏区。应该让读者在上面得到更多的信息。分类信息下面再显示最近文章。如果想要修改,需要怎么改啊,我不会改代码。捣鼓了好几天了,也不行。特来请教。期待您的回复 !

                                            • avatar 我爱上QQ 6

                                              @微IT 可以通过主题自带的小工具将最新文章一栏放在侧边栏的下方。

                                              • avatar 知更鸟 Admin

                                                @微IT 这个只能说是你个人喜好,实现也很简单
                                                http://zmingcx.com/hotnews-pro-2-7-1-plus-faq.html
                                                第22条

                                              • avatar mcint 1

                                                我是新手,博客怎么样才能点击一个页面(就像你的“技术分享”点击后怎么才能出现很多篇”wordpress”分类目录下的文章)呢,我也看过你的一篇用blog模版,可那会显示所有的文章,我要的效果就是点击一个页面后能像分类目录一样显示那种类别的文章就行了,被这个问题弄了好久,希望能帮助一下,谢谢!

                                                  • avatar 知更鸟 Admin

                                                    @mcint 那只是个普通的分类目录
                                                    不会调用到导航上,这是教程
                                                    http://zmingcx.com/wordpress3-0-using-the-navigation-menu-graphic-tutorials.html

                                                  • avatar 石海威名 0

                                                    鸟哥下面这个完整的代码 是什么?谢谢!

                                                    该日志由 知更鸟 于37 天前发表在HotNews主题分类下,最后更新于 2013年03月02日.
                                                    转载请注明: 给文章加个导航目录 | 知更鸟 +复制链接
                                                    关键字: HotNews主题

                                                    • avatar 张翔部落 1

                                                      鸟哥,你的主题侧边的推荐栏目描述和图标是怎么设置的?

                                                        • avatar 涵菲 2

                                                          @张翔部落 栏目描述,在分类设置里面可以添加,图标可以在主题设置里面开启,需要修改

                                                          主题目录/images/caticon下的图标为分类名称对应的文件名

                                                          ——————————-分割线—

                                                          HotNews Pro 交流社
                                                          QQ群:254598248
                                                          ——鸟哥的粉丝群

                                                          ——————————-分割线—

                                                        • avatar MAGI 4

                                                          鸟哥,你好!由于近来博客每天都有N多垃圾评论,遂装了myQaptcha插件,但启用之后,在留言那里不显示滑动内容,请问需要修改什么吗?谢谢!

                                                          • avatar kk 1

                                                            这主题似乎有点问题,有时候百度HotNewspro,点开网页会提示,保留和放弃,会自动下载文件

                                                            • avatar 一个人 0

                                                              请问博主 您的 您可能还会对这些文章感兴趣! 这一功能在HOTNEWSPRO271版本中有吗 代码是在哪个文件中?

                                                              • avatar 骷髅猫博客 5

                                                                对普通用户操作起来麻烦点,不过很实用的。。

                                                                • avatar 枫过 0

                                                                  鸟哥,请问怎么给文章的标签添加背景色呢?

                                                                    • avatar 安卓动力 3

                                                                      @枫过 在CSS里面实现

                                                                    • avatar 阿呈 0

                                                                      鳥哥您好,想跟您請教…
                                                                      我的網站中用導航欄來做產品目錄,但因產品種類眾多,發現後台選單控制導航欄的地方,加到第90項,之後的都不會出現了,但我項目約有120項,想請問要在哪邊可以修改這選單的上限呢?拜託幫忙,感謝![img]评论[/img]

                                                                      • avatar SEM实战密码 4

                                                                        鸟哥能不能增加左侧导航啊?

                                                                        • avatar SEM实战密码 4

                                                                          视频能够加导航和标题吗?付费定制。

                                                                          • avatar 光辉 1

                                                                            知更鸟,在我看来是个名博。喜欢这个博客。

                                                                            • avatar 陈哥 0

                                                                              陈哥,想请你做几个wp的网站,有兴趣联系qq227,393,4847

                                                                              • avatar abc 3

                                                                                鸟弟你好,最近愚兄有一事不明,就是首页最新文章摘要右下角的阅读全文,还有频道标签,还有+多少度,这些内容在哪修改?CMS.PHP里似乎没有,STYLE.CSS里改不了文字,只能改样式,但样式一改,所有的调用都变了。哪里改这一处样式,和修改文字呢?还望不吝赐教。

                                                                                  • avatar abc 3

                                                                                    @abc 回错了 是这个。
                                                                                    终于找到了!哈哈。不在根目录下,在includes目录下。

                                                                                  • avatar abc 3

                                                                                    另外,鸟老弟,我首页最新文章设置了10条,我还想更多,但不可能一屏显示,那样太多。我想给首页新文章加上分页符。应该如何加?
                                                                                    多谢~

                                                                                      • avatar abc 3

                                                                                        @abc 终于找到了!哈哈。不在根目录下,在includes目录下。

                                                                                        • avatar abc 3

                                                                                          @abc 这个还不知道。可不可以加另外的最新文章。

                                                                                        • avatar abc 3

                                                                                          索性再加一个问题吧,知道你是技术专家。
                                                                                          第三个问题,我想在首页的下面添加另外的版块。
                                                                                          比如:135版块的最新文章,我想放在上面,然后中间版块,我想再弄一个246版块的最新文章。
                                                                                          这样虽然比较麻烦。但是,有时候是不同类型的文章,比如有新闻的,有文学的,有多媒体的,类型不同。因此想按不同属性在首页里用不同的区块来隔开,每个区块有最新的十篇文章。
                                                                                          这个有点难度。
                                                                                          请问这个如何操作呢,多谢。

                                                                                          • avatar 随缘 1

                                                                                            这个真不错

                                                                                            • avatar xl123666 0

                                                                                              鸟哥,请教下,文章页面我把右侧栏去掉了,但是右边空着一块,如何把文章扩展延伸到空着的那一块啊,需要修改那个文件?谢谢

                                                                                              • avatar 石头捕剪刀 1

                                                                                                鸟哥,刚刚发现了一个Bug,在右侧TAB菜单栏快速左右来回几次,就出现错乱了。是不是我太无聊了?

                                                                                                • avatar itfanr 1

                                                                                                  http://itfanr.duapp.com/wordpress/ 为什么主题自带的侧边栏不显示内容呢?

                                                                                                  近期热门最受欢迎 和分类目录

                                                                                                  • avatar ken 0

                                                                                                    http://bl.50lu.cn/ 我网上下了个模版和你这样的 为什么这个模版 标题栏的背景都显示不出来? 导航栏目也无法显示呢? 能帮个忙帮我看一下 是模版问题 还是什么问题呢

                                                                                                    • avatar 迷你 0

                                                                                                      非常谢谢知更鸟的模板,介绍给朋友使用都说不错。有一个问题,就是文章内容页模板和图片内容页模板,能不能移动,把内容页的某一类全部移到图片类的模板,但是目录,内容不变。

                                                                                                      还有一个问题是:内容页的固定连接是根据自己设定做的,但是图片、视频内容页的不能更改,URL是默认的形式,是否能改为统一自己设定固定连接呢?

                                                                                                      • avatar wancad 1

                                                                                                        最近几天天天在博主这里学习

                                                                                                        • avatar 安卓动力 3

                                                                                                          文章目录对SEO到底有没有帮助?有多大?

                                                                                                          • avatar 安卓动力 3

                                                                                                            这个太好了,正找TOC呢,不过这个怎么让它显示在文章正文的右侧呢?我觉得在文章特色图片下方的右侧会比较美观。
                                                                                                            另外上面的代码有2个地方要稍微改动一下,要不影响显示效果:
                                                                                                            方法二:
                                                                                                            1、functions.php中添加的’.$title.’,这个要把改成不然Ality主题的效果就没有了;
                                                                                                            2、CSS中的float: rightright; 这里多了一个right。

                                                                                                            • avatar 吴尼玛 1

                                                                                                              怎么修改成通用的php呢