目次が自動で生成される仕組みがわかりません

###前提・実現したいこと
WordPressの記事本文の前に自動で生成される目次の仕組みがわからないので、教えていただければ助かります。

###発生している問題・エラーメッセージ
他の方が作ったコードをいじっていて、
h2,h3などを使うと勝手に目次が生成される仕組みがわからない。

###イメージはこんな感じです
https://hagelabo.jp/articles/zoumo-looks-speed

###該当のソースコード

single.php
1                    <ul class="tosUl">
2                        <li class="tosTitle">目次</li>
3                    </ul>
4                    <?php
5                        $postItem = str_replace("[@text@]", "<p>", get_field('postItem'));
6                        $postItem = str_replace('[@title1@]', '<h2 class="borderLeftBottom scrollTitle">', $postItem);
7                        $postItem = str_replace('[@/title1@]', '</h2>', $postItem);
8                        $postItem = str_replace('[@title2@]', '<h2 class="singleH2 scrollTitle">', $postItem);
9                        $postItem = str_replace('[@/title2@]', '</h2>', $postItem);
10                        $postItem = str_replace('[@title3@]', '<h3 class="singleH3">', $postItem);
11                        $postItem = str_replace('[@/title3@]', '</h3>', $postItem);
12                        echo $postItem;
13                    ?>

style.css
1.singleH2 {
2	border-left: 6px solid #7CBFA3;
3    margin-top: 20px;
4    padding: 10px;
5}
6
7.singleH3 {
8    border-top: 1px solid #bccac7;
9    border-bottom: 1px solid #bccac7;
10    margin-top: 20px;
11    padding: 15px 0px 15px 5px;
12}
13.tosUl {
14    margin-bottom: 30px;
15    padding: 10px;
16    border: 1px solid #dedede;
17    display: none;
18}
19
20.tosUl li {
21    padding: 8px 0;
22    -webkit-transition: .2s;
23    transition: .2s;
24}
25.tosUl li:before {
26    content: " ▶︎ ";
27    color: rgba(140, 199, 175, 0.9);
28}
29
30.tosUl li:not(:first-child):hover {
31    text-decoration: underline;
32    cursor: pointer;
33}
34
35.tosTitle {
36    padding: 0 0 10px 0 !important;
37    border-bottom: 1px solid #dedede;
38}
39
40.tosTitle:before {
41    content: "" !important;
42}