Cách tạo mục lục tự động không cần plugin cho WordPress (2026)

Một bài viết dài và chuyên sâu là “mỏ vàng” để thu hút độc giả, nhưng nếu không có một tấm bản đồ dẫn đường, người đọc rất dễ lạc lối và rời đi sớm. Đó chính là lý do mục lục (Table of Contents) trở thành tiêu chuẩn bắt buộc cho mọi blog chuyên nghiệp. Tạo mục lục bằng code giúp loại bỏ thêm một plugin không cần thiết – bước tối ưu nhỏ nhưng có ý nghĩa trong checklist tăng tốc WordPress hiệu quả.

Trong bài hướng dẫn này, chúng ta sẽ cùng nhau xây dựng một bộ mục lục thông minh: tự động quét các tiêu đề, tạo liên kết nhảy (jump links) chuẩn SEO và có giao diện hiện đại, giúp tăng tỉ lệ giữ chân người dùng mà vẫn giữ cho website nhẹ tênh.

Tại sao mục lục lại quan trọng đối với SEO và trải nghiệm người dùng?

Trước khi đi sâu vào kỹ thuật, chúng ta cần hiểu rõ giá trị mà một bộ mục lục mang lại, bởi đây không chỉ là tính năng “cho đẹp” mà là một chiến thuật tối ưu hóa website.

Về phía người dùng, mục lục giúp họ nắm bắt nhanh cấu trúc bài viết và đi thẳng tới thông tin họ cần, điều này cực kỳ quan trọng trong kỷ nguyên “đọc lướt” hiện nay. Quan trọng hơn, về phía Google, một mục lục được cấu trúc tốt bằng mã HTML sạch sẽ giúp bot tìm kiếm hiểu rõ các ý chính của bài viết. Điều này thường dẫn đến việc Google hiển thị các “site links” (liên kết phụ) ngay dưới kết quả tìm kiếm, giúp bài viết của bạn trông nổi bật hơn và tăng tỉ lệ nhấp chuột (CTR) đáng kể.

Dù lợi ích là rất lớn, nhưng nhiều bạn vẫn ngần ngại vì lo sợ việc cài đặt thêm plugin sẽ làm chậm tốc độ tải trang. Hãy cùng phân tích tại sao việc tự code lại là lựa chọn khôn ngoan hơn.

Vì sao nên tự tạo mục lục thay vì dùng plugin?

Phần lớn các plugin tạo mục lục hiện nay đều đi kèm với rất nhiều file CSS và Javascript không cần thiết, gây ra hiện tượng “render-blocking” (chặn hiển thị) làm giảm điểm số trên Google PageSpeed Insights.

Việc tự thêm mục lục bằng code giúp bạn kiểm soát hoàn toàn 100% những gì được tải lên website. Bạn có thể tự quyết định mục lục sẽ xuất hiện ở đâu, chỉ quét các thẻ từ h2 – h6 và tùy chỉnh màu sắc sao cho đồng bộ hoàn hảo với thương hiệu cá nhân của mình. Đặc biệt, với các bạn đang dùng Child Theme, việc quản lý đoạn code này sẽ cực kỳ an toàn và bền vững.

Bây giờ, hãy chuẩn bị tinh thần để biến website của bạn trở nên chuyên nghiệp hơn. Chúng ta sẽ thực hiện qua 2 bước: xử lý logic bằng PHP và làm đẹp bằng CSS.

Hướng dẫn tạo mục lục tự động bằng code

Chỉ cần 2 bước đơn giản dưới đây là bạn đã có ngay một mục lục tại mỗi bài viết trên website:

Bước 1: Thêm logic xử lý vào file functions.php

Bạn hãy mở file functions.php của Child Theme (hoặc dùng Code Snippets) và dán đoạn code dưới đây vào. Đoạn mã này sẽ tự động tìm các thẻ tiêu đề và gắn ID cho chúng để tạo liên kết.

// Table of contents function
function create_post_toc($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) return $content;

    if (!preg_match_all('/<h([2-6])(.*?)>(.*?)<\/h\1>/i', $content, $h)) return $content;

    $toc = '<div class="custom-toc"><div class="toc-header">
                <div class="toc-title">Nội dung bài viết</div>
                <button class="toc-toggle" aria-expanded="true">Ẩn</button>
            </div><ul class="toc-list">';

    foreach ($h[3] as $i => $title) {
        $id = sanitize_title($title);
        $content = str_replace($h[0][$i], "<h{$h[1][$i]}{$h[2][$i]} id=\"$id\">$title</h{$h[1][$i]}>", $content);
        $toc .= "<li class=\"toc-level-{$h[1][$i]}\"><a href=\"#$id\">$title</a></li>";
    }

    return $toc . '</ul></div>' . $content;
}
add_filter('the_content', 'create_post_toc');

// Create open/close button
add_action('wp_footer', function () {
    if (!is_single()) return;
    ?>
    <script>
    document.addEventListener('click', e => {
        if (!e.target.classList.contains('toc-toggle')) return;
        const list = document.querySelector('.toc-list');
        const open = list.style.display !== 'none';
        list.style.display = open ? 'none' : 'block';
        e.target.textContent = open ? 'Hiện' : 'Ẩn';
        e.target.setAttribute('aria-expanded', !open);
    });
    </script>
    <?php
});

Bước 2: Làm đẹp mục lục bằng CSS

Để mục lục không chỉ là một danh sách thô kệch, hãy thêm đoạn CSS sau vào file style.css của bạn (hoặc vào Giao diện > Tuỳ chỉnh > CSS bổ sung):

/* == START Table of Contents CSS == */
.custom-toc {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.custom-toc .toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.custom-toc .toc-title {
    font-size: 20px;
    font-weight: 700;
}

.custom-toc .toc-toggle {
    margin-left: auto;
    white-space: nowrap;
}

.custom-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-toc li {
    margin: 6px 0;
}

/* Heading levels */
.custom-toc .toc-level-2 { padding-left: 0; }
.custom-toc .toc-level-3 { padding-left: 16px; }
.custom-toc .toc-level-4 { padding-left: 32px; }
.custom-toc .toc-level-5 { padding-left: 48px; }
.custom-toc .toc-level-6 { padding-left: 64px; }

.custom-toc a {
    color: #0073aa;
    text-decoration: none;
}

.custom-toc a:hover {
    text-decoration: underline;
}

/* == END Table of Contents CSS == */

Sau khi đã lưu lại các thay đổi, hãy cùng kiểm tra xem thành quả hiển thị trên website thực tế sẽ trông như thế nào.

Kiểm tra kết quả hiển thị

Bây giờ, bạn hãy mở một bài viết bất kỳ có chứa các thẻ Heading 2 hoặc Heading 3. Bạn sẽ thấy một bảng mục lục tự động xuất hiện ngay đầu nội dung bài viết. Khi nhấp vào từng mục, trình duyệt sẽ tự động cuộn xuống đúng vị trí tiêu đề đó một cách mượt mà.

Cách làm này không chỉ giúp bài viết của bạn trông chuyên nghiệp như các trang báo lớn mà còn giúp cấu trúc dữ liệu của bài viết trở nên mạch lạc, dễ hiểu đối với cả người đọc và công cụ tìm kiếm.

Câu hỏi thường gặp (FAQ)

1. Code này có hoạt động với các builder như Elementor không?

Đoạn code này hoạt động dựa trên hook the_content của WordPress, nên nó tương thích tốt với hầu hết các giao diện và builder phổ biến. Tuy nhiên, nếu bạn dùng Elementor để thiết kế toàn bộ trang, đôi khi bạn cần dùng widget chuyên dụng của họ để có kết quả tốt nhất.

2. Tôi muốn mục lục hiện ở giữa bài viết thay vì ở đầu có được không?

Hoàn toàn được. Thay vì dùng hàm return $toc . $content;, bạn có thể viết thêm logic để tìm thẻ H2 thứ hai hoặc thứ ba và chèn biến $toc vào ngay trước thẻ đó.

3. Mục lục có tự động cập nhật khi tôi sửa tiêu đề bài viết không?

Có. Vì đây là code quét dữ liệu thời gian thực (dynamic), mỗi khi bài viết được tải, nó sẽ tự động tạo lại mục lục dựa trên nội dung mới nhất của bạn.

4. Code này có hỗ trợ thẻ H4, H5 không?

Đoạn mã trên mình đang để quét thẻ h2 đến h6 (đoạn [2-6]). Nếu bạn muốn tuỳ chỉnh, chỉ cần sửa giá trị trong ngoặc vuông.

5. Làm sao để có hiệu ứng cuộn mượt (smooth scroll) khi nhấn vào mục lục?

Hầu hết các theme hiện đại đều có sẵn tính năng này. Nếu chưa có, bạn chỉ cần thêm một dòng đơn giản vào CSS bổ sung: html { scroll-behavior: smooth; }.

Tổng kết

Việc tự thêm mục lục không dùng plugin là một minh chứng cho thấy: đôi khi những giải pháp đơn giản bằng code lại mang lại hiệu quả vượt trội so với việc lạm dụng plugin. Bạn không chỉ cải thiện được tốc độ website mà còn nâng tầm trải nghiệm người dùng và ghi điểm trong mắt Google.

Hy vọng thủ thuật này sẽ giúp ích cho hành trình tối ưu blog WordPress của bạn. Đừng quên dọn dẹp bộ nhớ cache sau khi thêm code để thấy ngay kết quả nhé!

---