Đối với một blogger chuyên nghiệp, mục lục là một thành phần quan trọng không thể thiếu trong bài viết. Việc tạo mục lục WordPress không chỉ giúp ích trong điều hướng nội dung trên trang mà còn đóng vai trò quan trọng trong SEO.
Hiện nay có rất nhiều plugin wordpress giúp tạo mục lục tự động cho trang web. Tuy nhiên hầu hết các plugin này thường sử dụng Javascript để tạo mục lục cho bài viết. Việc cài quá nhiều plugin vào trang web có thể làm giảm hiệu năng và tốc độ của trang web và mục lục sẽ không hoạt động khi trình duyệt không hỗ trợ Javascript hoặc Javascript gặp lỗi.
Vậy nên bài viết này sẽ hướng dẫn các bạn tạo mục lục WordPress mà không cần dùng plugin. Tạo mục lục cho bài viết wordpress một cách gọn nhẹ và hoạt động mọi lúc, mọi nơi.
Giới thiệu
Mục lục bài viết (table of content) là gì? Mục lục là một danh sách tổng hợp các chương, đề mục của nội dung, các ý chính của một bài viết kèm với liên kết đến các mục này. Mục lục thường được đặt ở đầu bài viết, tài liệu, hoặc ở những trang cuối. Một số mục lục có các ghi chú, tóm tắt ở sau mỗi tiêu đề. Ở trong ngữ cảnh wordpress, mục lục của một bài viết đơn giản là danh sách liên kết tập hợp các ý chính của bài viết. Mục lục giúp người đọc nhanh chóng nắm bắt bố cục nội dung bài viết.
Tác dụng của mục lục là gì? Mục lục có tác dụng giúp người đọc trang web nhanh chóng nắm bắt bố cục nội dung và di chuyển đến các đề mục một cách nhanh chóng nhờ các liên kết nội bộ.
Tạo mục lục WordPress thủ công
Để tạo mục lục thủ công cho bài viết trong WordPress, chúng ta cần tạo và cập nhật 2 thành phần:
- Tạo bảng mục lục
- Cập nhật anchor link trong đề mục
Tạo bảng mục lục wordpress
Bảng mục lục wordpress thực chất là một danh sách các liên kết nội bộ đến đề mục nội dung trong bài viết. Bạn có thể tạo bảng này và đặt ở bất kỳ vị trí nào trong bài viết (thường là ở đầu bài viết).
Trong WordPress, tại phần soạn thảo bài viết, chúng ta tiến hành tạo danh sách, ở nội dung các liên kết ở đây bạn nhập giá trị của anchor link cần dùng. Ví dụ với nội dung thuộc tính id
là tao-muc-luc-thu-cong
thì nội dung liên kết sẽ là #tao-muc-luc-thu-cong
. Ở đây chúng ta thêm dấu #
vào trước để kích hoạt tính năng anchor link.
<h2 id="tao-muc-luc-thu-cong">Tạo mục lục wordpress thủ công - Vietrick</h2>
Với mỗi thẻ đề mục (heading) sẽ có thuộc tính id
tương ứng, được hướng dẫn cập nhật ở phần dưới.
Cập nhật anchor link
Việc cập nhật anchor link cho các đề mục ở đây chính là thiết lập thuộc tính id
cho các thẻ tiêu đề (heading) trong bài viết.
Ví dụ về một thẻ tiêu đề có sử dụng anchor:
<h2 id="tao-muc-luc-thu-cong">Tạo mục lục wordpress thủ công</h2>
Các bạn lưu ý là nội dung thuộc tính id
được viết liền, phân cách có thể sử dụng -
hoặc _
, Tiếng Việt không dấu thì tốt cho SEO.
Để cập nhật anchor link trong WordPress, tại phần biên soạn bài viết, các bạn chọn thẻ heading cần sửa.
Tại cột Block bên tay phải, click menu Nâng cao > Điểm neo HTML. Sau đó nhập nội dung mong muốn. Thực hiện tương tự với các heading còn lại.
Sau khi cập nhật hoàn tất và xuất bản bài viết. Khi click vào thẻ tiêu đề ở bảng mục lục, trang web sẽ di chuyển đến phần nội dung đề mục tương ứng là thành công.
Tạo mục lục WordPress tự động
Với việc tạo mục lục thủ công tuy độ tùy biến cao, nhưng lại khá tốn thời gian biên soạn nội dung bài viết. Do đó Vietrick chia sẻ thêm đến các bạn cách tạo mục lục WordPress tự động không sử dụng plugin.
Ở phần này, đòi hỏi chúng ta cần chỉnh sửa theme một chút để chèn đoạn mã tạo mục lục WordPress tự động vào tệp functions.php
:
- Tạo và chèn bảng mục lục tự động
- Tạo anchor link tự động cho heading
- Trang trí cho bảng mục lục
Trong tệp functions.php
, các bạn chèn thêm dòng sau vào dưới cùng:
include_once 'toc-func.php';
Sau đó bạn tạo thêm 1 tệp toc-func.php
tại cùng thư mục giao diện đang sử dụng. Với việc tách riêng đoạn mã ra 1 tệp, chúng ta có thể dễ dàng tái sử dụng khi đổi template sau này.
Tạo và chèn bảng mục lục tự động
Trong tệp toc-func.php
vừa tạo, các bạn chèn đoạn mã sau:
Cảm ơn Jeroen Sormani đã cung cấp 1 đoạn mã convert heading sang slug dùng tại thuộc tính id
.
Để tùy biến tiêu đề bảng mục lục, các bạn tìm và sửa dòng code sau:
$toc_title = "Xem nhanh";
Ở đoạn mã trên, mặc định các thẻ heading h1,h2,h3 trong bài viết sẽ được chèn vào bảng mục lục. Nếu các bạn muốn sử dụng nhiều thẻ hơn thì tìm và chỉnh sửa đoạn mã sau:
preg_match_all('/<(h[1-3])(?: id="(.*?)")?>((.*?))<\/h/',$content,$matches);
Ở đoạn trên, bạn thay h[1-3]
bằng số loại thẻ heading muốn sử dụng, ví dụ áp dụng TOC với heading h1->h5: h[1-5]
.
Mặc định, đoạn code sẽ chèn bảng mục lục vào đầu nội dung bài viết. Tuy nhiên nếu bạn muốn bảng mục lục được chèn vào trước thẻ heading đầu tiên thì sử đụng đoạn mã sau:
Sau khi chỉnh sửa, các bạn lưu và kiểm tra lại bài viết. Lúc này đầu bài viết sẽ tự động được chèn thêm mục lục như ví dụ sau:
Đến đây thì cơ bản là tính năng mục lục đã hoàn thành. Phần tiếp theo chúng ta sẽ trang trí thêm 1 chút mã CSS để làm đẹp cho bảng mục lục.
Trang trí CSS
Để trang trí cho mục lục vừa tạo ở trên, các bạn hãy thêm đoạn mã CSS vào tệp style.css
trong theme đang sử dụng hoặc phần additional CSS.
- Xem cách chèn CSS vào WordPress
Các bạn có thể tùy biến lại CSS cho phù hợp với template của mình nhé.
Kết luận
Việc tạo mục lục bài viết theo cách thủ công thường rất tốn thời gian và công sức. Tuy nhiên với cách tạo thủ công, ta có thể đặt bảng mục lục tại bất cứ vị trí nào trong bài viết, thậm chí là thiết lập nhiều bảng mục lục cho từng thẻ heading trong bài viết.
Khi tạo mục lục WordPress tự động với vài dòng code đơn giản, trang web của bạn luôn hỗ trợ đầy đủ mục lục và hoạt động ổn định dù có hay không Javascript. Dù thực hiện theo cách thủ công hay tự động thì việc tạo mục lục WordPress không sử dụng plugin này sẽ không ảnh hưởng đến hiệu năng và tốc độ trang web của bạn, đặc biệt là khi kết hợp với kỹ thuật caching.