Sau khi thực hiện nhiều dự án, tôi đã nhận thấy rằng nhiều khách hàng thường cài đặt nhiều plugin để tạo mục lục cho bài viết trên trang web của họ. Điều này có thể làm trang web trở nên nặng và không linh hoạt. Do đó, tôi quyết định chia sẻ code tạo mục lục bài viết tự động cho bài viết trên WordPress mà không cần dùng plugin.

Việc này giúp tôi có quyền kiểm soát đầy đủ mã nguồn, tăng tính bảo mật và dễ dàng cải tiến trong tương lai. Trong khi đó, việc sử dụng plugin có thể làm mất đi sự can thiệp và chỉnh sửa sâu hơn trong mã nguồn, đặc biệt khi có các cập nhật sau này.

Ưu điểm của việc tạo mục lục bài viết tự động bằng mã nguồn bao gồm:

Tùy chỉnh linh hoạt: Bạn có toàn quyền chỉnh sửa mã nguồn theo ý thích của bạn.
Bảo mật cao: Không cần phải cài đặt plugin từ bên ngoài, giúp tăng tính bảo mật của trang web.
Tốc độ nhanh hơn: Trang web sẽ có tốc độ tải nhanh hơn so với việc sử dụng các plugin nặng.

Dưới đây là cách chèn code tự tạo mục lục bài viết vào website:

Nếu bạn đang sử dụng theme Flatsome, hãy làm theo các bước sau để sao chép thư mục Template-part từ theme gốc sang child-theme:

Bước 1: Truy cập vào quản trị web trên host hoặc VPS và điều hướng đến đường dẫn wp-content/themes/flatsome/template-parts/posts/content-single.php.

Bước 2: Sao chép thư mục template-parts/posts/content-single.php và dán vào thư mục của Flatsome child theme, như được hướng dẫn trong hình ảnh.

Share code tự động tạo mục lục bài viết mà không cần plugin - ảnh 2

Bước 3: Truy cập vào thư mục template-parts trong Flatsome child theme theo đường dẫn template-parts/posts/content-single.php.

Bước 4: Mở tệp content-single.php và chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị mục lục bài viết.

<!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết web an tam share -->
<div class="table-of-content-webantam">
  <span class='muc-luc'> Mục lục</span>
  <ol id="toc-list">
    <!-- Mục lục tự động sẽ được tạo ở đây -->
  </ol>
</div>
<!-- Đặt nội dung bài viết vào phần tử có ID "article-content" -->
<div id="article-content"> 
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tocList = document.getElementById("toc-list");
    const articleContent = document.getElementById("article-content");
    const headings = articleContent.querySelectorAll("h2, h3, h4, h5, h6"); // Lấy các tiêu đề h2, h3, h4, h5, h6 trong nội dung bài viết
    let section = 0;
    let subsection = 0;
    let subsubsection = 0;
    let subsubsubsection = 0;
    let subsubsubsubsection = 0;

    headings.forEach((heading, index) => {
      const id = `section-${index + 1}`;
      heading.id = id;

      // Xác định cấp độ của tiêu đề (h2, h3, h4, h5, h6)
      const level = parseInt(heading.tagName.substring(1));

      // Cập nhật số thứ tự của mục lục
      if (level === 2) {
        section++;
        subsection = 0;
        subsubsection = 0;
        subsubsubsection = 0;
        subsubsubsubsection = 0;
      } else if (level === 3) {
        subsection++;
        subsubsection = 0;
        subsubsubsection = 0;
        subsubsubsubsection = 0;
      } else if (level === 4) {
        subsubsection++;
        subsubsubsection = 0;
        subsubsubsubsection = 0;
      } else if (level === 5) {
        subsubsubsection++;
        subsubsubsubsection = 0;
      } else if (level === 6) {
        subsubsubsubsection++;
      }

      // Loại bỏ số thứ tự cho tiêu đề "Table of Contents"
      if (heading.textContent !== "Table of Contents") {
        const listItem = document.createElement("li");
        const link = document.createElement("a");
        link.href = `#${id}`;

        // Tạo nội dung cho mục lục
        let indent = "";
        if (level === 2) {
          indent = `${section} `;
        } else if (level === 3) {
          indent = `${section}.${subsection} `;
        } else if (level === 4) {
          indent = `${section}.${subsection}.${subsubsection} `;
        } else if (level === 5) {
          indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection} `;
        } else if (level === 6) {
          indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection}.${subsubsubsubsection} `;
        }

        link.textContent = `${indent} ${heading.textContent}`;

        listItem.appendChild(link);
        tocList.appendChild(listItem);
      }
    });
  });
</script>
<style>
    span.muc-luc {
    font-weight: 700;
    text-align: center;
    display: block;
    font-size: 22px;
}
/* Định dạng cho mục lục */
.table-of-content-webantam {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 20px;
  border-radius: 5px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}
/* Định dạng cho danh sách mục lục */
.table-of-content-webantam ol {
  list-style: none;
  padding-left: 0;
}
/* Định dạng cho mỗi mục trong mục lục */
.table-of-content-webantam li {
  margin-bottom: 5px;
}
/* Định dạng cho liên kết mục lục */
.table-of-content-webantam a {
  text-decoration: none;
  color: #0070c9;
}
/* Định dạng cho liên kết mục lục khi di chuột qua */
.table-of-content-webantam a:hover {
  text-decoration: underline;
  color: #b40404;
}
/* Định dạng cho các tiêu đề h2, h3, h4, h5, h6 trong mục lục */
.table-of-content-webantam li a {
  display: block;
}
/* Định dạng thụt vào cho các tiêu đề h3 trong mục lục */
.table-of-content-webantam li li a {
  margin-left: 10px;
}
/* Định dạng thụt vào cho các tiêu đề h4 trong mục lục */
.table-of-content-webantam li li li a {
  margin-left: 20px;
}
/* Định dạng thụt vào cho các tiêu đề h5 trong mục lục */
.table-of-content-webantam li li li li a {
  margin-left: 30px;
}
/* Định dạng thụt vào cho các tiêu đề h6 trong mục lục */
.table-of-content-webantam li li li li li a {
  margin-left: 40px;
}
</style>
<!-- Đặt mục lục vào vị trí bạn muốn hiển thị nó trong bài viết end -->

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

</ol>

</div>

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

const tocList = document.getElementById("toc-list");

const articleContent = document.getElementById("article-content");

const headings = articleContent.querySelectorAll("h2, h3, h4, h5, h6"); // Lấy các tiêu đề h2, h3, h4, h5, h6 trong nội dung bài viết

let section = 0;

let subsection = 0;

let subsubsection = 0;

let subsubsubsection = 0;

let subsubsubsubsection = 0;

headings.forEach((heading, index) => {

const id = `section-${index + 1}`;

heading.id = id;

// Xác định cấp độ của tiêu đề (h2, h3, h4, h5, h6)

const level = parseInt(heading.tagName.substring(1));

// Cập nhật số thứ tự của mục lục

if (level === 2) {

section++;

subsection = 0;

subsubsection = 0;

subsubsubsection = 0;

subsubsubsubsection = 0;

} else if (level === 3) {

subsection++;

subsubsection = 0;

subsubsubsection = 0;

subsubsubsubsection = 0;

} else if (level === 4) {

subsubsection++;

subsubsubsection = 0;

subsubsubsubsection = 0;

} else if (level === 5) {

subsubsubsection++;

subsubsubsubsection = 0;

} else if (level === 6) {

subsubsubsubsection++;

}

// Loại bỏ số thứ tự cho tiêu đề "Table of Contents"

if (heading.textContent !== "Table of Contents") {

const listItem = document.createElement("li");

const link = document.createElement("a");

link.href = `#${id}`;

// Tạo nội dung cho mục lục

let indent = "";

if (level === 2) {

indent = `${section} `;

} else if (level === 3) {

indent = `${section}.${subsection} `;

} else if (level === 4) {

indent = `${section}.${subsection}.${subsubsection} `;

} else if (level === 5) {

indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection} `;

} else if (level === 6) {

indent = `${section}.${subsection}.${subsubsection}.${subsubsubsection}.${subsubsubsubsection} `;

}

link.textContent = `${indent} ${heading.textContent}`;

listItem.appendChild(link);

tocList.appendChild(listItem);

}

});

</script>

<style>

span.muc-luc {

font-weight: 700;

text-align: center;

display: block;

font-size: 22px;

}

/* Định dạng cho mục lục */

.table-of-content-webantam {

border: 1px solid #ccc;

padding: 10px;

background-color: #f9f9f9;

margin-bottom: 20px;

border-radius: 5px;

position: relative;

left: 50%;

transform: translateX(-50%);

display: inline-block;

}

/* Định dạng cho danh sách mục lục */

.table-of-content-webantam ol {

list-style: none;

padding-left: 0;

}

/* Định dạng cho mỗi mục trong mục lục */

.table-of-content-webantam li {

margin-bottom: 5px;

}

/* Định dạng cho liên kết mục lục */

.table-of-content-webantam a {

text-decoration: none;

color: #0070c9;

}

/* Định dạng cho liên kết mục lục khi di chuột qua */

.table-of-content-webantam a:hover {

text-decoration: underline;

color: #b40404;

}

/* Định dạng cho các tiêu đề h2, h3, h4, h5, h6 trong mục lục */

.table-of-content-webantam li a {

display: block;

}

/* Định dạng thụt vào cho các tiêu đề h3 trong mục lục */

.table-of-content-webantam li li a {

margin-left: 10px;

}

/* Định dạng thụt vào cho các tiêu đề h4 trong mục lục */

.table-of-content-webantam li li li a {

margin-left: 20px;

}

/* Định dạng thụt vào cho các tiêu đề h5 trong mục lục */

.table-of-content-webantam li li li li a {

margin-left: 30px;

}

/* Định dạng thụt vào cho các tiêu đề h6 trong mục lục */

.table-of-content-webantam li li li li li a {

margin-left: 40px;

}

</style>

Bạn có thể tùy chỉnh mã nguồn này theo ý của mình, bao gồm cả HTML, CSS và JavaScript. CSS có thể được chỉnh sửa trong thẻ <style>, và JavaScript có thể được chỉnh sửa trong thẻ <script>.

Nguồn: https://webantam.com/code-tu-dong-tao-muc-luc-bai-viet-khong-can-plugin/