หากคุณเผยแพร่เนื้อหาขนาดยาว การเพิ่มสารบัญจะช่วยทั้งเครื่องมือค้นหาและ ผู้เข้าชม มนุษย์เพื่อนำทางและทำความเข้าใจเนื้อหาของคุณ

ด้วยวิดเจ็ต วิดเจ็ตสารบัญสำหรับ WordPressคุณสามารถเพิ่มสารบัญใน .ของคุณได้อย่างง่ายดาย เว็บไซต์ ซึ่งสร้างเนื้อหาโดยอัตโนมัติตามลำดับชั้นของแท็กชื่อในเนื้อหาของคุณ

ตัวอย่างเช่น

วิธีการเพิ่มสารบัญแท็ก wordpress elementor blogpascher

หากคุณใช้วิดเจ็ตนี้กับตัวสร้างธีมภาพของ Elementor Pro คุณสามารถเพิ่มสารบัญลงในเนื้อหาทั้งหมดของคุณโดยอัตโนมัติโดยไม่ต้องยกนิ้ว เมื่อผู้เยี่ยมชมคลิกที่ลิงค์ในสารบัญ มันจะทำหน้าที่เป็นจุดยึดและนำพวกเขาไปยังส่วนนั้นของหน้า

ในโพสต์นี้เราจะแสดงวิธีกำหนดค่าวิดเจ็ต วิดเจ็ตสารบัญสำหรับ WordPress กับ Elementor ตัวสร้างธีม

แต่ก่อนอื่นมาค้นพบด้วยกัน วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ.

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีเพิ่มสารบัญด้วย Elementor

ก่อนอื่นเราควรทราบว่าคุณสามารถใช้วิดเจ็ตนี้ในลักษณะพื้นฐานได้ อย่างไรก็ตาม ในบทช่วยสอนนี้ เรามุ่งเน้นที่การเพิ่มสารบัญลงในเนื้อหาทั้งหมด (หรือบางส่วน) ของคุณโดยอัตโนมัติ Elementor เครื่องมือสร้างธีมและเทมเพลตโพสต์ที่ไม่ซ้ำใคร

นี่คือวิธีที่จะทำ

1. สร้างหรือแก้ไขเทมเพลตโพสต์เดียว

ในการเริ่มต้นใช้งาน Elementor Theme Builder เพื่อสร้างเทมเพลตโพสต์ใหม่ที่ไม่ซ้ำใครหรือแก้ไขเทมเพลตโพสต์เฉพาะที่มีอยู่ซึ่งคุณต้องการเพิ่มสารบัญ

คุณสามารถใช้เทมเพลตของคุณกับโพสต์ประเภทใดก็ได้ (บล็อกเพจประเภทโพสต์ที่กำหนดเอง) แต่เราจะเน้นไปที่บล็อกโพสต์

2. เพิ่มวิดเจ็ตสารบัญ

เมื่อคุณเปิดเทมเพลตโพสต์เฉพาะของคุณแล้วให้เพิ่มวิดเจ็ต สารบัญ ที่คุณต้องการให้สารบัญของคุณปรากฏ อยู่ในหมวดหมู่เฉพาะพร้อมด้วยวิดเจ็ตสำหรับชื่อโพสต์และเนื้อหาโพสต์:

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 1

เมื่อคุณเพิ่มวิดเจ็ตแล้วคุณจะเห็นรายการชื่อเรื่องทั้งหมดที่มีอยู่ในโพสต์โดยอัตโนมัติ

ตอนนี้ถึงเวลากำหนดการตั้งค่าของวิดเจ็ตนี้

3. กำหนดค่าตารางวิดเจ็ต

ตรวจสอบให้แน่ใจว่าได้เปิดการตั้งค่าสำหรับวิดเจ็ต Table Of Content จากนั้นใช้แท็บ คอนเทนต์ เพื่อกำหนดค่าเนื้อหาที่ปรากฏในสารบัญของคุณ

ขั้นแรกให้เพิ่มชื่อ - ตัวอย่างเช่น "สารบัญ" นี่คือข้อความคงที่ที่ปรากฏเหนือรายการลิงก์จุดยึดที่วิดเจ็ตสร้างขึ้นโดยอัตโนมัติ

จากนั้นเลือกเนื้อหาที่จะรวม ในแท็บ รวมถึง คุณสามารถเข้ามา:

  • แท็ก HTML. ตัวอย่างเช่นคุณสามารถรวม และแต่ก็ไม่น้อยไปกว่ากัน คุณต้องกำหนดแท็กชื่อของคุณในตัวแก้ไข WordPress
  • ภาชนะบรรจุ. คุณยังสามารถเพิ่มลิงก์จุดยึดไปยังคอนเทนเนอร์อื่น ๆ นอกเนื้อหาโพสต์ของคุณ ตัวอย่างเช่นเท้าของคุณ นี่คือคุณสมบัติขั้นสูง

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 2

หากคุณเข้าถึงแท็บ ไม่รวม, คุณสามารถยกเว้นส่วนหัวที่เฉพาะเจาะจงจากโพสต์ของคุณโดยใช้ตัวเลือก CSS ตัวอย่างเช่นหากคุณต้องการยกเว้นชื่อเรื่องเดียว , คุณสามารถเพิ่มคลาส CSS พิเศษ " ไม่สนใจ ไปที่ส่วนหัวนั้นโดยใช้โปรแกรมแก้ไข WordPress จากนั้นยกเว้นโดยใช้กฎ  จุดยึดโดย Selector :

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 3

จากนั้นคุณสามารถใช้พารามิเตอร์ มุมมองเครื่องหมาย เพื่อเลือกระหว่างตัวเลขและสัญลักษณ์แสดงหัวข้อย่อยในรายการสารบัญของคุณ ถ้าคุณเลือก " กระสุน "คุณสามารถเลือกจากไอคอน Font Awesome

สุดท้ายคุณสามารถใช้ส่วน ตัวเลือกเพิ่มเติม เพื่อควบคุมพารามิเตอร์อื่น ๆ :

ตัดคำ - องค์ประกอบอาจมีหลายบรรทัดหรือไม่

ย่อกล่อง - ถ้า ผู้เข้าชม อาจจะหรืออาจจะไม่ลดสารบัญก็ได้ หากคุณเปิดใช้งานตัวเลือกนี้ คุณจะสามารถเลือกไอคอนที่กำหนดเองและตั้งค่าพฤติกรรมการตอบสนองได้ ตัวอย่างเช่น คุณสามารถยุบสารบัญนี้ได้โดยอัตโนมัติ ผู้เข้าชม บนโทรศัพท์มือถือ.

มุมมองลำดับชั้น - เมื่อเปิดใช้งานหัวเรื่องย่อยจะถูกเยื้องภายใต้หัวเรื่องหลัก หากปิดใช้งานทุกอย่างจะแสดงเป็นรายการเดียวโดยไม่มีการเยื้อง

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 4

4. กำหนดการตั้งค่าสไตล์

ถัดไป นำทางไปยังแท็บ สไตล์ เพื่อกำหนดค่าการออกแบบสารบัญของคุณ คุณสามารถเปลี่ยนสีและแบบอักษรทั้งหมดเพื่อสร้างประสบการณ์ที่เป็นมิตรกับผู้ใช้และเข้ากับการออกแบบที่เหลือของคุณ เว็บไซต์ :

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 5

5. กำหนดการตั้งค่าขั้นสูง

ไปที่แท็บเพื่อทำสิ่งต่างๆให้เสร็จสิ้น avanced เพื่อกำหนดการตั้งค่าเพิ่มเติมเล็กน้อยสำหรับวิธีการทำงานของสารบัญ

ตัวอย่างเช่นหากคุณตั้งค่า ความกว้าง  เท่ากับ ประเพณี et ตำแหน่ง เท่ากับ คงที่ ในส่วน Positioningคุณสามารถตรวจสอบให้แน่ใจว่าสารบัญยังคงอยู่ในตำแหน่งเดิมแม้ว่าผู้ใช้จะเริ่มเลื่อนหน้า

ถ้าคุณใช้ Positioning หากต้องการแสดงสารบัญของคุณที่ด้านบนขององค์ประกอบอื่น (เช่นส่วนหัวของคุณ) คุณยังสามารถเพิ่มดัชนี Z เพื่อให้ปรากฏที่ด้านบน:

วิธีการเพิ่มสารบัญ wordpress elementor blogpascher 6

และนั่นคือทั้งหมด! คุณเพิ่งได้เรียนรู้วิธีเพิ่มสารบัญให้กับเนื้อหาของคุณโดยอัตโนมัติโดยใช้วิดเจ็ต Elementor Visual Theme Builder และ Table of Contents

ในการเริ่มต้นซื้อ Elementor Pro วันนี้และสร้างสารบัญของคุณใน ตัวสร้างธีม Elementor.