วิธีเปลี่ยนแบบอักษรใน WordPress

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

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

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

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

วิธีเปลี่ยนแบบอักษรใน WordPress

มีหลายวิธีในการเปลี่ยนแบบอักษรใน WordPress:

1. ตัวเลือกเริ่มต้นของ WordPress (Gutenberg/Classic Editor)
2. ด้วยตนเองด้วย CSS
3. การใช้ปลั๊กอินเฉพาะ
4. โฮสติ้งฟอนต์ของคุณเอง
5. การรวมแบบอักษรเว็บ

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

1) WordPress ตัวเลือกเริ่มต้น

ตามค่าเริ่มต้น WordPress มีสองตัวเลือกในการปรับแต่งแบบอักษร: ด้วย Gutenberg หรือใช้ตัวแก้ไขแบบคลาสสิก

1.1) กับ Gutenberg

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

หากต้องการเปลี่ยนแบบอักษร ให้เปิดโพสต์หรือเพจแล้วเลือกข้อความที่คุณต้องการแก้ไข

ทางด้านขวามือ คุณจะเห็นตัวเลือกการพิมพ์

คุณจะเห็นตัวเลือกมากมายในการเปลี่ยนขนาดแบบอักษร:

• ค่าเริ่มต้น
• เล็ก
• ปานกลาง
• ใหญ่
• ใหญ่
• กำหนดเอง

คุณสามารถเลือกขนาดที่กำหนดไว้ล่วงหน้าเหล่านี้หรือเพิ่มขนาดที่กำหนดเองได้ ตัวอย่างเช่น หากเราเลือกขนาดแบบอักษร 20px เราจะเห็นการเปลี่ยนแปลงในตัวแก้ไข

ด้วยวิธีนี้ คุณสามารถแก้ไขบล็อกของคุณและกำหนดขนาดแบบอักษรที่กำหนดเองให้กับบล็อกได้อย่างง่ายดาย

1.2) การใช้ตัวแก้ไขแบบคลาสสิก

หากคุณต้องการจัดการตัวพิมพ์ของคุณผ่าน Classic Editor คุณต้องติดตั้งและเปิดใช้งานปลั๊กอินเครื่องมือแก้ไขขั้นสูง (TinyMCE Advanced)

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว ให้เปิดโปรแกรมแก้ไขเนื้อหา แล้วคุณจะเห็นเครื่องมือเพิ่มเติมหลายอย่าง

จากเมนูแบบเลื่อนลง คุณสามารถเปลี่ยนประเภทและขนาดแบบอักษรได้ มีแบบอักษรและขนาดต่างๆ ของ Google ที่คุณสามารถเลือกปรับแต่งไซต์ของคุณได้

ด้วยตัวเลือกเหล่านี้ คุณสามารถเลือกย่อหน้าใดก็ได้ และเลือกแบบอักษรและขนาดใดก็ได้จากเมนูแบบเลื่อนลง

2) ด้วยตนเองด้วยรหัส CSS ที่กำหนดเอง

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

ในการดำเนินการนี้ อันดับแรก ในแดชบอร์ด WordPress ของคุณ ให้ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม ในส่วนนี้ คุณสามารถเพิ่มโค้ดที่กำหนดเองและแก้ไขไซต์ของคุณได้

เปลี่ยนฟอนต์ตัว

ตัวอย่างเช่น หากต้องการเปลี่ยนขนาดตัวอักษรทั่วทั้งไซต์เป็น 16 พิกเซล คุณต้องใช้โค้ด CSS นี้:

 body { font-size : 16px; }

เปลี่ยนแบบอักษรของย่อหน้า

ในทำนองเดียวกัน หากคุณกำลังมองหาวิธีปรับขนาดแบบอักษรของย่อหน้าเป็น 16 พิกเซล คุณควรใช้โค้ด CSS นี้:

p {
font-size : 16px;
}

ปรับแต่งแบบอักษรของหัวเรื่อง

ยิ่งไปกว่านั้น หากคุณต้องการแก้ไขขนาดฟอนต์ของส่วนหัว คุณสามารถใช้โค้ดด้านล่างนี้:

.entry-content h2 {
font-size : 36px;
}

.entry-content h3 {
font-size : 30px;
}

.entry-content h4 {
font-size : 26px;
}

.entry-content h5 {
font-size : 22px;
}

.entry-content h6 {
font-size : 20px;
}

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

เมื่อคุณพอใจกับการปรับแต่งแล้ว ให้บันทึกการเปลี่ยนแปลงแล้วกด เผยแพร่

เปลี่ยนตระกูลแบบอักษร

นอกจากนี้ หากต้องการเปลี่ยนแบบอักษรทั้งไซต์ คุณสามารถใช้รหัสนี้:

 * {ตระกูลแบบอักษร:"Verdana", Verdana, sans-serif}

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

ยิ่งไปกว่านั้น คุณยังสามารถเปลี่ยนรูปแบบตัวอักษรได้อีกด้วย ตัวอย่างเช่น หากคุณต้องการทำให้ส่วนหัว 2 และ 3 เป็นตัวเอียง ให้ใช้รหัสนี้:

 h2, h3 { font-style : italics ; }

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

3) ด้วยปลั๊กอิน

คุณยังสามารถเปลี่ยนแบบอักษรใน WordPress ด้วยปลั๊กอินเฉพาะ ในส่วนนี้ เราจะแสดงวิธีผสานรวม Google Fonts กับไซต์ของคุณ สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน Easy Google Fonts

หลังจากนั้น คุณสามารถเปลี่ยนแบบอักษรของเว็บไซต์ได้ ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง และจากเครื่องมือ ปรับแต่ง คุณจะสามารถควบคุมรูปแบบตัวอักษรของเว็บไซต์ของคุณได้ ทางด้านซ้ายมือ คุณจะเห็นตัวเลือกการปรับแต่งใหม่ที่เรียกว่า Typography

เลือกแล้วคุณจะเห็นหน้าจอที่มีตัวเลือกมากมายในการเปลี่ยนรูปแบบตัวอักษรทั้งหมดสำหรับย่อหน้าและหัวเรื่อง

สมมติว่าคุณต้องการเปลี่ยนแบบอักษรของย่อหน้า ให้เปิดตัวเลือก แก้ไขแบบอักษร

จากที่นั่น คุณสามารถเปลี่ยน:

• สคริปต์/เซตย่อย
• ตระกูลอักษร
• น้ำหนักตัวอักษร
• ตกแต่งข้อความ
• การแปลงข้อความ

หากคุณต้องการเปลี่ยนลักษณะแบบอักษร ให้ไปที่แท็บถัดไปที่คุณสามารถเปลี่ยนได้:

• สีตัวอักษร
• สีพื้นหลัง
• ขนาดตัวอักษร
• ความสูงของเส้น
• ระยะห่างระหว่างตัวอักษร

สุดท้าย จากแท็บ Positioning คุณสามารถปรับแต่ง:

• มาร์จิ้น
• การขยายความ
• ชายแดน
• รัศมีชายแดน
• แสดง

เปลี่ยนฟอนต์

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

หากคุณมีตระกูลฟอนต์เฉพาะอยู่ในใจ คุณสามารถใช้คุณลักษณะการค้นหาได้ สำหรับการสาธิตนี้ เราจะใช้แบบอักษร Work Sans

เนื่องจากเราใช้ WordPress Customizer เพื่อทำการเปลี่ยนแปลงเหล่านี้ ทุกการอัปเดตจะปรากฏในหน้าตัวอย่างแบบสด ตัวอย่างเช่น เมื่อเราเปลี่ยนฟอนต์ของธีมเริ่มต้นเป็น Work Sans เราจะเห็นการเปลี่ยนแปลงแบบเรียลไทม์

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

เมื่อคุณปรับแต่งแบบอักษรของย่อหน้าเสร็จแล้ว ให้ย้ายไปยังตัวเลือกแบบอักษรของหัวข้อ 1 คุณสามารถเลือกหัวข้อใดก็ได้จากรายการ แต่สำหรับบทช่วยสอนนี้ เราจะเน้นที่หัวข้อ 1

เหมือนกับที่เราทำก่อนหน้านี้ เราจะเปลี่ยนตระกูลฟอนต์ ในกรณีนี้ เราจะเลือก Roboto Slab

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

4) การโฮสต์แบบอักษรของคุณเอง

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

ในการดำเนินการนี้ คุณจะต้องเข้าถึงตัวจัดการไฟล์ของเว็บเซิร์ฟเวอร์เพื่อสร้างโฟลเดอร์ที่กำหนดเองและอัปโหลดแบบอักษร หากคุณกำลังใช้บริษัทโฮสติ้ง WordPress ที่ได้รับความนิยมสูงสุด คุณอาจมีสิทธิ์เข้าถึง cPanel ที่ใช้งานง่าย หรือหากคุณใช้บริการโฮสติ้งที่มีการจัดการ เช่น Kinsta หรือ WP Engine คุณจะต้องใช้ไคลเอนต์ FTP เช่น FileZilla หรือปลั๊กอินตัวจัดการไฟล์เฉพาะ

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

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

เมื่อคุณสร้างโฟลเดอร์แล้ว ให้เปิดมัน นี่คือที่ที่คุณจะอัปโหลดไฟล์แบบอักษรที่กำหนดเอง

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

เมื่อคุณเลือกแบบอักษรแล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าเฉพาะของแบบอักษรนั้น และคุณจะเห็นปุ่ม ดาวน์โหลดครอบครัว ที่นั่น

หลังจากที่คุณกดปุ่มนั้น ตระกูลฟอนต์จะถูกดาวน์โหลดไปยังคอมพิวเตอร์ของคุณเป็นไฟล์ .zip เปิดเครื่องรูดและอัปโหลดไฟล์ไปยังโฟลเดอร์ แบบอักษร ของคุณ

นั่นคือขั้นตอนแรก ตอนนี้เรามาดูวิธีการก้าวไปอีกขั้นและรวมฟอนต์เข้ากับธีมของคุณ

รวมแบบอักษรของคุณด้วย CSS

ตอนนี้คุณสามารถเริ่มการรวมแบบอักษรนี้เข้ากับธีมของคุณด้วย CSS ที่กำหนดเองได้เล็กน้อย เปิดตัว ปรับแต่ง WordPress ไปที่ส่วน CSS เพิ่มเติม และคัดลอกโค้ด CSS จากด้านล่าง

 @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Medium.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : normal ; font-style : normal ; } @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Bold.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : bold ; font-style : normal ; }

หากคุณดูที่โค้ด CSS คุณจะเห็นว่ามันกล่าวถึงสามสิ่งหลัก

• ตระกูลแบบอักษร
• URL ต้นทาง
• น้ำหนักตัวอักษร

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

หลังจากนั้น คุณต้องปรับพาธไปยังฟอนต์ หากคุณทำตามขั้นตอนที่อธิบายไว้ข้างต้น แสดงว่าคุณได้อัปโหลดไฟล์ฟอนต์ภายในโฟลเดอร์ชื่อ fonts ดังนั้นเพียงแค่เปลี่ยนบรรทัด src : url ( “fonts/Lato-Bold.ttf” ด้วย fonts/your-font-name.ttf และคุณก็พร้อมแล้ว

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

ยิ่งไปกว่านั้น คุณสามารถเปลี่ยนแบบอักษรของหัวเรื่องด้วยโค้ด CSS ต่อไปนี้:

 h1 { font-family : 'Lato' , Georgia , serif ; }

และถ้าคุณต้องการเปลี่ยนแบบอักษรของย่อหน้า ให้ใช้โค้ด CSS นี้:

p {
font-family : 'Lato' , Georgia , serif ;

}

ในทางกลับกัน หากคุณต้องการเปลี่ยนแบบอักษรของเว็บไซต์ทั้งหมด ให้ใช้โค้ด CSS นี้:

body {
font-family : 'Lato' , Georgia , serif ;

}

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

5) การรวมแบบอักษรเว็บ

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

สำหรับการผสานรวมแบบอักษรบนเว็บ ก่อนอื่น ให้ไปที่ Google Fonts แล้วเลือกแบบอักษรและรูปแบบที่คุณต้องการ

ทางด้านขวามือ คุณจะเห็นโค้ดสำหรับฝังฟอนต์ คัดลอก

ในกรณีของเรา โค้ดฟอนต์คือ:

 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2? family= Spartan & display=swap" rel="stylesheet">

จากนั้น คุณต้องแก้ไขไฟล์ functions.php ของธีมเพื่อเรียกฟอนต์ แต่ก่อนหน้านั้นคุณจะต้องปรับโค้ด สิ่งที่คุณต้องมีคือ URL ตระกูลฟอนต์ซึ่งในกรณีของเราคือ:

https://fonts.googleapis.com/css2? ครอบครัว= สปาร์ตัน

เมื่อคุณได้รับ URL แล้ว ให้เปิดไฟล์ functions.php ของธีมของคุณ คุณสามารถใช้ธีมลูกหรือปลั๊กอินเพื่อแก้ไขไฟล์หลักของธีมได้ จากนั้นวางโค้ดต่อไปนี้

 function quadlayers_add_google_fonts ( ) { wp_register_style ( 'googleFonts' , 'https://fonts.googleapis.com/css2?family=Spartan' ) ; wp_enqueue_style ( 'googleFonts' ) ; } add_action ( 'wp_enqueue_scripts' , 'quadlayers_add_google_fonts' ) ;

หมายเหตุ : ตรวจสอบให้แน่ใจว่าได้เปลี่ยน URL ด้วยแบบอักษรที่คุณเลือก

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

body {
font-family : 'Spartan' , Georgia , serif ;

}

หลังจากนั้น อัปเดตตระกูลฟอนต์ตาม Google Font ของคุณ เท่านี้ก็เรียบร้อย

เราได้เห็นวิธีการต่างๆ ในการเปลี่ยนแบบอักษรใน WordPress แต่นั่นไม่ใช่ทั้งหมด คุณยังสามารถก้าวไปอีกขั้นและปรับแต่งแบบอักษรได้มากยิ่งขึ้น

วิธีเพิ่มแบบอักษรที่กำหนดเองใน WordPress

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

• ด้วยปลั๊กอินฟอนต์เฉพาะ
• การแก้ไขไฟล์ functions.php
• การแก้ไขไฟล์ header.php
• ผ่านไฟล์ style.css

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

โบนัส: วิธีเปลี่ยนแบบอักษรของธีมในบางพื้นที่

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

มันจะเปิดคอนโซลใหม่ทางด้านขวามือของคุณ

คุณสามารถวางเมาส์เหนือองค์ประกอบต่างๆ เพื่อดูค่า CSS ที่แน่นอนของแต่ละองค์ประกอบ

ในกรณีนี้ เราจะเปลี่ยนฟอนต์ชื่อ (h1) ดังนั้นคลาส CSS จึงเป็น entry-title

จากนั้นในแดชบอร์ด WordPress ของคุณ ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม และวางโค้ด CSS ต่อไปนี้เพื่อเปลี่ยนแบบอักษรของชื่อบทความ

หมายเหตุ : แบบอักษรที่คุณต้องการใช้ควรถูกรวมเข้ากับไซต์ของคุณแล้ว

 .entry-title { font-family: 'Lato', Georgia, serif; }

เพียงปรับโค้ดด้วยแบบอักษรที่คุณต้องการใช้บนเว็บไซต์ของคุณ

แค่นั้นแหละ! วิธีนี้ทำให้คุณสามารถเปลี่ยนแบบอักษรในบางพื้นที่ได้อย่างง่ายดาย ตรวจสอบให้แน่ใจว่าคุณใช้คลาส CSS ที่ถูกต้อง มิฉะนั้นจะไม่ทำงาน

วิธีเปลี่ยนสีแบบอักษร

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

มาดูกันว่าคุณสามารถเปลี่ยนสีแบบอักษรบนไซต์ของคุณโดยใช้โค้ด CSS อย่างง่ายได้อย่างไร

สมมติว่าคุณมีหน้าที่มีหลายหัวเรื่องดังนี้:

ในการเปลี่ยนสีของส่วนหัว อันดับแรก คุณต้องค้นหาคลาส CSS ที่เหมาะสม ตัวอย่างเช่น ในการปรับเปลี่ยนสีฟอนต์ h2 คุณต้องค้นหาคลาสของมันโดยคลิกขวาที่มันแล้วกด Inspect

ในกรณีนี้ คลาส CSS คือ .entry-content h2

หลังจากนั้นให้เปิดตัวปรับแต่ง WordPress ไปที่ส่วน CSS เพิ่มเติม และวางโค้ด CSS ต่อไปนี้:

 .entry-content h2 { color : #f542f5 ; }

อย่างที่คุณเห็น สีของหัวเรื่อง 2 เปลี่ยนเป็นสีแดง

ด้วยวิธีนี้ คุณยังสามารถแก้ไขหัวเรื่องทั้งหมดของคุณได้ สิ่งที่คุณต้องทำคือ แทนที่ h2 ด้วยแท็กส่วนหัวที่คุณต้องการ

หรือหากคุณต้องการเปลี่ยนแบบอักษรของย่อหน้า ให้ใช้โค้ด CSS นี้:

 .entry-content p { color : blue ; }

ใช้รหัสเป็นฐานและเลือกสีที่คุณต้องการสำหรับแต่ละส่วนของไซต์ของคุณ

แค่นั้นแหละ! นั่นเป็นวิธีที่คุณสามารถเปลี่ยนสีแบบอักษรได้อย่างง่ายดาย

วิธีระบุแบบอักษรจากเว็บไซต์และรูปภาพ

อีกตัวเลือกหนึ่งที่น่าสนใจเมื่อคุณท่องเว็บก็คือ การระบุฟอนต์จากทั้งเว็บไซต์และรูปภาพ

มีหลายวิธีที่จะทราบว่าไซต์ใช้รูปแบบใด วิธีที่ง่ายที่สุดคือใช้เครื่องมือตรวจสอบของเบราว์เซอร์ เมื่อคุณพบแบบอักษรที่ต้องการแล้ว เพียงคลิกขวาที่ข้อความที่มีแบบอักษรนั้นและไปที่ Inspect (ในบางเบราว์เซอร์ คุณอาจต้องไปที่ Web Developer > Developer Tool ) คุณจะเห็นว่าองค์ประกอบนั้นจะถูกเน้น และคุณจะสามารถเห็นสไตล์และเลย์เอาต์ในตัวตรวจสอบ

หลังจากนั้น ไปที่แท็บ Computed และค้นหาฟิลด์ Font-Family ซึ่งคุณจะเห็นแบบอักษรของเว็บไซต์

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

บทสรุป

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

ในคู่มือนี้ เราได้เห็นวิธีการต่างๆ ในการเปลี่ยนแบบอักษรใน WordPress:

• ตัวแก้ไขเริ่มต้น (Gutenberg และ Classic Editor)
• โค้ด CSS ที่กำหนดเอง
• ด้วยปลั๊กอิน
• โฮสติ้งฟอนต์ของคุณเอง
• การรวมแบบอักษรเว็บ

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

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

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

เราหวังว่าคุณจะชอบคำแนะนำนี้และพบว่ามีประโยชน์ หากคุณเคย โปรดแชร์บนโซเชียลมีเดีย สำหรับบทแนะนำและคำแนะนำเพิ่มเติม โปรดดูที่บล็อกของเรา

คุณใช้วิธีใดในการเปลี่ยนแบบอักษรบนไซต์ของคุณ คุณรู้วิธีอื่นใดที่เราควรเพิ่มหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!