Seed Fonts ปลั๊กอินฟอนต์ของคนไทย

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

Seed Fonts

Seed Fonts เป็นปลั๊กอินช่วยจัดการในเรื่องของฟอนต์ของ WordPress ที่ถูกพัฒนาจากทีมงานคนไทยและให้ใช้บริการฟรี โดยมีรายการฟอนต์ (Font Family) ให้เลือกทั้งภายในตัวปลั๊กอินเองหรือเลือกจาก Google Fonts เราสามารถนำมาใช้โดยทำการเปลี่ยนฟอนต์ทั้งในส่วนของส่วนหัว (Header) หรือส่วนเนื้อหา (Paragraph) หน้าตาเว็บไซต์ของเราก็จะเปลี่ยนไปทำให้สวยงามและน่าสนใจมากยิ่งขึ้น

วิธีการใช้งาน

ให้เราทำการติดตั้งปลั๊กอิน Seed Fonts เหมือนกับปลั๊กอินทั่วไป โดยไปที่เมนู Plugins > Add New แล้วทำการค้นหาปลั๊กอิน ทำการติดตั้ง (Install Now) และเปิดใช้งาน (Activate)

เมื่อทำการเปิดใช้งานแล้วให้เราเปิดไปหน้าตั้งค่าที่เมนูรูปแบบเว็บ (Appearance) > ฟอนต์ (Fonts) ครับ

หลังจากเข้ามาแล้ว เราจะเห็นแท็บอยู่ 2 แท็บด้วยกันครับ คือ แท็บพาดหัว และแท็บส่วนเนื้อหา ซึ่งทั้ง 2 แท็บนี้แบ่งส่วนการตั้งค่าแตกต่างกัน คือ แท็บพาดหัวจะเกี่ยวกับส่วนหัวข้อ (Heading) ต่างๆ และแท็บส่วนเนื้อหาจะเกี่ยวกับเนื้อหา (Paragraph) ทั้งหมด หากเราต้องการแก้ไขในส่วนใดให้ทำการแก้ไขในแท็บนั้นครับ เราสามารถทำการแก้ไขได้ทั้ง 2 แท็บพร้อมกัน

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

สำหรับฟอนต์ที่มากับปลั๊กอิน บางฟอนต์จะเป็นฟอนต์ที่ไม่มีในรายการ Google Fonts ครับ ฟอนต์จะมีทั้งแบบมีหัวและไม่มีหัวขึ้นกับเราว่าต้องการใช้งานแบบใด โดยมีรายชื่อฟอนต์ได้แก่ Anakotmai, Nano San Thai, Cloud, Moonjelly, Nato Serif Thai, Sarabun, Boon, CS Prajad, และ CS Chatchai UI ในการใช้ฟอนต์นี้เราสามารถทำการตั้งค่าน้ำหนักหรือความหนาของฟอนต์ได้ หากค่าน้ำหนักมีค่าสูงก็จะทำให้ฟอนต์ของเรามีความหนามากยิ่งขึ้น

ส่วนถัดมาเป็นส่วนสำคัญของการใช้งาน Seed Fonts เลยครับ โดยเราจะต้องทำการใส่ Selectors หรือแท็ก HTML ที่เราต้องการ เช่น h1 เป็นต้น หากเราไม่ทราบก็จะต้องใช้เครื่องมือของเบราเซอร์ที่ชื่อว่า Developer Tools (กด Ctrl + Shift + I) ในการค้นหา Selector ที่เราจะใช้ครับ เช่น หากเราต้องการให้หัวข้อหรือส่วนใดใช้งานฟอนต์นี้ ก็ต้องใช้ เครื่องหมายลูกศรที่อยู่ด้านบนของ Developer Tools ไปจิ้มในส่วนที่เราต้องการ และดูว่า Selectors ที่เขาใช้เป็นอะไร จากรูปจะเห็นว่า ส่วนหัวข้อที่เราต้องการนั้นมี Selector ชื่อ h1 เป็นต้น

เมื่อเราได้ Selectors ที่ต้องการแล้วก็ให้นำไปใส่ต่อท้ายในกล่องข้อความ และต้องมีคอมม่า (,) คั่นระหว่าง Selectors แต่ละตัวด้วยนะครับ

ในกรณีที่ฟอนต์บางตำแหน่งไม่มีการเปลี่ยนแปลงรูปแบบฟอนต์ ให้เราทำเครื่องหมายถูกหน้าคำว่า ใช่ (เพิ่มคำสั่ง !important) ฟอนต์ก็จะถูกบังคับให้เปลี่ยนโดยไม่สนใจค่าเก่าที่ถูกใช้มาในทันที

สำหรับส่วนที่แตกต่างระหว่างแท็บหัวข้อ (Header) และข้อความ (Paragraph) นั้นจะเพิ่มเติมในส่วนของขนาดตัวอักษร หน่วย และระยะห่างระหว่างบรรทัด (Line Height) ครับ ซึ่งขนาดตัวอักษรที่มักจะใช้กันอยู่ที่ 16px และระยะห่างระหว่างบรรทัดจะอยู่ที่ 1.5-1.8 จะเป็นระยะที่เหมาะสมที่สุดครับ

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