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

0
68

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 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

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 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

5. Thử nghiệm kết quả

Các điểm neo bên dưới sẽ được sử dụng cho bài viết này

Điểm neo 1

thu-thuat-tang-toc-windows-10-p1
thu-thuat-tang-toc-windows-10-p1

Xem thêm tại : thủ thuật tăng tốc windows 10 – P1

Điểm neo 1.1

xóa ứng dụng mặc định trên win 10
xóa ứng dụng mặc định trên win 10

Gỡ bỏ các Ứng dụng Universal được tích hợp sẵn trong Windows

Điểm neo 1.2

 

Xóa rác máy tính

Điểm neo 2

Điểm neo 2.1

Điểm neo 2.2

Tích hợp chat Facebook vào Website

Điểm neo 3

CÀI ĐẶT ADOBE PHOTOSHOP CS6 FULL

BÌNH LUẬN