วิธีเพิ่มไอคอนแบบอักษรในธีม WordPress ของคุณได้อย่างง่ายดาย

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


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

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

ใช้แบบอักษรไอคอนกับธีม WordPress ใด ๆ

ไอคอนแบบอักษรคืออะไรและทำไมคุณควรใช้งาน?

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

ไอคอนแสดงตัวอย่างแบบอักษร

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

มีแบบอักษรไอคอนฟรีและโอเพนซอร์สหลายแบบที่มีไอคอนสวยงามหลายร้อยรายการ.

ในความเป็นจริงการติดตั้ง WordPress แต่ละครั้งมาพร้อมกับชุดแบบอักษรไอคอน dashicons ฟรี ไอคอนเหล่านี้ถูกใช้ในเมนูผู้ดูแลระบบ WordPress และส่วนอื่น ๆ ภายในพื้นที่ของผู้ดูแลระบบ WordPress.

แบบอักษรของไอคอนยอดนิยมอื่น ๆ ได้แก่ :

  • ตัวอักษรยอดเยี่ยม
  • Genericons
  • IcoMoon
  • Linearicons
  • ไอคอนวัสดุโดย Google
  • โครงการคำนาม

เพื่อประโยชน์ของบทช่วยสอนนี้เราจะใช้ Font Awesome มันเป็นแบบอักษรฟรีและโอเพ่นซอร์สไอคอนที่เป็นที่นิยมมากที่สุดที่มีอยู่ เราใช้ FontAwesome บนเว็บไซต์ WPBeginner เช่นเดียวกับปลั๊กอิน WordPress ของเราเช่น OptinMonster, WPForms, RafflePress เป็นต้น.

ในคู่มือนี้เราจะกล่าวถึงวิธีเพิ่มแบบอักษรไอคอนใน WordPress สามวิธี คุณสามารถเลือกวิธีที่เหมาะกับคุณที่สุด.

เพิ่มไอคอนแบบอักษรใน WordPress โดยใช้ปลั๊กอิน

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

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน Font Awesome สำหรับ WordPress สำหรับรายละเอียดเพิ่มเติมดูที่คู่มือทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.

เมื่อเปิดใช้งานปลั๊กอินจะเปิดใช้งานการสนับสนุน Font Awesome สำหรับธีมของคุณ ตอนนี้คุณสามารถแก้ไขโพสต์หรือหน้า WordPress และใช้ไอคอนย่อเช่นนี้:

คุณสามารถใช้รหัสย่อนี้พร้อมกับข้อความอื่นหรือด้วยตัวเองในบล็อกรหัสย่อเฉพาะ.

การเพิ่มรหัสย่อแบบอักษรของไอคอนใน WordPress

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

ตัวอย่างไอคอน

คุณยังสามารถเพิ่มรหัสย่อแบบอักษรไอคอนภายในบล็อกย่อหน้าด้วยตัวเองซึ่งคุณสามารถใช้การตั้งค่าบล็อกเพื่อเพิ่มขนาดไอคอน.

เพิ่มขนาดไอคอน

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

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

แบบอักษรของไอคอนขยายใหญ่ขึ้น

คุณยังสามารถใช้ไอคอนย่อภายในคอลัมน์และสร้างกล่องคุณสมบัติดังนี้:

การใช้แบบอักษรไอคอนในกล่องคุณสมบัติ

2. การใช้ไอคอนแบบอักษรด้วยเครื่องมือสร้างหน้า WordPress

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

Beaver Builder

Beaver Builder เป็นปลั๊กอินสำหรับสร้างหน้าเวิร์ดเพรสที่ดีที่สุดในตลาด มันช่วยให้คุณสร้างเค้าโครงเพจที่กำหนดเองใน WordPress ได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดใด ๆ.

Beaver Builder มาพร้อมกับไอคอนที่สวยงามและพร้อมที่จะใช้โมดูลที่คุณสามารถลากและวางลงในโพสต์และหน้าของคุณ.

โมดูลไอคอน Beaver Builder

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

แก้ไขแบบอักษรไอคอนใน Beaver Builder

คุณสามารถสร้างธีม WordPress ที่กำหนดเองได้อย่างสมบูรณ์โดยไม่ต้องเขียนโค้ดใด ๆ โดยใช้ผลิตภัณฑ์ Themer ของ Beaver Builder.

Elementor Pro

Elementor เป็นอีกหนึ่งปลั๊กอินสำหรับสร้างหน้า WordPress ยอดนิยม นอกจากนี้ยังมาพร้อมกับองค์ประกอบหลายอย่างที่ช่วยให้คุณใช้แบบอักษรไอคอนรวมถึงองค์ประกอบไอคอน.

ไอคอนองค์ประกอบ

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

ผู้สร้างหน้ายอดนิยมอื่น ๆ เช่น Divi และ Visual Composer ยังมีการสนับสนุนแบบอักษรไอคอนอย่างสมบูรณ์.

3. การเพิ่มแบบอักษรไอคอนใน WordPress ด้วยรหัส

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

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

คุณยังสามารถอัปโหลดไดเรกทอรีฟอนต์ทั้งหมดไปยังโฟลเดอร์ในชุดรูปแบบ WordPress ของคุณจากนั้นใช้แบบอักษรเหล่านั้นในสไตล์ชีทของคุณ.

เนื่องจากเราใช้ Font Awesome สำหรับบทช่วยสอนนี้เราจะแสดงให้คุณเห็นว่าคุณสามารถเพิ่มได้อย่างไรโดยใช้ทั้งสองวิธี.

วิธีที่ 1:

คู่มือวิธีนี้ค่อนข้างง่าย.

ก่อนอื่นคุณต้องไปที่เว็บไซต์ Font Awesome และป้อนที่อยู่อีเมลของคุณเพื่อรับรหัสการฝัง.

รับโค้ดฝัง Font Awesome

ตอนนี้ตรวจสอบกล่องจดหมายของคุณสำหรับอีเมลจาก Font Awesome ด้วยรหัสฝังของคุณ คัดลอกและวางโค้ดฝังนี้ในไฟล์ header.php ของธีม WordPress หน้าแท็ก.

รหัสการฝังของคุณจะเป็นบรรทัดเดียวที่จะดึงไลบรารี Font Awesome โดยตรงจากเซิร์ฟเวอร์ CDN มันจะมีลักษณะดังนี้:

วิธีนี้ง่ายที่สุด แต่อาจทำให้เกิดความขัดแย้งกับปลั๊กอินอื่น ๆ.

วิธีที่ดีกว่าคือการโหลด JavaScript ใน WordPress อย่างถูกต้องโดยใช้กลไกการจัดคิวในตัว.

แทนที่จะเชื่อมโยงกับสไตล์ชีทจากเทมเพลตส่วนหัวของธีมคุณสามารถเพิ่มรหัสต่อไปนี้ในไฟล์ function.php ของธีมหรือในปลั๊กอินเฉพาะไซต์.

ฟังก์ชั่น wpb_load_fa () {

wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, อาร์เรย์ (), ‘1.0.0’, จริง);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

วิธีที่ 2:

วิธีที่สองไม่ใช่วิธีที่ง่ายที่สุด แต่จะช่วยให้คุณสามารถโฮสต์แบบอักษรไอคอน Awesome Awesome บนเว็บไซต์ของคุณเอง.

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

ดาวน์โหลดแบบอักษรของไอคอนไปยังคอมพิวเตอร์ของคุณ

เพียงดาวน์โหลดแบบอักษรไอคอนและเปิดเครื่องรูดแพ็คเกจ.

ตอนนี้คุณจะต้องเชื่อมต่อกับโฮสติ้ง WordPress ของคุณโดยใช้ไคลเอนต์ FTP และไปที่ไดเรกทอรีของธีม WordPress.

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

การอัพโหลดแบบอักษรไอคอนไปยังธีม WordPress ของคุณ

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

ฟังก์ชั่น wpb_load_fa () {

wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-awesome.min.css’);

}

add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);

คุณโหลด Font Awesome ไปยังธีม WordPress ของคุณเรียบร้อยแล้ว.

ตอนนี้มาเป็นส่วนหนึ่งที่คุณจะเพิ่มไอคอนที่แท้จริงลงในธีม WordPress ของคุณโพสต์หรือหน้า.

การแสดงไอคอนแบบอักษรด้วยตนเองใน WordPress

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

ชื่อไอคอน
คัดลอกชื่อไอคอนและใช้มันใน WordPress.

คุณสามารถจัดสไตล์ไอคอนนี้ในสไตล์ชีทของชุดรูปแบบของคุณ:

.fa-arrow-alt-circle-up {
font-size: 50px;
color: # FF6600;
}

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

บ้าน
ห้องสมุด
การประยุกต์ใช้งาน
การตั้งค่า

ตอนนี้คุณสามารถจัดรูปแบบพวกเขาในสไตล์ชีทของชุดรูปแบบของคุณ:

.ไอคอนกลุ่มรายการฉัน
สี: # 333;
ขนาดตัวอักษร: 50px;
}
.icons-group-item i: hover {
สี: # FF6600
}

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me