WordPress功能扩展-给文章添加文章索引

一:首先在主题函数文件functions.php加入下面代码

  1. //文章目录索引
  2. function article_index($content) {
  3.     $matches = array();
  4.     $ul_li = '';
  5.  
  6.     $r = "/<h3>([^<]+)<\/h3>/im";
  7.  
  8.     if(preg_match_all($r, $content, $matches)) {
  9.         foreach($matches[1] as $num => $title) {
  10.             $content = str_replace($matches[0][$num], '<h2 id="title-'.$num.'">'.$title.'</h2>', $content);
  11.             $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
  12.         }
  13.  
  14.         $content = "\n<div id=\"article-index\">
  15.                 <b>[文章目录]</b>
  16.                 <ul id=\"index-ul\">\n" . $ul_li . "</ul>
  17.             </div>\n" . $content;
  18.     }
  19.  
  20.     return $content;
  21. }
  22.  
  23. add_filter( "the_content", "article_index" );

二:在style.css中加入CSS

  1. /* 文章目录 */
  2. #article-index {background:#F7F7F7;-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 5px 0 5px 15px;padding: 0 6px;width: 280px;line-height: 24px;}
  3. #article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
  4. #index-ul {margin: 0;padding-bottom: 5px;}
  5. #index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-top: 5px;margin-bottom: 5px;margin-left: 20px;}
  6. #index-ul a{text-decoration:none;}

三:如何使用

使用</h3>标签,也就是后台编辑器中的“三级标题”。写文章的时候,为每一个步骤添加一个标题,然后加上<h3/>标签就可以了。如果某篇文章不想用目录索引,那么久不要添加<h3/>标签即可。在这也小小提示下,如果你想优化自己的标题样式,那么修改你主题的样式文件里的h2,而不是h3。

2条评论

  1. WordPress功能扩展-给文章添加文章索引
    avatar

    博主,效果是怎么样的啊 给截个图什么的啊~

    • WordPress功能扩展-给文章添加文章索引
      avatar
      Lv.6 1楼-1

      <a href="#div-comment-153" rel="nofollow">@面子至上 </a>自己动手,丰衣足食

    发表评论

  1. 😉
  2. 😐
  3. 😡
  4. 😈
  5. 😯
  6. 😛
  7. 😳
  8. 😮
  9. 😆
  10. 💡
  11. 😀
  12. 👿
  13. 😥
  14. 😎
  15. 😕