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

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

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

หากคุณเพิ่งติดตั้งธีม WordPress(installed a WordPress theme)หรือมี ประสบการณ์ CSSและการเขียนโค้ด เราจะแสดงตัวเลือกต่างๆ ให้คุณใช้เพื่อเปลี่ยนแบบอักษรในWordPress

วิธีเปลี่ยนแบบอักษรใน WordPress(How to Change Fonts in WordPress)

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

  • ใช้แบบอักษรของเว็บ เช่นGoogle Fonts , Fonts.comหรือAdobe Edge Web Fontsซึ่งโฮสต์อยู่บนไซต์ของบุคคลที่สาม
  • โค้ด(Code)แบบอักษรเว็บลงในธีมของคุณและจัดคิวให้
  • โฮสต์(Host)แบบอักษรบนเว็บไซต์ของคุณและเพิ่มลงในธีมของคุณ

1. วิธีเปลี่ยนแบบอักษรใน WordPress โดยใช้แบบอักษรเว็บ(1. How to Change Fonts in WordPress Using Web Fonts)

การใช้แบบอักษรเว็บเป็นวิธีที่ง่ายและรวดเร็วในการเปลี่ยนแบบอักษรในWordPressมากกว่าการดาวน์โหลดและอัปโหลดไฟล์แบบอักษร

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

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

คุณสามารถเพิ่มแบบอักษรของเว็บได้โดยใช้ปลั๊กอิน WordPress(using a WordPress plugin)หรือด้วยตนเองโดยการเพิ่มโค้ดสองสามบรรทัดในไซต์ของคุณ ลองสำรวจทั้งสองตัวเลือก

วิธีเพิ่มแบบอักษรเว็บโดยใช้ปลั๊กอิน WordPress(How to Add Web Fonts Using a WordPress Plugin)

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

  1. ในการเริ่มต้น ให้เข้าสู่ ระบบแด ชบอร์ดผู้ดูแลระบบWordPress และเลือก (WordPress)Plugins > Add New

  1. พิมพ์Google Fonts Typographyในช่องค้นหา แล้วเลือกInstall Now(Install Now)

  1. เลือกเปิดใช้(Activate)งาน

  1. ถัดไป เข้าถึงเครื่องมือปรับแต่ง(Customizer)โดยไปที่ ลักษณะที่ Appearance > Customizeแต่ง

  1. เลือกส่วนGoogle Fonts(Google Fonts)

  1. ถัดไป ให้คลิกที่ลิงก์เพื่อเปิดการตั้งค่าแบบอักษรและกำหนดค่าดังนี้:
  • ภายใต้การตั้งค่าพื้นฐาน(Basic Settings)ให้ตั้งค่าแบบอักษรเริ่มต้นสำหรับข้อความเนื้อหา หัวเรื่อง และปุ่มของคุณ

  • ภายใต้การตั้งค่าขั้นสูง(Advanced Settings)ให้กำหนดค่าชื่อไซต์และคำอธิบาย เมนู หัวเรื่องและเนื้อหา แถบด้านข้าง และส่วนท้ายของคุณ

หากมีแบบอักษรบนไซต์ของคุณที่ไม่แสดงหรือทำงานไม่ถูกต้อง ให้ใช้ ส่วน การดีบัก(Debugging )เพื่อแก้ไขปัญหา

  1. คุณสามารถทดสอบการตั้งค่าเหล่านี้ในเครื่องมือปรับแต่ง(Customizer) เพื่อให้แน่ใจว่าทำงานตามที่คุณต้องการ จากนั้นเลือกเผยแพร่(Publish)

หมายเหตุ(Note) : หากคุณลืมเลือกเผยแพร่ในเครื่องมือปรับแต่ง(Customizer)คุณจะสูญเสียการเปลี่ยนแปลงทั้งหมดที่คุณทำไว้

วิธีเพิ่มแบบอักษรเว็บโดยใช้โค้ด(How to Add Web Fonts Using Code)

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

อย่างไรก็ตาม มีขั้นตอนต่างๆ ที่ต้องทำ หากคุณใช้ธีมจาก ไดเร็กทอรีธีม WordPressหรือธีมที่กำหนดเอง

หากคุณซื้อธีมจากไดเร็กทอรีธีม ของ WordPress ให้ (WordPress)สร้างธีม(create a child theme)ย่อย จากนั้นให้ไฟล์ style.css และ functions.php ง่ายกว่าถ้าคุณมีธีมที่กำหนดเอง เนื่องจากคุณสามารถแก้ไขไฟล์สไตล์ชีตและฟังก์ชันจากธีมของคุณได้

  1. ในการเริ่มต้น เลือกแบบอักษรจากไลบรารีGoogle Fonts แล้วเลือกไอคอน (Google Fonts)+ (plus)เพื่อเพิ่มลงในไลบรารีของคุณ

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

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

หมายเหตุ(Note) : เราเลือกWork Sansสำหรับคู่มือนี้ ดังนั้นชื่อแบบอักษรอาจแตกต่างกันไปขึ้นอยู่กับสิ่งที่คุณเลือก

  1. คัดลอกโค้ดส่วนนี้: https://fonts.googleapis.com/css2?family=Work+Sans

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

  1. หากต้องการจัดคิวฟอนต์ ให้เปิดไฟล์ฟังก์ชั่นและเพิ่มโค้ดต่อไปนี้ ( แทนที่(Replace)ลิงก์ด้วยลิงก์ที่คุณได้รับจากGoogle Fonts ):

ฟังก์ชัน wosib_add_google_fonts () { (function wosib_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

  1. คุณสามารถเพิ่มบรรทัดใหม่ให้กับฟังก์ชันของคุณหรือในบรรทัดเดียวกันได้หากต้องการเพิ่มฟอนต์ในอนาคตดังนี้:

ฟังก์ชัน mybh_add_google_fonts() { (function mybh_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

ในกรณีนี้ เราได้จัดคิวทั้งแบบอักษรCambriaและWork Sans

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

  1. ในการดำเนินการนี้ ให้เปิดไฟล์ style.css ของธีมของคุณ และเพิ่มโค้ดเพื่อจัดรูปแบบองค์ประกอบแต่ละรายการด้วยแบบอักษรเว็บของคุณดังนี้:

ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', sans-serif; (font-family: ‘Work Sans’, sans-serif; )
}

h1, h2, h3 {
ตระกูลฟอนต์: 'Cambria', serif; (font-family: ‘Cambria’, serif;)
}

ในกรณีนี้ ฟอนต์หลักจะเป็นWork Sansในขณะที่องค์ประกอบส่วนหัว เช่น h1, h2 และ h3 จะใช้Cambria

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

  1. มีฟอนต์สำรองเพื่อให้แน่ใจว่าฟอนต์สามารถแสดงผลหรือเข้าถึงได้ง่ายโดยเฉพาะสำหรับผู้ใช้ที่มีอุปกรณ์เก่า การเชื่อมต่อไม่ดี หรือหากผู้ให้บริการฟอนต์มีปัญหาทางเทคนิค เมื่อต้องการทำสิ่งนี้ ไปที่สไตล์ชีตและแก้ไขCSSเพื่ออ่านดังนี้:

ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', Arial, sans-serif; (font-family: ‘Work Sans’, Arial, sans-serif;)
}

h1, h2, h3 {
ตระกูลแบบอักษร: 'Cambria', Times New Roman, serif; (font-family: ‘Cambria’, Times New Roman, serif;)
}

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

2. วิธีเปลี่ยนฟอนต์ใน WordPress โดยโฮสติ้งฟอนต์(2. How to Change Fonts in WordPress by Hosting Fonts)

การโฮสต์ฟอนต์บนเซิร์ฟเวอร์ของคุณเองจะช่วยให้คุณเพิ่มประสิทธิภาพการทำงานของฟอนต์เว็บได้ แต่ก็เป็นวิธีที่ปลอดภัยกว่าใน(a more secure way)การทำเช่นนั้น แทนที่จะดึงทรัพยากรจากไซต์ของบุคคลที่สาม

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

  1. ในการเริ่มต้น ให้ดาวน์โหลด แตกไฟล์ อัปโหลดไฟล์ฟอนต์ไปยังไซต์ของคุณ แล้วเชื่อมโยงมันในสไตล์ชีตของคุณ ในกรณีนี้ คุณไม่จำเป็นต้องจัดคิวฟอนต์ในไฟล์ functions.php เหมือนที่คุณทำกับฟอนต์ของเว็บ ตรวจสอบว่าไฟล์ที่คุณกำลังอัปโหลดอยู่ใน รูปแบบ .woffก่อนนำไปใช้บนเว็บไซต์ของคุณ

  1. ถัดไป ไปที่wp-content/themes/themenameเพื่ออัปโหลดไฟล์ฟอนต์ไปยังธีมของคุณ 
  2. เปิดสไตล์ชีตและเพิ่มโค้ดต่อไปนี้ (ในกรณีนี้ เรากำลังใช้ฟอนต์ Work Sansแต่คุณสามารถแทนที่ด้วยฟอนต์ของคุณเองได้):

@font-face {
ตระกูลฟอนต์: 'Work Sans'; (font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: ปกติ; ( font-weight: normal;)
ตัวอักษรสไตล์: ปกติ; ( font-style: normal;)
}

@font-face {
ตระกูลฟอนต์: 'Work Sans'; ( font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: ตัวหนา; ( font-weight: bold;)
ตัวอักษรสไตล์: ปกติ; (font-style: normal;)
}

@font-face {
ตระกูลแบบอักษร: 'Cambria'; (font-family: ‘Cambria’;)
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: ปกติ; ( font-weight: normal;)
ตัวอักษรสไตล์: ปกติ; ( font-style: normal;)
}

หมายเหตุ(Note) : การใช้ @fontface จะทำให้คุณสามารถใช้แบบอักษรตัวหนา ตัวเอียง และรูปแบบอื่นๆ ของแบบอักษรได้ หลังจากนั้นคุณสามารถระบุน้ำหนักหรือรูปแบบสำหรับแต่ละแบบอักษรได้

  1. ถัดไป เพิ่มสไตล์สำหรับองค์ประกอบของคุณดังนี้:

ร่างกาย { (body {)
ตระกูลแบบอักษร: 'Work Sans', Arial, sans-serif; (font-family: ‘Work Sans’, Arial, sans-serif;)
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
ตระกูลแบบอักษร: 'Cambria', Times New Roman, serif; (font-family: ‘Cambria’, Times New Roman, serif;)
}

ปรับแต่งตัวอักษร WordPress ของคุณ(Customize Your WordPress Typography)

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

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



About the author

ฉันเป็นผู้เชี่ยวชาญ Windows 10 ที่ได้รับการแนะนำเป็นอย่างยิ่ง และฉันเชี่ยวชาญในการช่วยเหลือผู้คนในการปรับแต่งรูปลักษณ์ของคอมพิวเตอร์และทำให้เครื่องมือ Office ของพวกเขาใช้งานง่ายขึ้น ฉันใช้ทักษะของฉันเพื่อช่วยให้ผู้อื่นค้นพบวิธีที่มีประสิทธิภาพที่สุดในการทำงานกับ Microsoft Office รวมถึงวิธีจัดรูปแบบข้อความและกราฟิกสำหรับการพิมพ์ออนไลน์ วิธีสร้างธีมที่กำหนดเองสำหรับ Outlook และแม้กระทั่งวิธีปรับแต่งรูปลักษณ์ของแถบงานบนเดสก์ท็อป คอมพิวเตอร์.



Related posts