Hướng dẫn thêm số tự động các thẻ Tiêu đề bằng CSS trong Plugin Fixed TOC (Table of Content)

Thủ thuật WordPress
1

Dán đoạn code sau đây vào Tuỳ biến → Fixed TOC Plugin → Customize CSS


#ftwp-postcontent {
    counter-reset: h2toc h3toc h4toc
}

#ftwp-postcontent h2 {
    counter-reset: h3toc
}

#ftwp-postcontent h2:before {
    counter-increment: h2toc;
    content: counter(h2toc) ". "
}

#ftwp-postcontent h3:not(#ftoc-heading-1) {
    counter-reset: h4toc
}

#ftwp-postcontent h2~h3:not(#ftoc-heading-1):before {
    counter-increment: h3toc;
    content: counter(h2toc) "." counter(h3toc) ". "
}

#ftwp-postcontent h2~h3:not(#ftoc-heading-1)~h4:before {
    counter-increment: h4toc;
    content: counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". "
}

#ftwp-postcontent h3#ftoc-heading-1 {
    counter-reset: h3toc
}

#ftwp-postcontent h3#ftoc-heading-1:before,
#ftwp-postcontent h3#ftoc-heading-1~h3:before {
    counter-increment: h2toc;
    content: counter(h2toc) ". "
}

#ftwp-postcontent h4:before {
    counter-increment: h4toc;
    content: counter(h2toc) "." counter(h4toc) ". "
}

#ftwp-postcontent h4#ftoc-heading-1 {
    counter-reset: h3toc
}

#ftwp-postcontent h4#ftoc-heading-1:before,
#ftwp-postcontent h4#ftoc-heading-1~h4:before {
    counter-increment: h2toc;
    content: counter(h2toc) ". "
}

#ftwp-postcontent h2.nocount:before,
h3.nocount:before,
h4.nocount:before {
    content: "" !important;
    counter-increment: none !important;
}

#ftwp-postcontent h2.nocount~h3 {
    counter-reset: h3toc !important;
    counter-reset: h4toc !important;
}

#ftwp-postcontent h2.nocount~h3:before {
    counter-increment: h2toc !important;
    content: counter(h2toc) ". " !important;
}

#ftwp-postcontent h2.nocount~h4:before {
    content: counter(h2toc) "." counter(h4toc) ". " !important;
}

#ftwp-postcontent h3.nocount {
    counter-reset: h4toc !important;
}

#ftwp-postcontent h3.nocount~h4:before {
    content: counter(h2toc) "." counter(h4toc) ". " !important;
}

Kết quả sẽ hiển thị như ảnh

image
image1071×825 93.1 KB

LƯU Ý:

  1. Đoạn code bên dưới chỉ hoạt động với Plugin Fixed TOC
  2. Chỉ sử dụng thẻ H2 H3 H4 trong nội dung bài viết
  3. Nếu không muốn thẻ hiển thị số, bạn có thể thêm class=“nocount” trong thẻ
  4. Fix lỗi sử dụng tuỳ thích thẻ mặc định H2 hoặc H3 tuỳ ý

Chúc các bạn thành công :slightly_smiling_face:

Vui lòng ghi rõ nguồn WPVNTEAM khi trích dẫn lại thông tin này.