上一篇文章说到为 WordPress 博客添加面包屑导航,有帮助与搜索引擎对博客的收入。今天在为大家介绍一下为文章添加目录索引的方法。什么是目录索引那?如果你经常访问百度知道,那么在它的文章侧边有个目录索引,我爱水煮鱼博客文章内也有目录索引。那么它的作用是什么呢?顾名思义,第一是点击相应标题即可跳转到相应位置,第二是从结构上让文章思路更清晰化。
Wordpress 文章目录插件就那么几个,免费的几个用起来都比较麻烦,写的很复杂还要配置!收费的有我爱水煮鱼的一款插件,但是我还是保持我原有的态度,能少用插件就少用,尽量集成到主题。
下面来说一下方法:
还是老样子,在你主题的函数模板 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], '<h2 id="title-'.$num.'">'.$title.'</h2>', $content);
$ul_li. = '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<b>[文章目录]</b>
<ul id=\"index-ul\">\n".$ul_li."</ul>
</div>\n".$content;
}
return $content;
}
add_filter("the_content", "article_index");
有了代码,美化也是很重要的。你可以自己写CSS,用下面提供的
#article-index {background:#F7F7F7;-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 5px 0 5px 15px;padding: 0 6px;width: 280px;line-height: 24px;}
#article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
#index-ul {margin: 0;padding-bottom: 5px;}
#index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-top: 5px;margin-bottom: 5px;margin-left: 20px;}
#index-ul a{text-decoration:none;}
我记得水煮鱼的插件是从 H1 标签到 H6 标签这样一直延伸下去的,我感觉这样不太好。所以直接改为了使用 </h3>
标签,也就是后台编辑器中的「三级标题」。写文章的时候,为没一个步骤添加一个标题,然后加上 </h3>
标签就可以了。如果某篇文章不想用目录索引,那么就不要添加 </h3>
标签即可。在这也小小提示下,如果你想优化自己的标题样式,那么修改你主题的样式文件里的 h2
,而不是 h3
。