Chia Sẻ Code Tạo TOC Bài Viết Và Sản Phẩm Wordpress - Không Dùng Plugin Mới Nhất

Đăng bởi Thuấn Luviet vào lúc 22/09/2025

Chắc chắn khi lướt website bạn sẽ đọc được các bài viết với Mục Lục rất rõ ràng và đẹp, giúp người đọc dễ nắm bắt nội dung website.

Nhưng thay vì phải tải và cài đặt plugin wordpress tạo TOC dễ gây nặng website và dễ bị dính phải virut.

Cho nên, bài viết này tôi sẽ hướng dẫn các bạn tự tạo mục lục cho bài viết wordpress và woocommerce mà không cần dùng code. Nào hãy bắt đầu.

TOC - Mục lục bài viết website là gì?

TOC (viết tắt của Table of Contents) hay còn gọi là mục lục bài viết website là phần danh sách tóm lược các tiêu đề, đề mục con trong một bài viết hoặc trang web.

TOC thường xuất hiện ở đầu bài viết (ngay sau đoạn mở đầu) hoặc hiển thị cố định ở thanh bên.

Các đề mục trong TOC được liên kết nội bộ (anchor link) đến đúng vị trí tương ứng trong bài, giúp người dùng chỉ cần nhấp chuột là có thể đến ngay phần nội dung mong muốn.

Ví dụ: Nếu bạn có một bài blog dài với nhiều phần như “Khái niệm – Lợi ích – Cách triển khai – Kết luận”, thì TOC sẽ tự động liệt kê ra các phần đó và gắn link cuộn đến từng đoạn.

Hiện nay, đa phần các website WordPress, Blogspot hay CMS khác đều có thể dễ dàng thêm TOC bằng plugin, code thủ công hoặc tích hợp sẵn trong theme.

Lợi Ích Của TOC Với SEO?

Việc thêm TOC không chỉ nâng cao trải nghiệm người dùng, mà còn mang lại nhiều giá trị trực tiếp cho SEO:

Tăng trải nghiệm người dùng (UX) trên website

• Độc giả không cần cuộn chuột dài dòng, có thể truy cập ngay mục họ quan tâm.
• Giúp giảm tỷ lệ thoát trang (bounce rate) và tăng thời gian ở lại trang (dwell time).
• Cải thiện khả năng index của Google
• Google bot dễ dàng đọc cấu trúc bài viết rõ ràng, phân loại nội dung chính – phụ.
• Các anchor link trong TOC được index và có thể hiển thị trực tiếp trên kết quả tìm kiếm dưới dạng “liên kết nhanh” (jump link).

Tăng cơ hội xuất hiện trong Featured Snippet

Với những bài viết hướng dẫn, liệt kê nhiều bước, Google thường ưu tiên trích xuất TOC hoặc các mục nhỏ để đưa lên top 0.

• Tối ưu hóa SEO Onpage
• TOC được xây dựng dựa trên hệ thống Heading (H2, H3, H4…), giúp bài viết logic, rõ ràng, chuẩn SEO.
• Khi triển khai nội dung dài (2000 – 3000 từ), TOC giúp Google hiểu rằng đây là bài viết chuyên sâu, có cấu trúc chặt chẽ.
• Tăng tỷ lệ CTR trong SERP
• Khi Google hiển thị liên kết con (sitelink) từ TOC ngay dưới kết quả tìm kiếm, người dùng dễ bị thu hút và click nhiều hơn.

Cách Tạo Menu TOC Bài Viết Wordpress - Bài Viết Sản Phẩm Woocommerce

Bước 1: Copy code bên dưới và lưu vào file functions.php

function luviet_custom_add_toc($content) {

    if (is_singular('post') || is_product()) {

        $pattern = '/<h([2-3])[^>]*>(.*?)<\/h\1>/i';

        preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);

        if ($matches) {

            $toc  = '<div class="custom-toc">';

            $toc .= '<div class="toc-header"><strong><i class="fa fa-list"></i> Mục lục</strong>';

            $toc .= '<button type="button" class="toc-toggle">Thu gọn</button></div>';

            $toc .= '<ul class="toc-content">';

            foreach ($matches as $match) {

                $id = sanitize_title($match[2]);

                $content = str_replace(

                    $match[0],

                    '<h'.$match[1].' id="'.$id.'">'.$match[2].'</h'.$match[1].'>',

                    $content

                );

                $toc .= '<li><a href="#'.$id.'">'.$match[2].'</a></li>';

            }

            $toc .= '</ul></div>';

            $content = $toc . $content;

        }

    }

    return $content;

}

add_filter('the_content', 'luviet_custom_add_toc', 999);

Bước 2: Copy code JS vào Body Script Bottom

<script>

document.addEventListener("DOMContentLoaded", function() {

    const tocHeaders = document.querySelectorAll(".custom-toc .toc-header");

    tocHeaders.forEach(header => {

        const btn = header.querySelector(".toc-toggle");

        const tocContent = header.parentElement.querySelector(".toc-content");

        btn.addEventListener("click", function() {

            if (tocContent.style.display === "none") {

                tocContent.style.display = "block";

                btn.textContent = "Thu gọn";

            } else {

                tocContent.style.display = "none";

                btn.textContent = "Mở rộng";

            }

        });

    });

});

</script>

Bước 3: Copy Code CSS vào file style.css hoặc custom css trong theme

.custom-toc {

    background: #f9f9f9;

    border: 1px solid #ddd;

    padding: 12px;

    margin-bottom: 20px;

    border-radius: 8px;

    font-size: 15px;

}

.custom-toc .toc-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

}

.custom-toc .toc-toggle {

    background: none;

    border: none;

    color: #0073aa;

    font-size: 14px;

    cursor: pointer;

    padding: 0;

}

.custom-toc .toc-content {

    margin-top: 10px;

    padding-left: 20px;

}

.custom-toc .toc-content li {

    margin: 4px 0;

}

.custom-toc .toc-content a {

    text-decoration: none;

    color: #0073aa;

}

.custom-toc .toc-content a:hover {

    text-decoration: underline;

}

Chúc các bạn thành công. Và hãy ủng hộ admin bằng cách đăng ký kênh và chia sẻ bài viết này lên facebook của bạn nhé.

Tags: huong-dan , kien-thuc , thu-thuat , thu-thuat-wordpress , tin-tuc ,