รวมบทความและบันทึกต่างๆ

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

การใช้งาน Sass css อย่างง่ายใน WordPress

ก่อนอื่นก็ enqueue style(โหลด css) ที่เราจะใช้ในธีมหลักที่ไฟล์ functions.php ก่อนเลยครับ ปกติผมชอบโหลดหลังจากสคริปหลักๆพวก Bootstrap และไฟล์ style.css ของธีมหลัก หรือเราจะใช้ style.css ของธีมหลักเลยก็ได้ ถ้าเราเลือกจะใช้ไฟล์หลักของธีม แต่ส่วนตัวผมชอบแยกเป็นอีกไฟล์นึงต่างหาก หลังจากนั้นก็ติดตั้ง Sass ด้วยคำสั่งด้านล่างนี้ครับ แต่ก่อนอื่นในเครื่องต้องลง node js ก่อนนะ แค่นี้เราก็ได้ตัว

Read More

การสร้าง Font ไว้เรียกใช้งานในเว็บไซต์ของเราด้วยตัวเองอย่างง่ายใน WordPress Theme

จากบทความที่แล้วผมเขียนเรื่องการเรียกใช้ Google Fonts บนเว็บไซต์ของเราไว้ คราวนี้ผมจะเขียนเรื่องการเรียกใช้ Font ในเว็บไซต์ของเราอย่างง่ายๆจากโฮสต์ครับ ตัวอย่างในโค้ด CSS ก็จะเขียนประมาณนี้ครับ (ให้ตัวอักษรในแท็ก p ใช้ฟอนต์ Kanit แบบหนา) ผมโหลดไฟล์ฟอนต์ที่ผมจะใช้มาแล้ว และผมจะใช้แค่ 3 น้ำหนัก คือ normal, medium และ bold ผมก็แค่เก็บไฟล์ไว้ใน

Read More
Google Fonts

การนำฟอนต์มาใช้งานในเว็บไซต์ง่ายๆจาก Google Fonts

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

Read More

ใช้งานไอค่อนในเว็บไซต์จาก Font Awesome

Font Awesome คืออะไร? ขอเกริ่นก่อนเลยแล้วกันครับว่ามันคือไอค่อนต่างที่เราใช้กันบนเว็บไซต์นั่นแหละ และข้อดีคือมันเป็น Vector icon แล้วไอ้เจ้า Vector icon นี่มันคืออะไรหว่า จริงๆมันก็คือ icon ที่ขยายยังไงก็ไม่แตกนั่นแหละครับ คมชัด กริ๊บเหมือนเดิม ไม่ว่าจะขยายให้ใหญ่ขนาดไหนก็ตาม นั่นคือข้อดีของมัน ทำไมถึงต้องใช้ Font Awesome? ปกติเวลาผมรับงานออกแบบมาจากดีไซน์เนอร์เค้ามักจะส่งไฟล์พวก PSD หรือไม่ก็ XD

Read More

การสร้างธีม WordPress ง่ายๆด้วย Underscores

Underscores.me เป็นเว็บไซต์สำหรับ generate ธีม WordPress เบื้องต้นแบบง่ายๆครับ สิ่งที่เราจะได้มาคือโครงสร้างเริ่มต้นแบบคลีนๆสำหรับทำธีม WordPress เลย มีไฟล์ต่างๆที่จำเป็น ส่วนประกอบต่างๆของธีมครบถ้วน และเราก็สามารถเริ่มทำธีมสำหรับเว็บไซต์เราได้เลย โดยจะใส่ library ต่างๆที่ต้องการใช้ในธีมเข้าไป เช่นพวก Front-end framework อย่าง Bootstrap ที่ให้ Component สวยๆต่างๆสำหรับทำหน้าเว็บมาให้เราครบถ้วน Slick หรือ

Read More