Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 10: การใช้งาน Widgets ใน WordPress

1. Widgets คืออะไร?

Widgets เป็นองค์ประกอบสำเร็จรูปที่ช่วยเพิ่มฟีเจอร์และการแสดงผลในพื้นที่เฉพาะของเว็บไซต์ เช่น Sidebar, Footer หรือพื้นที่ Widget อื่น ๆ ที่ธีมรองรับ โดยสามารถเพิ่ม Widgets ได้ง่าย ๆ ผ่านแผงควบคุม WordPress


2. การเพิ่ม Widgets

2.1 ขั้นตอนการเพิ่ม Widgets

  1. ไปที่ “Appearance” > “Widgets”
  2. เลือกพื้นที่ Widget ที่ต้องการเพิ่ม เช่น Sidebar หรือ Footer
  3. ลาก Widgets ที่ต้องการจากรายการด้านซ้ายไปยังพื้นที่ที่เลือก

2.2 การใช้ Widget Block Editor (ตั้งแต่ WordPress 5.8 เป็นต้นมา)

  • ใช้ Widget Block Editor เพื่อเพิ่มและปรับแต่ง Block ต่าง ๆ ได้แบบเรียลไทม์
  • คลิกไอคอน “+” เพื่อเลือก Block เช่น Paragraph, Image หรือ Custom HTML

3. ประเภทของ Widgets

3.1 Widgets พื้นฐาน

  • Search: เพิ่มช่องค้นหาในเว็บไซต์
  • Recent Posts: แสดงรายการโพสต์ล่าสุด
  • Categories: แสดงหมวดหมู่เนื้อหา
  • Archives: แสดงลิงก์ไปยังเนื้อหาเก่าในรูปแบบเดือนหรือปี

3.2 Widgets จากปลั๊กอิน

  • Social Media Widgets: แสดงลิงก์ไปยังโปรไฟล์โซเชียลมีเดีย
  • Contact Form Widget: เพิ่มฟอร์มติดต่อใน Sidebar หรือ Footer
  • E-commerce Widgets: แสดงสินค้าหรือหมวดหมู่สินค้าในร้านค้าออนไลน์

4. การปรับแต่ง Widgets

4.1 การแก้ไขเนื้อหาใน Widgets

  1. คลิกที่ Widget ในพื้นที่ที่เพิ่มแล้ว
  2. แก้ไขเนื้อหาหรือการตั้งค่า เช่น ชื่อ Title และการแสดงผล
  3. คลิก “Save” เพื่อบันทึกการเปลี่ยนแปลง

4.2 การลบ Widgets

  • คลิก “Remove” หรือ “Delete” ใน Widget ที่ไม่ต้องการใช้งานอีก

4.3 การปรับแต่งด้วย Custom HTML

  • ใช้ Widget “Custom HTML” เพื่อเพิ่มโค้ด HTML ที่ปรับแต่งเอง

5. การจัดการ Widgets ใน Customizer

ขั้นตอนการจัดการ Widgets ใน Customizer

  1. ไปที่ “Appearance” > “Customize”
  2. เลือก “Widgets”
  3. เลือกพื้นที่ที่ต้องการปรับแต่ง
  4. เพิ่ม, ลบ หรือแก้ไข Widgets แบบเรียลไทม์
  5. คลิก “Publish” เพื่อบันทึกการเปลี่ยนแปลง

6. การใช้ Widgets ในธีมที่รองรับ

6.1 ตรวจสอบพื้นที่ Widgets ในธีม

  • ไปที่ “Appearance” > “Widgets” เพื่อดูพื้นที่ที่ธีมรองรับ เช่น Sidebar, Footer หรือ Header

6.2 การใช้ปลั๊กอินเพื่อเพิ่มพื้นที่ Widgets

  • หากธีมไม่รองรับพื้นที่ที่ต้องการ สามารถใช้ปลั๊กอิน เช่น “Widget Options” เพื่อเพิ่มพื้นที่ Widgets ได้

7. เคล็ดลับในการใช้งาน Widgets

  1. ใช้ Widgets ที่เกี่ยวข้องกับเนื้อหาในแต่ละหน้าเพื่อเพิ่มประสิทธิภาพการใช้งาน
  2. หลีกเลี่ยงการใช้ Widgets มากเกินไปในหน้าเดียวเพื่อไม่ให้เว็บไซต์ดูรก
  3. ทดสอบการแสดงผลบนอุปกรณ์ต่าง ๆ เพื่อให้แน่ใจว่า Widgets ทำงานได้ดีในทุกขนาดหน้าจอ

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการเพิ่ม ปรับแต่ง และจัดการ Widgets ใน WordPress ซึ่งช่วยเพิ่มฟีเจอร์และปรับปรุงประสบการณ์การใช้งานเว็บไซต์ของคุณได้อย่างมาก ในบทถัดไป คุณจะได้เรียนรู้เกี่ยวกับการจัดการสื่อ (Media) เพื่อเพิ่มรูปภาพและไฟล์ต่าง ๆ ในเว็บไซต์ของคุณ!