Chức Năng Tạo Mục Lục Trong WordPress

12 Tháng 10, 2024

Mục lục là một phần quan trọng giúp người đọc dễ dàng điều hướng qua nội dung của bài viết. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm chức năng tạo mục lục cho website WordPress của bạn mà không cần sử dụng bất kỳ plugin nào.

Tại Sao Nên Thêm Mục Lục?

  1. Tăng cường trải nghiệm người dùng: Giúp người đọc dễ dàng tìm kiếm thông tin mà họ cần.
  2. Cải thiện SEO: Mục lục có thể giúp tăng cường khả năng xuất hiện của bài viết trên các công cụ tìm kiếm.
  3. Giảm tỷ lệ thoát: Khi người đọc dễ dàng điều hướng, họ có khả năng ở lại trang lâu hơn.

Cách Thực Hiện

Dưới đây là hướng dẫn từng bước để bạn có thể thêm chức năng tạo mục lục vào bài viết.

Bước 1: Tạo Mục Lục

Chúng ta sẽ sử dụng các thẻ tiêu đề trong bài viết để tự động tạo mục lục. Để thực hiện điều này, hãy thêm đoạn mã sau vào tệp functions.php của theme

function generate_table_of_contents($content) {
    if (is_single() && !is_admin()) {
        // Tạo một tiêu đề cho mục lục
        $toc = '<div class="table-of-contents"><h2>Mục Lục</h2><ul>';

        // Sử dụng Regular Expression để tìm tất cả các tiêu đề h2, h3, h4
        preg_match_all('/<h([2-4])>(.*?)<\/h[2-4]>/', $content, $matches);

        if ($matches[0]) {
            foreach ($matches[0] as $index => $heading) {
                $level = $matches[1][$index];
                $title = strip_tags($matches[2][$index]);
                $id = sanitize_title($title);

                // Thêm ID vào tiêu đề
                $content = str_replace($heading, '<h' . $level . ' id="' . $id . '">' . $title . '</h' . $level . '>', $heading);

                // Thêm mục vào danh sách
                $toc .= '<li class="toc-item toc-level-' . $level . '"><a href="#' . $id . '">' . $title . '</a></li>';
            }
        }

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

        // Thêm mục lục vào đầu bài viết
        $content = $toc . $content;
    }
    
    return $content;
}
add_filter('the_content', 'generate_table_of_contents');

Bước 2: Thêm CSS Để Định Dạng Mục Lục

Để mục lục hiển thị đẹp mắt, bạn cần thêm một số CSS vào tệp style.css của theme. Dưới đây là một ví dụ đơn giản

.table-of-contents {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
}

.table-of-contents h2 {
    margin: 0 0 10px;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
}

.table-of-contents .toc-item {
    margin: 5px 0;
}

.table-of-contents .toc-item a {
    text-decoration: none;
    color: #0073aa;
}

.table-of-contents .toc-item a:hover {
    text-decoration: underline;
}

Bước 3: Kiểm Tra và Tinh Chỉnh

Sau khi đã thêm mã và CSS vào theme của bạn, hãy kiểm tra một bài viết để đảm bảo rằng mục lục hiển thị đúng cách. Bạn có thể tinh chỉnh lại CSS để phù hợp với thiết kế của trang web của mình.

Kết Luận

Việc thêm chức năng tạo mục lục cho website WordPress của bạn không chỉ giúp người đọc dễ dàng điều hướng mà còn cải thiện trải nghiệm người dùng tổng thể. Bạn có thể áp dụng các bước hướng dẫn trên để tích hợp tính năng này ngay hôm nay!

Quảng Cáo

Blog ..

Hướng dẫn dịch vụ ..

Zalo
Proxy
VPS
Tài khoản
Hosting
Tên miền
Facebook