前面一篇文章"4款WordPRess文章内容索引列表插件"我们可以使用插件来实现目录索引的效果。鉴于WP程序的负载很大,能少使用插件就少使用。那有没有不使用插件可以实现这样的索引功能能?于是我找着找着,终于找到一个博主分享的这样的无插件实现内容索引效果。
第一步,把下面的代码放到模板所在的function.php文件里
functionarticle_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],'<h4 id="title-'.$num.'">'.$title.'</h4>',$content);$ul_li.='<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n";}$content="n<div id="article-index"><strong>文章目录</strong><ul id="index-ul">n".$ul_li."</ul></div>n".$content;}return$content;}add_filter("the_content","article_index");
第二步,在我们内容编辑的时候,切换到HTML编辑器,然后在需要索引的标题用H3标注,具体的用H几要和上面的定义FUNCTION对应,默认的是H3。然后在显示的时候会自动抓取。
为了达到美化的效果,需要用到CSS,具体的还是要根据需求调整。
#article-index{-moz-border-radius:6px6px6px6px;border:1pxsolid#DEDFE1;float:right;margin:0015px15px;padding:06px;width:200px;line-height:23px;}#article-index strong{border-bottom:1pxdashed#DDDDDD;display:block;line-height:30px;padding:04px;}#index-ul{margin:0;padding-bottom:10px;}#index-ul li{background:nonerepeatscroll00transparent;list-style-type:disc;padding:0;margin-left:20px;}
在后来我又发现还有一款jQuery Table of Contents插件也是可以使用的。建议还是少用插件。
原文地址:http://www.itbulu.com/blog/904.html