ทำสารบัญ ใน WordPress อย่างไร ? ทำครั้งเดียวใช้ได้ทั้งเว็บ

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

วิธีการทำสารบัญ ใน WordPress สามารถทำได้ 2 วิธีครับ แต่ในบทความนี้ ผมจะแนะนำ วิธีที่ง่าย และ รวดเร็วกว่า ในการทำงาน นั่นก็คือ การใช้ Plugin ที่สามารถตั้งค่าครั้งเดียว แล้วใช้ได้กับทุกบทความโดยอัตโนมัติครับ มาดูกันได้เลยครับ

ติดตั้ง Plugin Easy Table of contents สำหรับทำ สารบัญ

ปลั๊กอินตัวนี้ เป็น Plugin ฟรี ที่มีคนใช้มากกว่า 100,000 คนครับ ดังนั้น การทำงาน ใช้งานได้ปลอดภัยหายห่วงครับ ให้เราค้นหา Keyword ที่ชื่อว่า Easy Table of contents ได้เลยครับ หรือ ลองดูที่ลิงค์ด้านล่างได้ครับ

Easy Table of Contents

ปรับแต่ง Plugin ให้ทำงานแบบอัตโนมัติ

ให้เราไปที่เมนู Settings แล้วไปที่ Table of contents ครับ จะมี Options อยู่มากมาย แต่ไม่ต้องตกใจครับ ให้เราดู Options ต่อไปนี้ครับ

Enable Support เราจะเปิดใช้งานกับข้อมูลบน WordPress ประเภทใดบ้าง Posts คือ บทความ Pages คือ หน้า ส่วนอันอื่นๆ คือ ประเภทข้อมูลที่ Plugin อื่นๆ สร้างขึ้นมา

Auto Insert เราจะให้เจ้า Easy Table of contents ใส่สารบัญอัตโนมัติ ให้กับข้อมูลประเภทไหนบ้าง ถ้าต้องการให้ใส่ สารบัญ ใน WordPress อัตโนมัติ แต่ตัวเลือกนี้จะมีผลก็ต่อเมื่อ ข้อมูลนั้นมีการ Enable Support ไว้ก่อน

Position จะมีให้เลือกว่า เราจะให้ สารบัญ แสดงในตำแหน่งไหนของหน้านี้

1. Before first heading แสดงก่อนที่จะเจอหัวข้อแรก ในเนื้อหาของเรา
2. After first heading แสดงหลังหัวข้อแรกของเนื้อหาของเรา
3. Top แสดง ด้านบนสุดของเนื้อหา
4. Bottom แสดง ด้านล่างสุดของเนื้อหา

Show when เงื่อนไขการแสดงสารบัญ ตรงนี้เรากำหนดเป็นตัวเลข หมายความว่า ถ้าจำนวน หัวข้อในบทความ มากกว่า หรือ เท่ากับ จำนวนที่เรากำหนด สารบัญ จึงจะแสดงใน WordPress

Display Header Label แสดงหัวข้อ คำว่า Table of contents หรือ คำว่าสารบัญ ซึ่งเราสามารถกำหนดได้ใน หัวข้อ Header Label

Toggle View อนุญาติให้ ผู้ใช้ เปิดปิด สารบัญได้ โดยการแสดงปุ่มเปิดปิดขึ้นมา

Initial View เปิดบทความมาครั้งแรก จะให้สารบัญปิดอยู่หรือไม่

Show as Hierarchy แสดงหัวข้อย่อยเป็นลำดับชั้นหรือไม่

Counter ตัวนับเลข จะให้แสดงแบบไหน

1. Decimal คือ มีจุดทศนิยม
2. Numeric คือ ตัวเลขแบบไม่มีจุด
3. Roman คือ เลขแบบโรมัน เช่น I , II , IV
4. None คือ ไม่มีเลข

หลังจากตั้งค่าหลักเรียบร้อยแล้ว ลงไปด้านล่างสุด กด Save ก่อนครับ

เตรียมข้อมูลให้พร้อม เพื่อการทดสอบ สารบัญ ใน WordPress

ให้เราไปที่บทความของเรา แล้วใส่หัวข้อไว้ให้พร้อมครับ ในขั้นตอนนี้ ถ้าเราต้องการทำหัวข้อย่อย เราต้องทำหัวข้อให้เป็นหัวข้อที่มีความสำคัญน้อยกว่า เอาไว้ใต้หัวข้อหลักครับ เช่น หัวข้อหลักของเราเป็น H2 หัวข้อย่อย จะต้องเลือกเป็น H3 เป็นต้นไปครับ เพราะว่า H2 ใหญ่กว่า H3 นั่นเองครับ เวลาที่เว็บเราเรียงลำดับ

ทดสอบสารบัญ ในบทความของเรา

ถ้าเราสร้างหัวข้อยังไม่เกิน จำนวนที่เรากำหนดไว้ตอนที่เราตั้งค่า สารบัญ ก็จะไม่ขึ้นมาครับ แต่ถ้าเราสร้างเกินเรียบร้อยแล้ว มันจะตรงเงื่อนไขพอดี สารบัญจะขึ้นมาอัตโนมัติครับ

ปรับแต่งสีสัน ของสารบัญของเรา

เข้าไปตั้งค่าที่เดิมครับ ใน Settings และไปที่ Table of contents จากนั้น ตรงไปที่หัวข้อ Appearance ครับ

การปรับแต่งทั่วไป

Width คือ ความกว้างของสารบัญ จะมีตัวเลือกสำเร็จรูปให้เราเลือก แต่ถ้าเราจะตั้งเอง เราต้องเลือก Custom แล้วไปกำหนดที่ Custom Width อีกที่หนึ่งครับ

Float ทำให้สารบัญ ลอยอยู่ด้านข้าง แต่ข้อนี้ผมไม่แนะนำครับ เพราะจะทำให้รูปแบบของการวางเนื้อหาของเรา แปลกไป

Title Font Size ขนาดของ Font ใน Title ที่เราตั้งค่าไว้ใน Header Label ก่อนหน้านี้ครับ หรือ ขนาดของคำว่า Table of contents หรือ คำว่า สารบัญ นั่นเอง

Title Font Weight ความหนาของ Title ตำแหน่งเดียวกับที่ Title Font Size ตั้งค่าไว้ครับ

Font Size คือ ขนาดของ Font ในสารบัญครับ

Theme คือ รูปแบบสีสัน ของสารบัญเราครับ ถ้าเราจะปรับแต่งเองแบบตามใจ จะต้องเลือกเป็น Custom แล้ว ปรับแต่งที่ด้านล่าง ในส่วนของ Custom Theme อีกทีหนึ่งครับ

การปรับแต่งสีของสารบัญ ใน WordPress แบบ Custom

หลังจากที่เราเลือก Custom แล้วเราสามารถที่จะเลือกสีได้ดังนี้ครับ

Background Color คือ สีของพื้นหลัง บนพื้นที่ ที่เราจะทำสารบัญครับ

Border Color คือ สีของกรอบสารบัญ ว่าต้องการให้เป็นสีอะไรครับ

Title Color คือ สีของหัวข้อที่เรากำหนดใน Header Label ครับ

Link Color คือ สีของหัวข้อต่างๆ ที่คลิกได้ และ อยู่ใน สารบัญ ว่า จะให้เป็นสีอะไร

Link Hover Color สีของลิงค์ หัวข้อต่างๆ ที่คลิกได้ ในเวลาที่เราเอาเมาส์ไปวาง

Link Visited Color สีของลิงค์ หัวข้อต่างๆ ที่เราเคยคลิกไปแล้ว

วิธีการทำปุ่ม กลับสู่ สารบัญ

การทำปุ่มกลับสู่สารบัญ จะมีอยู่ 2 ขั้นตอนหลักด้วยกันคือ

1. สร้าง Code บนพื้นที่เหนือสารบัญ เพื่อให้กด Link แล้วกลับมาตรงบริเวณ Code นั้น
2. สร้าง Link

สร้าง Code ตรงตำแหน่ง สารบัญ

ตรงนี้ต้องใช้ความรู้ในเรื่องของ Block Editor ครับ ถ้าใครยังใช้ Block Editor ไม่คล่อง อ่านบทความนี้ได้ครับ พื้นฐานการใช้งาน WordPress

ให้เราสร้าง Block เหนือ ตำแหน่งหัวข้อแรกของหน้าบทความของเราครับ แล้วพิมพ์ Code ต่อไปนี้ครับ

<div id="my-table-of-contents" ></div>

ภายใต้ id เราจะกำหนดเป็นอะไรก็ได้ แต่ขอให้ทำตามกฎนี้ครับ ไม่เช่นนั้น id จะไม่ทำงานครับ

1. ต้องเป็นภาษาอังกฤษเท่านั้น
2. เป็นตัวอักษร และ ขีดกลางเท่านั้น
3. ห้ามมีช่องว่าง
4. ห้ามมีตัวอักษรประหลาด

สร้าง Link ไปหา Code ที่เราสร้างไว้

ตรงนี้เราจะไปสร้าง Link ตรงตำแหน่งไหนก็ได้ จะใช้ Paragraph Block หรือ Button Block ก็ได้แล้วแต่เราครับ แต่ลิงค์ URL หรือว่าปลายทางของลิงค์ จะต้องเป็นแบบนี้ครับ

#my-table-of-contents

โดยคำว่า my-table-of-contents จะต้องตรงกับชื่อ id ที่เราตั้งไว้ในหัวข้อก่อนหน้านี้ครับ เพียงเท่านี้ก็เป็นอันสร้างเรียบร้อยครับ สำหรับวิธีการสร้าง ลิงค์ หรือ ปุ่ม กลับสู่สารบัญครับ

ตัวเลือกพิเศษในการทำสารบัญ

นอกจากเทคนิค การทำสารบัญเบื้องต้นแล้ว Plugin Easy Table of Contents นี้ยังมีความสามารถอื่นๆด้วย เช่น การยกเลิก การทำสารบัญ แบบ Auto หรือ การเลือกเฉพาะเบอร์ Heading ที่ต้องการ

นอกจากนั้น เรายังสามารถที่จะ คัดหัวข้อที่เราไม่ต้องการนำใส่สารบัญ ออก หรือ ทำการเปลี่ยนคำในหัวข้อสารบัญได้อีกด้วยครับ เทคนิคนี้เราเรียกว่า การ Exclude และ Replace ครับ

Exclude หัวข้อ

การคัดหัวข้อออกจากสารบัญ ง่ายนิดเดียวครับ แค่พิมพ์ ชื่อหัวข้อเต็มๆ ลงในช่อง Exclude ก็เรียบร้อยแล้ว และอีกเทคนิคนึงก็คือ ไม่ต้องพิมพ์หัวข้อเต็มๆ แต่พิมพ์ ตัวขึ้นต้นแล้วตามด้วย * เช่นตัวอย่างจะเป็น ไม่เอา* คือ หัวข้ออะไรก็ตามที่ขึ้นต้นด้วยคำว่า ไม่เอาครับ ถ้าต้องการคัดออกหลายๆ หัวข้อ ให้ใช้เครื่องหมาย | อ่านว่าไปป์ คั่นครับ ตามตัวอย่างในรูปด้านบนครับ

Replace หัวข้อ

การเปลี่ยนชื่อหัวข้อ ที่อยู่ในสารบัญ สามารถเปลี่ยนได้ในช่อง Alternate Headings ครับ หลักการคือ 1 บรรทัด คือ การเปลี่ยน 1 หัวข้อ วิธีการคือ ให้ใส่หัวข้อต้นฉบับที่ต้องการเปลี่ยนทางซ้าย แล้วคั่นด้วย | จากนั้นใส่หัวข้อใหม่ทางด้านขวา แบบนี้ครับ

หัวข้อเดิมที่ 1|หัวข้อใหม่ที่ 1
หัวข้อเดิมที่ 2|หัวข้อใหม่ที่ 2

เปลี่ยนเสร็จแล้วผลที่ได้จะเป็นแบบนี้ครับ

สรุป

การสร้างสารบัญ โดยการใช้ Easy Table of Contents เราต้องไปทำการ ตั้งค่าแบบคร่าวๆก่อน โดยเฉพาะ การเปิดใช้งาน Enable Support และ Auto Insert ต้องทำให้เรียบร้อย รวมทั้งการกำหนด เงื่อนไขให้ชัดเจน ในเรื่องของการแสดง ว่าให้แสดงผลเมื่อไร แล้วเมื่อ สารบัญ ขึ้นที่หน้า บทความ ของเราแล้ว ก็ลองปรับแต่งเรื่องสีสัน เรื่องของขนาด และ เรื่องของการ เอาหัวข้อเข้าออกดูครับ