Cách tạo mục lục cho Website WordPress tối ưu SEO Google

Để tạo được mục lục mình có 2 cách

Cách 1: Dùng Code

Bạn vào dường dẫn chứa thư mục theme child tạo thư mục JS và tạo mới 1 file tên table-of-contents.js và copy đoạn code sau và dán vào sau đó save 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, “”);
}
});

Hoặc bạn có thể tải file table-of-contents.js ở đây và úp vào đường dẫn theme child->js

Tiếp theo bạn vào file function trong phần Giao diện -> Theme File Editor -> Tìm file function.php trong thư mục them child và copy đoạn code sau và dán vào dưới cùng sau đó save lại

/* 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’);

Lưu ý bạn chỉ chép vào file theme child của bạn không được bỏ vào theme chính vì khi bạn cập nhật lại theme thì những thay đổi này sẽ bị mất hết.

Muốn xuất hiện mục lục thì bạn chỉ cần chèn shortcode [bsstoc] vào vị trí mà bạn muốn hiển thị mục lục

Cách 2: Dùng Plugin Fixed TOC

Về cách cài và hướng dẫn sơ bộ thì mình cũng đã hướng dẫn rất chi tiết trên video ở kênh Only Share Free bạn có thể xem lại ở đây