ผู้คนมักจะดึงดูดสายตาของ a เว็บไซต์เว็บ ของ WordPress มากเท่ากับที่พวกเขาสนใจในเนื้อหาที่เป็นลายลักษณ์อักษรที่คุณแบ่งปัน ในความเป็นจริงตาม Bullas เจฟฟ์ ", บทความที่มีรูปภาพมีจำนวนการดู 94% มากกว่าบทความที่ไม่มีรูปภาพ

นั่นเป็นการเพิ่มการดูหน้าเว็บอย่างมากหากคุณถามฉัน

และสิ่งที่เป็นเหตุผลที่ว่า?

เพียงเพิ่มรูปภาพคุณภาพสูงที่เกี่ยวข้องกับบทความในเนื้อหาของคุณ

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

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

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

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

แต่มีวิธีแก้ไข: แบบอักษรของไอคอน

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

ดังนั้นเรามาเริ่มกันเลย

แบบอักษรไอคอนคืออะไรและเหตุใดคุณจึงควรใช้

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

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

ทำไมต้องใช้แบบอักษรไอคอน

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

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

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

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

การติดตั้งไอคอนแบบอักษรบนไซต์ของคุณโดยใช้ปลั๊กอิน

Better Font Awesome คือ WordPress ปลั๊กอิน ฟรีแวร์ที่ให้คุณรวม Font Awesome เวอร์ชันล่าสุดเข้ากับโปรเจ็กต์ WordPress ของคุณได้โดยอัตโนมัติ นอกจากนี้ยังมาพร้อมกับ CSS, รหัสย่อและตัวสร้างรหัสย่อ TinyMCE

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

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

ขั้นตอน 1: การติดตั้งและเปิดใช้งานแบบอักษรที่ดีกว่า

ในการเริ่มต้นให้ติดตั้งและเปิดใช้งานปลั๊กอิน“ Better Font Awesome” ผ่านแดชบอร์ด WordPress ของคุณเช่นเดียวกับที่คุณทำกับปลั๊กอินอื่น ๆ

ขั้นแรกไปที่ " ปลั๊กอิน> เพิ่มใหม่ และค้นหา " ตัวอักษรที่ดีกว่าน่ากลัว '

จากนั้นเลือก " ติดตั้งในขณะนี้ »และคลิกที่« กระตุ้น '

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

ขั้นตอนที่ 2: กำหนดการตั้งค่าปลั๊กอิน

ในการกำหนดค่าปลั๊กอิน« ตัวอักษรที่ดีกว่าน่ากลัว ", เริ่มโดยคลิกที่รายการเมนู" ตัวอักษรที่ดีกว่าน่ากลัว ภายใต้การตั้งค่า เมื่อคุณทำเช่นนั้นคุณจะเห็นหน้าจอคล้ายกับสิ่งนี้:

ที่นี่คุณสามารถทำต่อไปนี้:

• เวอร์ชั่น: เลือกเวอร์ชันของ“ Better Font Awesome” ที่คุณต้องการใช้
• ใช้ CSS แบบย่อ: ทำเครื่องหมายที่ช่องนี้หากคุณต้องการใช้ CSS เวอร์ชันย่อ
• ลบแบบอักษรการพิมพ์ที่มีอยู่: เลือกช่องนี้เพื่อพยายามลบข้อมูลโค้ดและรหัสย่อที่เพิ่มโดยปลั๊กอินและธีมอื่น ๆ
• ซ่อนบทวิจารณ์ของผู้ดูแลระบบ: ซ่อนคำเตือนของผู้ดูแลระบบเริ่มต้นที่ปรากฏขึ้นเมื่อเกิดข้อผิดพลาดของ API และ CDN

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

ขั้นตอนที่ 3: การเพิ่มไอคอนในเว็บไซต์ของคุณ

มีสามวิธีง่ายๆในการเพิ่มไอคอนให้กับเว็บไซต์ของคุณโดยใช้“ Better Font Awesome” - ผ่านรหัสย่อ HTML หรือ TinyMCE

# 1. การเพิ่มไอคอนโดยใช้รหัสย่อ

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

คุณสามารถค้นหาไอคอนที่คุณต้องการได้ที่นี่ ตัวอย่างเช่นหากคุณต้องการไอคอน "อีเมล" เพียงแค่ค้นหาคำหลักนั้นและเลือกไอคอนที่คุณต้องการใช้โดยคลิกที่ไอคอนนั้น

หลังจากคลิกที่ไอคอนที่คุณต้องการเพิ่มคุณจะเห็นหน้าจอแสดงภาพของไอคอนที่มีขนาดแตกต่างกันและโค้ดขนาดเล็ก:

เพียงคัดลอกบล็อกของโค้ดและวางที่ใดก็ได้บนเว็บไซต์ของคุณโดยใช้แท็บ "Text Editor" นี่คือลักษณะของตัวแก้ไขบนเว็บไซต์ของคุณ:

ในที่สุดนี่คือสิ่งที่ ผู้เข้าชม จะเห็นเมื่อพวกเขาเข้าถึงไซต์ของคุณ:

# 2. การเพิ่มไอคอนโดยใช้โค้ด HTML

อย่างที่เราเห็นในหัวข้อ " ปุ๋ย คุณมีตัวเลือกในการใช้โค้ด HTML เพื่อแทรกไอคอนบนเว็บไซต์ของคุณ อย่างไรก็ตามนักพัฒนาปลั๊กอินพิจารณาว่าการใช้ HTML ต้องใช้คำนำหน้าเฉพาะเวอร์ชัน

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

# 3. การเพิ่มไอคอนโดยใช้ TinyMCE

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

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

หากคุณต้องการเรียนรู้วิธีปรับแต่งไอคอนในเว็บไซต์ของคุณโปรดดูตัวอย่างของ " ตัวอักษรที่น่ากลัว '