可能有很多童鞋对HotNews Pro 2.7主题使用说明上面的目录导航感兴趣，点击上面的目录文字可以快速跳转到相关内容，适合长文章或者有特殊需求的文章使用。本文提供三种实现方法：
方法一、为了方便HotNews Pro主题新手阅读，在编辑文章中临时添加的。
首先将文章编辑模式改到文本模式（HTML）。
文章导航目录文字写法：
- <div id="directory">
- <ul>
- <li><a href="#1">下载安装</a></li>
- <li><a href="#2">主题设置面板</a></li>
- <li><a href="#3">颜色风格选择</a></li>
- <li><a href="#4">首页布局设置</a></li>
- <li><a href="#5">CMS布局设置</a></li>
- <li><a href="#6">横向滚动图片模块</a></li>
- <li><a href="#7">顶部热点文章设置</a></li>
- <li><a href="#8">侧边推荐栏目设置</a></li>
- <li><a href="#9">特色图片功能</a></li>
- <li><a href="#10">导航菜单</a></li>
- </ul>
- </div>
外面套了一个div 标签方便之后CSS控制样式。
目录跳转到的文章内容写法：
- <p id="1">下载安装。</p>
- 此处添加正文内容，后面的相同。
- <p id="2">主题设置面板</p>
- <p id="3">颜色风格选择</p>
- <p id="4">首页布局设置</p>
- <p id="5">CMS布局设置</p>
- <p id="6">横向滚动图片模块</p>
- <p id="7">顶部热点文章设置</p>
- <p id="8">侧边推荐栏目设置</p>
- <p id="9">特色图片功能</p>
- <p id="10">导航菜单</p>
之后，在主题样式文件style.css最后加上：
- #directory{
- padding:0 0 0 4px;
- }
- #directory ul li{
- float:left;
- width:130px;
- background:url(../images/icon.png) no-repeat rightright;
- margin:1px;
- padding:0 0 0 5px;
- list-style:none;
- text-indent:0;
- border:1px solid #ccc;
- }
- #directory ul li a {
- color: #000;
- text-decoration: none;
- }
- #directory ul li a:hover {
- color: #0196e3;
- }
其中：width:130px; 数值可根据字数作适当调整。
此方法适合多级目录，但编辑操作比较麻烦。
方法二、通过正则表达式，自动提取带有H3标签的文字为目录索引，使用更为方便，但只适合单级目录。
首先在主题functions.php中添加：
- function article_index($content) {
- $matches = array();
- $ul_li = '';
- $r = "/<h3>([^<]+)<\/h3>/im";
- if(preg_match_all($r, $content, $matches)) {
- foreach($matches[1] as $num => $title) {
- $content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</h4>', $content);
- $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
- }
- $content = "\n<div id=\"article-index\">
- <strong>文章目录</strong>
- <ul id=\"index-ul\">\n" . $ul_li . "</ul>
- </div>\n" . $content;
- }
- return $content;
- }
- add_filter( "the_content", "article_index" );
编辑文章时目录文字写法：
- <h3>我是索引标题</h3>
在配合相应的样式：
- #article-index {
- -moz-border-radius: 6px 6px 6px 6px;
- border: 1px solid #DEDFE1;
- float: rightright;
- margin: 0 0 15px 15px;
- padding: 0 6px;
- width: 200px;
- line-height: 23px;
- }
- #article-index strong {
- border-bottom: 1px dashed #DDDDDD;
- display: block;
- line-height: 30px;
- padding: 0 4px;
- }
- #index-ul {
- margin: 0;
- padding-bottom: 10px;
- }
- #index-ul li {
- background: none repeat scroll 0 0 transparent;
- list-style-type: disc;
- padding: 0;
- margin-left: 20px;
- }
此方法，不能实现多层级的复杂而完善的索引目录功能，如果你需要这些功能可以尝试使用第三种方法。
方法三、使用WP自动生成目录的插件
这几个都不错：Content Index for WordPress、jQuery Table of Contents 、WP-TOC等插件，有些可以实现多层云级显示效果。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
云南省普洱市 1F
鸟哥每次的教程都这么贴心啊
不知道有没有集成到下一版本的打算？还是不太敢自己更改太多源文件。
中国 B1
@ 每日精品推荐 嗯，会考虑
广东省东莞市 B1
@ 每日精品推荐 鸟哥的教程确实太贴心啦，绝对同意楼上兄弟的这句话
广西南宁市 2F
可惜不适用于HTML5，另外鸟哥的移动版主题好像有问题，回复不了会跑到404
中国 B1
@ Conners 我的站删除了WP自带的留言程序文件，与主题无关
北京市 3F
鸟哥，现在的wp主题瀑布流很流行。什么时候我们也可以出个啊，，，
中国 B1
@ 邀妖淘 类似的主题已很多，个人感觉只适合弄图片，不实用
现在更流行自适应模版
云南省普洱市 B2
@ 知更鸟 其实瀑布流是适合懒人用的，不用翻页，只管拨滚轮就可以了。因为现在电脑内存大了，一般承受五个首页的量还是可以的。鸟哥可以考虑一下的，确实省事不少，当然载入太多页数，估计配置差的电脑受不了
广东省惠州市 B3
@ 每日精品推荐 我不喜欢，呵呵～
河南省开封市 4F
好需要这个，太谢谢了。
浙江省杭州市 5F
静候鸟哥新主题发布
广东省广州市 B1
@ 在路上 我看看我回复的位子在那里！
北京市 6F
鸟哥，能不能告诉我怎样把商店页面变的长一点，显示更多的商品！谢谢鸟哥
中国 B1
@ 灭焰口才 打开myshops.php模版，查找并修改数字：1530
福建省厦门市 7F
鸟哥求教！怎么设定只显示某个分类下的标签，（比如我在首页只要显示‘生活’这个分类下的标签）。
上海市 8F
请教个问题可以吗？
新的suffusion主题导航中自带有pages 和categories这两个栏目，请问怎么把他们去掉？第一次留言，望能回复，谢谢。
陕西省西安市 9F
我想问一下，打开新网站的同时 起初页面也转向新的网址这是为什么？
北京市 10F
鸟哥，有个问题想问一下，我用了这个主题，编辑器却用不了，换别的主题却又能用了！！！麻烦问下是什么原因啊[img]http://www.lz83.com/wp-content/uploads/2013/03/2.jpg[/img]
山西省晋中市榆次区 B1
@ 行者小猪 可能是加载慢
重庆市 11F
请问鸟哥，顶部如果有固定的导航栏，这个导航目录跳转后会被顶部导航栏遮挡，该怎么修改呢？
上海市 12F
鸟哥，我想把导航栏中的搜索框去了，在哪里改代码操作，谢谢
广东省揭阳市 13F
鸟哥，，我是使用这个主题的，但是出现 “ XSS跨站脚本漏洞 ” 要怎么修复啊，，
陕西省西安市 14F
鸟叔，我想问一下，怎样建立一个页面，调用其他分类目录或文章 我是新手 谢谢[img]http://www.huxiu.com/tags/[/img]
陕西省西安市 15F
鸟叔 我想问一下 怎样建立一个 单独的网页 类似于 虎嗅网的标签页面 用于分类所有目录并链接 能简单地说一下主要的代码吗？谢谢
天津市 16F
鸟哥你好。我是Hotnews主题的忠实粉丝，我觉得CMS首页把最新文章放到分类文章下面是不是效果会好一些？因为主页的上部分区域属于热敏区。应该让读者在上面得到更多的信息。分类信息下面再显示最近文章。如果想要修改，需要怎么改啊，我不会改代码。捣鼓了好几天了，也不行。特来请教。期待您的回复 ！
江西省宜春市 B1
@ 微IT 可以通过主题自带的小工具将最新文章一栏放在侧边栏的下方。
中国 B1
@ 微IT 这个只能说是你个人喜好，实现也很简单
http://zmingcx.com/hotnews-pro-2-7-1-plus-faq.html
第22条
天津市 B2
@ 知更鸟 谢谢！已更改。
湖北省仙桃市 17F
我是新手，博客怎么样才能点击一个页面（就像你的“技术分享”点击后怎么才能出现很多篇”wordpress”分类目录下的文章)呢，我也看过你的一篇用blog模版，可那会显示所有的文章，我要的效果就是点击一个页面后能像分类目录一样显示那种类别的文章就行了，被这个问题弄了好久，希望能帮助一下，谢谢!
中国 B1
@ mcint 那只是个普通的分类目录
不会调用到导航上，这是教程
http://zmingcx.com/wordpress3-0-using-the-navigation-menu-graphic-tutorials.html
福建省泉州市晋江市 18F
鸟哥下面这个完整的代码 是什么?谢谢！
该日志由 知更鸟 于37 天前发表在HotNews主题分类下，最后更新于 2013年03月02日.
转载请注明: 给文章加个导航目录 | 知更鸟 +复制链接
关键字: HotNews主题
广东省韶关市 19F
鸟哥，你的主题侧边的推荐栏目描述和图标是怎么设置的？
江苏省苏州市 B1
@ 张翔部落 栏目描述，在分类设置里面可以添加，图标可以在主题设置里面开启，需要修改
主题目录/images/caticon下的图标为分类名称对应的文件名
——————————-分割线—
HotNews Pro 交流社
QQ群:254598248
——鸟哥的粉丝群
——————————-分割线—
云南省大理州 20F
鸟哥，你好！由于近来博客每天都有N多垃圾评论，遂装了myQaptcha插件，但启用之后，在留言那里不显示滑动内容，请问需要修改什么吗？谢谢！
广东省佛山市 21F
这主题似乎有点问题，有时候百度HotNewspro,点开网页会提示，保留和放弃，会自动下载文件
浙江省杭州市 22F
请问博主 您的 您可能还会对这些文章感兴趣！ 这一功能在HOTNEWSPRO271版本中有吗 代码是在哪个文件中？
上海市 23F
对普通用户操作起来麻烦点，不过很实用的。。
广东省阳江市 24F
鸟哥，请问怎么给文章的标签添加背景色呢？
吉林省长春市 B1
@ 枫过 在CSS里面实现
台湾省花莲县 25F
鳥哥您好，想跟您請教…
我的網站中用導航欄來做產品目錄，但因產品種類眾多，發現後台選單控制導航欄的地方，加到第90項，之後的都不會出現了，但我項目約有120項，想請問要在哪邊可以修改這選單的上限呢？拜託幫忙，感謝！[img]http://wufu.laruellehouse.com/wordpress.jpg[/img]
北京市 26F
鸟哥能不能增加左侧导航啊？
北京市 27F
视频能够加导航和标题吗？付费定制。
中国 B1
@ SEM实战密码 能，实现方法基本相似
北京市 B2
@ 知更鸟 smzdm.com哪种，能够自定义就更好了，你看需要多少钱？
中国 B3
@ SEM实战密码 这个站的左侧与本文没任何P关系
只是一个普通的分类目录，使用WP菜单功能加上JS可以实现
北京市 B4
@ 知更鸟 JS不懂呢，鸟哥。
北京市 B5
@ SEM实战密码 鸟哥看看这个视频的效果怎么样 很容易实现吧？
http://www.zhinengshe.com/video.html
中国 B5
@ SEM实战密码 你认为很容易？
制作此效果，费用至少不会低于2000RMB
北京市 B5
@ 知更鸟 这么牛哦 我以为和你的视频差不多呢！
辽宁省大连市 28F
知更鸟，在我看来是个名博。喜欢这个博客。
福建省福州市 29F
陈哥，想请你做几个wp的网站，有兴趣联系qq227，393，4847
北京市 30F
鸟弟你好，最近愚兄有一事不明，就是首页最新文章摘要右下角的阅读全文，还有频道标签，还有+多少度，这些内容在哪修改？CMS.PHP里似乎没有，STYLE.CSS里改不了文字，只能改样式，但样式一改，所有的调用都变了。哪里改这一处样式，和修改文字呢？还望不吝赐教。
北京市 B1
@ abc 回错了 是这个。
终于找到了！哈哈。不在根目录下，在includes目录下。
北京市 31F
另外，鸟老弟，我首页最新文章设置了10条，我还想更多，但不可能一屏显示，那样太多。我想给首页新文章加上分页符。应该如何加？
多谢~
北京市 B1
@ abc 终于找到了！哈哈。不在根目录下，在includes目录下。
北京市 B1
@ abc 这个还不知道。可不可以加另外的最新文章。
北京市 32F
索性再加一个问题吧，知道你是技术专家。
第三个问题，我想在首页的下面添加另外的版块。
比如：135版块的最新文章，我想放在上面，然后中间版块，我想再弄一个246版块的最新文章。
这样虽然比较麻烦。但是，有时候是不同类型的文章，比如有新闻的，有文学的，有多媒体的，类型不同。因此想按不同属性在首页里用不同的区块来隔开，每个区块有最新的十篇文章。
这个有点难度。
请问这个如何操作呢，多谢。
安徽省安庆市 33F
这个真不错
北京市 34F
鸟哥，请教下，文章页面我把右侧栏去掉了，但是右边空着一块，如何把文章扩展延伸到空着的那一块啊，需要修改那个文件？谢谢
广东省中山市 35F
鸟哥，刚刚发现了一个Bug，在右侧TAB菜单栏快速左右来回几次，就出现错乱了。是不是我太无聊了？
山东省济南市 36F
http://itfanr.duapp.com/wordpress/ 为什么主题自带的侧边栏不显示内容呢？
近期热门最受欢迎 和分类目录
浙江省杭州市 37F
http://bl.50lu.cn/ 我网上下了个模版和你这样的 为什么这个模版 标题栏的背景都显示不出来？ 导航栏目也无法显示呢？ 能帮个忙帮我看一下 是模版问题 还是什么问题呢
北京市 38F
非常谢谢知更鸟的模板，介绍给朋友使用都说不错。有一个问题，就是文章内容页模板和图片内容页模板，能不能移动，把内容页的某一类全部移到图片类的模板，但是目录，内容不变。
还有一个问题是：内容页的固定连接是根据自己设定做的，但是图片、视频内容页的不能更改，URL是默认的形式，是否能改为统一自己设定固定连接呢？
山西省大同市 39F
最近几天天天在博主这里学习
吉林省长春市 40F
文章目录对SEO到底有没有帮助？有多大？
吉林省长春市 41F
这个太好了，正找TOC呢，不过这个怎么让它显示在文章正文的右侧呢？我觉得在文章特色图片下方的右侧会比较美观。
另外上面的代码有2个地方要稍微改动一下，要不影响显示效果：
方法二：
1、functions.php中添加的’.$title.’，这个要把改成不然Ality主题的效果就没有了；
2、CSS中的float: rightright; 这里多了一个right。
浙江省杭州市 42F
怎么修改成通用的php呢