Customize Wordpress

การปรับแต่ง WordPress ด้วย Customize

Customize เป็นระบบการปรับแต่งค่าพื้นฐานของ WordPress โดยหน้าจอการทำงานจะเป็นแบบ Live Edit คือจะแสดงผลทันทีที่มีการแก้ไขค่าใดๆ ส่วนเมนูใน Customize นั้นจะไม่เท่ากัน ขึ้นอยู่กับธีมที่ใช้งานเป็นหลัก ซึ่งการที่จะเข้าไปหน้า Customize สามารถเข้าได้ 2 ทางคือ

1. ที่หลังบ้าน WordPress ให้คลิกที่ Appearance -> Customize

Customize,Wordpress,การปรับแต่ง,Live Edit,theme

2. จากหน้า Themes ให้คลิกที่ Customize จาก Theme ที่ Active อยู่

Customize

โดยจำนวนเมนูในหน้า Customize จะขึ้นอยู่กับ Theme ที่ใช้ สำหรับ Theme เริ่มต้นที่มาพร้อมกับ WordPress ก็คือ Twenty Twenty-One แต่โดยพื้นฐานแล้วเมนูที่จะต้องมีทุกธีมมีดังนี้

  • Site Identity
  • Menus
  • Widgets
  • Homepage Setting
  • Additional CSS
Customize

Site Identity เมนูนี้สำหรับจัดการเกี่ยวกับ Logo, Site Title, Tagline และ Site Icon

  • ใส่ Logo ของเว็บ รวมถึงยังสามารถใส่และแก้ไข Site Title และ Tagline ได้
  • Site Icon หรืออีกชื่อคือ Favicon คือสัญลักษณ์แทนเว็บไซต์ จะเป็นรูปภาพขนาดเล็กที่ปรากฏอยู่บน แท็บของเบราเซอร์ โดย Favicon นั้นมาจากคำสองคำ คือ faverite และ icon = favicon มีขนาด 16×16 Pixel ประโยชน์ของ Favicon ก็คือจะทำให้จดจำเว็บไซต์ได้ง่ายขึ้น เพราะเป็นรูปภาพที่เป็นสัญลักษณ์ ทำให้จดจำได้ง่ายกว่าเป็นข้อความ
Site Identity

Colors & Dark Mode เป็นเมนูที่มีเฉพาะเป็น Theme Twenty Twenty-One เท่านั้น มีไว้เพื่อใช้ปรับสีพื้นหลังของเว็บ

Colors & Dark Mode

และยังเปิด Dark Mode ได้ โดยเมื่อเปิด Dark Mode หน้าเว็บจะมีปุ่ม Dark Mode: Off/On ให้ผู้ใช้สามารถกดเปิด/ปิดได้เอง

Customize,Wordpress,การปรับแต่ง,Live Edit,theme

Background Image สำหรับเอาไว้ใส่ภาพพื้นหลังของเว็บ โดยจะมีผลกับทุกหน้าของเว็บ

Customize,Wordpress,การปรับแต่ง,Live Edit,theme

การใส่ภาพให้คลิกที่ Select image แล้วเลือกภาพที่มีอยู่ในเว็บหรือว่าอัพโหลดขึ้นไปใหม่ก็ได้

Background Image

Preset คือ เลือกรูปแบบของภาพพื้นหลังที่จะให้แสดงผล

Image Positon จัดตำแหน่งของภาพว่าจะให้ชิดซ้าย ขวา หรือตรงกลาง

Image Size เลือกขนาดของภาพที่จะให้แสดงผล

Repeat Background Image ติ๊กถูกคือให้แสดงภาพซ้ำๆต่อกันไม่รู้จบ

Scroll with Page ถ้าติ๊กถูกภาพพื้นหลังจะเลื่อนตามหน้าเว็บเมื่อมีการเลื่อน Scroll Mouse ถ้าเอาติ๊กถูกออก ภาพพื้นหลังจะไม่เลื่อนตาม Scroll Mouse

Menus

ที่ Menus เมื่อคลิกที่ Main Menu ซึ่งก็คือชื่อเมนูที่เราได้สร้างไว้ (ตรงนี้เราใช้เป็น Primary menu) ก็จะสามารถแก้ไข Main Menu ได้เลย

Menus

ที่ Menu Locations ถ้าคลิกที่ View All Locations จะแสดงตำแหน่งเมนูทั้งหมดที่เราสามารถเลือกว่าจะใช้เมนูใด โดยจะตำแหน่งเมนูจะมากหรือน้อยก็ขึ้นอยู่กับธีมที่ใช้ ซึ่งในตัวอย่างเป็นธีม Twenty Twenty-One จะตั้งเมนูได้สองตำแหน่งคือ Primary menu กับ Secondary menu

สามารถเข้าไปดูวิธีการการสร้างและจัดการเมนู WordPress ได้ที่นี่ Click Here

Widgets
Widgets
Widgets

สำหรับธีม Twenty Twenty-One นั้น Footer ที่เริ่มต้นมาให้ จะไม่สามารถแก้ไขได้ที่ Customize ถ้าต้องการสร้าง Footer เอง ก่อนอื่นเราจะต้องไปแก้ที่ Appearance -> Theme Editor และเลือกไฟล์ footer.php และลบโค้ดที่ไฮไลท์ด้านล่างนี้ออก

Customize,Wordpress,การปรับแต่ง,Live Edit,theme
*ก่อนลบออก ควรก๊อปปี้โค้ดทั้งหมดเก็บไว้ก่อน โดยลากก๊อปปี้ Code ทั้งหมดแล้วเซฟเก็บไว้ก่อน เผื่อมีปัญหาจะได้นำโค้ดเก่ากลับมาวางเหมือนเดิมได้

จากนั้นเราสามารถสร้าง Footer ได้เอง โดยใช้ Page Builder เช่น Elementor

Homepage Settings สำหรับไว้ตั้งค่าหน้าแรกและหน้าบทความ ซึ่งการตั้งค่าตรงนี้จะเป็นส่วนเดียวกับ Settings -> Reading -> Your homepade displays

  • Homepage : ใช้เลือกหน้า Page ที่จะใช้เป็นหน้าหลักเมื่อเข้ามาเว็บไซต์
  • Posts page : ใช้เลือกหน้า Page ที่จะเป็นหน้ารวมของบทความ
Homepage Settings

Excerpt Settings – สำหรับตั้งค่าการแสดงผลของหน้า Archive Pages

Customize,Wordpress,การปรับแต่ง,Live Edit,theme

Additional CSS – เอาไว้ใส่ Code CSS เวลาต้องการแก้ไขดีไซน์บางอย่างของเว็บที่ไม่สามารถทำที่หลังบ้านได้

Additional CSS

สรุป Customize เป็นการปรับแต่งค่าพื้นฐานต่างๆของ WordPress ที่มีความเกี่ยวข้องกับธีมที่ใช้ และด้วยระบบการทำงานแบบ Live Edit ก็ทำให้การแก้ไขปรับแต่งนั้นทำได้ง่ายมาก เพราะเมื่อเราแก้ไขอะไรไปก็ตามก็เห็นผลทันที ซึ่งตรงนี้ถือเป็นข้อดีคือถ้าสิ่งที่เราแก้ไขไม่เป็นไปตามเราต้องการ ก็แคไม่ต้องกด Publish การแก้ไขนั้นก็จะไม่มีผล

Scroll to Top