wordpress如何给文章添加目录导航；wordpress文章显示目录

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], '<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\">
<b>[文章目录]</b>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( "the_content", "article_index" );

当然这里的段落你需要对应你自己文章添加时候的段落, 具体的可以看下面的这个图片, 举个例子你的文章里面段落是h2哪里上面的代码h3你就要修改成h2才可以实现.

二、给文章目录导航添加css样式

/* 文章目录 */
#article-index { background:#f5f5e8; margin: 0 20px 10px 10px; padding: 6px; }
#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:16px; line-height: 18px;}
#index-ul li a{ color:#3366CC;}

直接复制到style.css样式表里面, 然后保存即可

当然这里的代码都是来之网络, css卡卡哥自己修改了一些, 你自己也是同样可以按照自己喜欢的样式来修改, 增加文章目录对于搜索引擎来说可以更友好, 可以更直接的抓取到我们文章的主题内容.