Để người dùng nắm bắt được nội dung chính của bài viết một cách nhanh nhất, chúng ta phải tạo mục lục. Một mục lục xuất hiện ở đầu bài viết chứng tỏ bài viết đã được trau chuốt và tỉ mỉ. Thêm nữa nó cho cảm giác website của chúng ta thật là…chuyên nghiệp.
Như thông lệ của canxem.com, chúng ta sẽ đi ngay vào việc làm sao tự tạo mục lục mà không phải nhờ vả đến các plugin. Còn nếu bạn có khả năng tự tạo plugin riêng thì ok thôi, chúng ta nên ngừng đọc tại đây nhỉ :).
Huyên thuyên vại đủ rồi, vào chủ đề chính thôi nào.
1. Tạo các liên kết cho mục lục
Ví dụ chúng ta có bài tập làm văn với 3 đoạn văn chính cần tạo mục lục. Ta soạn phần danh sách nội dung như thế này:
Nội dung chính:
- Mở bài
- Thân bài
- Kết luận
Sau đó tạo địa chỉ nội bộ cho từng đoạn văn muốn đưa vào mục lục. Trong HTML nó sẽ có dạng id=”tên-mục”.
Cuộn trang đến vị trí/câu tiêu đề phần mở bài, chuyển sang chế độ HTML và chèn code trên vào.
Kết quả có dạng như này
<h2 id="1">1. Phần mở bài</h2>Ở đây để đơn giản nhất cứ đặt tên mục là các số 1,2,3,4,5. Mình thì toàn làm như vậy.
Hoặc cách khác dễ hơn, bạn chọn vị trí cần tạo địa chỉ xong bên phải khung soạn thảo chọn vào Nâng cao > Điểm neo HTML > gõ vào số 1 là xong. Thao tác này cũng sẽ chèn mã id=”1″ vào câu tiêu đề trên.
Tương tự tạo địa chỉ cho các đoạn tiếp theo với id=”2″, id=”3“.
Xong thế là bạn đã gán địa chỉ cho từng phần.
Giờ đến lượt tạo liên kết cho mục lục. Về đầu bài viết tạo một danh sách với 3 phần như trên. Chọn vào câu số 1, nhấp vào biểu tượng liên kết (link), gõ #1 vào ô địa chỉ. Thao tác này có nghĩa bạn trỏ liên kết này tới đoạn id=”1″ bạn vừa tạo bên trên. Khi nhấp vào câu này nó sẽ cuộn trang tới phần đã được gán id=”1″.
Tương tự tạo địa chỉ #2, #3 cho 2 câu còn lại.
Lưu ý chúng ta có thể làm phần nào trước cũng được nhé, không nhất thiết phải theo thứ tự như trên.
Cơ bản như vậy là xong phần mục lục, nhấp vào đâu là chạy tới đó rồi.
2. Tạo CSS làm đẹp cho mục lục
Nhưng để cho đẹp, ta nên tạo một phần CSS để “trang trí” cho mục lục. Chúng ta vào file style.css của themes hoặc vào phần CSS bổ sung trong admin. Tạo một phần CSS dành riêng cho mục lục và sẽ dùng cho mỗi bài viết sau này. Cho nên cố gắng tút cho đẹp hết mức có thể nhé.
Dưới đây là đoạn CSS của canxem.com, bạn có thể tham khảo hoặc sử dụng luôn nếu thích.
.mucluc { background: #daefff; border: 1px solid #1fa507; border-radius:4px; margin: 0 20px 20px 20px; padding: 0 10px 0 10px; font-weight: 400; font-size: 16px; line-height:25px}
.mucluc1 { border-bottom: 1px dotted #1fa507; font-weight:600;}
.mucluc1:before { content: "\f00b"; font-family: "Font Awesome 5 Free"; font-weight: 600; margin-right:5px;}Để gán CSS này, chúng ta chọn toàn bộ mục lục (kể cả tiêu đề) xong sang bên phải phần soạn thảo chọn Nâng cao > Lớp CSS bổ sung > gõ vào mucluc.
Tương tự ta chọn tiêu đề mục lục (ví dụ tiêu đề của mình là Nội dung chính), gán cho nó tên mucluc1.
Kết quả sẽ được tác phẩm hoàn chỉnh như ví dụ hình dưới.
Với cách thủ công này chúng ta cũng tạo được một mục lục với vẻ bề ngoài không thua kém ai. Quan trọng là do khả năng biến tấu CSS của chúng ta.
Tuy nhiên nó sẽ không có hiệu ứng cuộn trang, đóng mở mục lục hoặc thậm chí là ẩn hiện mục lục. Muốn hoành tráng như vậy các bạn có thể dùng plugin. Chỉ cần vào wordpress.org/plugins hoặc vào cài đặt plugins trong admin gõ vào Table of contents nó sẽ ra một loạt các plugin tạo mục lục. Cài đặt và sử dụng thôi.
Nhưng như ta cũng biết, hoành tráng quá sẽ đi kèm với nặng và làm chậm trang. Cài plugin nhiều quá cũng không phải là điều tốt. Cho nên cân nhắc trước khi chọn lựa phương pháp phù hợp với mình nhé. Chào thân ái.
