如何给wordpress文章内容添加导航目录？这个功能的实现，对于浏览者在浏览网站文章时大大的方便，尤其是特别的长的长篇文章，可以提升用户体验。
在折腾表白驿站的时候我是用插件实现这个功能的，大家都知道，使用插件会拖慢网站速度，所以能用代码实现的都尽量不要用插件，今天就给大家分享给wordpress文章内容添加目录导航的两个方法！
方法one～通过插件
这方面的插件也不少，如 Content Index for WordPress插件。插件不是本章的要点，这里不多说。如果想用插件，可以百度一下，或者后台插件里搜索安装使用。
方法two～纯代码实现
首先将以下代码放到主题的functions.php文件中，
//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = "/<h4>([^<]+)<\/h4>/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" );
下面是wordpress文章目录导航的CSS样式代码，把它放到你主题的style.css文件中：
/* 文章目录 */
#article-index { background:#CCCCCC; float: right; margin: 0 20px 10px 10px; padding: 6px; width: 150px; }
#article-index strong { border-bottom: 1px dashed #DDDDDD; display: block; line-height: 30px; padding: 0 4px;}
#index-ul { margin: 0; padding-bottom: 10px; margin-top:15px; }
#index-ul li { list-style-type: none; margin-bottom:10px; margin-left:0px; font-size:12px; line-height: 18px;}
#index-ul li a{ color:#3366CC;}
这样，我们就给这个主题添加了wordpress文章目录导航功能。这样我们在发表文章时，如果文章比较长，就可以使用这个功能。
目录使用方法
在我们发表文章时，选择文章中要作为目录导航的词语或语句，然后用<h4>标签把它括住，如下图：
如上图，在选中作为目录的语句后，点击编辑器上的“段落”下拉框，然后选中“四级标题”，这表示以<h4>把选中的语句括起来了。当然，你也可以在代码模式下修改。
这样，文章发表成功后，就会在文章的右上角留下文章目录导航，如下图：
效果可以看本篇文章
这个样式，你可以修改上面的CSS代码，来达到自己的需求。