WordPress非插件添加文章目录功能

学习NO.1

给文章添加文章目录功能，不仅是文章条理更清楚，还有利于seo，下面将介绍 露兜 老大的使用代码来实现文章目录的方法，方便喜欢折腾代码的朋友，如果你不想折腾代码，你可以试试下面的wordpress文章目录插件：TOC 和 Content Index for WordPress。用代码实现文章目录

1.将下面的代码添加到主题的 functions.php 文件的 最后一个 ?> 前面：

1. function article_index($content) {
   
2.     /**
   
3.      * 名称：文章目录插件
   
4.      * 作者：露兜
   
5.      * 博客：http://www.ludou.org/
   
6.      * 最后修改：2011年2月10日
   
7.      */
   
8. 
   
9.     $matches = array();
   
10.     $ul_li = '';
    
11. 
    
12.     $r = "/<h3>([^<]+)</h3>/im";
    
13. 
    
14.     if(preg_match_all($r, $content, $matches)) {
    
15.         foreach($matches[1] as $num => $title) {
    
16.             $content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
    
17.             $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n";
    
18.         }
    
19. 
    
20.         $content = "n<div id="article-index">
    
21.                 <strong>文章目录</strong>
    
22.                 <ul id="index-ul">n" . $ul_li . "</ul>
    
23.             </div>n" . $content;
    
24.     }
    
25. 
    
26.     return $content;
    
27. }
    
28. 
    
29. add_filter( "the_content", "article_index" );

复制代码

使用说明

在编辑文章的时候，在可视化模式下，选中文字，设置为标题3(H3)，或者切换到html模式，将需要添加到目录中的标题用<h3>和</h3>括起来就可以了，如<h3>我是索引标题</h3>。当然你也可以用其他标签，如<h2>，<p>等，将以上代码第12行中的h3改成你自己的标签名称就可以了。

CSS样式参考

为了实现前台的显示效果，你可以参考下面的css

1. #article-index {
   
2.     -moz-border-radius: 6px 6px 6px 6px;
   
3.     border: 1px solid #DEDFE1;
   
4.     float: right;
   
5.     margin: 0 0 15px 15px;
   
6.     padding: 0 6px;
   
7.     width: 200px;
   
8.     line-height: 23px;
   
9. }
   
10. #article-index strong {
    
11.     border-bottom: 1px dashed #DDDDDD;
    
12.     display: block;
    
13.     line-height: 30px;
    
14.     padding: 0 4px;
    
15. }
    
16. #index-ul {
    
17.     margin: 0;
    
18.     padding-bottom: 10px;
    
19. }
    
20. #index-ul li {
    
21.     background: none repeat scroll 0 0 transparent;
    
22.     list-style-type: disc;
    
23.     padding: 0;
    
24.     margin-left: 20px;
    
25. }

复制代码

以上代码的功能比较单一，只有单级目录，不能实现多层级的复杂而完善的索引目录功能，如果你需要这些功能，那你就要借助文章目录插件：TOC 和Content Index for WordPress。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！