WordPress文章目录插件
去过百度百科的人可能都会注意到，几乎每篇文章的开头都会有一个目录，点击这个目录中的标题可以快速到达文章中的具体内容位置，如：露兜。这样可以方便读者在篇幅较长的文章中找到他们想看的内容，这个也就相当于词典中的索引功能了。本文所介绍的插件实现的就是这样的一个功能，为文章设置了一个清晰的内容导航，读者可以在阅读之前知道这篇文章的大概意思，点击可以到达他们想看的部分，而且可以增加些内链、锚文本和关键词，对SEO也是很有帮助的。具体效果见本文右侧的文章目录。
文章目录免插件的简单实现方法
其实现这样的一个功能还是比较简单的，也就是在文章内容中插进标题标签，然后弄成目录就是了，下面是我写的一个简单的代码，用文本编辑器打开当前主题目录下的functions.php，将以下代码放到 <?php 下面就可以（记得用UTF-8编码保存，否则中文会乱码）:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function article_index($content) { /** * 名称：文章目录插件 * 作者：露兜 * 博客：http://www.ludou.org/ * 最后修改：2011年2月10日 */ $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], '<h3 id="title-'.$num.'">'.$title.'</h3>', $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" ); |
使用说明
在编辑文章的时候，切换到HTML模式，将需要添加到目录中的标题用<h3>和</h3>括起来就可以了，如<h3>我是索引标题</h3>。当然你也可以用其他标签，如<h1>，<p>等，将以上代码第12行中的h3改成你自己的标签名称就可以了。
上面这段代码只是在文章显示的时候插入文章目录，并不会修改你的文章内容。以上代码也不包括样式美化代码，所以只添加以上代码，文章目录看起来一篇混乱，所以你得自己添加一些css代码来美化一下这个目录。如果你不会css，可以用我写的，将以下css代码放到主题目录下的style.css中就可以了（并不是每个网站都适用）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #article-index { -moz-border-radius: 6px 6px 6px 6px; border: 1px solid #DEDFE1; float: right; 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; } |
功能更强大的文章目录插件
以上代码的功能比较单一，只有单级目录，不能实现多层级的复杂而完善的索引目录功能，如果你需要这些功能可以试试这以下这几个插件，使用也都比较简单：
- Content Index for WordPress | 使用教程
- jQuery Table of Contents | 使用教程
- WP-TOC 激活该插件后，在文章中插入[toc depth="2"]即可，2表示h2、h3、h4…等都会被插进目录，类推[toc depth="3"]则表示h3、h4…等都会被插进目录
本文版权归露兜博客所有，转载引用请完整注明以下信息：
本文作者：Ludou
本文标题：WordPress文章目录插件
本文地址：http://www.ludou.org/wordpress-content-index-plugin.html
没弄个演示呢？
免插件方式的最好演示见本文顶部右边的 文章目录
免插件的不错，能省点资源。。
不错哦
LUDOU爱折腾代码，天下人截知 嘿嘿
想请教一个不是这篇文章主题的问题：
留言上边那个豆瓣、人人网、QQ空间这些链接是怎么做的，能不能专写一篇文章或做个教程，多谢，这应该是很多人想了解的。
谢谢LUDOU
你可以自行上网搜索关键字：wordpress 收藏 分享
会有很多教程的，或者看我之前写的：
http://www.ludou.org/wordpress-bookmarks.html
我找这个类似 维基百科功能 目录的代码好久啦！！没想到在wordpress真能实现！哈哈，终于找到了。3Q
有一段时间没来了，这个很不错，要是能用代码就实现多级目录就好了，呵呵
插件也是代码，只是多了一个后台选项而已
很好的功能嘛··先收藏了，明天回学校后再慢慢来添加了。
再用代码在每个小标题段落后面加个返回目录，应该更好吧
呵呵
正需要这个，哈哈哈哈
以前水煮鱼有一个，要钱的，这个试试看
学习了！谢谢！
用这个后，<?php the_content_limit(70, ""); ?>截取文章部分内容时，内容会显示“文章目录”的内容。我不想显示目录内容。请问这个要怎么解决了？
如果你使用这款插件:Limit Posts
那就用文本编辑器打开插件的主文件：limit-post.phps
将以下代码删除：$content = apply_filters('the_content', $content);
樓主正好人，水煮魚那邊要錢的，樓主免費~
其实我并不是好人，本站的某些东西也是收费的。
你的價格真的很厚道啊~~而且免費的技術帖特別多，這樣的中文博客很難找哦。逛來逛去就發現你的和neoease對我最有幫助
请问你的标题是加黑而且是绿色的，我的标题为什么不能加粗呢？
另外你的文章像图片一样嵌入到文章中，而我的则不是。谢谢
在你主题目录下的style.css的最后加入：
#content .entry-content h4 {
color: green;
font-weight: bold;
}
另外，如果要求助，请认真和清楚地描述你的问题。
有的问题不太容易描述，所以我把网址给了你。我的意思是说你的文章目录框在文章的右上角，它的左边是有文字的，而我左边没有文字。就像word中图片环绕文字那样。
不要在文章开头加<h4>.
另外，能问下"加黑而且是绿色"，"文章像图片一样嵌入到文章中"是什么样的效果？
1应当是加粗
2第一个文章应该是文章目录
评论发布后无法更改啊
看你的头像，图片质量不怎么样啊！
找了一晚，就是想要这个功能。可以不用插件实现，是我最喜欢的。很不错的博客，订阅一下
作者的博客真棒啊，很多东西写的很仔细，按照博主的介绍改了好多功能，还在弄，非常感谢。。
首先，谢谢ludou！关于这个目录，有一个小问题想咨询一下，是这样的：现在点击目录中的标题，马上锚去到相应段落的内容，但不包括这段内容那个标题。假如想锚下去时，首先是定位在标题处，那代码应该怎么改呢？定位在相应标题上，应该更好一点！个人感觉！
谢谢！
抱歉，我刚才试点了你上面的目录，会定位在标题处。或许是我修改了一些代码，所以改变了！那问题变成：想确认一下，是否你贴出来的代码，就是定位在标题处的？假如不是，怎么改呢？
很抱歉！
代码没什么问题，与我网站用的代码是一致的。如果你用其他标签来定义标题，需要修改第一段代码第12、16行代码中的h3。
这个好，正需要。。。