สวัสดีครับ เครื่องมือสำหรับ ตกแต่งเว็บไซต์ WordPress ที่สำคัญอย่างมากอีกตัวหนึ่งก็คือ เจ้า Sidebar และ Widget สิบปากว่า ไม่เท่าตาเห็น ~ ลองมาดูกันเลยดีกว่าครับ
- 1. เราเริ่มจากดูก่อนว่า เจ้า Sidebar และ Widget มันคืออะไร ?
- 2. Appearance -> Widgets
- 3. Available Widgets
- 4. Sidebar (Widget Area)
- 5. วิธีการลบ Widget
- 6. วิธีการเพิ่ม Widget
- 7. วิธีการปรับแต่งค่า Widget
- 8. วิธีการจัดเรียง Widget
- 9. ลองเล่น Widget ตัวอื่นบ้าง
- 10. Sidebar จะอยู่ที่ไหนก็ได้ในเว็บไซต์เรา
- 11. สรุป
เราเริ่มจากดูก่อนว่า เจ้า Sidebar และ Widget มันคืออะไร ?
ถ้าดูเว็บตัวอย่างที่ผมนำมาให้ดูนะครับ เจ้า Sidebar ก็คือ แถบด้านข้างทางด้านขวานี้นั่นเองครับ ทั้งแถบ เราจะเรียกว่า Sidebar ครับ หรือศัพท์ทางเทคนิคมักจะเรียกว่า Widget Area ครับ ส่วนกล่องต่างๆ เช่น กล่องค้นหา กล่องโพสล่าสุด กล่องคอมเมนต์ล่าสุด กล่องเหล่านี้เราจะเรียกได้ว่า Widget ครับ ซึ่งผู้ใช้งาน และ ผู้สร้างเว็บไซต์ ด้วย WordPress สามารถประยุกต์ใช้งานกล่องเหล่านี้ได้หลากหลายมากครับ เดี๋ยวเรามาดูกันต่อได้เลยครับ
Appearance -> Widgets
เมื่อเราเข้ามาอยู่ที่ระบบหลังบ้านของ WordPress แล้ว ให้เข้าไปที่เมนู Appearance จากนั้น ตามด้วย Widgets ครับ เราก็จะเข้าสู่หน้าการจัดการ Widget แล้วนะครับ
Available Widgets
ทางด้านซ้ายมือก็คือ Widget ที่มีให้ใช้งานในระบบของเราครับ
Sidebar (Widget Area)
ส่วนทางด้านขวามือ ก็จะมีกล่อง Sidebar หรือ Widget Area ตามที่ธีมกำหนดไว้ครับ ที่ผมบอกว่าธีมกำหนด หมายถึง แต่ละธีมก็จะมีจำนวน Sidebar ที่ไม่เท่ากัน และ ตั้งชื่อ Sidebar ต่างกันครับ
อย่างเช่น กล่องแรกของผมชื่อ Main Sidebar พอเรากดดูก็จะเห็นมีกล่องย่อยๆอยู่ใน Sidebar นี้ สิ่งนี้เองครับที่เรียกว่า Widget เดี๋ยวผมจะลอง เปรียบเทียบให้ดูนะครับว่า ตรงกันกับหน้าบ้านของเราอย่างไร
เราแวะมาที่หน้าบ้านของเราสักครู่ครับ ที่หน้าบ้านของเราจะเห็นว่ามีกล่อง Search กล่อง Recent Posts และ กล่อง Recent Comments อยู่ครับ ถ้าเราลองกลับไปที่หลังบ้าน ดูที่กล่อง Main Sidebar จะพบว่า มีกล่องแบบเดียวกันเลยที่หลังบ้านครับ
วิธีการลบ Widget
ผมจะเริ่มจากสิ่งที่ง่ายที่สุดก่อนครับ นั่นก็คือวิธีการลบ Widget นั่นเองครับ ให้เราไปที่กล่อง Sidebar ที่มี Widget อยู่ครับ ที่หน้าจอของผมจะเป็นกล่อง Main Sidebar นั่นเองครับ
วิธีการลบ ให้เราเปิดกล่อง Widget ออกมาครับ แล้วคลิกที่ Link Delete ได้เลยครับ เมื่อทำการลบเรียบร้อยแล้วให้เราไปที่หน้าเว็บไซต์ของเราครับ กด Refresh 1 ครั้ง แล้วดูผลครับว่า เจ้ากล่องที่เราลบหายไปหรือไม่
ตอนนี้เจ้ากล่องที่เราลบก็หายไปเรียบร้อยแล้วนะครับ
วิธีการเพิ่ม Widget
ให้ไปเลือก Widget ที่ต้องการ แล้วคลิกที่ Widget นั้นได้เลย จากนั้นให้เราเลือกชื่อ Sidebar ที่ต้องการเพิ่ม Widget ตัวนี้เข้าไป แล้วกดปุ่ม Add Widget ได้เลยครับ เมื่อ Add ไปแล้ว WordPress ก็จะให้เราปรับแต่งค่า Widget ครับ
วิธีการปรับแต่งค่า Widget
สำหรับ วิธีปรับแต่งค่า Widget ถ้า Widget นั้นปิดอยู่ก็ให้เราเปิด Widget นั้นขึ้นมาครับ แล้วจากนั้น ให้เราใส่ค่าต่างๆ ลงในแบบฟอร์มได้เลยครับ ตัวอย่างของเราเป็น Text Widget ครับ ใช้สำหรับแสดงข้อความอะไรก็ได้ขึ้นมาบนหน้าจอครับ เรามาลองใส่ข้อมูลดูนะครับ
เมื่อใส่ข้อมูลเสร็จแล้วก็อย่าลืมกด Save นะครับ แล้วหลังจากนั้นให้เราไปดูที่หน้าเว็บของเราครับว่าเจ้า Widget มาหรือไม่ครับ
วิธีการจัดเรียง Widget
วิธีการจัดเรียง Widget เราก็สามารถลาก Widget ขึ้นลงได้เลยตามสบายครับ แต่ตรงนี้ ไม่ต้องกด Save ครับ เพราะ WordPress จะ Save ให้เราโดยอัตโนมัติครับ
เมื่อเราจัดเรียงเป็นที่พอใจแล้วก็มาดูที่หน้าเว็บไซต์ เพื่อดูความเปลี่ยนแปลงอีกทีครับ
ลองเล่น Widget ตัวอื่นบ้าง
อย่างเช่น Recent Posts ก็จะมีลูกเล่นอย่างเช่น จำนวนโพสที่ต้องการจะแสดง และ ให้แสดงวันที่หรือไม่ เราสามารถทดสอบดูได้ครับ จากนั้นก็ไปดูความเปลี่ยนแปลงที่หน้าเว็บไซต์อีกทีครับ
Sidebar จะอยู่ที่ไหนก็ได้ในเว็บไซต์เรา
อย่างที่ผมได้อธิบายไว้ในตอนต้นคลิบนะครับว่า เจ้า Sidebar หรือ Widget Area นี้สามารถมีได้หลายอันครับ และ ตำแหน่งของมันก็ขึ้นอยู่กับ ธีมที่เราใช้ครับว่า เขียนโปรแกรมมาอย่างไร เรา Sidebar ไว้ที่ไหน
เดี๋ยวผมจะลองเพิ่ม Widget แบบง่ายๆที่ตำแหน่งอื่นๆ ดูครับ ผมจะเพิ่ม Recent Posts Widget เข้าไปไว้ที่ Footer Sidebar Left นะครับ โดยการทำแบบเดิมเลย แล้วก็เลือกให้แสดง 3 Post ก็พอ จากนั้นไปหน้าเว็บของเราเพื่อดูผลครับ
เมื่อเรา Refresh หน้าเว็บของเราแล้ว ไม่เห็น Widget ล่าสุดที่เพิ่มไปครับ นั่นก็เพราะว่า ตำแหน่งของ Sidebar ที่ชื่อ Footer Sidebar Left อยู่ด้านล่างนั่นเองครับ
เมื่อเราเลื่อนลงมาด้านล่าง เราก็จะเห็นแล้วครับว่า Widget ของเรานั้น โผล่ออกมาให้เห็นตามที่เราใส่ไว้แล้วครับ
สรุป
สำหรับการใช้งาน Widget และ Sidebar นี้นะครับ มักจะใช้กับส่วนที่ ไม่ได้เปลี่ยนโครงสร้างบ่อยๆในเว็บนะครับ อย่างเช่น ด้านข้างและด้านล่างของเว็บไซต์ เป็นต้นครับ
ຂ້າພະເຈົ້າເປັນຄົນລາວສົນໃຈໃນການສວນຂອງອ້າຍຫຼາຍ ຢາກຖາມວ່າ ໃຊ້ template ຫຍັງ
ขอบคุณสำหรับ comments ครับ แต่อ่านไม่ออกครับผม ขอพิมพ์ไทย หรืออังกฤษ หน่อยครับ
ขอรบกวนสอบถามครับ ตอนนี้ปุ่มค้นหา ไม่สามารถค้นหาอะไรในเว็บเจอเลยลองเป็น วิตเจตหรือลงปั้กอินตัวอื่นก้อไม่หาย ตอนแรกไม่เปน (7 them) ,woo commerce
ต้องดูว่า มี plugin อะไรในระบบบ้างครับ มันอาจจะทับซ้อนกันอยู่ครับ อาจจะลอง deactivate plugin ต้องสงสับออกก่อนครับ แล้วลองทดสอบดู
สอบถามนะครับ มีฟังก์ชันที่ทำให้ ตัว sidebar มันเลื่อนขึ้น-ลงได้ไหมครับ
เวลาเราอ่าน text หน้าที่มันยาวๆ อยากให้ sidebar เลื่อนตามลงมาด้วย จะได้ไม่ต้องเสียเวลาเลื่อนขึ้นไปคลิกน่ะครับ
ขอบคุณครับ
เบื้องต้น ใช้ Plugin Fixed Widget ได้ครับ ซึ่งผมมีวีดีโอแล้ว กำลังตัดต่ออยู่ครับ สัปดาห์นี้รับชมได้ครับ 🙂
ขอบคุณครับ จะรอชมนะครับ
ว่าแต่รบกวนทำคลิปสอนวิธีนำ wordpress จาก localhost ลง webhosting จริงๆให้หน่อยได้มั้ยครับ แล้วอยากทราบว่าวิธีัมีแบบฟรีบ้างไหม
ขอบคุณครับ
มีวีดีโอเรื่องการติดตั้ง และ การย้ายเว็บไซต์อยู่แล้วครับผม
ทำไมของหนู widget ข้างๆ เลื่อนลงมาอยู่ข้างล่างคะ
เป็นที่ธีมเขาทำมาครับ 🙂
ขอถามหน่อยครับ Widgets ใช่เพื่ออะไรครับพี่?
เอาไว้วางของที่เราต้องการ ในบางหน้าที่มี Sidebar ครับ
สวีสดีครับ ผมอยากได้ไอดีไลน์หรือเฟจของพี่ได้ไม่ครับ
ผมชอบการสอนของพี่มากเลย
line @palamike ครับ มีในเว็บไซต์อยู่แล้วครับผม 🙂