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.
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.
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');
Để 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;
}
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.
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!