WordPress无插件实现内容目录索引

王朝学院·作者佚名  2016-08-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

前面一篇文章"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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航