• Home
  • /
  • Blog
  • /
  • Thủ thuật tạo mục lục bằng tay không cần dùng plugin

Thủ thuật tạo mục lục bằng tay không cần dùng plugin

1 bình luận

Hướng dẫn tạo mục lục cho wordpress bằng tay Không cần dùng Plugin

Bạn đang cần tạo mục lục cho bài viết trong wordpress?

Bạn gặp khó khăn khi sử dụng các plugin tạo mục lục?

Bạn muốn tìm cách tạo mục lục trong wordpress?

Bạn nâng cấp WordPress và các plugin mục lục không tương thích nên sảy ra lỗi hiển thị sai phần mục lục?

Website của bạn đã trở nên nặng nề vì cài quá nhiều plugin?

Bạn không muốn sử dụng các plugin cho website của mình?

Bạn muốn dùng Anchor Link (liên kết Neo) cho website để tối ưu SEO?

Vậy bài viết này chính là dành cho bạn.


A. Yêu cầu cần hoàn thành

Việc tạo mục lục wordpress nói chung rất đơn giản, bạn hoàn toàn có thể tự làm được mà chẳng cần dùng đến các Plugin. Chẳng hạn bạn cần phải tạo mục lục cho bài viết với các tiêu đề nội dung chính như sau:

Mục lục nội dung:


Khi chúng ta Click vào các dòng bên trên thì trình duyệt sẽ tự chạy đến các điểm neo tương ứng trong bài viết.

Bạn có thể tự mình click để trải nghiệm tính hiệu quả của mục lục bài viết của mình.

Vienthongbuonho.net sẽ hướng dẫn cho các bạn cách làm mục lục cho bài viết trong wordpress bằng tay, không cần dùng đến plugin.

Tuy thao tác làm có hơi phức tạp, khó khăn cho những bạn không chuyên, nhưng một khi đã thao tác nhuần nhuyễn rồi thì bạn có thể tự tạo cho mình các tùy chỉnh giao diện đẹp, không phải phụ thuộc vào các plugin vì có thể làm ảnh hưởng xấu đến website của bạn nếu plugin bị chèn mã độc hoặc bị tấn công…


B. Các bước Chuẩn bị.

Đê thành công, bạn nên dowload các file cần thiết tại đây

  • File code_muc_luc.txt : Drives
  • File Code_diem_neo.txt : Drives
  • File Chinh_sua_CSS.txt: Drives
  • Hoặc tải full tại: Drives

Mật khẩu giải nén file rar (nếu có): vienthongbuonho.net


C. Các bước tạo mục lục bằng tay

Bài viết yêu cầu các bạn cần có kiến thức tốt về các thẻ code trong lập trình HTML cơ bản.

Tuy nhiên nếu bạn không rành lắm về code thì chỉ cần thao tác theo từng bước như chúng tôi hướng dẫn là có thể hoàn thành tốt.


1.Tạo các thẻ Heading cho bài viết

Bản chất của mục lục chính là gom lại tất cả các thẻ heading mà bạn sử dụng trong bài viết của bạn lại thành một chuỗi nội dung gần nhau, có định dạng tương tự nhau, giúp người đọc có thể có cái nhìn tổng quan về các mục chính trong bài viết của bạn một cách nhanh nhất.

Người đọc chỉ cần click vào các tiêu đề trong mục lục là có thể di chuyển đến các mục đó một cách nhanh chóng và chính xác, giúp cho nội dung được tìm thây một cách nhanh chóng, đỡ phải mất công tìm kiếm trong bài viết.

Chính vì vậy, việc xác định sườn bài trước khi viết là rất quan trọng, bạn nên tạo ra một sườn bài với các nội dung chính, các nội dung này có thể được đánh dấu bằng các thẻ đánh dấu Heading (các thẻ h2, h3, h4…)

Trong quá trình soạn thảo, bạn đánh dấu các tiêu đề này với các thẻ tương ứng mà bạn muốn hiển thị trong mục lục

Ở bài viết này, chúng tôi sẽ đánh chỉ mục các tiêu đề chính bằng thẻ H2, các tiêu đề con sẽ là thẻ H3. Sau đó sẽ dùng các thẻ H2 và H3 này để thể hiện nội dung trong phần mục lục.

1.1 Tìm đến dòng cần dùng để tạo heading với H2

Trước hết, bạn cần xác định các tiêu đề nào sẽ được dùng với thẻ H2, sau đó bạn chọn dòng này(1) và thiết lập thẻ H2 cho nó(2) – Hình 1

Xác định dòng dùng thẻ H2
Xac định dòng dùng thẻ H2

Chúng ta sẽ được kết quả như hình 2

Thẻ h2 đã được chọn - Hình 2
Thẻ h2 đã được chọn – Hình 2

1.2 Tìm đến dòng cần dùng để tạo heading với H3

Làm tương tự như trên, chúng ta cũng tiến hành chọn dòng(1) để làm tiêu đề với thẻ h3 (2) – Hình 3

Chọn dòng làm thẻ h3
Chọn dòng làm thẻ h3 – Hình 3

Kết quả có được như hình 4

Dòng với thẻ h3 - Hình 4
Dòng với thẻ h3 – Hình 4

2. Chèn code mục lục vào bài viết.

Sau khi đã dùng các thẻ heading (h2 và h3) để tạo sườn bài viết dùng cho các tiêu đề cần hiển thị trong mục lục, việc tiếp theo bạn cần làm là tìm vị trí để chèn mục lục vào trong bài viết.

2.1 chọn vị trí để chèn mục lục

Để chèn mục lục tại vị trí mong muốn, Trong trình soạn thảo dạng trực quan (2), bạn đưa con trỏ chuột đến vị trí cần tạo mục lục, bạn có thể ghi chữ mục lục rồi bôi đen chữ này để dễ nhận dạng(1).- Hình 5

Màn hình trực quan xác định vị trí cần tạo mục luc
Màn hình trực quan xác định vị trí cần tạo mục luc – Hình 5

Sau đó tại giao diện soạn thảo văn bản, bạn chuyển giao diện từ trực quan sang soạn thảo bẳng chế độ văn bản(2) – Hình 6

Chuyển màn hình soạn thảo sang dạng văn bản
Chuyển màn hình soạn thảo sang dạng văn bản – Hinh 6

Bạn mở file code_muc_luc.txt vừa tải về, Nhấn Ctrl + A để copy toàn bộ. sau đó tiến hành dán code này vào thay cho chữ mục lục mà bạn vừa đánh dấu lúc nãy.

Chúng ta sẽ có kết quả như bên dưới – hình 7

Dán code mục lục vào
Dán code mục lục vào – Hình 7

Chuyển qua giao diện xem theo kiểu trực quan(1), chúng ta có kết quả như hình 8

Giao diện mục lục kiểu trực quan
Giao diện mục lục kiểu trực quan – Hình 8

Vậy là chúng ta cơ bản đã hoàn thành việc tạo mục lục cơ bản. Tiếp theo sẽ tạo các điểm neo cho từng dòng trong mục lục.

2.2 Tạo điểm neo cho mục lục

Có thế hiểu như sau. Chúng ta sẽ tạo điểm Neo cho từng dòng cụ thể đang được sử dụng thẻ H2 và H3, khi người đọc xem phần mục lục thì họ click vào link nào trong đó thì website sẽ tự động trỏ đến vị trí mà bạn đã neo tương ứng trong bài viết.

Để thực hiện neo, trong cửa sổ soạn thảo trực quan(1), bạn soạn thảo các điểm cần neo đến như hình dưới(2) – Hình 9

Trong đó:

  • Điểm neo 1Điểm neo 2Điểm neo 3 : Sẽ sử dụng thẻ heading là H2
  • Điểm neo 1.1Điểm neo 1.2Điểm neo 2.1Điểm neo 2.2 : Sẽ sử dụng thẻ Heading là H3
Điểm neo dạng soạn thảo trực quan -Hinh 9
Điểm neo dạng soạn thảo trực quan -Hinh 9

Chuyển qua giao diện soạn thảo dạng văn bản(1). Bạn dán đoạn code sau vào sau thẻ <h2 hoặc thẻ <h3 (2)

Nội dung code:  id=”diem-neo-…”

Bạn thay bằng tên tương ứng ghi sau thẻ <a href=”diem-neo-…” như trên hình số 7

Code điểm neo - hình 10
Code điểm neo – hình 10

Hoặc đơn giản hơn bạn chỉ cần mở file Code_diem_neo.txt mà bạn đã tải về rồi copy và dán vào là được như hình 10.

2.3 Kiểm tra mục lục sau khi chèn code

Sau khi đã tạo điểm neo cho từng vị trí xong, bạn tiến hành lưu lại và bấm Xem thử để coi mục lục có hoạt động tốt không. Nếu mọi việc diễn ra tốt đẹp thì bạn sẽ có kết quả như sau -hinh 11.

Tạo xong mục lục và điểm neo - Hinh 11
Tạo xong mục lục và điểm neo – Hinh 11

3. Chỉnh sửa giao diện mục

Sau khi đã tạo và kiểm tra mục lục, Bạn sẽ thâý phần giao diện của mục lục đang rất xấu. Các chấm đầu dòng của thẻ <li> trong code vẫn còn hiện ra, khoảng cách giữa các dòng vẫn còn cách xa nhau… Chính vì vậy bạn cần phải tiến hành chèn thêm code CSS để cho mục lục trở nên đẹp hơn.

Tùy từng themes wordpress, chúng ta sẽ có cách chèn css khác nhau, Nhưng thông thường bạn chỉ cần truy cập vào themes panel, tìm đến phần Custom Code, dán code CSS vào mục Custom CSS là được.

Bạn mở file  Chinh_sua_CSS.txt ra, copy tất cả và dán vào, sau đó nhấn lưu lại là hoàn tất.

Dán code CSS vào themes - hình 12
Dán code CSS vào themes – hình 12

4. Kiểm tra kết quả:

Sau tất cả các bước trên nếu bạn được như hình bên dưới thì chúc mừng, bạn đã thành công trong việc tạo thư mục bằng tay không cần dùng plugin cho wordpress


D. Phần thử nghiệm kết quả

Bạn đã được chuyển đến điểm neo 1

Đọc thêm: Tạo website bán hàng bằng WordPress + Woocommerce Full Code

HƯỚNG DẪN TẠO WEBSITE BÁN HÀNG BẰNG WORDPRESS

HƯỚNG DẪN TẠO WEBSITE BÁN HÀNG BẰNG WORDPRESS


Bạn đã được chuyển đến điểm neo 1.1

Đọc thêm: WordPress là gì? Vì sao Bạn nên dùng WordPress để làm website?

WORDPRESS LÀ GÌ? ƯU ĐIỂM VÀ NHƯỢC ĐIỂM CỦA WORDPRESS ?

WORDPRESS LÀ GÌ? ƯU ĐIỂM VÀ NHƯỢC ĐIỂM CỦA WORDPRESS ?


Bạn đã được chuyển đến điểm neo 1.2

Đọc thêm: HƯỚNG DẪN CÀI ĐẶT ADOBE PHOTOSHOP CS6 FULL CHI TIẾT NHẤT

TẢI PHOTOSHOP TRÊN MÁY TÍNH – HƯỚNG DẪN TỪ A-Z

TẢI PHOTOSHOP TRÊN MÁY TÍNH – HƯỚNG DẪN TỪ A-Z


Bạn đã được chuyển đến điểm neo 2

Đọc thêm: Tạo USB Cài Windows chuẩn UEFI và LEGACY

HƯỚNG DẪN TẠO USB VÀ CÀI ĐẶT WINDOWS 10 THEO 2 CHUẨN GPT/UEFI VÀ MBR/BIOS

HƯỚNG DẪN TẠO USB VÀ CÀI ĐẶT WINDOWS 10 THEO 2 CHUẨN GPT/UEFI VÀ MBR/BIOS


Bạn đã được chuyển đến điểm neo 2.1

Đọc Thêm: Services windows là gì?

Services windows là gì? Tác dụng của các services thông dụng

Services windows là gì? Tác dụng của các services thông dụng


Bạn đã được chuyển đến điểm neo 2.2

Đọc thêm: 30+ Tuyệt Chiêu Tăng Tốc Giúp Windows Chạy Nhanh Như Gió

30+ Tuyệt Chiêu Tăng Tốc Giúp Windows Chạy Nhanh Như Gió

30+ Tuyệt Chiêu Tăng Tốc Giúp Windows Chạy Nhanh Như Gió


Bạn đã được chuyển đến điểm neo 3

Đọc thêm: Top Các Cách Tạo Website hot nhất 2022

TỔNG HỢP CÁC CÁCH TẠO WEBSITE CƠ BẢN VÀ SEO TOP GOOGLE

TỔNG HỢP CÁC CÁCH TẠO WEBSITE CƠ BẢN VÀ SEO TOP GOOGLE


E. Tổng kết tạo mục lục wordpress bằng tay không dùng Plugin

Qua bài viết, chắc bạn đã phần nào hiểu được cách tạo mục lục cho wordpress bằng tay, việc sử dụng code tay trong việc tạo mục lục cho bài viết trong wordpress là một trong những cách giúp bạn tăng tốc website lên một cách đáng kể, bởi vì điều này giúp bạn hạn chế việc cài đặt quá nhiều plugin trong hệ thống. 

Moi thắc mắc về bài viết, lỗi link, hoặc vướng mắc ở chỗ nào, bạn có thể comment ở bên dưới, chúng tôi sẽ kiểm tra và trả lời bạn nhanh nhất có thể.

 


Trả lời

Email của bạn sẽ không được hiển thị công khai.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Developed by Tiepthitute
Facebook Messenger
Chat với chúng tôi qua Zalo
Gọi ngay
>