Chia sẻ code tự động tạo mục lục bài viết không cần plugin

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Mục lục

Sau nhiều lần làm dự án thấy khách hàng cài mấy plugin tạo mục lục bài viết đồ, thấy khá nặng mình quyết định viết code tự động tạo mục lục bài viết luôn, vừa có thể hoàn toàn làm chủ được code, bảo mật cao, có thể dễ dàng nâng cấp thêm code sau này ( Chứ cài plugin thì các bạn không thể can thiệp chỉnh sửa sâu được ở plugin của nhà phát triển, vì liên quan đến cập nhật sau này )

Ưu điểm code tự động tạo mục lục bài viết

  • Các bạn có thể chỉnh sửa tùy ý theo sở thích của các bạn
  • Bảo mật cao vì không cần cài plugin của nhà phát triển khác vào website
  • Tốc độ load sẽ nhanh hơn so với các plugin
Ban đầu e tính phát triển thêm nút ẩn, hiện, và làm cho nó trượt theo khi cuộn, nhưng nghĩ website e hiện tại không cần thiết nên chỉ phát triển code ở bản hiện tại ( sau này cần thì nâng cấp code sau )

 

Cách chèn code mục lục bài viết

Ở đây mình làm ở theme flatsome nên trước tiên mình cần phải copy thư mục Template-part ở theme flatsome sang flatsome child nhé ( để khi mà update lên bản theme mới sẽ không bị mất nhé ).  ( theme khác cũng vậy, cần tìm đúng thư mục bỏ vào là code chạy ok thôi ) Cách làm xem phía dưới nhé , let go !!!

Sao chép thư mục Template-part ở theme flatsome sang child theme

  • bước 1: vào file quản trị web trên host hoặc vps rồi tìm đến wp-content/themes/flatsome/template-parts/posts/content-single.php
  • bước 2: copy thư mục template-parts/posts/content-single.php vào theme Flatsome child ( xem hình dưới )

  • bước 3: vào mục template-parts ở Flatsome child theo đường dẫn template-parts/posts/content-single.php
  • bước 4: mở file content-single.php để chèn code dưới đây vào vị trí bạn mong muốn

Tùy ý chỉnh sửa code

Tất cả code bạn đều có thể chỉnh sửa theo ý của mình từ html, css, java script

  • Muốn sửa css thì nó nằm ở thẻ <style>
  • Muốn sửa java script thì nó nằm ở thẻ <script>

Lời tri ân đến từ Web An Tâm

Cảm ơn các độc giả đã đồng hành với mình trong suốt thời gian qua, tuy thời gian mình bước ra cộng đồng chỉ mới gần đây nhưng được khá nhiều anh em đón nhận, hy vọng code trên sẽ hữu ích với người hữu duyên , ai làm có lỗi gì báo mình , hoặc để lại bình luận dưới bài này nhé

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Nhà cung cấp host uy tín Việt Nam
Nhà cung cấp host uy tín Việt Nam

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

.
.