ทำเนื้อหาใน WordPress ให้ยืดหดได้ ด้วย Accordion !!

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

ติดตั้ง WordPress Plugin สำหรับทำ Accordion

ให้เราไปที่เมนู Plugins แล้วก็ Add New กันได้เลยครับ แล้วหลังจากนั้น ให้เราค้นหาคำว่า Accordion กันตรงๆได้เลยครับ

เราจะเจอ Plugins ที่ชื่อว่า Accordion ครับ

https://wordpress.org/plugins/accordions/

ให้เราทำการติดตั้ง และ เปิดใช้งาน Plugins นี้ได้เลยครับ

เริ่มต้นใช้งาน WordPress Accordion

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

ให้เราทำการ New Accordion ขึ้นมาเลยครับ แล้วตั้งชื่อกันก่อนครับ จากนั้นให้เราไปกด Publish กันก่อน 1 ครั้งครับ เพื่อทำการ Save…

ตอนนี้หลายคนอาจจะ งง ครับ เพราะว่า ไม่รู้ไปทำต่อตรงไหน ตรงนี้ให้เราไปที่ Tab Content ได้เลยครับ ที่หน้านี้จะมีตัวอย่าง Accordion ให้ 1 อันครับ เราสามารถเพิ่มกี่อันก็ได้ครับ สมมุติว่า เดี๋ยวผมสร้างสัก 3 อันก็ได้ครับ เราก็กด Add เพิ่มไปสัก 3 อันครับ

เพิ่มเนื้อหาใน Accordion

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

ตรงเนื้อหาของ Accordion อันนั้นเราสามารถที่จะใส่เป็น ข้อความ หรือ รูปภาพก็ได้ตามที่ WordPress Editor ใส่ได้เลยครับ

ใส่เนื้อหาเสร็จทุกอันแล้วก็ทำการจัดเก็บได้เลยครับ จากนั้นมันก็จะมาที่หน้า Shortcode ให้เรา Copy Shortcode อันที่สองครับ ที่มีคำว่า Pick Plugins เพื่อเลี่ยง Conflict หรือการชนกันกับ Plugins อื่นนั่นเองครับ

เอา Accordion ไปวางในหน้า

เมื่อเรา Copy Shortcode เอาไว้แล้วนะครับ ให้เราไปที่หน้า หรือ บทความที่เราต้องการครับ แล้ววาง Shortcode ลงไปครับ แล้วหลังจากนั้นให้เราลองไปดูผลที่หน้าบ้านกันครับ

การปรับแต่งที่น่าสนใจใน Accordion

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

แล้วเราจะเห็น Tab Accordions Options

Options ที่น่าสนใจคือ…

1. Collapsible เป็นตัวเลือกที่จะบ่งบอกว่า เราสามารถคลิกยุบ Accordion ได้ไหม ถ้าเลือกแล้วจะยุบไม่ได้ครับ ต้องไปเลือกตัวอื่นแทน
2. Height อันนี้คือความสูงของ Accordion ให้เราเลือก Content ไว้ครับ เพราะถ้าเลือก Fill มันจะไม่เป็นตาม Content ครับ
3. Activate Event ตรงนี้หมายความว่า จะให้คลิก หรือว่า เอาเมาส์วางเพื่อเปิด Accordion แต่อันนี้ ณ ตอนที่บันทึกวีดีโอผมลองแล้วครับ เลือกเป็น Mouse Over แล้วก็ต้องคลิกอยู่ดีครับ

เอาล่ะลองเท่านี้ก่อนครับ แล้วไปดูผลที่หน้าเว็บไซต์กัน

ปรับแต่งสีสัน และ Icon

ให้เราไปที่ Tab Style ครับ ให้เราเลือก Theme กันก่อนครับ แล้วลองไปดูผลเลย ถ้าเลือกเรียบร้อยแล้ว ก็จัดการกด Update แล้วไปดูผลที่หน้าบ้านกันได้เลยครับ

นอกจากนั้น เรายังสามารถเลือก…

1. การจัดเรียงของตัวอักษร ว่าจะจัด ซ้าย ขวา หรือ กลาง ครับ
2. เลือกสีของพื้นหลังโดยรวม
3. เลือกภาพพื้นหลังโดยรวม
4. เลือก Icon ตอนเปิด และ เลือก Icon ตอนปิด โดยเราสามารถหาชื่อ Icon ได้จาก Font Icon Awesome เว็บไซต์ครับ แต่ก็ต้องลองดูครับเพราะว่า Icon บางตัวก็มีใน Plugin นี้บางตัวก็ไม่มีครับ
5. เลือกสีของ Icon
6. เลือกสีของส่วนหัว และ สีของมันตอนที่เลือก
7. เลือกสีของตัวอักษร ทั้งส่วนของเนื้อหา และ ส่วนหัว

ลองปรับแต่งกันแล้วก็ลองไปดูผลกันที่หน้าเว็บไซต์ด้วยนะครับ 🙂

แปลงร่างจาก Accordions เป็น Tabs

นอกจากนี้ ถ้าเราอยากจะแปลงร่างจาก Accordions ใน Tab ก็ทำได้ด้วยใน Plugin เดียวกันเลยครับ วิธีก็ง่ายๆเลยครับ ให้เราไปที่ Tab Shortcode แล้วเลือกไปที่ Tab Shortcode ครับ จากนั้นเอาไปวางแทนในหน้าที่เราต้องการครับ

สรุป

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