สิ่งนี้เกิดขึ้นกับทุกคน

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

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

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

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

คุณทำได้และฉันจะแสดงให้คุณเห็น

คุณจะใช้ Dashicons ได้อย่างไร เมนูนำทาง?

เริ่มจากตัวอย่างง่ายๆ Dashicons รวมอยู่ใน WordPress แล้วตั้งแต่เวอร์ชัน 3.8 แต่คุณยังคงต้องรวมไว้เพื่อให้แสดงอย่างถูกต้องที่ส่วนหน้าของไซต์ของคุณ นั่นคือธีมของคุณ

ขั้นตอนที่ 1: เตรียม Dashicons ของธีมให้พร้อม

ในการทำให้ Dashicons ธีมของคุณพร้อมก่อน ให้เปิดไฟล์ functions.php ของคุณ (พบได้ในAppearance> ;Editor – โดยค่าเริ่มต้น โปรแกรมจะเปิดไฟล์ CSS ของธีมปัจจุบันของคุณ ไปข้างหน้าและค้นหาfunctions.php และคลิกเพื่อโหลดใน Editor)

ขั้นตอนที่ 2: เข้าคิวสคริปต์

เลื่อนไปจนสุดด้านล่างแล้ววางบรรทัดเหล่านี้ ของรหัสต่อท้าย:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

เอาล่ะ! ตอนนี้ธีมของคุณพร้อมใช้งาน Dashicons แล้ว

ขั้นตอนที่ 3: การเพิ่ม Dashicons ในรายการเมนู

มาเพิ่ม Dashicon สำหรับลิงก์หน้าแรกของคุณ ตรงไปที่เว็บไซต์ Dashicons และเลือกไอคอนที่คุณต้องการ

อัปเดต: เดิมที Dashicons มีให้บริการบน GitHub.io แต่หลังจากนั้นก็มีให้บริการบน WordPress.org

ขั้นตอนที่ 4:

คลิกที่ไอคอนที่ต้องการ (ในกรณีนี้ ฉันเลือกไอคอนหน้าแรก) จากนั้นคลิกที่คัดลอก HTML มันจะแสดงหน้าต่างป๊อปอัปพร้อมรหัสที่คุณต้องการ

ขั้นตอนที่ 5:

กลับไปที่แดชบอร์ด WordPress ของคุณ คลิกที่ลักษณะที่ปรากฏ > ; เมนูและวางโค้ดตรงตำแหน่งที่ระบุว่า Navigation Label

หากคุณยังต้องการให้คำนั้นปรากฏขึ้น ให้พิมพ์หลังวงเล็บ div ปิด

คลิกที่ บันทึกและโหลดหน้าแรกของคุณ ลิงก์หน้าแรกของคุณควรแสดง Dashicon ที่สวยงามและคมชัด

คุณสามารถทำได้สำหรับรายการเมนูการนำทางทั้งหมดหรือเฉพาะสำหรับหน้าแรก เพียงทำซ้ำขั้นตอนด้านบนด้วยไอคอนที่ตรงกัน ง่ายมากใช่ไหม

คุณใช้ Dashicons ในเมตาโพสต์อย่างไร

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

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

สมมติว่าคุณต้องการเพิ่มไอคอนหน้าชื่อหรือชื่อผู้เขียนของคุณ

ขั้นตอนที่ 1:

ก่อนอื่น เราจะเลือกไอคอนที่เราต้องการ

ขั้นตอนที่ 2:

จากนั้นคลิกที่มัน และคราวนี้เลือกคัดลอก CSS อีกครั้ง มันจะให้หน้าต่างป๊อปอัปพร้อมรหัสที่คุณต้องวาง

ขั้นตอนที่ 3:

ตอนนี้เปิด style.css ของคุณ และค้นหาตัวเลือกที่เกี่ยวข้อง ในกรณีนี้ – .entry-author โดยการเพิ่ม :before แล้ววางโค้ด CSS ที่คุณคัดลอกมาจากเว็บไซต์ Dashicons ชื่อผู้เขียนจะมีไอคอนที่สวยงามอยู่ข้างหน้า คุณต้องระบุว่าคุณกำลังใช้ฟอนต์ Dashicons โค้ดที่แก้ไขจะมีลักษณะดังนี้:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

มาเพิ่มสไตล์ด้วย และตอนนี้โค้ดที่เสร็จสมบูรณ์จะมีลักษณะดังนี้:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

ผลลัพธ์สุดท้าย

แล้วไง ท้ายที่สุดแล้วหน้าตาจะเป็นอย่างไร

อะไรทำนองนี้:

มีหลายวิธีมากมายที่คุณสามารถใช้ Dashicons ปล่อยให้ความคิดสร้างสรรค์ของคุณเข้าควบคุมและดูว่าคุณสามารถทำอะไรได้บ้าง

รวบรวมทั้งหมด

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

ต่อไปนี้คือตัวอย่างพื้นฐานของสิ่งที่ คุณสามารถใช้เพื่อสร้าง: