วิธีเพิ่ม jQuery FAQ Accordion ใน WordPress (3 วิธี)

การจัดระเบียบเนื้อหาด้วย FAQ Accordion ช่วยให้เว็บไซต์ WordPress ของคุณดูเป็นระเบียบและใช้งานง่ายขึ้น โดยการแสดงคำถามและคำตอบในรูปแบบที่สามารถย่อ-ขยายได้ ซึ่งช่วยให้ผู้เข้าชมค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว

การใช้ jQuery ในการสร้าง FAQ Accordion ช่วยเพิ่มความโต้ตอบให้กับเว็บไซต์ และทำให้การนำทางง่ายขึ้น

ในบทความนี้ เราจะแนะนำ 3 วิธีง่ายๆ ในการเพิ่ม jQuery FAQ Accordion ใน WordPress ของคุณ

ทำไมต้องใช้ jQuery FAQ Accordion ใน WordPress?

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

jQuery เป็นไลบรารี JavaScript ที่ช่วยให้สามารถเพิ่มลูกเล่นแบบโต้ตอบได้ง่าย เช่น แอนิเมชัน เมนูแบบเลื่อนลง และปุ่มคลิก โดยไม่ต้องเขียนโค้ดที่ซับซ้อน

การใช้ jQuery FAQ Accordion จึงช่วยให้เว็บไซต์ของคุณเป็นระเบียบ ใช้งานง่าย และยังช่วยเรื่อง SEO เพราะทำให้เนื้อหามีโครงสร้างที่ดีขึ้น ซึ่งส่งผลดีต่อการจัดอันดับในเครื่องมือค้นหา

วิธีที่ 1: ใช้ WPCode (แนะนำ)

หากคุณต้องการวิธีที่ง่ายและปลอดภัยที่สุดในการเพิ่ม jQuery FAQ Accordion วิธีนี้เหมาะกับคุณ

ขั้นตอน:

• ติดตั้งและเปิดใช้งาน WPCode – ดาวน์โหลดและติดตั้งปลั๊กอิน WPCode จาก WordPress Plugin Directory
• เพิ่มโค้ดสำเร็จรูป – ไปที่ Code Snippets > + Add Snippet และค้นหา "FAQ Accordion"
• แก้ไขคำถามและคำตอบ – กรอกคำถามและคำตอบที่ต้องการในโค้ด
• เปิดใช้งานโค้ด – สลับสวิตช์ไปที่ "Active" และคลิก "Update"
• เพิ่ม WPCode Block ในหน้าเว็บไซต์ – ไปที่หน้าหรือโพสต์ที่ต้องการ เพิ่ม "WPCode" Block แล้วเลือกโค้ด FAQ Accordion ที่สร้างไว้
• บันทึกการตั้งค่า – คลิก "Update" หรือ "Publish" และดูผลลัพธ์บนหน้าเว็บของคุณ

วิธีที่ 2: ใช้ปลั๊กอินฟรี (ง่ายที่สุด)

หากคุณไม่ต้องการเขียนโค้ด วิธีนี้เป็นตัวเลือกที่ดี

ขั้นตอน:

• ติดตั้งและเปิดใช้งานปลั๊กอิน Advanced Accordion Gutenberg Block
• เพิ่มบล็อก Accordion – เปิดหน้าหรือโพสต์ คลิกปุ่ม "+ Add Block" และเลือก "Separate Accordion"
• เพิ่มคำถามและคำตอบ – พิมพ์คำถามและคำตอบที่ต้องการ
• เปิดใช้งาน FAQ Schema – ขยายแท็บ "FAQ Schema" และเปิดใช้งาน
• ปรับแต่งสไตล์ – แก้ไขสีพื้นหลัง สีข้อความ และไอคอนตามต้องการ
• บันทึกการตั้งค่า – คลิก "Update" หรือ "Publish" แล้วดูผลลัพธ์

วิธีที่ 3: ใช้ SeedProd (สำหรับการสร้างหน้าแบบกำหนดเอง)

หากคุณต้องการเพิ่ม FAQ Accordion ในหน้าที่ออกแบบเอง วิธีนี้เหมาะกับคุณ

ขั้นตอน:

• ติดตั้งและเปิดใช้งาน SeedProd
• สร้างหน้าใหม่ – ไปที่ SeedProd > Landing Pages แล้วคลิก "Add New Landing Page"
• เลือกเทมเพลต และตั้งค่าชื่อหน้า URL
• เพิ่มบล็อก Accordion – ใช้ตัวแก้ไขแบบลากและวางของ SeedProd เพิ่ม "Accordion" Block ลงในหน้าของคุณ
• เพิ่มคำถามและคำตอบ – กรอกข้อมูล FAQ
• ปรับแต่งดีไซน์ – แก้ไขขนาดตัวอักษร สี และระยะห่างตามต้องการ
• บันทึกและเผยแพร่ – คลิก "Save" และ "Publish"

โบนัส: เพิ่ม FAQ Schema เพื่อปรับปรุง SEO

การเพิ่ม FAQ Schema ช่วยให้คำถามและคำตอบของคุณปรากฏบน Google Search และช่วยเพิ่มอัตราการคลิก (CTR)

แนะนำให้ใช้ปลั๊กอิน All in One SEO (AIOSEO):

• ติดตั้งและเปิดใช้งาน AIOSEO
• เปิดหน้า FAQ ใน Block Editor
• เปิด AIOSEO Settings > Schema > Generate Schema
• เลือก FAQ Schema และกรอกคำถาม-คำตอบ
• บันทึกการตั้งค่า

การเพิ่ม jQuery FAQ Accordion ใน WordPress ช่วยให้เว็บไซต์ของคุณดูเป็นระเบียบ ค้นหาข้อมูลได้ง่ายขึ้น และยังช่วยเพิ่มประสิทธิภาพ SEO วิธีที่คุณเลือกใช้ขึ้นอยู่กับความต้องการของคุณ:

• WPCode – สำหรับผู้ที่ต้องการโค้ดสำเร็จรูป
• ปลั๊กอินฟรี – สำหรับผู้ที่ต้องการความง่าย
• SeedProd – สำหรับการออกแบบหน้าที่กำหนดเอง

ลองใช้วิธีที่เหมาะกับคุณและปรับแต่ง FAQ Accordion ให้เข้ากับเว็บไซต์ของคุณ