TOP 2 cách tạo mục lục trong WordPress mà không cần plugin

TOP 2 cách tạo mục lục trong WordPress mà không cần plugin

Bạn đã bao giờ mua một cuốn sách mà không có mục lục?

Bạn có biết tại sao hầu hết các blog, bài viết rất hay và chất lượng trên website đều có tỷ lệ thoát rất cao không?

Cũng giống như bạn sẽ không mua một cuốn sách mà không có mục lục, khách truy cập sẽ rất khó đọc bài viết của bạn nếu nó không có mục lục.

Cùng với việc tăng tốc trang web của bạn, tạo mục lục cho các bài viết là một trong những cách hiệu quả nhất để giảm tỷ lệ thoát. Hơn nữa, Google cũng ủng hộ các bài báo có mục lục.

Nhưng vấn đề là, không phải mọi chủ đề trong WordPress đều được tích hợp sẵn mục lục.

Để tạo mục lục cho bài viết trong WordPress, cách thông thường là tải và kích hoạt plugin Easy Table of Contents. Nhưng mục lục do plugin này tạo ra trông rất nhàm chán, nó trông như thế này.

Bài viết này sẽ hướng dẫn bạn tạo mục lục cho các bài viết trên trang WordPress mà không cần plugin theo 2 cách: cách thủ công (cách dễ nhưng khó) và cách tự động (cách khó nhưng mạnh).

Cách 1: Tạo mục lục cho bài viết trong WordPress bằng HTML

Cách đơn giản nhất để tạo phần mục lục cho bài viết trong WordPress là viết HTML và tạo điểm neo HTML cho các tiêu đề phụ trong bài viết và gắn liên kết cho các tiêu đề phụ đó.

Cách này rất đơn giản, nhưng chỉ phù hợp cho trang web không có nhiều bài viết. Nếu trang của bạn có nhiều hơn 30 bài viết, về lâu dài làm theo cách này sẽ cực hơn cách thứ 2.

Sau đây là phần hướng dẫn chi tiết cho cách tạo mục lục trong WordPress bằng HTML.

Đây là đoạn mã HTML cơ bản của phần mục lục, bạn hãy copy paste nó vào từng bài viết trong trang WordPress.

<div class="bss_toc">
<h2>Mục lục</h2>
<ul>
<!-- Số dòng <li><a href="#"></a></li> tương ứng với số lượng tiêu đề phụ trong bài viết -->
<li><a href="#tieu-de-phu-1">Tiêu đề phụ 1</a></li>
<li><a href="#tieu-de-phu-2">Tiêu đề phụ 2</a></li>
<li><a href="#tieu-de-phu-3">Tiêu đề phụ 3</a></li>
<li><a href="#tieu-de-phu-4">Tiêu đề phụ 4</a></li>
</ul>
</div>

Bạn thay thế các dòng a href = “#” và tiêu đề con bằng các tiêu đề phụ giống nhau trong bài viết.

Ví dụ, đây là mã HTML để tạo mục lục cho chính bài viết.

<div class="bss_toc">
<h2>Mục lục</h2>
<ul>
<!-- Số dòng <li><a href="#"></a></li> tương ứng với số lượng tiêu đề phụ trong bài viết -->
<li><a href="#tao-muc-luc-bang-html">Cách 1: Tạo mục lục cho bài viết trong WordPress bằng HTML - Cách thủ công, dễ nhưng cực</a>
</li>
<li><a href="#tao-muc-luc-bang-php-javascript-css">Cách 2: Tạo mục lục cho bài viết trong WordPress bằng PHP, Javascript và CSS - Cách tự động, khó nhưng khỏe</a>
<ul>
<li><a href="#buoc-1">Bước 1: Tạo file "table-of-contents.js" trong folder js của child theme</a></li>
<li><a href="#buoc-2">Bước 2: Thêm code enqueue script vào file functions.php của child theme</a></li>
<li><a href="#buoc-3">Bước 3: Thêm CSS vào phần Tùy biến >> CSS bổ sung để style phần mục lục</a></li>
<li><a href="#buoc-4">Bước 4: Thêm mã tạo table of contents vào mọi bài viết trong trang WordPress</a></li>
</ul>
</li>
</ul>
</div>

Nếu bạn không biết cách tạo liên kết neo HTML cho tiêu đề phụ thì hãy làm theo các bước bên dưới.

Bước 1: Chỉnh sửa bài viết mà bạn muốn thêm mục lục

Bước 2: Bấm vào tiêu đề phụ bất kỳ trong bài viết

Bước 3: Chọn tab Nâng cao

Bước 4: Thêm điểm neo HTML cho tiêu đề phụ

Ví dụ: nếu tiêu đề phụ ở trên là “Sao chép dán và chỉnh sửa HTML”, bạn có thể thêm liên kết cho tiêu đề phụ là sao-chep-dan-va-chinh-sua-html.

Bạn tiếp tục lặp lại thứ tự các bước trên cho mọi tiêu đề phụ trong bài viết.

Sau khi thêm liên kết anchor HTML của tiêu đề phụ và tiêu đề phụ vào HTML ở trên, bạn có thể Cập nhật bài viết và xem bài viết trong website. Nếu bạn làm theo đúng hướng dẫn, bạn sẽ thấy mục lục được tạo cho bài viết, giống như thế này.

Bạn đã tạo thành công mục lục cho các bài viết trong WordPress bằng HTML. Mặc dù phương pháp này rất dễ thực hiện nhưng nếu website của bạn có rất nhiều bài báo hoặc bài viết có quá nhiều tiêu đề phụ thì phương pháp này sẽ rất khó khăn.

Nếu bạn muốn tạo mục lục cho mọi bài đăng trong WordPress mà không phải mất thời gian thêm mã HTML vào từng bài đăng, thì hãy tiếp tục đọc và làm theo các bước bên dưới.

Cách 2: Tạo mục lục cho bài viết trong WordPress bằng PHP, Javascript và CSS

Đây là cách phức tạp hơn để tạo mục lục cho các bài viết trong WordPress.

Nhưng đây cũng là cách tự động, bạn chỉ cần thực hiện một lần và không cần lo lắng về việc bài viết của mình có mục lục hay không (giống như sử dụng plugin nhưng thay vì sử dụng plugin thì bạn sẽ thêm bảng. của nội dung). với mã để tối ưu hóa tốc độ trang web WordPress).

Trên thực tế, tất cả những gì bạn cần làm là sao chép, dán mã và biết vị trí cần dán. Khi bạn hoàn tất, chỉ cần nhập văn bản này vào bất kỳ bài viết nào bạn muốn tạo mục lục.

[bsstoc]

Và đó là những gì mà khamphaseo sẽ hướng dẫn chi tiết cho bạn dưới đây.

Bước 1: Tạo file “table-of-contents.js” trong folder js của child theme

Trong thư mục js của chủ đề con, bạn tạo một tệp mới có tên table-of-content.js (tạo tệp mới bằng FTP Client như FileZilla hoặc sử dụng File Manager do dịch vụ lưu trữ của bạn cung cấp, hãy tham khảo bài viết của Hostinger Cách cấu hình FileZilla Client).

Sau khi tạo tệp, hãy sao chép các dòng mã sau vào tệp table-of-content.js (sử dụng trình soạn thảo văn bản như Notepad hoặc Visual Studio Code để thêm mã nếu bạn sử dụng FTP Client để kết nối với thư mục gốc của trang mạng. ).

Sau khi thêm, bạn nhớ lưu lại.

jQuery(document).ready(function($){
        var $bsstoc = $(".bsstoc");
        var $content = $bsstoc.parent();
        var stopAt = $bsstoc.data("stopat");
        var sub_headers = [];
        switch(stopAt){
            case "h6":
                sub_headers.push("h6");
            case "h5":
                sub_headers.push("h5");
            case "h4":
                sub_headers.push("h4");
            case "h3":
                sub_headers.push("h3");
            case "h2":
                sub_headers.push("h2");
        }
        sub_headers = sub_headers.join();
        var $heads = $content.find(sub_headers);
        if($heads.length === 0){
            return;
        }
        var toc = "";
        toc += "<h2>Mục lục</h2><ul>";
        $heads.each(function(){
            var $this = $(this);
            var tag = $this[0].tagName;
            var txt = $this.text();
            var slug = convertToSlug(txt);
            $this.attr("data-linked",slug);
            toc += '<li class="bsstoc-level-'+tag+'">';
            toc += '<a href="#" data-linkto="'+slug+'">'+txt+"</a></li>";
        });
        toc += "</ul>";
        $bsstoc.append(toc);
        $(".bsstoc ul").on("click", "a", function(e){
            e.preventDefault();
            $([document.documentElement, document.body]).animate({
                scrollTop: $content.find('[data-linked="'+$(this)
                    .attr("data-linkto")+'"]').offset()
                    .top - parseInt($bsstoc.attr("data-offset"), 10)
            }, 2000);
        });
    function convertToSlug(text){
        return text.toString().toLowerCase()
			.replace(/\s+/g, "-")
			.replace(/[^\w\-àáãạảăắằẳẵặâấầẩẫậèéẹẻẽêềếểễệđìíĩỉịòóõọỏôốồổỗộơớờởỡợùúũụủưứừửữựỳỵỷỹýÀÁÃẠẢĂẮẰẲẴẶÂẤẦẨẪẬÈÉẸẺẼÊỀẾỂỄỆĐÌÍĨỈỊÒÓÕỌỎÔỐỒỔỖỘƠỚỜỞỠỢÙÚŨỤỦƯỨỪỬỮỰỲỴỶỸÝ]+/g, "")
			.replace(/\-\-+/g, "-")
			.replace(/^\d+/, "")
			.replace(/^-+/, "")
			.replace(/-+$/, "")
			.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a")
			.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e")
			.replace(/ì|í|ị|ỉ|ĩ/g, "i")
			.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o")
			.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u")
			.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y")
			.replace(/đ/g, "d")
			.replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, "")
			.replace(/\u02C6|\u0306|\u031B/g, "");
    }
});

Vậy là bạn đã tạo xong tệp javascript table-of-content.js. Đây có thể nói là file quan trọng nhất của cả quá trình tạo mục lục tự động cho WordPress, bạn nhớ copy chính xác và không chỉnh sửa gì thêm.

Bước 2: Thêm code vào file functions.php của child theme

Sao chép đoạn mã sau vào tệp functions.php và lưu nó.

/* Add shortcode code for table of contents */
function bss_bsstoc($atts) {
    if (empty($atts)) {
        $atts = array();
    }
    if (empty($atts['stopat'])) {
        $atts['stopat'] = 'h4';
    }
    if (empty($atts['offset'])) {
        $atts['offset'] = '20';
    }
    return '<div class="bsstoc" data-stopat="'.$atts['stopat'].'" data-offset="'.$atts['offset'].'"></div>';
}
add_shortcode('bsstoc', 'bss_bsstoc');

/* Enqueue custom scripts */
function bss_custom_scripts() {
	wp_enqueue_script('table-of-contents-script', get_stylesheet_directory_uri().'/js/table-of-contents.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'bss_custom_scripts');

Ghi chú

Nếu bạn có thêm script khác, thì bạn chỉ cần copy dòng wp_enqueue_script và dán vào dòng bên dưới của dòng wp_enqueue_script ở trên, như điều này.

/* Enqueue custom scripts */
function bss_custom_scripts() {
	/* Đây là code gọi javascript của nút back to top */
    wp_enqueue_script('back-to-top-script', get_stylesheet_directory_uri().'/js/back-to-top.js', array('jquery'), false, true);
	/* Đây là code gọi javascript của nút back to top */

	/* Đây là code gọi javascript của table of contents */
	wp_enqueue_script('table-of-contents-script', get_stylesheet_directory_uri().'/js/table-of-contents.js', array('jquery'), false, true);
	/* Đây là code gọi javascript của table of contents */
}
add_action('wp_enqueue_scripts', 'bss_custom_scripts');

Vậy là xong, bạn đã hoàn thành việc thêm mã PHP. Tiếp theo ở bước 3, bạn sẽ trang trí mục lục của bài viết bằng CSS.

Bước 3: Thêm CSS vào phần Tùy biến >> CSS bổ sung để style phần mục lục

Bạn copy dán và lưu đoạn mã CSS bên dưới vào phần Customize >> CSS bổ sung để tạo kiểu cho mục lục.

/* Table of contents */
.bsstoc ul{
    margin-left: 45px;
    padding-left: 0;
    border-left: 1px solid #c4cbdb;
}
.bsstoc li {
    padding-left: 20px;
    list-style: none;
    margin-bottom: 0px;
}
.bsstoc .bsstoc-level-H3{
    padding-left: 40px;
}
.bsstoc .bsstoc-level-H4{
    padding-left: 60px;
}
.bsstoc .bsstoc-level-H2:before{
    content: "";
    display: block;
    height: 0;
    width: 8px;
    border-bottom: 1px dashed #c4cbdb;
    transform: translateX(-15px) translateY(19px);
}
.bsstoc .bsstoc-level-H3:before{
    content: "";
    display: block;
    height: 0;
    width: 30px;
    border-bottom: 1px dashed #c4cbdb;
    transform: translateX(-35px) translateY(19px);
}
.bsstoc .bsstoc-level-H4:before{
    content: "";
    display: block;
    height: 0;
    width: 50px;
    border-bottom: 1px dashed #c4cbdb;
    transform: translateX(-55px) translateY(19px);
}
@media screen and (max-width: 768px) {
/* Table of contents */
	.bsstoc ul{
        margin-left: 0;
    }
    .bsstoc .bsstoc-level-H2:before,
    .bsstoc .bsstoc-level-H3:before,
    .bsstoc .bsstoc-level-H4:before{
        margin-top: -3px;
        position: absolute;
    }
}

Sau khi thêm và lưu đoạn mã CSS trên, bạn đã tạo thành công mục lục tự động cho tất cả các bài viết trong WordPress.

Bước 4: Thêm shortcode table of contents vào mọi bài viết trong WordPress

Tất cả những gì bạn cần làm bây giờ là gõ shortcode bên dưới vào bất kỳ bài viết nào mà bạn muốn tạo mục lục (thay vì chỉnh sửa chi tiết như mục lục HTML ở trên).

Và cái hay của cách này là bạn có thể thêm mục lục bằng shortcode vào bất cứ đâu trong bài viết mà bạn muốn mà không cần phải cố định mục lục ở đầu bài như các plugin tạo mục lục.

[bsstoc]

Khi được thêm vào, bạn vào bài viết trên website, bạn sẽ thấy mục lục đã được tạo tự động cho bài viết đó (giống như mục lục các bài viết trên website khamphaseo.com).

Bạn có thể nhấp vào toàn bộ liên kết tiêu đề phụ trong mục lục để đến nội dung của tiêu đề phụ đó, rất tiện lợi phải không?