ใช้งาน Sidebar Footer และ Widget

อัพเดทเนื้อ 23/07/64

WordPress เวอร์ชั่น 5.8 เป็นต้นไป มีการปรับเปลี่ยนรูปแบบการใช้งาน Widget ทำให้หน้าตาไม่เหมือนตามที่สอนในบทเรียน

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

วิธีการติดตั้งปลั๊กอิน Classic Widgets

เข้าสู่หลังบ้านเว็บไปที่ Plugin > Add new > ค้นหาชื่อปลั๊กอิน Classic Widgets > จากนั้นกด install และกด Activate เปิดใช้งานปลั๊กอินให้เรียบร้อย แล้วกลับเข้าดูคลิปสอนต่อได้เลยครับ

ทำความรู้จัก Sidebar

Sidebar คือ แถบด้านข้างที่มักจะแสดงร่วมกับหน้า Post หรือหน้า Product เพื่อใช้เป็นช่องทางในการทำการตลาด โดยมากมักนิยมจะติดโฆษณา, หมวดหมู่, หรือว่างพวกสินค้าขายดี เพื่อพาคนที่เข้ามาบทความของเรา เห็นโฆษณาหรือโปรโมชั่นพิเศษ และช่วยพาพวกเขาไปหน้าอื่น ๆ หรือสิ่งที่เขาต้องการได้ง่ายขึ้นนั้นเอง

ลองดูตัวอย่าง sidebar ของเว็บต่าง ๆ เหล่านี้ครับ

sidebar

ลองเข้าไปดู sidebar ตัวอย่างจากเว็บจริง ๆ ด้านบนได้ที่ miraclas.com

ส่วนเว็บ WordPress ที่เรากำลังจะสร้าง ลองคลิกไปที่บทความดูครับ คุณจะเป็นการแสดง sidebar ที่เป็นค่า default ที่มากับ WordPress แบบนี้

sidebar คือ

คราวนี้หากเราต้องการจะแก้ไข Sidebar เราจะไปแก้ไขที่ไหนดี? ลองดูรูปด้านล่างประกอบด้วยนะ

sidebar-stugture

จากรูปถ้าเราสังเกตดี จะเห็นได้ว่า sidebar และ footer จะมีบางสิ่งที่เป็นองค์ประกอบเหมือนกัน นั้นก็คือ Widget นั้นหมายความว่า หากเราต้องการแก้ไขเนื้อหาที่อยู่บน sidebar กับ footer เราต้องไปแก้ไขที่ widget นั้นเอง ดูวิธีการใช้งาน Widget ที่หัวข้อถัดไปได้เลยครับ

การใช้งาน widget

Widget คือ ชิ้นส่วนรูปแบบต่างๆ เช่น text widget (แสดงข้อความ), image widget (แสดงรูปภาพ), product widget (แสดงสินค้า), recent post widget (แสดงบทความล่าสุด) ฯลฯ ที่จะไปแสดงผลในส่วนของ Sidebar กับ footer นั้นเอง

การเปลี่ยน widget ที่ sidebar

กลับไปหลังบ้าน > ไปที่ Appearance > คลิก Widget เราจะพบการแสดงผลหน้าตาแบบนี้

widget

Widget คือ ชิ้นส่วนต่างๆ ที่แสดงอยู่ใน 2 แถว ด้านซ้ายมือ ส่วน 2 แถวด้านขวามือ เราเรียกว่าช่องที่เก็บ widget เพื่อให้แสดงผลที่หน้าเว็บ

ขั้นตอนการใช้งาน ให้เราลบ widget ที่อยู่ในช่อง Blog sidebar ออกให้หมดก่อน ให้คลิกที่ลูกศร dropdown > ให้คลิก delete เพื่อลบ widget

วิดเจ็ด

ให้เราไล่ลบ widget ออกไปให้หมดเลยครับ

จากนั้นเราก็ออกแบบว่าตรง sidebar เราอยากให้มันแสดงอะไรบ้าง สมมุตผมอยากให้แสดงรูปภาพ Promotion สินค้า กับ พวกบทความล่าสุด

วิธีการใช้งาน Widget ก็คือให้เราลาก ชิ้นส่วน widget ที่อยู่ฝั่งซ้ายมือ ลากมาวางที่ช่อง blog sidebar ในที่นี้ ผมขอลาก image widget กับ recent post ไปใส่ครับ ที่ image widget ใส่รูปภาพเข้าไปให้เรียบร้อยด้วยนะครับ

จากนั้นลองกลับไปดูที่ post หน้าบ้านเว็บของเราครับ เราจะเห็นว่าที่ sidebar มีการแสดง widget ที่เราเรียกใช้งาน มาเรียบร้อยแล้ว

ทำความรู้จัก Footer

Footer คือ ส่วนที่แสดงอยู่ด้านล่างของเว็บ และแสดงผลเหมือนกันทุกหน้า ทั้งหน้าที่ page และเป็น post การแก้ไขข้อมูลส่วน Footer เราจะแก้ไขผ่าน Widget เช่นเดียวกับการแก้ไขส่วนที่เป็น sidebar นั้นเอง

footer