WordPress文章如何生成目录索引?

文章索引相当于文章目录,点击目录自动跳转到相应位置,这就需要你的文章有小标题,那么WordPress文章如何生成目录索引?我们要做的就是把h3标签自动识别出来并组装成一个目录,好了,开始实现方法。

一、实现方法

在文章里必须有h3标签,每一个三级标题都会成为索引中的一项。将下面的代码放到function.php中,就会在你的文章中自动生成一个索引。

functionarticle_nav($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],‘<h3id=“article_nav_’.$num.‘”>’.$title.‘</h3>’,$content);

$ul_li.=‘<li><ahref=“#article_nav_’.$num.‘”title=“‘.$title.‘”>’.$title.“</a></li>”;

}

if(is_singular()){

$content=‘<divid=“fn_article_nav”><divid=“article_nav_title”>ArticleNav</div><ul>’

.$ul_li.‘<li><ahref=“#respond”>发表评论</a></li></ul></div>’.$content;

}

}

return$content;

}

add_filter(“the_content”,“article_nav”);

二、索引样式

索引是生成了,但是只是在文章中的一个普通ul list,我们要做的是把他独立出来,所以只需要为它写一个css样式就好了。推荐用position:fixed把他固定到左边或者右边,下方提供了一个参考样式,可以根据自己的情况去修改。

#article_nav_title{font-size:11px;text-align:center;line-height:15px;color:#cc0000;border-left:3px#cc0000solid;border-bottom:1px#aaadotted}

#fn_article_nav{position:fixed;left:5px;top:140px;background-color:rgba(255,255,255,.55);border-radius:03px3px0;box-shadow:002px#aaa}

#fn_article_navul{padding:0!important;margin:0px!important}

#fn_article_navli{list-style:none;padding:3px;width:100px;margin:0;background:url(“images/li.png”)no-repeatscroll05pxtransparent!important;text-indent:1.6em;}

相关推荐

最新发布