Bài Viết

Hướng dẫn cách tạo mục lục tự động không cần dùng plugin

Đăng vào Tháng 12 17, 2024 bởi admin

admin

17/12/2024

31 Phút đọc

63 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Trong quá trình viết blog hoặc tạo các bài viết trên WordPress, mục lục tự động không chỉ giúp người đọc dễ dàng tìm kiếm thông tin mà còn cải thiện trải nghiệm người dùng và SEO. Tuy nhiên, nhiều người dùng WordPress có thể không muốn sử dụng plugin vì lý do tối ưu hóa hiệu suất hoặc yêu cầu về tính linh hoạt. Bài viết này sẽ hướng dẫn bạn cách tạo mục lục tự động mà không cần plugin, chỉ bằng cách sử dụng một chút mã HTML, CSS và JavaScript trong WordPress.

Hướng dẫn cách tạo mục lục tự động không cần dùng plugin

1. Giới thiệu về mục lục tự động trong WordPress

Hướng Dẫn Khái Quát Về Mục Lục Tự Động

Mục lục tự động là một bảng danh sách các tiêu đề (H2, H3, H4, v.v.) trong bài viết, giúp người đọc dễ dàng điều hướng nội dung. Bạn có thể tạo mục lục tự động mà không cần dùng plugin WordPress, thay vào đó là sử dụng mã nguồn để tự động thu thập các tiêu đề trong bài viết và hiển thị chúng ở đầu bài.

Tại Sao Không Cần Sử Dụng Plugin?

Dù plugin là một giải pháp dễ dàng nhưng việc sử dụng quá nhiều plugin có thể làm chậm trang web, gây ra sự cố về bảo mật và dễ gặp vấn đề tương thích. Việc tạo mục lục tự động bằng mã nguồn giúp bạn giảm thiểu sự phụ thuộc vào plugin và tối ưu hóa hiệu suất trang web.

Lợi Ích Của Việc Tạo Mục Lục Tự Động

Tăng cường trải nghiệm người dùng: Mục lục giúp người đọc dễ dàng điều hướng bài viết dài.
Cải thiện SEO: Mục lục giúp công cụ tìm kiếm dễ dàng hiểu cấu trúc bài viết.
Giảm độ dài trang: Thay vì phải cuộn nhiều lần, người đọc có thể nhanh chóng nhảy đến phần họ muốn.

Những Điều Cần Lưu Ý Khi Sử Dụng Mục Lục Tự Động

Đảm bảo bài viết của bạn có cấu trúc hợp lý với các thẻ Heading (H1, H2, H3, v.v.).
Kiểm tra lại mã nguồn sau khi chèn mục lục tự động để tránh các lỗi không mong muốn.

2. Chuẩn Bị Các Yếu Tố Cần Thiết Trước Khi Tạo Mục Lục Tự Động

Trước khi bắt đầu tạo mục lục tự động cho bài viết trên WordPress, việc chuẩn bị kỹ lưỡng là rất quan trọng. Đảm bảo rằng cấu trúc bài viết của bạn được tổ chức hợp lý và các yếu tố cần thiết đã được thiết lập đúng cách sẽ giúp mục lục hoạt động hiệu quả và mang lại trải nghiệm người dùng tốt nhất. Dưới đây là các bước chuẩn bị cơ bản bạn cần thực hiện trước khi triển khai mục lục tự động:

Kiểm Tra Cấu Trúc Bài Viết Trong WordPress

Trước khi tạo mục lục tự động, điều quan trọng là bạn phải kiểm tra lại cấu trúc bài viết trong WordPress để đảm bảo rằng các thẻ Heading được sử dụng đúng cách. Thẻ Heading là các thẻ HTML (H1, H2, H3, H4, v.v.) giúp chia bài viết thành các phần và mục rõ ràng. Mục lục tự động sẽ dựa vào các thẻ này để liệt kê các mục tiêu đề trong bài viết, vì vậy, việc sử dụng chúng một cách chính xác là rất quan trọng.

H1: Thường được sử dụng cho tiêu đề chính của bài viết hoặc trang.
H2: Dùng cho các tiêu đề phần chính của bài viết.
H3: Dùng cho các tiêu đề của các mục con trong phần chính.
H4-H6: Dùng cho các tiêu đề của các mục nhỏ hơn, nếu cần.

Hãy kiểm tra kỹ lưỡng các thẻ Heading trong bài viết để chắc chắn rằng các phần trong bài được phân chia rõ ràng và hợp lý. Một cấu trúc hợp lý sẽ giúp người đọc dễ dàng theo dõi bài viết và mục lục tự động sẽ hoạt động hiệu quả hơn.

Sử Dụng Các Thẻ Heading (H1, H2, H3…) Hợp Lý

Việc sử dụng đúng các thẻ Heading không chỉ giúp bài viết của bạn có cấu trúc tốt mà còn ảnh hưởng đến SEO. Các thẻ Heading (H1, H2, H3…) sẽ được công cụ tìm kiếm như Google sử dụng để hiểu cấu trúc và chủ đề của bài viết. Để tối ưu hóa mục lục tự động và SEO, bạn nên:

H1: Chỉ sử dụng một lần trong bài viết, thường cho tiêu đề chính của bài viết. Đây là thẻ quan trọng nhất trong SEO và không nên bị bỏ qua.
H2: Sử dụng cho các tiêu đề chính trong bài viết, giúp chia nhỏ bài viết thành các phần dễ tiếp cận.
H3: Thường dùng cho các mục con hoặc tiêu đề phụ trong mỗi phần. Đảm bảo các tiêu đề này liên quan mật thiết với nội dung của phần H2 phía trên.
H4, H5, H6: Nếu bài viết có nhiều mục con hơn, bạn có thể sử dụng thêm các thẻ H4-H6 để phân cấp các thông tin chi tiết hơn.

Sử dụng các thẻ Heading hợp lý không chỉ giúp bài viết của bạn dễ đọc mà còn giúp công cụ tìm kiếm hiểu rõ hơn về nội dung và cấu trúc của trang, từ đó cải thiện thứ hạng SEO của bạn.

Cấu Hình Và Tổ Chức Nội Dung Bài Viết

Để mục lục tự động hoạt động hiệu quả, việc tổ chức nội dung bài viết một cách logic và có hệ thống là điều cần thiết. Bạn nên chia bài viết thành các phần rõ ràng và có liên kết chặt chẽ giữa các phần này. Cấu trúc bài viết của bạn cần phải dễ dàng theo dõi và tìm kiếm thông tin. Các phần mục lục sẽ được tạo từ các tiêu đề trong bài, vì vậy:

Phân chia nội dung hợp lý: Bài viết của bạn nên được chia thành các phần lớn và các mục nhỏ, từ tổng quan đến chi tiết. Mỗi phần có một tiêu đề H2 và các mục con có thể sử dụng thẻ H3.
Rõ ràng và dễ hiểu: Các tiêu đề và đoạn văn trong mỗi phần cần rõ ràng và dễ hiểu để người đọc có thể dễ dàng tìm thấy thông tin mà họ cần.

Khi tổ chức bài viết, bạn cũng nên lưu ý sử dụng các thẻ Heading phù hợp cho mỗi phần nội dung. Điều này không chỉ giúp bài viết dễ đọc hơn mà còn hỗ trợ SEO và làm cho mục lục tự động dễ dàng được tạo ra.

Đảm Bảo Khả Năng Tương Thích Với Các Thiết Bị Di Động

Khi tạo mục lục tự động, một yếu tố quan trọng mà bạn không thể bỏ qua là đảm bảo mục lục và các thẻ Heading có thể hiển thị tốt trên mọi thiết bị, đặc biệt là các thiết bị di động. Với sự gia tăng sử dụng thiết bị di động để đọc bài viết, việc tối ưu hóa mục lục cho di động sẽ giúp nâng cao trải nghiệm người dùng.

Để mục lục và các thẻ Heading hiển thị tốt trên các thiết bị di động, bạn cần:

Sử dụng thiết kế đáp ứng (responsive design): Đảm bảo rằng mục lục và các thẻ Heading có thể tự động điều chỉnh kích thước và vị trí tùy thuộc vào kích thước màn hình của thiết bị.
Kiểm tra tính tương thích: Trước khi công bố bài viết, hãy kiểm tra xem mục lục và các thẻ Heading có hiển thị chính xác trên các thiết bị di động không. Đảm bảo rằng không có phần nội dung bị ẩn hoặc không dễ đọc.

Tạo mục lục tự động có thể cải thiện khả năng điều hướng của người đọc, nhưng chỉ khi nó được tối ưu hóa để hoạt động tốt trên mọi loại thiết bị.

3. Hướng Dẫn Tạo Mục Lục Tự Động Bằng HTML Và CSS

Cách Tạo Danh Sách Mục Lục Trong HTML

Sử dụng HTML để tạo mục lục dưới dạng danh sách không có số thứ tự. Dưới đây là một ví dụ cơ bản:

<div class="table-of-contents" id="table-of-contents">
  <p>Mục Lục Bài Viết</p>
  <ul>
    <li><a href="#section1">Phần 1</a></li>
    <li><a href="#section2">Phần 2</a></li>
    <li><a href="#section3">Phần 3</a></li>
  </ul>
</div>

<ul>

</ul>

</div>

Sử Dụng Thẻ Anchor Để Liên Kết Các Mục Trong Bài Viết

Để mỗi mục trong mục lục có thể liên kết đến phần nội dung cụ thể, bạn sẽ sử dụng thẻ <a> và thẻ id để tạo các liên kết điều hướng.

Áp Dụng CSS Để Tạo Kiểu Cho Mục Lục

Bạn có thể sử dụng CSS để tùy chỉnh giao diện của mục lục sao cho phù hợp với thiết kế của trang web:

.table-of-contents {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 8px;
}

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

.table-of-contents li {
    margin-bottom: 5px;
}

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

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

.table-of-contents {

margin-bottom: 20px;

padding: 10px;

background-color: #f7f7f7;

border-radius: 8px;

}

.table-of-contents ul {

list-style: none;

padding: 0;

}

.table-of-contents li {

margin-bottom: 5px;

}

.table-of-contents a {

color: #0073aa;

text-decoration: none;

}

.table-of-contents a:hover {

text-decoration: underline;

}

Cách Tạo Hiệu Ứng Khi Click Vào Mục Trong Mục Lục

Để tạo hiệu ứng cuộn mượt mà khi người dùng click vào mục trong mục lục, bạn có thể sử dụng thêm một chút JavaScript.

4. Sử Dụng JavaScript Để Tự Động Cập Nhật Mục Lục

Cách Viết Script JavaScript Tự Động Tìm Kiếm Thẻ Heading

JavaScript sẽ giúp bạn tự động lấy các thẻ Heading (H2, H3, H4, …) và thêm chúng vào mục lục mà không cần phải thao tác thủ công.

document.addEventListener("DOMContentLoaded", function() {
    const toc = document.getElementById('table-of-contents');
    const headings = document.querySelectorAll('h2, h3, h4');
    headings.forEach(function(heading, index) {
        const anchor = document.createElement('a');
        const id = 'section' + index;
        heading.setAttribute('id', id);
        anchor.setAttribute('href', '#' + id);
        anchor.textContent = heading.textContent;
        const li = document.createElement('li');
        li.appendChild(anchor);
        toc.querySelector('ul').appendChild(li);
    });
});

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

const toc = document.getElementById('table-of-contents');

const headings = document.querySelectorAll('h2, h3, h4');

headings.forEach(function(heading, index) {

const anchor = document.createElement('a');

const id = 'section' + index;

heading.setAttribute('id', id);

anchor.setAttribute('href', '#' + id);

anchor.textContent = heading.textContent;

const li = document.createElement('li');

li.appendChild(anchor);

toc.querySelector('ul').appendChild(li);

});

Tạo Mã JavaScript Để Cập Nhật Mục Lục Tự Động

Mã JavaScript trên sẽ tự động tìm kiếm các tiêu đề và thêm chúng vào mục lục mà không cần phải viết lại thủ công mỗi lần.

Đảm Bảo Mục Lục Được Hiển Thị Chính Xác Trên Mọi Trang

Lưu ý rằng mã JavaScript của bạn cần phải chạy trên tất cả các trang có mục lục để đảm bảo chúng luôn chính xác.

Tối Ưu Hóa Mã JavaScript Cho Hiệu Suất Tốt Hơn

Giảm thiểu số lần truy xuất DOM và sử dụng các phương pháp tối ưu để mã JavaScript của bạn có thể chạy mượt mà trên các thiết bị di động và máy tính để bàn.

5. Tùy Chỉnh Mục Lục Tự Động Theo Nhu Cầu

Mục lục tự động không chỉ giúp người đọc dễ dàng tìm thấy thông tin trong bài viết, mà còn có thể được tùy chỉnh để đáp ứng nhu cầu và sở thích cá nhân của bạn. Dưới đây là các cách bạn có thể tùy chỉnh mục lục tự động để nâng cao trải nghiệm người dùng và phù hợp với thiết kế trang web của mình.

Thêm Tính Năng Cuộn Tự Động Đến Mục Khi Người Dùng Click Vào

Một trong những tính năng hữu ích mà bạn có thể thêm vào mục lục tự động là tính năng cuộn mượt (smooth scroll). Khi người dùng click vào một liên kết trong mục lục, trang sẽ tự động cuộn đến phần nội dung tương ứng mà không cần phải tải lại trang. Điều này không chỉ giúp cải thiện trải nghiệm người dùng mà còn làm cho việc điều hướng giữa các phần của bài viết trở nên nhanh chóng và tiện lợi hơn.

Để thêm tính năng cuộn mượt vào mục lục, bạn có thể sử dụng JavaScript hoặc các thư viện như jQuery để thực hiện. Khi người dùng nhấp vào liên kết trong mục lục, trang sẽ cuộn mượt mà đến mục tiêu mà không gặp phải gián đoạn. Đây là một tính năng tuyệt vời giúp bài viết của bạn trở nên thân thiện hơn với người dùng.

Cách Thay Đổi Kiểu Dáng Và Vị Trí Của Mục Lục

Tùy chỉnh kiểu dáng và vị trí của mục lục là một cách tuyệt vời để mục lục hòa hợp với thiết kế tổng thể của trang web. Bạn có thể thay đổi màu sắc, kiểu chữ, kích thước và thậm chí là vị trí của mục lục để tạo sự đồng nhất với giao diện của website.

Màu sắc: Bạn có thể thay đổi màu sắc của các liên kết trong mục lục để phù hợp với màu chủ đạo của website.
Kiểu chữ và kích thước: Điều chỉnh font chữ, kích thước chữ và khoảng cách giữa các phần tử để mục lục dễ đọc và dễ nhìn.
Vị trí: Mục lục có thể được đặt ở vị trí cố định trên màn hình hoặc xuất hiện khi người dùng cuộn xuống. Bạn cũng có thể chọn để mục lục nằm ở bên trái, phải hoặc ở trên cùng của bài viết.

Việc thay đổi kiểu dáng và vị trí của mục lục giúp mục lục không chỉ rõ ràng mà còn dễ dàng thích nghi với thiết kế trang web, tạo ra một trải nghiệm người dùng mượt mà và hài hòa.

Cải Thiện Giao Diện Của Mục Lục Cho Phù Hợp Với Thiết Kế Của Website

Mục lục không chỉ là một công cụ để điều hướng, mà còn là một phần quan trọng trong thiết kế tổng thể của trang web. Vì vậy, việc cải thiện giao diện của mục lục để phù hợp với phong cách của website là điều cần thiết. Bạn có thể thay đổi màu sắc, font chữ và các yếu tố thiết kế khác của mục lục sao cho hòa hợp với giao diện của toàn bộ website.

Phối màu đồng bộ: Mục lục cần có màu sắc và font chữ tương thích với toàn bộ giao diện của website, giúp tạo ra một thiết kế thống nhất và chuyên nghiệp.
Sử dụng hiệu ứng hover: Thêm hiệu ứng hover (khi người dùng di chuột qua) cho các liên kết trong mục lục để làm cho mục lục trở nên sinh động và dễ tương tác.
Đảm bảo tính thẩm mỹ: Mục lục nên được thiết kế sao cho dễ nhìn, dễ hiểu và không làm gián đoạn trải nghiệm đọc của người dùng.

Cải thiện giao diện của mục lục sẽ giúp website của bạn trông chuyên nghiệp hơn, đồng thời nâng cao trải nghiệm người dùng.

Cách Làm Mục Lục Phản Hồi Với Các Thay Đổi Trong Nội Dung Bài Viết

Một yếu tố quan trọng khi sử dụng mục lục tự động là khả năng cập nhật khi nội dung bài viết thay đổi. Nếu bạn thêm hoặc sửa đổi các tiêu đề trong bài viết, mục lục cần được cập nhật để phản ánh những thay đổi này. Điều này có thể được thực hiện tự động bằng cách sử dụng JavaScript hoặc các đoạn mã PHP.

Cập nhật tự động: Khi nội dung bài viết thay đổi, mục lục cần tự động cập nhật để phản ánh các tiêu đề mới hoặc chỉnh sửa. Điều này đảm bảo rằng mục lục luôn chính xác và đầy đủ.
Sử dụng JavaScript: Bạn có thể sử dụng JavaScript để theo dõi các thay đổi trong bài viết và tự động cập nhật mục lục mà không cần tải lại trang.
PHP và WordPress hooks: Trong WordPress, bạn có thể sử dụng các hook để thêm mã tùy chỉnh giúp mục lục được cập nhật khi bài viết thay đổi.

Việc đảm bảo mục lục luôn được cập nhật chính xác sẽ giúp người đọc dễ dàng tìm thấy các phần mới của bài viết mà không gặp phải sự cố về thông tin lỗi thời.

Tóm Tắt

Mục lục tự động là một công cụ quan trọng giúp người đọc dễ dàng điều hướng và tìm kiếm thông tin trong bài viết. Tuy nhiên, để mục lục hoạt động hiệu quả và mang lại trải nghiệm người dùng tối ưu, cần thực hiện các bước chuẩn bị và tùy chỉnh hợp lý.

Trước khi tạo mục lục tự động, bạn cần đảm bảo rằng bài viết có cấu trúc hợp lý với các thẻ Heading (H1, H2, H3,…) được sử dụng đúng cách. Việc tổ chức nội dung bài viết một cách khoa học và dễ hiểu sẽ giúp mục lục tự động hoạt động chính xác. Ngoài ra, cũng cần chú ý đến khả năng tương thích của mục lục trên cả desktop và thiết bị di động.

Sau khi đã chuẩn bị đầy đủ, bạn có thể tùy chỉnh mục lục tự động theo nhu cầu của mình. Điều này bao gồm việc thêm tính năng cuộn mượt để người dùng có thể dễ dàng di chuyển giữa các phần trong bài viết, thay đổi kiểu dáng và vị trí của mục lục để phù hợp với giao diện website, và cải thiện giao diện của mục lục sao cho đồng bộ với thiết kế của trang. Cuối cùng, đảm bảo rằng mục lục có thể tự động cập nhật khi nội dung bài viết thay đổi, giúp thông tin luôn chính xác và dễ dàng tìm kiếm.

Tùy chỉnh mục lục tự động không chỉ cải thiện tính tiện dụng mà còn giúp nâng cao trải nghiệm người dùng và tối ưu hóa giao diện trang web. Dưới đây là đoạn code hoàn chỉnh để thực hiện chức năng mục lục, bạn chỉ cần coppy bỏ vào funtion.php là được nhé. Và bạn có thể thay đổi css theo nhu cầu của mình, nếu có gì cần hỗ trợ có thể liên hệ mình nhé.

function add_table_of_contents_before_first_heading($content) {
    // Lấy ngày xuất bản bài viết
    $post_date = get_the_date('Y-m-d'); // Lấy ngày xuất bản theo định dạng Y-m-d
    $cutoff_date = '2024-12-06'; // Đặt ngày cắt (06/12/2024)

    // Kiểm tra nếu bài viết có ít nhất một tiêu đề (H2-H6) và ngày xuất bản hợp lệ
    if (get_post_type() == 'post' && preg_match('/<h[2-6]/', $content) && strtotime($post_date) >= strtotime($cutoff_date)) {

        // Lấy giá trị language_picker từ trường tùy chỉnh (nếu có)
        $language_picker_value = get_post_meta(get_the_ID(), 'language_pick', true);

        // Tiêu đề mục lục dựa trên ngôn ngữ
        $toc_title = (strpos($language_picker_value, 'ES') !== false) ? '<p>Tabla de Contenidos</p>' : '<p>Mục Lục Bài Viết</p>';

        // Khởi tạo bảng mục lục
        $table_of_contents = '<div class="table-of-contents" id="table-of-contents">';
        $table_of_contents .= $toc_title;
        $table_of_contents .= '<ul>';

        // Tìm tất cả các tiêu đề (H2-H6) trong bài viết
        preg_match_all('/<h([2-6])(.*?)>(.*?)<\/h[2-6]>/', $content, $matches);

        // Duyệt qua tất cả các tiêu đề và tạo liên kết trong mục lục
        foreach ($matches[0] as $key => $heading) {
            // Lấy cấp độ và nội dung của tiêu đề
            $heading_level = $matches[1][$key];
            $heading_text = $matches[3][$key];

            // Loại bỏ dấu tiếng Việt và tạo anchor ID cho tiêu đề (không dấu)
            $heading_text_no_accents = remove_accents_safe($heading_text);
            $heading_id = sanitize_title_with_dashes($heading_text_no_accents);

            // Thêm tiêu đề vào mục lục
            $table_of_contents .= '<li class="toc-level-' . $heading_level . '"><a href="#' . $heading_id . '" aria-label="Go to section: ' . esc_attr($heading_text) . '">' . $heading_text . '</a></li>';

            // Thêm thẻ anchor vào tiêu đề trong bài viết
            $content = str_replace($heading, '<a id="' . $heading_id . '"></a>' . $heading, $content);
        }

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

        // Chèn mục lục vào trước tiêu đề chính đầu tiên (H2)
        $content = preg_replace('/<h[2-6]/', $table_of_contents . '<h2', $content, 1);

        // Thêm phân cách (separator) sau mục lục (nếu cần)
        $content = preg_replace('/<\/div><h2/', '</div><hr class="wp-block-separator has-alpha-channel-opacity" style=""><h2', $content, 1);
    }

    return $content;
}
add_filter('the_content', 'add_table_of_contents_before_first_heading');

// Kiểm tra xem hàm remove_accents đã tồn tại chưa, nếu chưa thì khai báo hàm này
if (!function_exists('remove_accents_safe')) {
    function remove_accents_safe($string) {
        $accents = array(
            'à' => 'a', 'á' => 'a', 'ả' => 'a', 'ã' => 'a', 'ạ' => 'a', 
            'ă' => 'a', 'ắ' => 'a', 'ặ' => 'a', 'ẳ' => 'a', 'ẵ' => 'a', 
            'â' => 'a', 'ấ' => 'a', 'ầ' => 'a', 'ẩ' => 'a', 'ẫ' => 'a', 
            'ậ' => 'a', 'è' => 'e', 'é' => 'e', 'ẻ' => 'e', 'ẽ' => 'e', 
            'ẹ' => 'e', 'ê' => 'e', 'ế' => 'e', 'ề' => 'e', 'ể' => 'e', 
            'ễ' => 'e', 'ệ' => 'e', 'ì' => 'i', 'í' => 'i', 'ỉ' => 'i', 
            'ĩ' => 'i', 'ị' => 'i', 'ò' => 'o', 'ó' => 'o', 'ỏ' => 'o', 
            'õ' => 'o', 'ọ' => 'o', 'ô' => 'o', 'ố' => 'o', 'ồ' => 'o', 
            'ổ' => 'o', 'ỗ' => 'o', 'ộ' => 'o', 'ơ' => 'o', 'ớ' => 'o', 
            'ờ' => 'o', 'ở' => 'o', 'ỡ' => 'o', 'ợ' => 'o', 'ù' => 'u', 
            'ú' => 'u', 'ủ' => 'u', 'ũ' => 'u', 'ụ' => 'u', 'ư' => 'u', 
            'ứ' => 'u', 'ừ' => 'u', 'ử' => 'u', 'ữ' => 'u', 'ự' => 'u', 
            'ỳ' => 'y', 'ý' => 'y', 'ỷ' => 'y', 'ỹ' => 'y', 'ỵ' => 'y', 
            'đ' => 'd'
        );
        return strtr($string, $accents);
    }
}

function add_table_of_contents_before_first_heading($content) {

// Lấy ngày xuất bản bài viết

$post_date = get_the_date('Y-m-d'); // Lấy ngày xuất bản theo định dạng Y-m-d

$cutoff_date = '2024-12-06'; // Đặt ngày cắt (06/12/2024)

// Kiểm tra nếu bài viết có ít nhất một tiêu đề (H2-H6) và ngày xuất bản hợp lệ

if (get_post_type() == 'post' && preg_match('/<h[2-6]/', $content) && strtotime($post_date) >= strtotime($cutoff_date)) {

// Lấy giá trị language_picker từ trường tùy chỉnh (nếu có)

$language_picker_value = get_post_meta(get_the_ID(), 'language_pick', true);

// Tiêu đề mục lục dựa trên ngôn ngữ

$toc_title = (strpos($language_picker_value, 'ES') !== false) ? '<p>Tabla de Contenidos</p>' : '<p>Mục Lục Bài Viết</p>';

// Khởi tạo bảng mục lục

$table_of_contents = '<div class="table-of-contents" id="table-of-contents">';

$table_of_contents .= $toc_title;

$table_of_contents .= '<ul>';

// Tìm tất cả các tiêu đề (H2-H6) trong bài viết

preg_match_all('/<h([2-6])(.*?)>(.*?)<\/h[2-6]>/', $content, $matches);

// Duyệt qua tất cả các tiêu đề và tạo liên kết trong mục lục

foreach ($matches[0] as $key => $heading) {

// Lấy cấp độ và nội dung của tiêu đề

$heading_level = $matches[1][$key];

$heading_text = $matches[3][$key];

// Loại bỏ dấu tiếng Việt và tạo anchor ID cho tiêu đề (không dấu)

$heading_text_no_accents = remove_accents_safe($heading_text);

$heading_id = sanitize_title_with_dashes($heading_text_no_accents);

// Thêm tiêu đề vào mục lục

$table_of_contents .= '<li class="toc-level-' . $heading_level . '"><a href="#' . $heading_id . '" aria-label="Go to section: ' . esc_attr($heading_text) . '">' . $heading_text . '</a></li>';

// Thêm thẻ anchor vào tiêu đề trong bài viết

$content = str_replace($heading, '<a id="' . $heading_id . '"></a>' . $heading, $content);

}

$table_of_contents .= '</ul>';

$table_of_contents .= '</div>';

// Chèn mục lục vào trước tiêu đề chính đầu tiên (H2)

$content = preg_replace('/<h[2-6]/', $table_of_contents . '<h2', $content, 1);

// Thêm phân cách (separator) sau mục lục (nếu cần)

$content = preg_replace('/<\/div><h2/', '</div><hr class="wp-block-separator has-alpha-channel-opacity" style=""><h2', $content, 1);

}

return $content;

}

add_filter('the_content', 'add_table_of_contents_before_first_heading');

// Kiểm tra xem hàm remove_accents đã tồn tại chưa, nếu chưa thì khai báo hàm này

if (!function_exists('remove_accents_safe')) {

function remove_accents_safe($string) {

$accents = array(

'à' => 'a', 'á' => 'a', 'ả' => 'a', 'ã' => 'a', 'ạ' => 'a',

'ă' => 'a', 'ắ' => 'a', 'ặ' => 'a', 'ẳ' => 'a', 'ẵ' => 'a',

'â' => 'a', 'ấ' => 'a', 'ầ' => 'a', 'ẩ' => 'a', 'ẫ' => 'a',

'ậ' => 'a', 'è' => 'e', 'é' => 'e', 'ẻ' => 'e', 'ẽ' => 'e',

'ẹ' => 'e', 'ê' => 'e', 'ế' => 'e', 'ề' => 'e', 'ể' => 'e',

'ễ' => 'e', 'ệ' => 'e', 'ì' => 'i', 'í' => 'i', 'ỉ' => 'i',

'ĩ' => 'i', 'ị' => 'i', 'ò' => 'o', 'ó' => 'o', 'ỏ' => 'o',

'õ' => 'o', 'ọ' => 'o', 'ô' => 'o', 'ố' => 'o', 'ồ' => 'o',

'ổ' => 'o', 'ỗ' => 'o', 'ộ' => 'o', 'ơ' => 'o', 'ớ' => 'o',

'ờ' => 'o', 'ở' => 'o', 'ỡ' => 'o', 'ợ' => 'o', 'ù' => 'u',

'ú' => 'u', 'ủ' => 'u', 'ũ' => 'u', 'ụ' => 'u', 'ư' => 'u',

'ứ' => 'u', 'ừ' => 'u', 'ử' => 'u', 'ữ' => 'u', 'ự' => 'u',

'ỳ' => 'y', 'ý' => 'y', 'ỷ' => 'y', 'ỹ' => 'y', 'ỵ' => 'y',

'đ' => 'd'

);

return strtr($string, $accents);

}

Chúc các bạn thành công, đừng quên theo dõi trang của mình để nhận được nhiều hỗ trợ hơn nhé.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Cách tách Product Tabs trong WooCommerce thành các section riêng biệt

Hãy tưởng tượng bạn đang lướt qua một trang sản phẩm trên một website WooCommerce, và bạn nhìn thấy các thông tin như mô tả,...
Widget là gì? Tất cả 100% kiến thức cần biết về Widget WordPress

Nếu bạn là một nhà thiết kế web hoặc đã từng làm việc với WordPress, chắc chắn bạn không còn xa lạ với thuật ngữ...
Cách Tạo Các Cuộc Thi Online Để Tăng Truy Cập Website Mới Nhất 2025

Trong thời đại số hóa hiện nay, việc tăng cường truy cập website trở nên cực kỳ quan trọng. Một trong những chiến lược hiệu...
Cách Đo Lường Hiệu Quả Chiến Dịch Marketing Nội Dung

Trong bối cảnh cạnh tranh ngày càng gay gắt, việc đo lường hiệu quả của các chiến dịch marketing nội dung trở thành yếu tố...
Cách Tạo Ra Một Trang Giới Thiệu Ấn Tượng WordPress

Trong bối cảnh cạnh tranh ngày càng gia tăng trên không gian trực tuyến, việc tạo ra một trang giới thiệu ấn tượng là vô...
Hướng Dẫn Xóa Tab WooCommerce Khỏi Trang Sản Phẩm Một Cách Dễ Dàng

Bạn đang sử dụng WooCommerce cho cửa hàng trực tuyến của mình và cảm thấy trang sản phẩm của mình có quá nhiều tab không...
Hướng Dẫn Chi Tiết Cách Sửa Lỗi WordPress Không Được Google Index

Chắc hẳn bạn đang gặp phải tình trạng website WordPress của mình không xuất hiện trên Google, phải không? Điều này không chỉ khiến bạn...
Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025

Trong thế giới số hóa hiện nay, việc tạo một biểu mẫu đăng ký đơn giản cho website là vô cùng cần thiết để thu...
[Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

Nếu bạn đang tìm cách tối ưu hóa giao diện mô tả sản phẩm trên website WordPress sử dụng Woocommerce, bài viết này sẽ cung...
Chương Trình Khuyến Mãi Mua Theme Tháng 01/2025

Chào đón năm mới 2025, Muathemewpgiare.com hân hạnh mang đến chương trình khuyến mãi mua theme wordpress đặc biệt trong suốt tháng 1 với nhiều...
Mua Website Có Sẵn Mới Nhất 2025

Với sự phát triển mạnh mẽ của internet và thương mại điện tử, việc sở hữu một website trở thành yếu tố then chốt giúp...
Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới

SEO (Search Engine Optimization) là một trong những chiến lược quan trọng nhất để đưa website của bạn lên vị trí cao trên Google. Đặc...
Cách Thiết Kế Website Bán Hàng Đạt Hiệu Quả Cao

Việc thiết kế website bán hàng chất lượng không chỉ giúp doanh nghiệp nâng cao uy tín thương hiệu mà còn hỗ trợ mở rộng...
Hướng Dẫn Chọn Mua Theme WordPress Giá Rẻ và Tối Ưu SEO Để Tăng Thứ Hạng Google

Khi xây dựng website trên nền tảng WordPress, một trong những yếu tố quan trọng nhất là lựa chọn theme WordPress giá rẻ phù hợp...
Mua Theme Giá Rẻ và Chọn Theme WordPress Bán Hàng Chuẩn SEO

Khi bạn bắt đầu xây dựng một website với WordPress, việc chọn đúng theme WordPress là yếu tố quan trọng giúp website của bạn không...
Mua Theme WordPress Giá Rẻ – Cập Nhật Các Plugin, Thủ Thuật và Tài Nguyên Shop Mới Nhất

Mục Lục1. Giới thiệu về mục lục tự động trong WordPress2. Chuẩn Bị Các Yếu Tố Cần Thiết Trước Khi Tạo Mục Lục Tự Động3....