Cách tạo mục lục cho bài viết trong WordPress

Có những trang web không bao giờ cần mục lục, thí dụ như các trang báo tin nhanh như vnexpress, 24h hay vietnamnet.

Nhưng có một trang web mà bạn luôn thấy mục lục, đó là Wikipedia. Và một thứ nữa cũng luôn có mục lục, đó là sách.

Tại sao một số nơi thì cần còn một số nơi lại không? Chúng ta hãy nghĩ về công dụng của mục lục.

Tác dụng chính của mục lục là giúp người đọc:

  • Nắm được nội dung tổng quan
  • Biết được nội dung mà mình cần đang nằm ở đâu

Do vậy mục lục rất cần thiết trong các bài viết dài, cấu trúc phức tạp, trong khi lại vô ích trong các bài viết ngắn dạng tin vắn.

OK, nếu bài viết của bạn thường xuyên có khoảng 1500 – 2000 từ hãy cân nhắc đến việc tạo mục lục để giúp độc giả của bạn nhiều hơn nữa.

Mặc định WordPress không tạo mục lục cho bài viết. Bạn cần cài đặt plugin để có được tính năng này, nó có tên: Table of Contents Plus.

Plugin này hơi cổ, hơn 2 năm rồi chưa cập nhật, và điều này có nguy cơ gây mất tương thích với các phiên bản gần đây của WordPress. Tuy nhiên khi mình kiểm tra thì nó vẫn ổn, không gây ra vấn đề gì, nên mình cũng dùng luôn cho trang của mình.

Sau khi kích hoạt thành công, mục lục ngay lập tức xuất hiện ở các bài viết, nó trông giống thế này:

mục lục của bài viết

Nếu chưa ưng ý bạn vào khu vực Settings để điều chỉnh một số cài đặt:

cài đặt plugin table of content

1. Position / Vị trí

Chọn vị trí 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 firsr 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.

Lựa chọn cá nhân:

vị trí của mục lục

2. Show when / Hiển thị khi

Mặc định, mục lục sẽ chỉ hiển thị khi có tối thiểu 4 thẻ heading. Bạn có thể tăng giảm con số này nếu muốn. Với cá nhân tôi, 4 là con số mặc định rất tốt rồi. Nếu ít hơn 4 heading mà bạn vẫn cố tạo mục lục thì sẽ gượng ép.

số lượng heading tối thiểu

3. Auto insert for the following content types / Tự động chèn vào các kiểu nội dung sau

Mục lục sẽ tự động được tạo ra trong bài viết chứ bạn không phải mất công 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 mà thôi:

chọn kiểu bài có mục lục

Nếu bạn chèn tự động mà bài viết nào đấy KHÔNG muốn có mục lục thì chèn short code sau vào bất cứ vị trí nào trong bài viết:

no_toc

Trường hợp bạn muốn chèn thủ công thì bạn bỏ hết không tick bất cứ phần nào ở trên. Và một bài viết cụ thể nào muốn chèn mục lục thì tại vị trí đó chỉ cần thêm short code dưới đây vào rồi nhấn lưu là được:

toc

(*) toc là viết tắt của table of content.

4. Heading text / Tiêu đề của mục lục

Mặc định tiêu đề của mục lục là Mục lục, và dĩ nhiên trong đa số trường hợp bạn không cần phải thay đổi gì cả:

tiêu đề của mục lục

Các thay đổi nếu có bao gồm:

  • Bỏ chọn dấu tick, thì sẽ không có chữ Mục lục làm tiêu đề nữa
  • Sửa chữ Mục lục thành từ khác, ví dụ như Nội dung bài viết, Danh sách, List, Tóm tắt, vân vân

Tiếp theo là tùy chọn 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. Mặc định của nó bạn nên giữ.

Hide the table of contents initially, 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.

5. Show 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, chẳng hạn có mục lục như thế này:

hiển thị phân cấp nhỏ hơn

Thêm từ khóa Phân tích thuộc cùng cấp, và nó là các cấp lớn nhất nên bao giờ cũng hiện ra ngoài mục lục.

Trong khi đó Vấn đề lớn & Vấn đề nhỏ là các phân cấp nhỏ hơn của Phân tích và nếu tùy chọn này không được tick thì nó sẽ KHÔNG hiển thị ra ngoài.

Không có lời khuyên cố định trong phần này, tùy vào nội dung của bạn, bạn sẽ xem xét có nên bổ sung phân cấp hay là không. Chỉ lưu ý là tránh phân cấp quá mức, chẳng hạn có thể bạn không nên để một mục nữa nằm trong Vấn đề nhỏ hiện ra ngoài mục lục.

6. Number list items / Đánh số thứ tự danh sách

Mặc định là được chọn, mục lục của bạn sẽ được đánh số thứ tự kiểu như thế này (ngoài cùng bên tay trái):

đánh số mục lục

Cái này cũng tương tự như trường hợp trên, tùy nhu cầu mà có chọn hay không.

Cá nhân mình thì mình thường đánh số sẵn cho các heading rồi nên mình sẽ bỏ chọn nó.

7. Enable smooth scroll effect / Cho phép hiệu ứng 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 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 (ví dụ menu gắn đầu, như kiểu giao diện mà website mình đang dùng).

8. Các tùy chọn liên quan đến giao diện

Nó nằm ở phần Appearance.

tùy chọn giao diện

Trong đó:

  • Width: nghĩa là 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. Cá nhân mình để 100% (ở chỗ Relative). 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ỏ.
  • Wrapping: cái này có ý nghĩa nếu mà mục lục của bạn nhỏ hơn đáng kể chiều rộng của website, lúc này bạn có thể chọn lựa căn trái hoặc căn phải.
  • 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. Cá nhân mình chọn 125%, bạn cứ thay đổi con số sao cho ưng mắt thì thôi.

Phần cuối chỗ Presentation cho phép bạn chọn lựa giao diện cho Mục lục:

chọn lựa giao diện cho 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é.

9. Các tính năng ở khu vực Advanced / Nâng cao

Khu vực này bạn ít dùng hơn, và nó cũng khó điều chỉnh hơn 8 tùy chọn ở trên, tuy nhiên lại có một số cái 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.

  • Lowercase: Đảm bảo văn bản neo là chữ thường
  • Hyphenate: Sử dụng gạch nối – thay vì _ trong văn bản neo
  • Include homepage: Hiển thị mục lục trên trang chủ cho các phần đủ điều kiện
  • Exclude CSS file: 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).
  • Preserve theme bullets: Nếu theme của bạn định dạng mục lục không có thứ tự bằng ảnh, hãy tick chọn cái này nếu muốn áp dụng điều đó vào mục lục (vì mục lục cũng là một dạng danh sách / list).
  • Heading levels: 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. Lựa chọn cá nhân mình chỉ chọn từ heading 1, 2, 3. Việc phân cấp quá nhiều sẽ làm mục lục rối mắt.
  • Smooth scroll top 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. Ví dụ như của mình phải 70px mới hết bị che. Lưu ý tính năng này chỉ hoạt động nếu Enable smooth scroll effect được tick chọn.
  • Restrict path: 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, ví dụ 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/

Nó có một vài thông tin nữa, nhưng hơi khó hiểu nên mình không viết ra đây.

10. Video hướng dẫn

Bài tiếp theo: Cách cài theme cho WordPress

20 thoughts on “Cách tạo mục lục cho bài viết trong WordPress”

  1. Cảm ơn bạn đã chia sẻ bài viết. Bạn cho mình hỏi mình làm theo bạn hướng dẫn sao nó cứ hiện thêm 1 phần mục lục cuối cùng mục “có liên quan” nhỉ? ví dụ bài viết của mình.
    1 FutureAdpro: Kiếm tiền với chương trình quảng cáo trực tuyến tiềm năng
    2 Thông tin sơ lược về FutureNet
    3 Tổng quan về thị trường quảng cáo và FutureAdpro
    3.1 Bạn có biết, tại sao các nền tảng truyền thông xã hội lại có thu nhập lớn như vậy không?
    3.2 CHƯƠNG TRÌNH QUẢNG CÁO FUTURENET
    3.3 CHƯƠNG TRÌNH LÀM VIỆC NHƯ THẾ NÀO?
    4 Vậy tôi cần phải làm gì nếu tôi muốn bắt đầu tham gia hệ thống FutureAdpro?
    4.1 Mua gói quảng cáo
    4.2 Xem quảng cáo hàng ngày
    4.3 Có liên quan –> mục này tự nhiên hiện lên.
    Xin nhờ bạn chỉ cách khắc phục với, xin cảm ơn!

    Reply
    • CHào bạn, có thể đó chỉ là quảng cáo trên trang quản trị. Nếu bạn xem thấy quảng cáo cả trên trang người dùng (sau khi thoát) thì không nên dùng. Tuy nhiên mình đoán nó chỉ ở trên trang quản trị mà thôi.

      Reply
        • Nếu thế thì tốt nhất không dùng bạn à, vì như thế nó sẽ rất ảnh hưởng đến website. Trang của mình thì không bị thế. Bạn thử gỡ ra cài lại xem sao.

          Reply
  2. Đức anh cho mình hỏi sao mình cài rồi nhưng hình như nội dung soạn có vấn đề nên plugin không bắt được là sao nhỉ? Mình nên soạn nội dung thế nào cho đúng?

    Reply
    • Tuỳ từng theme, học có thể có tính năng chỉnh sửa font chữ em à. Nếu nó không có em phải chỉnh bằng CSS, nhưng cái đấy dân không chuyên động vào sẽ rất phiền.

      Reply
  3. đã chèn mã [no_toc] nhung mục lục vẫn hiện trong bài viết, có cách nào ẩn nó trong các bài viết ko cần thiết không ah?

    Reply
    • Bạn xem plugin để tạo mục lục nội dung cho bài có đúng là plugin giống bài viết mình đang đề cập không, vì mỗi plugin nó sẽ có các câu lệnh khác nhau để làm điều này. Nếu là đúng plugin đang dùng, sau đó bạn xem có thiết lập nào đấy sai ở phần plugin ghi đè lên lựa chọn của bạn không. Xóa cache nữa, vì có khả năng trang vẫn đang lưu cache của phiên bản không có [no_toc]

      Reply
  4. Cảm ơn hướng dẫn của bạn rất chi tiết và nhiệt tình!
    Mình có thắc mắc chút là nếu mình muốn tạo mục lục cho một cuốn sách mình đăng lên thì làm thế nào bạn nhỉ. Vì nội dung rất dài không thể để trong 1 post được. Cảm ơn bạn ạ.

    Reply
    • Tôi nghĩ trường hợp đó bạn nên phân trang, giống cách các website về truyện đang làm. Chứ đăng hết vào một post cũng cực kỳ dài, mà chắc chắn chẳng ai đọc hết được trong một lần truy cập.

      Reply
    • Tôi cũng không rõ plugin nào hỗ trợ không, nhưng nếu muốn bạn làm thủ công cũng được. Sử dụng plugin Drop Shadow Boxes để tạo cái hộp đẹp đẹp, xong bên trong thêm mục lúc dạng list vào và trỏ đến link các chương tương ứng.

      Reply

Leave a Comment