สวัสดีครับผม วันนี้มาพบกับบทความเกี่ยวกับการทำเว็บอีกนะครับ โดยบทความตอนนี้เป็นเรื่องเล็กๆน้อยๆเกี่ยวกับการจัดการฟอนต์ของ Elementor ครับ ซึ่งก่อนอื่นนั้นขอเล่าให้ฟังนิดหน่อยว่า Elementor คืออะไร?
Elementor คือปลักอินตัวหนึ่งของ WordPress ที่ออกแบบมาเพื่อให้สามารถ “จัดวางรูปแบบหน้าตาเว็บไซต์ได้อย่างง่ายดายมากยิ่งขึ้น” โดยไม่จำเป็นต้องมีความรู้ด้านการเขียนโค้ดสักเท่าใดนัก มีการใช้งานที่ง่ายมากๆๆๆ เพียงแค่ลากๆวางๆก็ได้แล้วครับ ทีนี้ฟังก์ชั่นใหม่ของ Elementor ก็คือการให้เรา “เพิ่มรูปแบบตัวอักษร” หรือ Add New Font เข้าไปเองได้ครับ ฟังก์ชั่นนี้ถือว่าเป็นฟังก์ชั่นที่ผมชอบมากๆๆ เพราะเราจะก้าวข้ามขีดจำกัดเรื่องการออกแบบไปอีกเยอะเลย เพราะเราสามารถเอาฟอนต์ที่เราชอบมาใช้งานได้ทันที และการแสดงผลของปลักอินนี้ก็เป็นแบบ Real Time ครับ เราลากไปวางตรงไหน หน้าเว็บก็จะเป็นแบบที่เห็นนั่นแหละ
ทีนี้ครับ จากการที่ผมพัฒนาเว็บไซต์ให้ลูกค้าแล้ว ทำในเครื่องตัวเองก่อน พอเสร็จแล้วก็เอาขึ้น Server เพื่อให้ลูกค้าได้ลองเล่นๆดู ผมก็เจอปัญหาอยู่อย่างหนึ่งคือ Custom Font ที่ผมเพิ่มเข้าไป มันไม่ทำงาน! พูดอีกอย่างก็คือ มันไม่แสดงผลฟอนต์นั้นบนหน้าเว็บ!!
ผมลอง Inspect ดูว่าเอ ปัญหามันเกิดจากอะไรนะ ก็พบว่า ที่มันไม่ทำงานก็เพราะว่า ตำแหน่งการเรียกฟอนต์ของ CSS มันยังเรียนที่ localhost อยู่เลย ไม่ยอมเรียกที่ URL เว็บใหม่
และนั่นแหละครับคือปัญหา ซึ่งผมก็ไม่ได้เจอคนเดียวด้วย คนอื่นก็เจอครับ ผมก็เลยส่งเมลไปถามทีมงานพัฒนา elementor ก็ได้รับคำแนะนำมาครับ ซึ่งวิธีการแก้ไขก็ไม่ยากเลย ผมก็เลยมาเขียนบล็อกบันทึกไว้เผื่อใครเจอปัญหาแบบเดียวกัน
ปัญหานั้น คาดว่าน่าจะเกิดจากตอนย้ายเว็บ ที่ผมย้ายด้วยปลักอิน WP All in One Migration แล้วมันไม่ได้เปลี่ยน URL ของ CSS ใน Elementor คับ ทำให้ URL ยังเป็นของเว็บเดิม
การแก้ไข ให้เราไปที่เมนูหลังบ้าน Elementor > Tools ตรงแท็บ General ให้คลิกปุ่ม Regenerate Files ครับ . เพียงแค่นี้ก็จะแก้ปัญหาได้แล้วครับ
ใช้กันดูนะครับผม
