WordPress 文章目錄怎麼做？用程式碼依標題自動產生目錄

add_filter( 'the_content', 'ahwei_post_toc', 20 );
function ahwei_post_toc( $content ) {
    // 只在單篇文章的本文產生目錄
    if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() || get_the_ID() !== get_queried_object_id() ) {
        return $content;
    }

    $items = array();
    $count = 0;

    // 找出 h2、h3,沒有 id 的自動補上
    $content = preg_replace_callback(
        '/<h([23])([^>]*)>(.*?)<\/h\1>/is',
        function ( $m ) use ( &$items, &$count ) {
            $text = trim( wp_strip_all_tags( $m[3] ) );
            if ( '' === $text ) {
                return $m[0];
            }

            $attrs = $m[2];
            if ( preg_match( '/\sid=["\']([^"\']+)["\']/i', $attrs, $found ) ) {
                $id = $found[1];
            } else {
                $count++;
                $id     = 'toc-' . $count;
                $attrs .= ' id="' . $id . '"';
            }

            $items[] = array(
                'level' => (int) $m[1],
                'id'    => $id,
                'text'  => $text,
            );

            return '<h' . $m[1] . $attrs . '>' . $m[3] . '</h' . $m[1] . '>';
        },
        $content
    );

    // 標題少於 3 個就不顯示目錄
    if ( count( $items ) < 3 ) {
        return $content;
    }

    $toc = '<details class="post-toc" open><summary>文章目錄</summary><ul>';
    foreach ( $items as $item ) {
        $toc .= sprintf(
            '<li class="toc-h%1$d"><a href="#%2$s">%3$s</a></li>',
            $item['level'],
            esc_attr( $item['id'] ),
            esc_html( $item['text'] )
        );
    }
    $toc .= '</ul></details>';

    // 放在第一個標題前面
    if ( preg_match( '/<h[23][\s>]/i', $content, $first, PREG_OFFSET_CAPTURE ) ) {
        return substr_replace( $content, $toc, $first[0][1], 0 );
    }

    return $toc . $content;
}

.post-toc {
  margin: 1.5em 0 2em;
  padding: 1em 1.25em;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fafafa;
}

.post-toc summary {
  font-weight: bold;
  cursor: pointer;
}

.post-toc ul {
  margin: 0.75em 0 0;
  padding-left: 1.2em;
}

.post-toc li {
  margin: 0.3em 0;
}

.post-toc .toc-h3 {
  margin-left: 1.2em;
  font-size: 0.95em;
}

/* 點目錄時平滑捲動 */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* 網站上方有固定選單時,避免標題被選單擋住 */
h2[id],
h3[id] {
  scroll-margin-top: 80px;
}