ในบทความช่วยเหลือของ WordPress นี้ เราจะแนะนำคุณทีละขั้นตอนเกี่ยวกับขั้นตอนการเพิ่มแบบอักษรที่กำหนดเองใน WordPress Block Themes ของคุณ ซึ่งหมายความว่าคุณสามารถเพิ่มแบบอักษรใดก็ได้ในธีมใดก็ได้ เช่น การเพิ่ม Google Fonts ในธีม Twenty Twenty Three

คุณสามารถดูวิดีโอสอนด้านล่าง หรือข้ามไปอ่านบทความ (ซึ่งมีให้บริการในหลายภาษาโดยใช้คุณสมบัติการแปลในหน้านี้) 

ฉันแสดงวิธีทำงานนี้ให้สำเร็จโดยใช้ปลั๊กอิน Create Block Theme ที่พัฒนาโดยทีมนักพัฒนา WordPress โดยตรง สิ่งนี้ทำให้ปลั๊กอินมีน้ำหนักเบาเป็นพิเศษ ประสิทธิภาพสูง และใช้งานได้ง่ายมากกับธีมบล็อก ฉันยังแสดงวิธีแก้ปัญหาการอนุญาตทั่วไปที่อาจเกิดขึ้นเมื่อทำงานกับปลั๊กอินนี้

ด้วยวิธีนี้ คุณสามารถลิงก์ไปยังฟอนต์ (เช่น ลิงก์ไปยัง Google Fonts) หรือฝังฟอนต์ในไซต์ของคุณ (เพื่อประสิทธิภาพไซต์ที่ดีขึ้น) เข้าเรื่องกันเลย!

สารบัญ

1. ติดตั้งปลั๊กอิน “สร้างบล็อกธีม”

สำหรับผู้เริ่มต้น คุณจะต้องลงชื่อเข้าใช้พื้นที่ผู้ดูแลระบบ WordPress ซึ่งจะนำคุณไปยังแดชบอร์ด จากนั้นไปที่ Plugins>Add New จากการนำทางหลัก (ลูกศรสีแดงในภาพด้านบน)

ค้นหาปลั๊กอิน “สร้างบล็อกธีม” โดยใช้แถบค้นหาที่มุมขวาบน (แสดงเป็นสีเขียวในรูปภาพด้านบน) เมื่อปลั๊กอิน Create Block Theme ปรากฏขึ้น ให้คลิกปุ่ม “ติดตั้งทันที” เพื่อติดตั้งลงในไซต์ของคุณ (ลูกศรสีแดง)

จากนั้นคลิกปุ่ม "เปิดใช้งาน" เพื่อเปิดใช้งานปลั๊กอิน

WordPress ประยุกต์: วิธีสร้างหลักสูตรเว็บไซต์ที่มีประสิทธิภาพโดย Davies Media Design

2. ปิดใช้งานปลั๊กอินความปลอดภัย (ชั่วคราว)

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

ในกรณีของฉัน ฉันใช้ปลั๊กอิน SG Security (ซึ่งมาพร้อมกับเว็บไซต์ WordPress ทั้งหมด โฮสต์ผ่าน Siteground – โฮสต์ที่ฉันแนะนำเป็นอย่างยิ่ง). ฉันทราบข้อเท็จจริงที่ว่าปลั๊กอินนี้รบกวนกระบวนการเพิ่มแบบอักษรที่กำหนดเอง ดังนั้นฉันจะปิดการตั้งค่าที่ขัดขวาง

ในกรณีนี้ ฉันจะไปที่ส่วน "ความปลอดภัยของไซต์" ของปลั๊กอิน SG Security โดยใช้การนำทางหลัก (ลูกศรสีแดงในภาพด้านบน)

ต่อไป ฉันจะเลื่อนลงไปที่ตัวเลือกที่มีข้อความว่า “ปิดใช้งานตัวแก้ไขธีมและปลั๊กอิน” (เน้นด้วยสีเขียวในภาพด้านบน) คุณจะเห็นปุ่มสลับทางด้านขวาของตัวเลือกนี้ – คลิกปุ่มสลับเพื่อปิดใช้งานคุณลักษณะนี้ (ลูกศรสีแดง) คุณควรเห็นข้อความ "สำเร็จ" ปรากฏขึ้นที่ลูกศรสีน้ำเงินมุมขวา)

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

มีสองตัวเลือกในการใช้แบบอักษรที่กำหนดเองใน WordPress

3. เลือกแบบอักษรที่กำหนดเองสำหรับ WordPress (แบบอักษร Google ที่เชื่อมโยง)

ตัวเลือกแรกคือลิงก์ไปยังแบบอักษรบนเว็บไซต์ของบุคคลที่สาม Google แบบอักษร. ตัวเลือกนี้ง่ายกว่าและใช้เวลาในการตั้งค่าน้อยกว่า แต่จะทำให้ความเร็วในการโหลดหน้าเว็บไซต์ของคุณช้าลง นอกจากนี้ยัง จำกัด ให้คุณใช้แบบอักษรที่มีให้จาก Google Fonts (แม้ว่า Google จะมีแบบอักษรที่ยอดเยี่ยมและฟรีมากมาย) หากคุณไม่ค่อยเข้าใจเทคโนโลยีและไม่รังเกียจที่จะใช้ Google Fonts ฉันขอแนะนำตัวเลือกนี้

สำหรับผู้เริ่มต้น ให้ไปที่ “ลักษณะที่ปรากฏ>จัดการแบบอักษรของธีม” จากการนำทางหลัก (ลูกศรสีแดงในภาพด้านบน)

ในพื้นที่ทำงาน "จัดการฟอนต์ของธีม" คุณจะเห็นฟอนต์เริ่มต้นทั้งหมดที่ติดตั้งอยู่ใน WordPress (เน้นด้วยสีเขียวในภาพด้านบน) ฟอนต์ของคุณยังแสดงรายการไว้ทางด้านขวาของพื้นที่ทำงาน พร้อมด้วยรูปแบบต่างๆ ของฟอนต์แต่ละแบบและขนาดไฟล์สำหรับแต่ละรูปแบบฟอนต์ (แสดงเป็นสีน้ำเงิน)

หากต้องการเพิ่มแบบอักษรใหม่ให้กับธีม ให้คลิกปุ่ม "เพิ่มแบบอักษรของ Google" (ลูกศรสีแดง)

คลิกเมนูแบบเลื่อนลง "เลือกแบบอักษร" และค้นหาแบบอักษรของ Google ที่คุณต้องการเพิ่มลงในไซต์ของคุณ (แบบอักษรจะเรียงตามลำดับตัวอักษร) หากคุณไม่แน่ใจว่าฟอนต์แต่ละตัวหน้าตาเป็นอย่างไร ผมขอแนะนำ เรียกดูเว็บไซต์ Google Fonts เพื่อสำรวจฟอนต์และทดสอบมัน เมื่อคุณพบแบบอักษรที่คุณต้องการใช้แล้ว ให้เลือกจากรายการดรอปดาวน์ (ลูกศรสีน้ำเงิน)

ตอนนี้คุณจะเห็นรายการของรูปแบบต่างๆ ที่มีอยู่ทั้งหมดที่คุณสามารถติดตั้งบนธีมของคุณสำหรับแบบอักษรนั้นได้ คุณสามารถทำเครื่องหมายในช่องถัดจากตัวเลือกสินค้าแต่ละรายการ หรือคลิกช่องทำเครื่องหมายด้านบน (ลูกศรสีแดงในรูปภาพด้านบน) เพื่อเลือกตัวเลือกสินค้าทั้งหมด คุณจะเห็นรายการตัวเลือกสินค้าที่คุณเลือกพร้อมกับขนาดไฟล์ที่ด้านขวามือของหน้าจอ เมื่อคุณพร้อมแล้ว ให้คลิก “เพิ่มแบบอักษรของ Google ในธีมของคุณ” (ลูกศรสีเขียว)

ตอนนี้คุณควรเห็นข้อความที่ด้านบนของพื้นที่ทำงานว่าฟอนต์ได้รับการติดตั้งในธีมของคุณแล้ว (ในกรณีนี้คือธีม Twenty-Twenty Three) จากนั้นคุณสามารถคลิกลิงก์ "จัดการฟอนต์" ภายในกล่องข้อความแสดงความสำเร็จ หรือคลิกลูกศรย้อนกลับเล็กๆ (ลูกศรสีแดงในภาพด้านบน) เพื่อกลับไปยังพื้นที่ทำงาน "จัดการฟอนต์ของธีม"

ตอนนี้คุณจะเห็นตระกูลฟอนต์ที่ติดตั้งใหม่ของคุณแสดงรายการพร้อมกับฟอนต์ที่เหลือของธีมของคุณ (ลูกศรสีแดงในภาพด้านบน) นอกจากนี้ คุณจะเห็นตระกูลฟอนต์ของคุณและรูปแบบฟอนต์ที่เกี่ยวข้องทั้งหมดทางด้านขวามือของพื้นที่ทำงาน (เน้นด้วยสีเขียว)

4. ฝังฟอนต์แบบกำหนดเองสำหรับ WordPress (Local Fonts for Better SEO)

ตัวเลือกที่สองสำหรับการเพิ่มแบบอักษรในเว็บไซต์ WordPress ของคุณคือการ "ฝัง" หรือ "โฮสต์ในเครื่อง" แบบอักษรของคุณ กล่าวอีกนัยหนึ่ง ไฟล์ฟอนต์ของคุณจะอยู่ภายในเว็บเซิร์ฟเวอร์เดียวกันกับที่โฮสต์เว็บไซต์ของคุณ

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

กล่าวอีกนัยหนึ่ง ฟอนต์แบบฝังจะดีกว่าสำหรับ SEO (การเพิ่มประสิทธิภาพเครื่องมือค้นหา)

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

หากต้องการติดตั้งฟอนต์ในเครื่อง ให้เริ่มโดยไปที่ลักษณะที่ปรากฏ>จัดการฟอนต์ของธีมจากการนำทางหลัก (หากคุณยังไม่ได้ติดตั้งฟอนต์จากขั้นตอนสุดท้าย – ลูกศรสีน้ำเงินในภาพด้านบน) จากนั้นคลิกปุ่ม "เพิ่มแบบอักษรในเครื่อง" ที่มุมขวาบนของพื้นที่ทำงาน (ลูกศรสีแดง)

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

ค้นหาและดาวน์โหลดแบบอักษรที่คุณเลือกจาก Google Fonts

ฉันจะข้ามไปที่ Google Fonts และจะใช้แถบค้นหา (ลูกศรสีแดง) เพื่อค้นหาแบบอักษรที่ฉันต้องการ ในกรณีนี้คือแบบอักษร “Catamaran” เมื่อแบบอักษรปรากฏในผลลัพธ์ ฉันจะคลิกเพื่อดูหน้าแบบอักษร (ลูกศรสีเขียว)

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

คลิก “บันทึก” เพื่อบันทึกไฟล์ซิปแบบอักษรลงในคอมพิวเตอร์ของคุณ

เปิดเครื่องรูดโฟลเดอร์แบบอักษรของคุณเพื่อเข้าถึงไฟล์แบบอักษร

เมื่อการดาวน์โหลดเสร็จสิ้น ให้คลิกลูกศรถัดจากการดาวน์โหลดที่เสร็จสิ้น (ลูกศรสีแดง) แล้วคลิก “แสดงในโฟลเดอร์” (ลูกศรสีเขียว)

คลิกขวาที่ไฟล์ zip ใน file explorer แล้วคลิก "Extract All"

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

หากคุณดาวน์โหลดไฟล์ฟอนต์โดยใช้ Google Fonts ให้ป้อนโฟลเดอร์ที่มีป้ายกำกับว่า "คงที่" เพื่อดูไฟล์ฟอนต์ทั้งหมดของคุณ มิฉะนั้น ให้มองหาไฟล์ใดๆ ที่เป็นไฟล์ OTF, TTF, WOFF หรือ WOFF2

ภายในโฟลเดอร์ "คงที่" นี้ คุณจะเห็นรายการรูปแบบฟอนต์ทั้งหมดที่เราดาวน์โหลดสำหรับฟอนต์ Catamaran จาก Google Fonts มีทั้งหมด 9 รูปแบบ และเราสามารถอัปโหลดทั้งหมดไปยังเว็บไซต์ของเราหรือเฉพาะรูปแบบที่เราต้องการ/จำเป็น คลิกตำแหน่งโฟลเดอร์ใน file explorer (ลูกศรสีเขียว) จากนั้นคลิกขวาแล้วเลือก “คัดลอก”

อัปโหลดแบบอักษรที่กำหนดเองของคุณไปยัง WordPress

กลับไปที่ WordPress ที่คุณเปิดพื้นที่ทำงาน "Local Fonts" คลิกปุ่ม “เลือกไฟล์” (ลูกศรสีแดงในภาพด้านบน) เพื่อเลือกแบบอักษรของคุณ คุณสามารถนำทางไปยังตำแหน่งบนคอมพิวเตอร์ของคุณที่เก็บแบบอักษรของคุณได้ด้วยตนเอง หรือเพียงคลิกที่แถบที่อยู่ของตัวสำรวจไฟล์ (ลูกศรสีน้ำเงิน) ลบที่อยู่ที่มีอยู่ จากนั้นคลิกขวาและเลือก “วาง” (ลูกศรสีเขียว) การดำเนินการนี้จะวางที่อยู่ที่คุณคัดลอกในขั้นตอนก่อนหน้า กดปุ่ม Enter แล้วคุณจะเข้าสู่โฟลเดอร์ที่มีแบบอักษรของคุณ

คุณต้องอัปโหลดรูปแบบตัวอักษรทีละรายการ สำหรับตัวอย่างนี้ ฉันจะอัปโหลดรูปแบบฟอนต์ "Catamaran-Regular" เพียงคลิก (ลูกศรสีเขียว) จากนั้นคลิกปุ่ม "เปิด" (ลูกศรสีแดง)

ตอนนี้คุณควรเห็นข้อมูลสำหรับ “ชื่อฟอนต์” “รูปแบบฟอนต์” และ “น้ำหนักฟอนต์” รวมถึงตัวอย่างฟอนต์ทางด้านขวามือ คลิก “อัปโหลดฟอนต์ไปยังธีมของคุณ” (ลูกศรสีแดง) เพื่ออัปโหลดรูปแบบฟอนต์

ดูแบบอักษรของธีมที่คุณกำหนดเอง

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

เมื่อเสร็จแล้ว ให้คลิกลิงก์ "จัดการฟอนต์" ภายในกล่องข้อความแสดงความสำเร็จหรือลูกศรย้อนกลับ (แสดงด้วยลูกศรสีแดง) เพื่อกลับไปยังพื้นที่ทำงานจัดการฟอนต์ของธีม

ตอนนี้คุณจะเห็นตระกูลฟอนต์ "Catamaran" ใหม่แสดงรายการพร้อมกับตระกูลฟอนต์ที่เหลือของธีมของคุณ (ลูกศรสีแดง) นอกจากนี้ คุณจะเห็นตระกูลฟอนต์และรูปแบบต่างๆ ที่คุณติดตั้งไว้ที่ด้านขวาของหน้าต่าง Manage Theme Fonts (เน้นด้วยสีเขียว)

5. เปลี่ยนฟอนต์ของธีมเป็นฟอนต์ที่คุณกำหนดเอง

เมื่อคุณติดตั้งฟอนต์ใหม่แล้ว ก็ถึงเวลาสนุกแล้ว!

หากต้องการเปลี่ยนแบบอักษรของธีมเป็นแบบอักษรที่กำหนดเอง ให้ไปที่ Site Editor โดยไปที่ลักษณะที่ปรากฏ>ตัวแก้ไข (ลูกศรสีแดงในภาพด้านบน)

คลิกที่ใดก็ได้ภายในพื้นที่เนื้อหาหลัก (ลูกศรสีแดง) ของ Site Editor เพื่อแสดงการควบคุม

ในเมนูด้านบน คลิกที่ไอคอน "สไตล์" (ลูกศรสีน้ำเงิน) จากนั้นคลิก “การพิมพ์” (ลูกศรสีแดง)

ภายใต้ "องค์ประกอบ" คุณสามารถเปลี่ยนแบบอักษรสำหรับข้อความ ลิงก์ ส่วนหัว หรือปุ่มได้ ฉันจะเลือกตัวเลือก "หัวเรื่อง" สำหรับตัวอย่างนี้

ตอนนี้คุณจะเห็นเมนูแบบเลื่อนลงใต้ "การพิมพ์" ซึ่งคุณสามารถเลือกจากแบบอักษรของธีมใดก็ได้ (ลูกศรสีแดง) คุณสามารถดูแบบอักษร “Neuton” และ “Catamaran” ที่ฉันเพิ่มสำหรับบทแนะนำสอนการใช้งานนี้ได้ที่นี่ ฉันจะเลือก “Neuton” สำหรับแบบอักษรหัวเรื่องของฉัน

คลิกปุ่ม "บันทึก" ที่มุมขวาบนเพื่อบันทึกการเปลี่ยนแปลงของคุณ

คลิก "บันทึก" อีกครั้ง (ลูกศรสีแดง) และตอนนี้แบบอักษรที่คุณกำหนดเองจะถูกบันทึกสำหรับส่วนหัวทั้งหมดทั่วทั้งไซต์ของคุณ!

ถัดไป คุณสามารถคลิกลิงก์ View>View Site ที่มุมขวาบนของเครื่องมือแก้ไขไซต์ (ลูกศรสีแดงในรูปภาพด้านบน) เพื่อดูว่าเว็บไซต์ของคุณมีลักษณะอย่างไรเมื่อใช้แบบอักษรใหม่ กลับไปที่ Site Editor และทำขั้นตอนนี้ซ้ำสำหรับองค์ประกอบอื่นๆ ที่คุณต้องการปรับแต่งฟอนต์

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

6. วิธีลบแบบอักษรที่กำหนดเองจาก WordPress

หากต้องการลบฟอนต์ที่คุณกำหนดเอง ให้เริ่มโดยกลับไปที่ลักษณะที่ปรากฏ>จัดการฟอนต์ของธีม

คุณสามารถลบตระกูลฟอนต์ทั้งหมดได้โดยวางเมาส์เหนือชื่อตระกูลฟอนต์ด้านขวามือ แล้วคลิกไอคอนถังขยะที่ปรากฏขึ้น (ลูกศรสีน้ำเงิน) หรือวางเมาส์เหนือแบบอักษรแต่ละแบบแล้วคลิกไอคอนถังขยะ (แบบอักษรต่างๆ จะอยู่ภายในพื้นที่สีเขียวที่ไฮไลต์) คุณยังสามารถคลิกลิงก์ “ลบตระกูลฟอนต์” เพื่อลบตระกูลฟอนต์ใดก็ได้ (ลูกศรสีม่วง)

เพียงแค่นี้สำหรับการกวดวิชานี้! หากคุณชอบคุณสามารถตรวจสอบอื่น ๆ ของฉัน บทความวิธีใช้ WordPress หรือลงทะเบียนใน my WordPress Masterclass บน Udemy.

Davies Media Design จดหมายข่าวอีเมลแอปสร้างสรรค์ฟรี

สมัครรับจดหมายข่าว DMD

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

คุณสมัครเรียบร้อยแล้ว!

Pin It เมื่อ Pinterest