LuckyWP Table of Contents ปลั๊กอินสร้างลิงก์สารบัญใบบทความ สำหรับผู้ที่มีเนื้อหาในบทความยาววว…..เป็นหางว่าว ไม่ต้องเสียเวลาเลื่อนเมาส์รัวๆ

LuckyWP Table of Contents คืออะไร ?

what is it

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


LuckyWP Table of Contents ทำงานยังไง ?

how it work

LuckyWP Table of Contents เปรียบง่ายๆก็เหมือนกับสารบัญในหนังสือนั่นแหละ ซึ่งเจ้าปลั๊กอินนี้จะช่วยสร้างสารบัญให้กับบทความของเรา โดยรวมหัวข้อต่างๆของเนื้อหาทั้งหมดในบทความนั้นๆ เพื่อให้ผู้อ่านได้ทราบว่าเรื่องที่อ่านอยู่นั้นมีหัวข้ออะไรบ้าง หรือบางทีบทความของเราอาจมีเนื้อหาที่ยาวเกินไป คุณผู้อ่านก็คงไม่อยากไล่อ่านทั้งหมด หรืออยากจะอ่านเฉพาะใจความสำคัญที่เราต้องการใช่มั้ยล่ะ เพราะงั้นเจ้าปลั๊กอินนี่แหละถึงได้ตอบโจทย์เราที่สุด

sample

ลองมาเพิ่มสารบัญให้เนื้อหาของเราน่าอ่านกัน

ก่อนอื่นก็เข้าสู่ระบบ WordPress กันก่อนเลย

login

จากนั้นก็ไปติดตั้งและเปิดใช้งานปลั๊กอิน LuckyWP Table of Contents

install and activate

สำหรับใครที่ยังติดตั้งปลั๊กอินไม่เป็น ลองอ่านบทความนี้ดูก่อนนะ
>> Plugin WordPress คืออะไร ติดตั้งยังไง

ต่อไปเราต้องกำหนดค่าต่างๆ ของปลั๊กอินเพื่อนำไปสร้างเป็นสารบัญ ให้ไปที่ “การตั้งค่า (Settings)” ของเวิร์ดเพรส แล้วคลิกไปที่ “สารบัญ (Tables of Contents)”

go to settings

ปรับแต่งส่วนแสดงผลสารบัญ (การตั้งค่าทั่วไป / General)

genaral setting part 1
  1. จำนวนหัวข้อน้อยที่สุด (Minimal Count of Headings) กำหนดว่าจะให้แสดงสารบัญเมื่อมีหัวข้อเท่ากับหรือมากกว่าที่กำหนด มักใช้ 3 ถึง 4 หัวข้อขึ้นไป
  2. ความลึก (Depth) กำหนดความลึกของสารบัญ ใช้กับบทความที่มีหัวข้อแยกย่อยลงไปอีก
  3. ลำดับชั้น (Hierarchical View) ให้ทำสารบัญเป็นแบบลำดับชั้น เพื่อให้รู้ว่าส่วนนี้คือหัวข้อย่อย
  4. ตัวเลขลำดับ (Numeration) กำหนดการใส่ตัวเลข โดยมีแบบ
    ไม่ใส่ตัวเลข (Without numeration) : ไม่ใส่ตัวเลข
    ตัวเลขธรรมดา (Decimal numbers) : ตัวเลขธรรมดา (อารบิก) เช่น 1 2 3
    ตัวเลขมีจุดย่อย (Decimal numbers (nested) ) : ตัวเลขธรรมดามีแบบมีหัวข้อย่อย
    ตัวเลขโรมัน (Roman numbers) : ตัวเลขโรมัน เช่น I II IV
    ตัวเลขโรมันที่มีจุดย่อย (Roman numbers (nested) ) : ตัวเลขโรมันแบบมีหัวข้อย่อย
genaral setting part 2
  1. หัวข้อ (Title) กำหนดหัวข้อของสารบัญ
  2. เปิด/ปิดการซ่อนสารบัญ (Toggle Show/Hide) ตั้งให้สามารถซ่อนและแสดงสารบัญได้
  3. จากค่าเริ่มต้น หัวข้อของเนื้อหาจะถูกซ่อนไว้ก่อน (By default, items of contents will be hidden) ถ้าเราเปิดใช้งานการเปิด/ปิดการซ่อนสารบัญ จะแสดงตัวเลือกนี้ขึ้นมาว่าจะให้ซ่อนหัวข้อของเนื้อหาเป็นค่าเริ่ม
  4. ข้อความสำหรับให้แสดงหัวข้อ (Label Show) ใส่ข้อความสำหรับแสดงหัวข้อ เช่น “แสดง” “แสดงทั้งหมด” เป็นต้น
  5. ข้อความสำหรับให้ซ่อนหัวข้อ (Label Hide) ใส่ข้อความสำหรับซ่อนหัวข้อ เช่น “ซ่อน” “ซ่อนทั้งหมด” เป็นต้น
  6. เลื่อนแบบนิ่มนวล (Smooth Scroll) กำหนดให้การเลื่อนไปยังหัวข้อต่างๆ เป็นไปอย่างนิ่มนวล

ปรับแต่ง แต่งแต้มสีสัน (ตั้งค่าการแสดงผล / Appearance)

appearance setting part 1
  1. ความกว้าง (Width) กำหนดความกว้างของสารบัญโดยจะมีแบบอัตโนมัติ (Auto) เต็มความกว้าง (Full Width) และแบบกำหนดเอง (Custom)
  2. การจัดตำแหน่ง (Float) กำหนดตำแหน่งของสารบัญ โดยจะมีแบบเต็มพื้นที่ (None) ซ้าย (Left) ขวา (Right) ด้านขวา (Right without flow) และกลาง (center)
  3. ขนาดตัวหนังสือของหัวข้อ (Title Font Size) กำหนดขนาดหัวข้อสารบัญ โดยจะใช้ค่าเริ่มต้น (Default) หรือกำหนดเอง(Custom value) ก็ได้
  4. น้ำหนักตัวหนังสือของหัวข้อ (Title Font Weigth) กำหนดความหนาของหัวข้อ โดยจะมีอยู่หลายระดับให้เราได้เลือก
  5. ขนาดตัวหนังสือของหัวข้อ (Item Font Size) กำหนดขนาดของรายการหัวข้อ โดยจะใช้ค่าเริ่มต้น (Default) หรือกำหนดเอง(Custom value) ก็ได้
  6. แม่แบบสี (Color Scheme) กำหนดสีสันให้กับสารบัญของเรา โดยจะมีโทนสีมาให้เราเลือก หรือไม่ก็ไปตั้งที่ส่วน “เขียนทับสีของแม่แบบ (Override Color Scheme Colors)”
appearance setting part 2
  1. สีพื้นหลัง (Background Color) กำหนดสีพื้นหลังของสารบัญ โดยจะคลิกสีหรือใส่ค่าสีไปก็ได้
  2. สีขอบ (Border Color) กำหนดสีขอบของสารบัญ
  3. สีของชื่อเรื่อง (Title Color) กำหนดสีหัวข้อของสารบัญ
  4. สีของลิงก์ (Link Color) กำหนดสีลิงก์ของสารบัญ
  5. สีเมื่อชี้ที่ลิงก์ (Hover Link Color) กำหนดสีเมื่อเลื่อนเมาส์ไปชี้ที่ลิงก์
  6. สีลิงก์ที่คลิกแล้ว (Visited Link Color) กำหนดสีให้กับลิงก์ที่คลิกไปแล้ว

กำหนดจุดวาร์ป (ตั้งค่าการแทรกอัตโนมัติ / Auto Insert)

auto insert setting
  1. ใส่สารบัญอัตโนมัติ (Auto Insert Table of Contents) กำหนดว่าจะให้แทรกสารบัญแบบอัตโนมัติเลยหรือไม่
  2. ตำแหน่งประเภทของโพสต์ (Position) กำหนดว่าจะให้แทรกสารบัญไปยังตำแหน่งไหน
  3. เลือกประเภทของโพสต์ (Post Types) เลือกประเภทของโพสต์ที่เราอยากให้แสดงในสารบัญ

ลองนำมาใส่ในบทความกัน

let's try

ทีนี้เรามาเพิ่มสารบัญเข้าไปในบทความของเรากัน โดยเราสามารถใส่สารบัญให้บทความของเราได้อยู่ 2 วิธี ได้แก่

1. เพิ่มสารบัญจากหน้าตั้งค่าสารบัญ

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

add index by auto insert

จากภาพตัวอย่าง ในส่วนของ “การตั้งค่าทั่วไป (General)” สารบัญจะถูกสร้างเมื่อบทความของเรามีหัวข้ออยู่ 4 หัวข้อหรือมากกว่า อ๊ะ! อย่าลืม “เปิดใช้งาน (Enable)” “การแทรกสารบัญอัตโนมัติ (Auto Insert Table of Contents)” ในส่วน “แทรกอัตโนมัติ (Auto Insert)” ด้วยล่ะ

2. เพิ่มสารบัญในหน้าแก้ไขของ WordPress

ปลั๊กอินนี้สามารถใช้งานร่วมกับตัวแก้ไขเรื่องของเวิร์ดเพรสได้ด้วยนะ โดยจะอยู่ในหมวด “บล็อกทั่วไป (Common Block)” โดยสามารถไว้ส่วนไหนของบทความก็ได้ หรือจะไม่ใส่ที่บทความไหนก็ได้

add index by block

ในวิธีนี้เราไม่ต้องไปตั้งค่าในส่วน “ตั้งค่าการแทรกอัตโนมัติ (Auto Insert)” ส่วนที่เหลือก็ตั้งค่าตามปกติ


เท่านี้ก็ช่วยให้บทความของเราน่าอ่าน เป็นระเบียบ และประหยัดเวลาให้กับคนที่เข้ามาอ่านบทความของเราขึ้นเยอะเลยล่ะ