wordpress网站主题制作：怎样给wordpress文章内容添加目录导航？

在我们帮客户制作WordPress主题时，对方可能会提出很多的要求，这时，我们就要花尽脑子去开足马力开创。比如本章所要讲解的内容——如何给wordpress文章内容添加导航目录？嗯，这个功能的实现，对于浏览者在浏览网站文章时大大的方便，尤其是特别的长的长篇文章，可以提升用户体验。所以，我们在制作wordpress时还是有必要做一下这方面的工作。闲话不多说，一起来看看怎样来添加wordpress文章目录导航吧。

方法1：通过插件来实现。

这方面的插件也不少，如 Content Index for Wordpress插件。插件不是本章的要点，这里不多说。如果想用插件，可以百度一下，或者后台插件里搜索安装使用。

方法2：纯代码实现。

首先将以下代码放到主题的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>把选中的语句括起来了。当然，你也可以在代码模式下修改。

这样，文章发表成功后，就会在文章的右上角留下文章目录导航，如下图：

效果可以看：http://wanlimm.com/77201504233180.html

这个样式，你可以修改上面的CSS代码，来达到自己的需求。

好了，wordpress如何添加文章目录导航就介绍完了。如果 还不什么不明白的，可以本站相关文章。