PLUGIN TẠO MỤC LỤC CHO WORDPRESS

      19

Quý Khách gồm biết vì sao đa phần đều bài blog, nội dung bài viết rất lôi cuốn, rất tốt trên trang web, lại có Phần Trăm rời vứt trang (bounce rate) rất to lớn không?

Cũng y như vấn đề bạn ko download một cuốn nắn sách không có trang mục lục, khách hàng truy cập cũng trở thành cực nhọc lòng cơ mà phát âm không còn bài viết của khách hàng ví như bài viết không tồn tại phần mục lục.

Bạn đang xem: Plugin tạo mục lục cho wordpress

Cùng cùng với Việc tăng speed mang lại website, tạo nên mục lục cho nội dung bài viết là 1 trong những phương pháp hiệu quả duy nhất để bớt Xác Suất rời bỏ trang. bên cạnh đó, Google cũng khá ưu tiên đến các nội dung bài viết như thế nào gồm phần mục lục.

Nhưng vụ việc là, chưa hẳn theme như thế nào trong WordPress cũng được tích đúng theo sẵn phần mục lục (table of contents).

Để tạo ra mục lục mang đến bài viết vào WordPress, giải pháp thường thì là thiết lập cùng kích hoạt plugin Easy Table of Contents. Nhưng phần table of contents được tạo thành vì plugin này chú ý hết sức nhàm chán, nó hệt như rứa này.


*
Xám xịt

quý khách có muốn thêm một chút các gia vị bỏ phần mục lục nhằm sinh sản vết ấn của riêng bản thân, y hệt như phần mục lục bên dưới của Bác Sĩ SEO không?

Bài viết này đang gợi ý các bạn chế tác mục lục đến nội dung bài viết vào trang WordPress không đề nghị plugin theo 2 cách: giải pháp thủ công (giải pháp dễ nhưng mà cực) với cách tự động (biện pháp nặng nề cơ mà khỏe).


Cách 1: Tạo mục lục mang đến bài viết vào WordPress bằng HTML – Cách bằng tay, dễ nhưng mà cực

Cách dễ dàng và đơn giản tuyệt nhất để chế tạo ra phần mục lục mang đến bài viết trong WordPress là viết HTML và tạo điểm neo HTML cho các title prúc trong bài viết với đính liên kết cho các tiêu đề phụ đó.

Cách này rất đơn giản dễ dàng, nhưng chỉ cân xứng cho trang web không có tương đối nhiều bài viết. Nếu trang của công ty có nhiều hơn 30 bài viết, về lâu dài tuân theo bí quyết này đã rất rộng bí quyết thứ hai.

Sau đây là phần giải đáp cụ thể mang lại giải pháp tạo thành mục lục trong WordPress bằng HTML.

Đây là đoạn mã HTML cơ bạn dạng của phần mục lục, các bạn hãy copy paste nó vào cụ thể từng nội dung bài viết vào trang WordPress.


quý khách hàng thay thế sửa chữa những loại a href=”#” với title phụ giống với những tiêu đề phú vào nội dung bài viết.

ví dụ như, đó là đoạn mã HTML nhằm chế tác phần mục lục mang đến thiết yếu nội dung bài viết này.


Mục lục

Cách 2: Tạo mục lục đến nội dung bài viết trong WordPress bởi PHP., Javascript với CSS - Cách tự động, khó cơ mà khỏe
Nếu bạn lừng chừng chế tạo links mỏ neo HTML đến title prúc thì nên làm theo quá trình dưới.

Bước 1: Chỉnh sửa bài viết nhưng mà bạn muốn thêm mục lục


*

*

*

Bước 4: Thêm Điểm neo HTML cho tiêu đề phụ

lấy ví dụ, title prúc trên là “Copy paste với chỉnh sửa HTML” thì bạn thêm links mang lại title prúc là copy-paste-va-chinh-sua-html


*

Bạn liên tiếp tái diễn thiết bị từ bỏ quá trình trên mang đến đa số tiêu đề phụ vào bài viết.

Sau lúc thêm liên kết mỏ neo HTML của tiêu đề phụ và tiêu đề phụ vào đoạn mã HTML bên trên, các bạn Cập nhật nội dung bài viết và coi nội dung bài viết sống trong trang web. Nếu chúng ta làm cho đúng chuẩn theo phần đông gì vẫn khuyên bảo thì các bạn sẽ thấy phần mục lục đã được tạo nên nội dung bài viết, hệt như cố kỉnh này.


Vậy nên là bạn đã tạo nên thành công xuất sắc phần mục lục mang lại bài viết vào WordPress bởi HTML. Tuy này cách rất giản đơn tiến hành tuy thế nếu trang web của công ty có không ít nội dung bài viết hoặc nội dung bài viết có rất nhiều title phú thì biện pháp này sẽ rất rất.

Nếu bạn muốn chế tạo phần table of contents đến hầu hết nội dung bài viết trong WordPress nhưng chưa hẳn mất thời hạn thêm code HTML vào từng bài, hãy thường xuyên phát âm và làm theo cách dưới.

Cách 2: Tạo mục lục cho nội dung bài viết trong WordPress bằng PHPhường, Javascript cùng CSS – Cách auto, khó tuy nhiên khỏe

Đây là biện pháp khó hơn để tạo table of contents cho nội dung bài viết trong WordPress.

Xem thêm: Lỗi Windows Failed To Start. A Recent Hardware Or Software Might Be The Cause

Nhưng đây cũng là bí quyết tự động, các bạn chỉ việc làm cho một lần với không cần phải lo ngại về việc nội dung bài viết của mình đã có phần mục lục tuyệt chưa (y như xài plugin tuy nhiên nạm vì chưng xài plugin thì các bạn sẽ thêm phần mục lục bằng code để về tối ưu vận tốc cho trang WordPress).

Thật ra, tất cả hầu hết gì bạn cần làm là copy paste code và biết paste code vào chỗ nào. Sau Khi hoàn tất, các bạn chỉ việc gõ độc nhất loại chữ này vào ngẫu nhiên bài viết làm sao nhưng bạn muốn tạo thành mục lục.

[bsstoc>Và kia là các thứ Bác Sĩ SEO sẽ gợi ý các bạn cụ thể bên dưới.

Cách 1: Tạo file “table-of-contents.js” trong folder js của child theme

Nếu các bạn lần chần child theme là gì, lừng chừng chế tạo child theme mang lại WordPress hay là không biết thư mục js của child theme nằm ở đâu thì hãy xem thêm nội dung bài viết này.

Trong thư mục js của child theme,, bạn tạo một tệp tin mới có tên là table-of-contents.js (chế tác tệp tin bắt đầu bằng FTPhường Client nhỏng FileZilla hoặc sử dụng File Manager vì chưng hình thức hosting của người tiêu dùng cung cấp, chúng ta cũng có thể đọc bài viết này của Hostinger để biết phương pháp cài đặt cũng giống như cấu hình để liên kết FileZilla mang đến root thư mục của trang web).


Sau lúc tạo ra file kết thúc, bạn copy phần nhiều mẫu code dưới đây vào trong tệp tin table-of-contents.js (cần sử dụng text editort nhỏng Notepad hoặc Visual Studio Code nhằm thêm code nếu như bạn áp dụng FTP Client để liên kết mang lại root thư mục của website).

Sau Lúc thêm xong, các bạn ghi nhớ save sầu lại.

jQuery(document).ready(function($) var $bsstoc = $(".bsstoc"); var $content = $bsstoc.parent(); var stopAt = $bsstoc.data("stopat"); var sub_headers = [>; switch(stopAt) case "h6": sub_headers.push("h6"); case "h5": sub_headers.push("h5"); case "h4": sub_headers.push("h4"); case "h3": sub_headers.push("h3"); case "h2": sub_headers.push("h2"); sub_headers = sub_headers.join(); var $heads = $content.find(sub_headers); if($heads.length === 0) return; var toc = ""; toc += "

Mục lục

"; $heads.each(function() var $this = $(this); var tag = $this[0>.tagName; var txt = $this.text(); var slug = convertToSlug(txt); $this.attr("data-linked",slug); toc += ""; ); toc += ""; $bsstoc.append(toc); $(".bsstoc ul").on("click", "a", function(e) e.preventDefault(); $([document.documentElement, document.body>).animate( scrollTop: $content.find("[data-linked=""+$(this) .attr("data-linkto")+"">").offset() .top - parseInt($bsstoc.attr("data-offset"), 10) , 2000); ); function convertToSlug(text)ẹ);
do đó là các bạn đang chế tác ngừng file javascript table-of-contents.js. Đây nói theo cách khác là file đặc trưng độc nhất của cả quy trình chế tạo mục lục auto cho WordPress, bạn nhớ copy đúng mực và ko chỉnh sửa gì thêm.

Bước 2: Thêm code vào file functions.php của child theme

Quý khách hàng copy đoạn code sau vào file functions.php và save lại.

/* Add shortcode code for table of contents */function bss_bsstoc($atts) if (empty($atts)) $atts = array(); if (empty($atts["stopat">)) $atts["stopat"> = "h4"; if (empty($atts["offset">)) $atts["offset"> = "20"; return "
";add_shortcode("bsstoc", "bss_bsstoc");/* Enqueue custom scripts */function bss_custom_scripts() wp_enqueue_script("table-of-contents-script", get_stylesheet_directory_uri()."/js/table-of-contents.js", array("jquery"), false, true);add_action("wp_enqueue_scripts", "bss_custom_scripts");Lưu ý

Nếu các bạn tất cả thêm các script khác như script thêm chức năng của nút trsinh hoạt về đầu trang nhưng Bác Sĩ SEO đã giải đáp trong bài viết này thì chúng ta chỉ cần copy loại wp_enqueue_script và paste vào trong dòng bên dưới của dòng wp_enqueue_script phía bên trên là được, y như cố này.

/* Enqueue custom scripts */function bss_custom_scripts() /* Đây là code hotline javascript của nút baông xã to lớn top */ wp_enqueue_script("back-to-top-script", get_stylesheet_directory_uri()."/js/back-to-top.js", array("jquery"), false, true);/* Đây là code call javascript của nút bachồng lớn top *//* Đây là code Gọi javascript của table of contents */wp_enqueue_script("table-of-contents-script", get_stylesheet_directory_uri()."/js/table-of-contents.js", array("jquery"), false, true);/* Đây là code Call javascript của table of contents */add_action("wp_enqueue_scripts", "bss_custom_scripts");
Bởi vậy là chúng ta đã hoàn thành phần thêm code PHPhường. Tiếp theo nghỉ ngơi bước 3, bạn sẽ trang trí cho phần mục lục của bài viết bằng CSS.

Bước 3: Thêm CSS vào phần Tùy biến >> CSS bổ sung cập nhật để style phần mục lục

quý khách hàng copy paste với save sầu lại đoạn mã CSS dưới đây vào phần Tùy biến >> CSS bửa sung nhằm style table of contents.

/* Table of contents */.bsstoc ul margin-left: 45px; padding-left: 0; border-left: 1px solid #c4cbdb;.bsstoc li padding-left: 20px; list-style: none; margin-bottom: 0px;.bsstoc .bsstoc-level-H3 padding-left: 40px;.bsstoc .bsstoc-level-H4 padding-left: 60px;.bsstoc .bsstoc-level-H2:before content: ""; display: block; height: 0; width: 8px; border-bottom: 1px dashed #c4cbdb; transform: translateX(-15px) translateY(19px);.bsstoc .bsstoc-level-H3:before content: ""; display: block; height: 0; width: 30px; border-bottom: 1px dashed #c4cbdb; transform: translateX(-35px) translateY(19px);.bsstoc .bsstoc-level-H4:before content: ""; display: block; height: 0; width: 50px; border-bottom: 1px dashed #c4cbdb; transform: translateX(-55px) translateY(19px);
truyền thông screen and (max-width: 768px) /* Table of contents */.bsstoc ul margin-left: 0; .bsstoc .bsstoc-level-H2:before, .bsstoc .bsstoc-level-H3:before, .bsstoc .bsstoc-level-H4:before margin-top: -3px; position: absolute; Sau khi thêm và save lại đoạn mã CSS bên trên, bạn đã sản xuất mục lục auto cho phần đa bài viết trong WordPress thành công.

Bước 4: Thêm shortcode table of contents vào các nội dung bài viết vào WordPress

Tất cả gần như gì bạn cần làm bây chừ là gõ shortcode dưới vào bất cứ nội dung bài viết như thế nào mà lại bạn có nhu cầu chế tạo mục lục (ráng vày chỉnh sửa bỏ ra li như bí quyết tạo nên mục lục bởi HTML nghỉ ngơi phía trên).

Và dòng hay của cách này là chúng ta có thể góp phần mục lục bằng shortcode vào bất cứ chỗ nào trong bài viết nhưng mà bạn có nhu cầu, không hẳn cố định và thắt chặt mục lục ở đoạn đầu bài viết nlỗi các plugin table of contents tuyệt làm cho.

[bsstoc>
Khi thêm xong xuôi, bạn vào xem bài viết bên trên website, bạn sẽ thấy phần mục lục đã làm được tạo hoàn toàn tự động hóa mang lại nội dung bài viết đó (hệt như phần mục lục của các nội dung bài viết vào website thietkewebhcm.com.vn).

Quý khách hàng có thể cliông xã toàn bộ links tiêu đề phụ vào phần mục lục nhằm đi cho phần văn bản của tiêu đề phú đó, cực kì tiện nghi cần không nào?


Danh mục Không bắt buộc plugin,WordPress Thẻ sinh sản mục lục bài viết trong wordpress,chế tạo mục lục mang lại bài viết trong wordpress ko phải plugin,tạo nên mục lục đến wordpress không nên plugin,tạo thành mục lục vào html,chế tạo ra mục lục wordpress,sinh sản mục lục wordpress bằng htmlĐiều phía bài xích viết

Viết một bình luận Hủy

Bình luận

TênTlỗi năng lượng điện tửTrang web

Lưu thương hiệu của tôi, gmail, và trang web vào trình chú ý này mang đến lần bình luận tiếp đến của tôi.