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

64

上一篇文章说到为 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、缺点和建议

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

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 64 条评论

  1. 南京李可迪 回复

    有没有人使用了?

    1. 周良 (文章作者) 回复

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

  2. 大发娱乐城 回复

    对优化好像有点作用~

    1. 周良 (文章作者) 回复

      作用肯定有点的。

  3. 大发娱乐城 回复

    对优化好像有点作用~

    1. 周良 (文章作者) 回复

      作用肯定有点的。

  4. 爱软E 回复

    可有可无把

    1. 周良 (文章作者) 回复

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

  5. 爱软E 回复

    可有可无把

    1. 周良 (文章作者) 回复

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

  6. 潜行者M 回复

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

    1. 周良 (文章作者) 回复

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

      1. 潜行者M 回复

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

        1. 周良 (文章作者) 回复

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

  7. 潜行者M 回复

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

    1. 周良 (文章作者) 回复

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

      1. 潜行者M 回复

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

        1. 周良 (文章作者) 回复

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

  8. 文文 回复
    1. 周良 (文章作者) 回复

      多谢支持

  9. 文文 回复
    1. 周良 (文章作者) 回复

      多谢支持

  10. 卢旭庆 回复

    菜鸟路过。

    1. 周良 (文章作者) 回复

      我也是菜鸟!~

  11. 卢旭庆 回复

    菜鸟路过。

    1. 周良 (文章作者) 回复

      我也是菜鸟!~

  12. 小猪淘淘 回复

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

    1. 周良 (文章作者) 回复

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

  13. 小猪淘淘 回复

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

    1. 周良 (文章作者) 回复

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

  14. 黄酥快报 回复

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

    1. 周良 (文章作者) 回复

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

  15. 黄酥快报 回复

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

    1. 周良 (文章作者) 回复

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

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

返回顶部