แต่ง WordPress ให้สวยด้วย Sidebar และ Widget !!

แต่ง Wordpress ให้สวยด้วย Sidebar และ Widget !!
https://www.youtube.com/embed/SciMVynYsd0?feature=oembed&autoplay=1

สวัสดีครับ เครื่องมือสำหรับ ตกแต่งเว็บไซต์ WordPress ที่สำคัญอย่างมากอีกตัวหนึ่งก็คือ เจ้า Sidebar และ Widget สิบปากว่า ไม่เท่าตาเห็น ~ ลองมาดูกันเลยดีกว่าครับ

เราเริ่มจากดูก่อนว่า เจ้า 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 นี้นะครับ มักจะใช้กับส่วนที่ ไม่ได้เปลี่ยนโครงสร้างบ่อยๆในเว็บนะครับ อย่างเช่น ด้านข้างและด้านล่างของเว็บไซต์ เป็นต้นครับ

ข่าวประชาสัมพันธ์

ถ้ากำลังมองหาคอร์สเรียน แบบสอนกันสดๆ ไม่ต้องเสียเวลาเรียนรู้ และ ทดลองเอง พิจารณาคอร์สเรียนสด ตรงนี้ได้เลยครับ

14 thoughts on “แต่ง WordPress ให้สวยด้วย Sidebar และ Widget !!

    • พลากร สอนสร้างเว็บ says:

      ขอบคุณสำหรับ comments ครับ แต่อ่านไม่ออกครับผม ขอพิมพ์ไทย หรืออังกฤษ หน่อยครับ

  1. Wicha says:

    ขอรบกวนสอบถามครับ ตอนนี้ปุ่มค้นหา ไม่สามารถค้นหาอะไรในเว็บเจอเลยลองเป็น วิตเจตหรือลงปั้กอินตัวอื่นก้อไม่หาย ตอนแรกไม่เปน (7 them) ,woo commerce

    • พลากร สอนสร้างเว็บ says:

      ต้องดูว่า มี plugin อะไรในระบบบ้างครับ มันอาจจะทับซ้อนกันอยู่ครับ อาจจะลอง deactivate plugin ต้องสงสับออกก่อนครับ แล้วลองทดสอบดู

  2. จิรภัทร says:

    สอบถามนะครับ มีฟังก์ชันที่ทำให้ ตัว sidebar มันเลื่อนขึ้น-ลงได้ไหมครับ
    เวลาเราอ่าน text หน้าที่มันยาวๆ อยากให้ sidebar เลื่อนตามลงมาด้วย จะได้ไม่ต้องเสียเวลาเลื่อนขึ้นไปคลิกน่ะครับ

    ขอบคุณครับ

    • พลากร สอนสร้างเว็บ says:

      เบื้องต้น ใช้ Plugin Fixed Widget ได้ครับ ซึ่งผมมีวีดีโอแล้ว กำลังตัดต่ออยู่ครับ สัปดาห์นี้รับชมได้ครับ 🙂

      • จิรภัทร says:

        ขอบคุณครับ จะรอชมนะครับ
        ว่าแต่รบกวนทำคลิปสอนวิธีนำ wordpress จาก localhost ลง webhosting จริงๆให้หน่อยได้มั้ยครับ แล้วอยากทราบว่าวิธีัมีแบบฟรีบ้างไหม
        ขอบคุณครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *