วิธีใช้ Site Editor เปลี่ยนสี ฟอนต์ และสไตล์ทั้งเว็บไซต์ WordPress

Site Editor ใช้ปรับสี ฟอนต์ และรูปแบบโดยรวมของเว็บไซต์ WordPress ที่ใช้ธีมแบบบล็อกได้จากจุดเดียว เริ่มจากไปที่ รูปแบบเว็บ > ตัวแก้ไข แล้วเลือก Styles เพื่อปรับสไตล์ทั้งเว็บไซต์ หรือเลือกปรับเฉพาะบล็อก เช่น หัวข้อหรือปุ่ม จากนั้นตรวจตัวอย่างและกดบันทึก

ถ้าไม่พบเมนู ตัวแก้ไข ธีมที่ใช้อาจเป็นธีมแบบคลาสสิก ซึ่งปรับผ่าน Customizer หรือหน้าตั้งค่าของธีมแทน

❶ Site Editor และ Styles ใช้ทำอะไร

Site Editor เป็นเครื่องมือแก้ไขเว็บไซต์สำหรับธีมแบบบล็อก ส่วน Styles ใช้กำหนดรูปลักษณ์โดยรวม เช่น สี ฟอนต์ และระยะห่างที่ใช้กับเว็บไซต์หรือบล็อกบางประเภท

การแก้สไตล์โดยรวมช่วยให้เว็บไซต์ดูเป็นชุดเดียวกัน โดยไม่ต้องเข้าไปแก้แต่ละหน้าแยกกันทุกครั้ง

① สไตล์ทั้งเว็บไซต์

การตั้งค่าแบบรวมอาจมีผลกับหลายหน้า เช่น สีข้อความ ฟอนต์ของหัวข้อ หรือพื้นหลังของเว็บไซต์ ขอบเขตที่ใช้ได้ขึ้นอยู่กับธีมและตัวเลือกที่เปิดให้ปรับ

② สไตล์เฉพาะบล็อก

นอกจากตั้งค่าภาพรวมแล้ว ยังเลือกปรับบล็อกบางชนิดได้ เช่น เปลี่ยนสีปุ่มหรือขนาดตัวอักษรของหัวข้อ โดยไม่จำเป็นต้องเปลี่ยนรูปแบบของบล็อกทุกชนิด

❷ วิธีเปิด Site Editor

① ตรวจว่าธีมรองรับ Site Editor

1. เข้าสู่ระบบหน้าแอดมิน WordPress
2. ไปที่ รูปแบบเว็บ
3. หากพบเมนู ตัวแก้ไข หรือ Editor ให้เลือกเพื่อเปิด Site Editor
4. หากไม่พบ ให้ตรวจว่าธีมที่ใช้งานเป็นธีมแบบบล็อกหรือไม่

ธีมแบบคลาสสิกส่วนใหญ่ใช้ Customizer และหน้าตั้งค่าของธีม ไม่ได้ใช้ Site Editor สำหรับแก้ทั้งเว็บไซต์ในลักษณะเดียวกัน

② เปิด Styles

เมื่อเข้า Site Editor แล้ว เลือก Styles หรือไอคอนรูปแบบที่แสดงในหน้าจอ จากนั้นจึงเลือกปรับสไตล์โดยรวม หรือเข้าไปตั้งค่าเฉพาะองค์ประกอบ

❸ วิธีเปลี่ยนสีทั้งเว็บไซต์

การเลือกชุดสีที่สอดคล้องกันช่วยให้ปุ่ม ลิงก์ และข้อความอ่านง่าย รวมถึงทำให้ภาพลักษณ์ของเว็บไปในทิศทางเดียวกัน

① เลือกชุดสีของธีม

ใน Styles ให้เปิดส่วน Colors หรือ สี จากนั้นเลือกสีที่ธีมเปิดให้ปรับ เช่น สีข้อความ พื้นหลัง ลิงก์ หรือปุ่ม บางธีมมีชุดสีสำเร็จรูปให้เลือกก่อน แล้วจึงปรับรายละเอียดเพิ่มเติมได้

② ตรวจความชัดเจนของข้อความ

หลังเปลี่ยนสี ให้ตรวจว่าข้อความตัดกับพื้นหลังเพียงพอหรือไม่ โดยเฉพาะข้อความบนปุ่ม ลิงก์ และส่วนที่มีพื้นหลังสีเข้ม ทดลองดูทั้งหน้าเว็บปกติและหน้าที่มีภาพประกอบ

③ ปรับสีเฉพาะบล็อกเมื่อจำเป็น

หากต้องการให้ปุ่มหรือส่วนเนื้อหาบางจุดต่างจากสไตล์หลัก ให้เลือกบล็อกนั้น แล้วตั้งค่าสีจากแถบเครื่องมือหรือแถบตั้งค่าด้านข้าง ตรวจว่าการเปลี่ยนแปลงมีผลเฉพาะจุดตามต้องการ

❹ วิธีเปลี่ยนฟอนต์และขนาดตัวอักษร

การตั้งฟอนต์ช่วยกำหนดบุคลิกของเว็บไซต์และความอ่านง่าย ควรเลือกฟอนต์ที่อ่านสะดวก และใช้รูปแบบไม่มากเกินไป

① ปรับฟอนต์จาก Styles

เปิดส่วน Typography หรือ ตัวอักษร ใน Styles แล้วเลือกองค์ประกอบที่ต้องการ เช่น ข้อความทั่วไป หัวข้อ หรือลิงก์ จากนั้นเลือกแบบอักษรและปรับขนาดตามตัวเลือกที่ธีมมีให้

② ตั้งค่าหัวข้อและเนื้อหาให้แยกกันชัดเจน

หัวข้อควรเห็นเด่นกว่าเนื้อหาปกติ แต่ไม่ใหญ่จนกินพื้นที่หน้าจอมือถือ ตรวจลำดับของหัวข้อและระยะห่างระหว่างบรรทัด เพื่อให้ผู้อ่านไล่เนื้อหาได้ง่าย

③ ตรวจภาษาไทยบนอุปกรณ์จริง

ฟอนต์บางแบบอาจแสดงผลภาษาไทยต่างกันบนแต่ละอุปกรณ์ เปิดหน้าเว็บทั้งบนมือถือและคอมพิวเตอร์ ตรวจว่าตัวอักษรไม่เบียดกัน อ่านง่าย และไม่เปลี่ยนเป็นฟอนต์ที่ไม่ต้องการ

❺ ปรับระยะห่างและรูปแบบหน้าเว็บ

บางธีมให้ปรับความกว้างเนื้อหา ช่องว่าง และระยะห่างระหว่างบล็อกผ่าน Styles หรือการตั้งค่า Layout

① ตั้งความกว้างเนื้อหาให้พอดี

ปรับความกว้างให้เนื้อหาอ่านสบาย ไม่แคบหรือกว้างเกินไป ตรวจหน้าเว็บบนจอใหญ่และมือถือ เพราะค่าความกว้างเดียวกันอาจให้ความรู้สึกต่างกันในแต่ละหน้าจอ

② ปรับระยะห่างอย่างมีลำดับ

ใช้ระยะห่างที่สม่ำเสมอระหว่างหัวข้อ ย่อหน้า รูปภาพ และปุ่ม ไม่ควรใส่ช่องว่างมากจนเนื้อหาขาดตอนหรือชิดกันจนอ่านยาก

❻ วิธีใช้ Style Variation ของธีม

บางธีมแบบบล็อกมี Style Variations หรือชุดรูปแบบสำเร็จรูปให้เลือก ซึ่งเปลี่ยนชุดสีและตัวอักษรของเว็บได้อย่างรวดเร็ว

① ทดลองรูปแบบก่อนเลือก

เปิดรายการรูปแบบที่ธีมมีให้ แล้วเลือกดูตัวอย่างก่อนตัดสินใจ ตรวจว่าสีและฟอนต์เหมาะกับเนื้อหา โลโก้ และภาพลักษณ์ธุรกิจหรือไม่

② ปรับรายละเอียดหลังเลือก

หลังเลือกชุดรูปแบบแล้ว สามารถปรับสี ฟอนต์ และตัวเลือกอื่นต่อได้ตามที่ธีมรองรับ ตรวจหน้าแรกและหน้าบทความเพื่อให้แน่ใจว่าสไตล์ใหม่ทำงานกับเนื้อหาทั้งสองประเภท

❼ บันทึกและตรวจการเปลี่ยนแปลง

การเปลี่ยนสไตล์อาจมีผลหลายหน้า ก่อนบันทึกให้ตรวจขอบเขตของรายการที่กำลังแก้

① ตรวจว่าแก้ส่วนใดของเว็บไซต์

หากปรับจาก Styles การเปลี่ยนแปลงอาจมีผลกับเว็บไซต์โดยรวม หากแก้จากบล็อกในหน้าหรือแม่แบบ อาจมีผลเฉพาะส่วนนั้น ตรวจชื่อหน้าหรือส่วนที่แสดงในเครื่องมือก่อนบันทึก

② ดูตัวอย่างบนหลายหน้า

ตรวจหน้าแรก หน้าบทความ และหน้าสำคัญอื่น ๆ รวมถึงการแสดงผลบนมือถือ หากพอใจกับผลลัพธ์ ให้กด บันทึก และยืนยันรายการที่ WordPress แจ้งว่าจะบันทึก

③ หากไม่ชอบผลลัพธ์

กลับไปปรับค่าเดิมหรือเลือกชุดรูปแบบอื่น หากแก้หลายจุด ให้ปรับทีละรายการเพื่อหาสาเหตุได้ง่าย

❽ สรุป

Site Editor ใช้เปลี่ยนสี ฟอนต์ และสไตล์เว็บไซต์ได้เมื่อใช้ธีมแบบบล็อก เข้า รูปแบบเว็บ > ตัวแก้ไข > Styles เพื่อปรับภาพรวม หรือเลือกบล็อกเพื่อเปลี่ยนเฉพาะจุด

ก่อนบันทึกควรตรวจว่าการปรับแต่งมีผลกับทั้งเว็บไซต์หรือเฉพาะส่วนใด แล้วดูตัวอย่างบนหลายหน้าและหลายขนาดหน้าจอ สำหรับเว็บไซต์ที่ต้องการภาพลักษณ์สม่ำเสมอ ComSiam แนะนำให้กำหนดชุดสีและฟอนต์หลักก่อน แล้วค่อยปรับรายละเอียดของแต่ละหน้า