为 WordPress 文章页面添加目录索引

2013.01.29 64 Comments 37,522 次阅读

上一篇文章说到为 WordPress 博客添加面包屑导航,有帮助与搜索引擎对博客的收入。今天在为大家介绍一下为文章添加目录索引的方法。什么是目录索引那?很简单,如果你经常访问百度知道,那么在它的文章侧边有个目录索引,我爱水煮鱼博客文章内也有目录索引。那么它的作用是什么呢?顾名思义,第一是点击相应标题即可跳转到相应位置,第二是从结构上让文章思路更清晰化。

WordPress 文章目录插件就那么几个,免费的几个用起来都比较麻烦,写的很复杂还要配置!收费的有我爱水煮鱼的一款插件,但是我还是保持我原有的态度,能少用插件就少用,尽量集成到主题。

下面来说一下方法:

1.添加代码

还是老样子,在你主题的函数模板functions.php文件里添加如下代码:

//文章目录索引
function article_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], '<h2 id="title-'.$num.'">'.$title.'</h2>', $content);
            $ul_li. = '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
        }

        $content = "\n<div id=\"article-index\">
                <b>[文章目录]</b>
                <ul id=\"index-ul\">\n".$ul_li."</ul>
            </div>\n".$content;
    }

    return $content;
}

add_filter("the_content", "article_index");

2.添加CSS:

有了代码,美化也是很重要的。你可以自己写CSS,也可以用周良提供的(CSS来源网络)

#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;}
#article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}
#index-ul {margin: 0;padding-bottom: 5px;}
#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;}
#index-ul a{text-decoration:none;}

3.如何使用:

我记得水煮鱼的插件是从H1标签到H6标签这样一直延伸下去的,我感觉这样不太好。所以直接改为了使用

标签,也就是后台编辑器中的“三级标题”。写文章的时候,为没一个步骤添加一个标题,然后加上

标签就可以了。如果某篇文章不想用目录索引,那么久不要添加

标签即可。在这也小小提示下,如果你想优化自己的标题样式,那么修改你主题的样式文件里的h2,而不是h3。

4、缺点和建议

  • 不能实现多级目录索引(多级嵌套的问题)
  • 如果主题带文章分页功能,那么分页后,第二页就不能提取显示了
  • 需要分级的话,那么你可以选择试用一下插件。后期周良会写一些文章,专门推荐一下这些插件
64 Responses
Comment (34)
Trackback (0)
  • #16
    黄酥快报 :

    复杂。。。我用的插件。。。

    2014.05.5 19:35 Reply
    • 周良 :

      这个也可以单独作为插件使用

      2014.05.5 23:28 Reply
  • #17
    黄酥快报 :

    复杂。。。我用的插件。。。

    2014.05.5 19:35 Reply
    • 周良 :

      这个也可以单独作为插件使用

      2014.05.5 23:28 Reply
  • #18
    小猪淘淘 :

    良哥,我不想要这个目录,我就想让我的每个标题下面能有个横线的效果,不知道咋弄啊,呵呵

    2013.06.30 11:32 Reply
    • 周良 :

      css控制标签。就可以很好的搞定了

      2013.06.30 12:44 Reply
  • #19
    小猪淘淘 :

    良哥,我不想要这个目录,我就想让我的每个标题下面能有个横线的效果,不知道咋弄啊,呵呵

    2013.06.30 11:32 Reply
    • 周良 :

      css控制标签。就可以很好的搞定了

      2013.06.30 12:44 Reply
  • #20
    卢旭庆 :

    菜鸟路过。

    2013.06.12 22:33 Reply
  • #21
    卢旭庆 :

    菜鸟路过。

    2013.06.12 22:33 Reply
  • #22
    文文 :
    2013.03.4 17:07 Reply
  • #23
    文文 :
    2013.03.4 17:07 Reply
  • #24
    潜行者M :

    扣下 Denis 的插件,研究一下他写的代码

    2013.02.22 23:18 Reply
    • 周良 :

      好主意。不过他的插件搞个版权....稍微懂点的直接去了。貌似没什么用。

      2013.02.22 23:22 Reply
      • 潜行者M :

        以前是收费的,现在放出了一个免费版的来,可以看一下的啦

        2013.02.22 23:24 Reply
        • 周良 :

          嗯,那个还没具体看过代码。必须去看一下了~

          2013.02.23 09:26 Reply
  • #25
    潜行者M :

    扣下 Denis 的插件,研究一下他写的代码

    2013.02.22 23:18 Reply
    • 周良 :

      好主意。不过他的插件搞个版权....稍微懂点的直接去了。貌似没什么用。

      2013.02.22 23:22 Reply
      • 潜行者M :

        以前是收费的,现在放出了一个免费版的来,可以看一下的啦

        2013.02.22 23:24 Reply
        • 周良 :

          嗯,那个还没具体看过代码。必须去看一下了~

          2013.02.23 09:26 Reply
  • #26
    爱软E :

    可有可无把

    2013.02.1 15:56 Reply
    • 周良 :

      加了可以对用户和搜索引擎更加友好一点。

      2013.02.1 20:57 Reply
  • #27
    爱软E :

    可有可无把

    2013.02.1 15:56 Reply
    • 周良 :

      加了可以对用户和搜索引擎更加友好一点。

      2013.02.1 20:57 Reply
  • #28
    大发娱乐城 :

    对优化好像有点作用~

    2013.02.1 09:56 Reply
    • 周良 :

      作用肯定有点的。

      2013.02.1 12:11 Reply
  • #29
    大发娱乐城 :

    对优化好像有点作用~

    2013.02.1 09:56 Reply
    • 周良 :

      作用肯定有点的。

      2013.02.1 12:11 Reply
  • #30
    南京李可迪 :

    有没有人使用了?

    2013.02.1 09:34 Reply
    • 周良 :

      貌似木有。我不打算给博客启用。

      2013.02.1 12:09 Reply
  • 还没有Trackback
Leave a Reply