Tự động tạo Mục lục (TOC) cho bài viết WordPress – Gọn nhẹ, không cần plugin

4 tuần 0 9 4 phút đọc

Mục lục (Table of Contents – TOC) giúp người đọc nhanh chóng nắm bắt nội dung chính của một bài viết, đặc biệt hữu ích với các bài viết dài hoặc có nhiều đề mục. Trong bài viết này, bạn sẽ học cách tạo TOC tự động cho WordPress chỉ với vài dòng PHP – hoàn toàn không cần cài thêm plugin.

Tự động tạo Mục lục (TOC) cho bài viết WordPress – Gọn nhẹ, không cần plugin
Mục lục

Mục tiêu

Chúng ta sẽ tạo một hàm PHP tự động quét các thẻ <h3> và <h4> trong nội dung bài viết để tạo danh sách điều hướng TOC, có thể chèn vào bất kỳ vị trí nào bạn muốn (ví dụ: đầu bài, sidebar, offcanvas, v.v…).

Bạn có thể xem demo tại đây: 7 Trận Chiến Huyền Thoại Trong One Piece Từng Được Nhắc Đến Nhưng Vẫn Chưa Được Vẽ Rõ (bấm vào nút Mục lục ngay dưới tiêu đề hoặc trượt qua phải trong nội dung nếu bạn xem trên điện thoại)

Đoạn mã PHP tạo TOC

Thêm đoạn sau vào file functions.php trong theme, hoặc plugin của bạn:

function render_toc_for_post() {
    if (!is_singular('post')) return '';

    global $post;
    if (!$post || $post->post_type !== 'post') return '';

    preg_match_all('/<h([3-4])[^>]*>(.*?)<\/h[3-4]>/', $post->post_content, $matches, PREG_SET_ORDER);

    if (count($matches) < 3) return '';

    $toc  = '<div>';
    $toc .= '<div class="toc-title"><strong>Mục lục</strong></div>';
    $toc .= '<ul class="toc-list">';

    $i = 1;
    foreach ($matches as $match) {
        $tag = $match[1];
        $text = strip_tags($match[2]);
        $id = 'toc-' . $i++;

        $post->post_content = str_replace($match[0], '<h' . $tag . ' id="' . $id . '">' . $text . '</h' . $tag . '>', $post->post_content);

        $indent_class = ($tag === '4') ? 'toc-indent' : '';
        $toc .= '<li class="' . $indent_class . '"><a href="#' . $id . '">' . $text . '</a></li>';
    }

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

Cách sử dụng

Gọi hàm trong bất kỳ template nào bạn muốn hiển thị TOC, ví dụ:

<?php echo render_toc_for_post(); ?>

Nếu muốn hiển thị ở đầu nội dung bài viết, bạn có thể dùng filter:

add_filter('the_content', 'inject_toc_at_top');
function inject_toc_at_top($content) {
    if (is_singular('post')) {
        $toc = render_toc_for_post();
        $content = $toc . $content;
    }
    return $content;
}

Tùy biến giao diện

Bạn có thể chỉnh CSS để TOC hiển thị đẹp và phù hợp với giao diện website:

.toc-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.toc-list {
  list-style: none;
  padding-left: 0;
}

.toc-list li {
  margin-bottom: 6px;
}

.toc-indent {
  margin-left: 15px;
  font-size: 90%;
}

Ưu điểm của phương pháp này

  • Không cần dùng plugin, nhẹ và dễ kiểm soát
  • Dễ dàng tùy biến vị trí hiển thị
  • Hoạt động trên mọi theme
  • Có thể gắn vào sidebar, offcanvas hoặc đầu bài viết

Kết luận

TOC là một tính năng nhỏ nhưng mang lại trải nghiệm lớn cho người đọc. Với cách làm đơn giản trong bài viết này, bạn có thể dễ dàng tạo TOC tự động cho website WordPress của mình mà không cần cài thêm plugin nào.

Hãy thử áp dụng vào blog của bạn – vừa tối ưu UX, vừa cải thiện SEO!

Series: Thủ thuật WordPress

Bài Viết Liên Quan

Bình luận

  • Không có bình luận.