wordpress 免插件文章目录

Gavin Wu 2023年08月18日 8:08 Wordpress 1,622 Views

文章目录是 WordPress 文章的必要组成部分,尤其是带有许多标题的长文章。创建目录有助于读者轻松快速地遵循和掌握想法。此外,它还可以帮助您在文章中添加更多关键字,这对 SEO 非常有利。现在wordpress已经很成熟,文章目录的插件也到处都是,就不再多说了。今天分享二个免插件文章目录的代码。

使用方法

是利用h标签,将需要作为目录的标题包裹起来。一般都是h2~h6标题。

例如:

1
2
3
4
5
<h2>一级标题</h2>
<h3>二级标题</h3>
<h4>三级标题</h4>
<h5>四级标题</h5>
...

第一种代码

wordpress 免插件文章目录|微言心语
1、下面的代码扔function.php里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//文章目录
function article_index($content) {
    $matches = array();
    $ul_li = '';
    $r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
    if(is_single() && preg_match_all($r, $content, $matches)) {
    foreach($matches[1] as $key => $value) {
    $title = trim(strip_tags($matches[2][$key]));
    $content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content);
    $ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
    }
    $content = "\n<div id="article-index">
    <strong>文章目录</strong>
    <ul id="
index-ul">\n" . $ul_li . "</ul>
    </div>\n"
. $content;
    }
    return $content;
    }
    add_filter( 'the_content', 'article_index' );

2、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
/* 文章目录 */
#article-index {
  -moz-border-radius: 6px 6px 6px 6px;
  border: 1px solid #DEDFE1;
  float: right;
  margin: 0 0 15px 15px;
  padding: 0 6px;
  width: 300px;
  line-height: 23px;
  }
  #article-index strong {
  border-bottom: 1px dashed #DDDDDD;
  display: block;
  line-height: 30px;
  padding: 0 4px;
  }
  #index-ul {
  margin: 0;
  padding-bottom: 10px;
  }
  #index-ul li {
  background: none repeat scroll 0 0 transparent;
  list-style-type: disc;
  padding: 0;
  margin-left: 20px;
  }
  #index-ul a {
    color: #4c4c4c;
  }
  #index-ul a:hover {
    color: #009cee;
  }

第二种代码

wordpress 免插件文章目录|微言心语
1、与上一个相同,将代码扔到function.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//文章目录
function wpkj_create_toc($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) return $html;
        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                文章目录
            </div>
            <ul class="toc">'
;
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                if(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $toc .= '</ul>';
        }
        if($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $toc . $html;
}
add_filter('the_content', 'wpkj_create_toc');

2、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
/* 文章目录 */
.toc-bound {
  background-color: #619162;
  color: #fff;
}
.toc-ctr {
  border-bottom: 1px solid #fff;
  padding: 10px;
  font-size: 16px;
  text-transform: uppercase;
}
ul.toc {
  list-style-type: none;
  padding: 10px;
  padding-left: 25px;
}
.toc li a {
  color: #fff;
}
ul.toc > li {
  font-size: 14px;
  font-weight: 700;
  padding: 5px 0;
}
ul.toc-sub {
  list-style-type: none;
  padding-left:10px;
}
ul.toc-sub li a {
  font-weight: 200;
}

结语

代码的方法,对于有代码基础的人来说,会更利于根据自己需求定制。插件的方法更简单方便。实现的原理都是一样的。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Top