วิธีเปลี่ยนฟอนต์ใดๆ ในธีม WordPress

เคยอยากเปลี่ยนฟอนต์เว็บ WordPress? เลือกฟอนต์ใหม่ใน Customizer ไมยาก ปัญหาเมื่ออยากใช้ฟอนต์ที่ธีมไม่มี หรืออีเลเมนต์ที่อยากเปลี่ยนไม่มีตัวเลือก

เปลี่ยนฟอนต์ที่ปรับแต่งได้

ได้ฟอนต์มากขึ้น: ติดตั้งปลั๊กอิน Easy Google Fonts

1. ไป "Plugins → Add New"
2. ค้น "Easy Google Font"
3. Install → Activate
4. ตอนนี้มีตัวเลือกฟอนต์มากขึ้น ไป Customizer (Appearance → Customize)
5. 
6. คลิก "Typography → Theme typography"
7. 
8. คลิกลูกศร dropdown เลื่อนลง จะเห็นฟอนต์เยอะมาก
9. 
10. คลิกเลือกฟอนต์ที่ต้องการ

ใช้ปลั๊กอินเปลี่ยนข้อความที่ปรับแต่งได้ในธีมง่าย ส่วนที่ทำให้หงุดหงิด: อยากให้ข้อความเฉพาะเป็นฟอนต์ต่างออกไป แตไม่มีที่เปลี่ยน!

ต้องเปลี่ยน CSS code ส่วนนั้น แต่ซ่อนอยู่ ต้องหาตำแหน่ง

ติดตั้งส่วนขยาย (Extensions)

บน Chrome ค้นหาส่วนขยาย WhatFont ติดตั้งและอนุญาตรัน

เปิดใช้งาน WhatFont ระบุฟอนต์บนเว็บไหนก็ได้ ชอบฟอนต์ไหน อยากใช้ในงาน วางเมาส์บนข้อความขณะ WhatFont รัน จะแสดงชื่อฟอนต์

ส่วนขยายต่อไป: Firebug Lite แสดงโค้ดเว็บ และ live edit CSS properties ทำให้หาและเปลี่ยนฟอนต์ง่ายด้วยการหาตำแหน่งข้อความในโค้ด

หาชื่อฟอนต์

หาชื่อฟอนต์ที่ธีมใช้อยู่:

1. เปิด WhatFont คลิกไอคอน
2. วางเมาส์บนฟอนต์ที่อยากรู้
3. 
4. จดชื่อฟอนต์
5. ปิด WhatFont

ขั้นต่อไป: หา CSS ที่มีฟอนต์นั้นในโค้ด

1. เปิด Customizer เหมือนเดิม
2. เปิด Firebug Lite (ไอคอนแมลงกุดขัน)
3. เปิด Firebug โค้ดเว็บแสดงด้านล่างจอ

ต้องระมัดระวังทำงานกับโค้ดนี้ โดยเฉพาะถ้าไม่ใช่ CSS expert ถ้าปฏิบัติตามคำแนะนำ ควรเปลี่ยนฟอนต์ได้ง่ายโดยไม่ทำลายเว็บ ควร backup เว็บก่อนต่อ

หา current font ของข้อความที่อยากเปลี่ยน

1. คลิก CSS
2. 
3. เลือกไฟล์ style.css (ไฟล์ยาว)
4. 
5. กด Ctrl + f พิมพ์ชื่อฟอนต์ที่จดในกล่องค้นหา
6. ตัวอย่าง: หา Helvetica เห็นตำแหน่งสีส้มใน styles CSS
7. 
8. ไฮไลท์และคัดลอกตำแหน่งฟอนต์ ไฮไลท์สีเหลืองในรูป ถ้ามีหลายตำแหน่ง คัดลอกแค่ตัวหนึ่ง

สร้าง Font Control

Font controls บอกปลั๊กอินว่า CSS ใช้ฟอนต์ที่อยากเปลี่ยนที่ไหน ขั้นตอนนี้อาจ trial and error โดยเฉพาะถ้าฟอนต์อยากเปลี่ยนอยู่หลายที่ในเว็บ

1. กลับ admin panel hover settings คลิก Google Fonts
2. คลิก "Create a new font control"
3. 
4. rename ให้บอกรายละเอียดตำแหน่งฟอนต์ใหม่
5. วางตำแหน่งที่คัดลอกจาก CSS list ลง CSS selectors box
6. ถูก "Force Styles override"
7. Save

ตรวจสอบ

กลับ Customizer หาที่อยากให้ฟอนต์เปลี่ยน หา dropdown ของ font control ที่สร้าง ลากลง เลือกฟอนต์ที่ต้องการ ถ้าสำเร็จ ฟอนต์เปลี่ยนทันที

ถ้าไม่ได้ กลับ font controls ลบตำแหน่งที่วาง ลองใหม่ตำแหน่งอื่นใน CSS ที่ฟอนต์เดิมอยู่ จำไว้: อาจหลายครั้งถึงจะได้

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