Bài viết này mình sẽ hướng dẫn các bạn cách thức cơ bản chèn mục lục vào wordpress bằng Plugin Easy Table of Contents. Sau khi thử hàng loạt plugin thì đây là plugin mà mình ưng ý nhất, vừa tiện lợi, vừa dễ sử dụng lại hiển thị khá thuận mắt. Chúc các bạn thành công!

Video hướng dẫn Cài mục lục

Hướng dẫn chi tiết phần cài đặt

General – Cài đặt chung

1. Enable Support: Hỗ trợ chèn mục lục
Cho phép bạn chọn lựa dạng nội dung có thể chèn mục lục (chèn tự động hoặc thủ công)

2. Auto insert: Tự động chèn mục lục
Mục lục sẽ tự động được tạo ra và chèn vào bài viết chứ bạn không cần chèn thủ công. Theo đó, phần này cho phép bạn chọn lựa các kiểu nội dung nào nó sẽ tự động được chèn vào. Phần lớn trường hợp post và page là đủ rồi. Cá nhân mình chỉ dùng cho post thôi

  • Nếu bạn không muốn có mục mục, chèn short code sau vào bất cứ vị trí nào trong bài viết: no_toc
  • Nếu muốn chèn thủ công, bạn không tích bất cứ phần nào. Khi đó, muốn có mục lục ở bất cứ bài viết nào thì tại vị trí đó chỉ cần thêm short code: toc
    (*) toc là viết tắt của table of content.

3. Position (Vị trí)
Chọn vị trí hiển thị của mục lục, có 4 tùy chọn:

  • Before first heading: mục lục sẽ nằm ngay trước thẻ heading đầu tiên, đây là lựa chọn mặc định, và thường dùng nhất.
  • After first heading: mục lục nằm sau heading đầu tiên.
  • Top: mục lục nằm ở vị trí đầu tiên của bài viết.
  • Bottom: mục lục nằm ở vị trí cuối cùng bài viết.

4. Show when (Hiển thị khi)
Mục lục sẽ chỉ hiển thị khi có tối thiểu bao nhiêu thẻ heading (mặc định là 4). Bạn có thể tăng giảm con số này sao cho phù hợp. Tuy nhiên, nếu quá ít Heading mà vẫn tạo mục lục trông sẽ rất kỳ.

5. Display Header Label (Hiển thị tên mục lục)
Bỏ chọn dấu tick, thì sẽ không có chữ “Mục lục” trên tiêu đề nữa

6. Heading label (Tiêu đề mục lục)
Bạn có thể chỉnh tùy theo ý muốn:
Vd: Mục lục, Nội dung, Nội dung bài viết.

7. Allow the user to toggle the visibility of the table of contents (Cho phép người dùng nhấn để ẩn / hiện mục lục)
Bạn nên giữ dấu tick

8. Initial View (chế độ xem ban đầu)
Initially hide the table of contents. Mặc định là bỏ tick, nó giúp mục lục hiện ra ngay lập tức khi bạn vào bài viết. Nếu bạn tick vào tùy chọn này thì mục lục sẽ ẩn đi lúc đầu, và chỉ hiện ra khi người xem click vào.

9. Show as hierarchy (Hiển thị phân cấp nhỏ hơn)
Mặc định là được tick, nó giúp hiển thị các phân cấp nhỏ hơn.
Nghĩa là tiêu đề con sẽ được lùi vào trong tiêu đề mẹ, thể hiện sự phân cấp.

10. Counter (đếm)
Cách đánh số thứ tự Heading. Tùy thuộc vào nhu cầu của bạn mà có lựa chọn cho phù hợp. Cái này mình để mặc định.

11. Smooth Scroll (Chuyển động mượt mà)
Mục đích là giúp người đọc khi click vào mục lục sẽ được chuyển mượt đến nội dung cần đọc thay vì đến ngay lập tức (làm hơi bất ngờ).
Mặc định là tick chọn và mình cũng khuyên bạn nên giữ nguyên vì nó còn liên quan đến tính năng tránh cho heading bị che bởi phần nội dung nào đó gắn cố định trên đầu.

Appearance – Cài đặt giao diện

Phần này mình để tự động hết. Tuy nhiên mình vẫn sẽ giới thiệu sơ qua cho bạn muốn thay đổi.

1. Width: chiều rộng của mục lục, mặc định nó để auto (tự động). Bạn có thể chọn để chiều rộng bằng bao nhiêu phần trăm chiều rộng của website.
Bạn không nên chọn chiều rộng cố định (ở chỗ Fixed width) vì điều này có thể làm xấu hiển thị trên điện thoại di động, vốn có kích cỡ màn hình nhỏ.
2. Custom width (chiều rộng tùy chỉnh): Như đã nói ở trên, bạn không nên sửa tùy chọn này
3. Float: cái này có ý nghĩa nếu mục lục của bạn nhỏ hơn đáng kể chiều rộng của website, bạn có thể chọn lựa căn trái hoặc căn phải.
4. Title Font size: dùng để điều chỉnh kích cỡ chữ của phần mục lục, thường sẽ to hơn. Mặc định là 120%. Các bạn cứ thay đổi con số sao cho ưng mắt thì thôi.
5. Title Font Weight: Phông chữ tiêu đề
6. Theme: Giao diện mục lục

Để tìm ra cái vừa ý, bạn cứ thử chọn rồi lưu xem thế nào nhé.

Advanced – Cài đặt Nâng cao

Khu vực này, các bạn ít dùng hơn, và nó cũng khó điều chỉnh hơn. Tuy nhiên lại có một số mục rất quan trọng nếu bạn muốn mục lục đẹp mắt. Những cái đáng lưu ý mình sẽ bôi đậm

1. Lowercase: Đảm bảo văn bản neo là chữ thường
2. Hyphenate: Sử dụng gạch nối – thay vì _ trong văn bản neo
3. Homepage: Hiển thị mục lục trên trang chủ cho các phần đủ điều kiện
4. CSS: Ngăn không cho tải định dạng CSS của plugin này. Khi được tick chọn, các lựa chọn về hiển thị (ở phần Appearance phía trên) sẽ bị bỏ qua (không được áp dụng).
5. Heading: Bình thường tất cả các cấp heading sẽ được đưa vào mục lục (nếu ở phần Show hierarchy bạn có tick chọn). Ở đây bạn được tùy chọn thêm là sẽ đưa cụ thể heading nào vào. Các bạn chỉ nên chọn heading 1, 2, 3. Việc phân cấp quá nhiều sẽ làm mục lục rối mắt.
6. Exclude Headings (loại trừ các tiêu đề)
Cho phép bạn loại trừ các tiêu đề xuất hiện trong mục lục. Sử dụng ký hiệu | hoặc *
vd: Trái cây*: Bỏ qua các Tiêu đề bắt đầu bằng từ Trái Cây
*Ăn trái cây* Bỏ qua các tiêu đề có chứa cụm từ Ăn trái cây
Cây táo | Cam | Chuối vàng Bỏ qua các tiêu đề chính xác là “Cây táo”, “Cam” hoặc “Chuối vàng”.

7. Smooth scroll offset: Đây là tính năng rất hay giúp bạn tránh việc heading bị che bởi nội dung nào đó gắn chặt ở phần đầu website (thường là menu). Mặc định nó là 30px. Bạn có thể gia tăng con số này đến khi nào thấy hết bị che. Tuy nhiên tính năng này chỉ khả dụng khi Enable smooth scroll effect được tick chọn.
8. Mobile Smooth scroll offset: Tương tự nhưng áp dụng cho điện thoại
9. Limit Path (giới hạn đường dẫn)
Nếu bạn muốn mục lục không xuất hiện ở trang hoặc khu vực nào đó thì điền ở đây.
Vd: Trang web của bạn có cấu trúc URL chứa thư mục thế này: example.com/kinh-te/uber-ban-cho-grab. (bài viết thuộc thư mục kinh tế), và bạn muốn thư mục kinh tế không có mục lục thì bạn điền như thế này vào ô trống: /kinh-te

12 thoughts on “Cách tạo Mục Lục trong wordpress| Easy Table of Contents

  1. Hoàng Giang Solar says:

    Cái này là mình làm mục lục tực động khi index nó có sitelink đúng không bạn ? Mình có web hoanggiangsolar.com cũng cài thử, nhưng khi index google lại không có sitelink

    • quynhtrangpham says:

      Việc tạo mục lục để hỗ trợ tăng trải nghiệm người dùng trên Site, không liên quan đến việc tạo Sitelink bạn nhé

  2. 0901625191 says:

    Bạn ơi cho mình hỏi, sao mình cài đặt rồi bấm vào H3 trong menu nó ko nhảy vào vị trí bài viết nhỉ

    • quynhtrangpham says:

      Cái nào cũng được nhé bạn. Hai plugin đều đáp ứng được mục đích tăng trải nghiệm người dùng. Mình chọn cái này vì nó dễ xài, setup đơn giản, giao diện cũng dễ nhìn. kkk

  3. dung lê says:

    bạn ơi cho mình hỏi, mình cài mục lục này vào nó hiển thị ở phía trên bài viết, web của mình https://soscorp.vn mới cài thử plugin này, trong phần blog nó show meta ra 1 đoạn đầu tiên toàn là mục lục, có cách nào khắc phục không bạn.

  4. Ngọc says:

    Trang ơi mình bị có dấu trong phần mục lục trên đường dẫn thì làm thế nào vậy trang.
    Ví dụ:
    Đường dẫn của trang: quynhtrangpham.com/muc-luc-wordpress/#Advanced_Cai_dat_Nang_cao
    Của mình: abc.com/an-sang-o-cao-bang/#phỏ-cao-bàng

  5. lâm dũng says:

    mình đã cài xong, h muốn nó hiển thị trong bài viết thì làm thế nào hả bạn, hay nó tự động chèn vào

Leave a Reply

Your email address will not be published. Required fields are marked *