码云笔记前端博客
Home > WP教程 > WordPress欲思主题添加文章目录功能

WordPress欲思主题添加文章目录功能

2018-08-10 分类:WP教程 作者:码云 阅读(504)

本文共计917个字,预计阅读时长需要3分钟。

如文章标题所说如何给wordpress主题的文章内容添加导航目录?这个也是我最近在看自己写过的文章时,突发想要添加这么一个需求,主要是发现如果文章太长的话对于浏览者浏览文章时很费劲,尤其是特别长的文章,用户体验不好。有了这个导航功能就可以随时定位到我们想要看的内容,一步到位,让浏览者省时省力,相当于一个传送门。所以站在用户角度去想,有必要实现这一功能。而且,给文章添加文章目录功能,不仅使文章条理更清楚,还有利于SEO。好了,废话少说,喜欢折腾代码的朋友一起和码云笔记前端博客来看一下如何实现WordPress主题文章导航功能吧。

先看一下效果:

WordPress欲思主题添加文章目录功能

一、通过插件的方式实现文章导航功能

接触WordPress的同学都知道,很多插件都可以满足我们一些日常项目需求,对于不想折腾代码以及不会代码的朋友,推荐下载插件:TOCContent Index for WordPress插件不是本章的要点,这里不多说。如果想用插件,可以百度一下,或者后台插件里搜索安装使用。

二、纯代码实现

以下代码的源码是我在网上搜出来的,但是呢不能满足我们的需求,经过修改可以匹配 h2 和 h3 标签,只需要将下面代码加到主题的 functions.php 文件中最后一个"?>"前就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function article_index($content) {
    $matches = array();
    $ul_li = '';
    //匹配出 h2、h3 标题
    $rh = "/<h[23]>(.*)<\/h[23]>/im";
    $h2_num = 0;
    $h3_num = 0;
    //判断是否是文章页
    if(is_single()){
         if(preg_match_all($rh, $content, $matches)) {
            // 找到匹配的结果
            foreach($matches[1] as $num => $title) {
                $hx = substr($matches[0][$num], 0, 3);      //前缀,判断是 h2 还是 h3
                $start = stripos($content, $matches[0][$num]);  //匹配每个标题字符串的起始位置
                $end = strlen($matches[0][$num]);       //匹配每个标题字符串的结束位置
                if($hx == "<h2"){
                    $h2_num += 1; //记录 h2 的序列,此效果请查看百度百科中的序号,如 1.11.2 中的第一位数
                    $h3_num = 0;
                    // 文章标题添加 id,便于目录导航的点击定位
                    $content = substr_replace($content, '<h2 id="h2-'.$num.'">'.$title.'</h2>',$start,$end);
                    $title = preg_replace('/<.+>/', "", $title); //将 h2 里面的 a 链接或者其他标签去除,留下文字
                    $ul_li .= '<li class="h2_nav"><a href="#h2-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n";
                }else if($hx == "<h3"){
                    $h3_num += 1; //记录 h3 的序列,此熬过请查看百度百科中的序号,如 1.11.2 中的第二位数
                    $content = substr_replace($content, '<h3 id="h3-'.$num.'">'.$title.'</h3>',$start,$end);
                    $title = preg_replace('/<.+>/', "", $title); //将 h3 里面的 a 链接或者其他标签去除,留下文字
                    $ul_li .= '<li class="h3_nav"><a href="#h3-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n";
                }  
            }
        }
        // 将目录拼接到文章
        $content =  $content . "<div class="post_nav"><strong class="post_title">文章目录</strong><ul class="post_nav_content">\n" . $ul_li . "</ul></div>\n";
        return $content;
    }elseif(is_home){
        return $content;
    }
}
add_filter( "the_content", "article_index" );

然后就是需要在主题的style.css中填入以下css样式即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*目录效果*/

.post_nav {
    position: fixed;
    top: 50%;
    right: 50%;
    z-index: 20;
    display: block;
    overflow: hidden;
    margin-top: -24px;
    margin-right: 620px;
    width: 164px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #DEDFE1;
    background: #fff
}

.post_title {
    width: 144px;
    border-bottom: 1px dashed #ddd;
    display: block;
    line-height: 30px;
    margin-left: 10px;
}

.post_nav .post_nav_side {
    position: absolute;
    top: 0;
    left: 5px;
    width: 0;
    min-height: 40px;
    border: 1px solid #eaeaea;
    border-top: 0;
    border-bottom: 0;
    background-color: #eaeaea
}

.post_nav .post_nav_content {
    position: relative;
    overflow: hidden;
    overflow-y: scroll;
    margin: 10px 0;
    padding-left: 10px;
    height: auto;
    max-height: 520px;
    list-style: none;
    text-indent: 0
}

.post_nav .post_nav_content li {
    height: 22px;
    line-height: 22px
}

.post_nav_content li a.tooltip {
    opacity: 100!important
}

.post_nav .post_nav_content li a {
    display: inline-block;
    overflow: hidden;
    height: 22px;
    line-height: 25px;
    max-width: 146px;
    color: #333;
    vertical-align: top;
    text-decoration: none;
    -webkit-text-overflow: ellipsis
}

@media screen and (max-width:1440px) {
    .post_nav {
        margin-right: -240px;
        background: #f7f7f7
    }
}

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 3 条评论 - WordPress欲思主题添加文章目录功能

  1. 请看小说阅读网 Windows 7 未知浏览器

    非常精彩的文章,引人入胜,痛快淋漓。感谢楼主分享。

  2. zuxrjw Windows 7 未知浏览器

    楼下是疯子。哈哈

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @zuxrjw你别闹了,哈哈

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648086 次
  • 最近更新: 2019年10月21日