Πώς να το χρησιμοποιήσετε και να αξιοποιήσετε στο έπακρο;

Τα εικονίδια είναι συναρπαστικά!

Έχουν τη δύναμη να επικοινωνούν γρήγορα με το κοινό δημιουργώντας μια ισχυρή οπτική σύνδεση.

Αυτός είναι ο λόγος για τον οποίο τα εικονίδια χρησιμοποιούνται εκτενώς παντού, συμπεριλαμβανομένων των ιστοσελίδων WordPress.

Επίσης, η χρήση του ίδιου θέματος στον ιστότοπό σας για αρκετούς μήνες μπορεί να είναι βαρετή. Είναι κοινό.

Και τότε, θα ψάχνετε για κάτι πιο ενδιαφέρον, χρησιμοποιώντας αυτό, και θα βαρεθείτε ξανά,

Και ο κύκλος συνεχίζεται και συνεχίζεται…

Λοιπόν, πώς μπορείτε να παραλείψετε αυτόν τον κύκλο της πλήξης;

Τα Dashicons είναι ένας εξαιρετικός τρόπος!

Μπορεί να βελτιώσει την αισθητική του ιστότοπού σας και να σας βοηθήσει να ξεχωρίσετε. Θα σας γλιτώσει επίσης από το να καταβάλετε επιπλέον προσπάθειες και να γεμίσετε τον ιστότοπό σας με περιττές εικόνες που επιβραδύνουν την ταχύτητα της σελίδας.

Λοιπόν, ας εξερευνήσουμε τα Dashicons και πώς μπορείτε να τα χρησιμοποιήσετε αποτελεσματικά στον ιστότοπό σας στο WordPress.

Τι είναι τα WordPress Dashicons;

Τα Dashicons είναι οι επίσημες γραμματοσειρές εικονιδίων του WordPress που παρουσιάστηκαν πριν από χρόνια με την έκδοση 3.8. Αυτές οι γραμματοσειρές είναι εντυπωσιακές και φοβερές για να τις δείτε αν τις χρησιμοποιείτε στον ιστότοπό σας. Είναι αρχεία SVG κορυφαίας ποιότητας που μπορείτε να κλιμακώσετε εύκολα σε οποιοδήποτε μέγεθος χωρίς εικονοστοιχεία.

Καθώς διαθέτουν εγγενή υποστήριξη WordPress λόγω της δημιουργίας τους από την ίδια την ομάδα τους, μπορείτε να τα χρησιμοποιήσετε απευθείας χωρίς να φορτώσετε πρόσθετα σενάρια. Περιλαμβάνονται περίπου 350 γραμματοσειρές εικονιδίων, τις οποίες μπορείτε να βρείτε στο επίσημο Πόροι προγραμματιστών WordPress.

Έχουν κατηγοριοποιήσει αυτά τα εικονίδια με βάση το θέμα, καθώς και ότι μπορείτε να δείτε ένα δυναμικό πεδίο αναζήτησης που σας επιτρέπει να φιλτράρετε τα διαθέσιμα εικονίδια.

Μπορείτε να χρησιμοποιήσετε αυτά τα εικονίδια σε:

• Πίνακας ελέγχου WordPress
• Μενού πλοήγησης
• Σελίδες και αναρτήσεις
• Μεταδεδομένα
• Στοιχεία επεξεργασίας
• Προσαρμοσμένα πρόσθετα και θέματα
• Πίνακες διαχείρισης
• Μπροστινή σχεδίαση

Παρατηρείτε ότι λέω επανειλημμένα “εικονίδια”;

Εδώ, εννοώ μόνο γραμματοσειρές εικονιδίων.

Όχι εικόνες με τη μορφή εικονιδίων.

Ναι, υπάρχει διαφορά μεταξύ των δύο.

Ας το ξεδιαλύνουμε.

Διαφορά μεταξύ εικονιδίων εικόνας και γραμματοσειρών εικονιδίων;

Οι γραμματοσειρές εικονιδίων και τα εικονίδια εικόνων είναι κάπως παρόμοια, αλλά αντί για αλφάβητα, υπάρχουν διανυσματικά σύμβολα στις γραμματοσειρές εικονιδίων.

Μήπως αυτό έγινε πολύ τεχνικό;

Επιτρέψτε μου να το διευκρινίσω.

Βασικά, αυτές οι γραμματοσειρές εικονιδίων μοιάζουν με εικόνες που μπορείτε να χρησιμοποιήσετε για να προσθέσετε σύμβολα στον ιστότοπό σας, αλλά όχι με πραγματική εικόνα.

Σας προσφέρουν πολλά οφέλη.

Πως?

Αναλογιστείτε στην επόμενη ενότητα.

Γιατί να τα χρησιμοποιήσετε;

• Επεκτάσιμα όπως τα κείμενα που χρησιμοποιούνται στον ιστότοπό σας καθώς είναι γραμματοσειρές
• Ελαφρύ που δεν επηρεάζει την ταχύτητα φόρτωσης της σελίδας σας σε σύγκριση με τις εικόνες
• Δυνατότητα ρύθμισης του χρώματος του εικονιδίου μέσω CSS και προσθήκης επιπλέον ιδιοτήτων όπως χρώμα ντεγκραντέ, σκιά κ.λπ.
• Εξαιρετικό στο να αποθηκεύετε πάρα πολλά αιτήματα HTTP, επιτρέποντάς σας να φορτώνετε γραμματοσειρές ταυτόχρονα, τις οποίες μπορείτε να χρησιμοποιήσετε σε όλες τις σελίδες σας. Εάν χρησιμοποιείτε πολλές εικόνες στον ιστότοπο, θα πρέπει να υποβάλετε πολλά αιτήματα για τη λήψη τους, γεγονός που αυξάνει τον χρόνο φόρτωσης της σελίδας.
• Εύκολο στη χρήση και προσαρμογή από τις εικόνες. Μπορείτε να προσθέσετε αναγνωρίσιμα και δημιουργικά σύμβολα χωρίς να χρειάζεται να τα αναδημιουργείτε κάθε φορά που χρειάζεστε ένα εικονίδιο για ένα πρόγραμμα αναπαραγωγής βίντεο, email, μουσική ή οτιδήποτε άλλο.
• Μεγαλύτερη προσβασιμότητα επειδή είναι ενσωματωμένα απευθείας στο WordPress

Πώς να τα χρησιμοποιήσετε;

Η χρήση του Dashicons δεν είναι μηχανική πυραύλων.

Εμπιστέψου με; Είμαι εξοικειωμένος και με τα δύο :0

Απλώς ακολουθήστε μερικά βήματα που αναφέρονται παρακάτω για να ξεκινήσετε με τα WordPress Dashicons.

Βήμα 1: Ενεργοποιήστε τα Dashicons στον ιστότοπό σας στο WordPress

Πριν ξεκινήσετε, ενεργοποιήστε τα Dashicons όπου χρειάζεστε, για παράδειγμα, ένα θέμα. Για αυτό, πρέπει να προσθέσετε μερικούς κωδικούς στο αρχείο function.php.

Να το κάνω:

• Πρώτα, μεταβείτε στον Επεξεργαστή Θέματος/Εμφάνισης από τον Πίνακα ελέγχου του WordPress.
• Ανοίξτε το αρχείο function.php.
• Κάντε κύλιση μέχρι το τέλος του αρχείου και προσθέστε μερικές γραμμές κώδικα για να τοποθετήσετε σενάρια στην ουρά

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Το παραπάνω παράδειγμα είναι να ενεργοποιήσετε τα Dashicons στο frontend.

Βεβαιωθείτε ότι έχετε δημιουργήσει ένα θυγατρικό θέμα πριν επεξεργαστείτε το αρχείο functions.php. Αυτό συμβαίνει επειδή εάν επεξεργαστείτε απευθείας το αρχείο θέματος και στη συνέχεια έρθει μια ενημέρωση για αυτό το θέμα, τότε θα αντικαταστήσει όλες τις αλλαγές που κάνετε στο αρχείο.

Βήμα 2: Βρείτε κωδικούς Dashicon HTML & CSS

Το WordPress.org προσφέρει μια βιβλιοθήκη Dashicons, η οποία σας βοηθά να βρείτε κωδικούς CSS και HTML που ανήκουν σε κάθε εικονίδιο. Εδώ, μεταβείτε στους Πόρους προγραμματιστή για να βρείτε τα Dashicons που θέλετε να χρησιμοποιήσετε και, στη συνέχεια:

• Κάντε κλικ στο εικονίδιο της επιθυμίας σας.
• Επιλέξτε μεταξύ “Αντιγραφή CSS” ή “Αντιγραφή HTML” κάνοντας κλικ σε αυτό.
• Τώρα, θα δείτε ένα αναδυόμενο παράθυρο. Απλώς αντιγράψτε τον κώδικα στο πρόχειρο.
• Αποφασίστε πού θέλετε να χρησιμοποιήσετε το εικονίδιο, όπως θέματα, Μεταδεδομένα, μενού πλοήγησης κ.λπ.
• Επικολλήστε τον αντιγραμμένο κώδικα στο γραφικό στοιχείο κειμένου ή στο πρόγραμμα επεξεργασίας κειμένου του επιλεγμένου μέρους.
• Τροποποίηση εμφάνισης εικονιδίου χρησιμοποιώντας προσαρμοσμένο CSS

Αυτό είναι.

Εξάλλου, από προεπιλογή, όλα τα εικονίδια έχουν μέγεθος 20 pixel. Μπορείτε να το αλλάξετε χρησιμοποιώντας τα στοιχεία CSS από επιλογές όπως το στοιχείο Inspect του Google Chrome ή το FireBug του Firefox.

Πώς να αξιοποιήσετε στο έπακρο τα WordPress Dashicons;

Είδατε πώς μπορείτε να χρησιμοποιήσετε το Dashicons στον ιστότοπό σας και τώρα θα δούμε τη χρήση του για συγκεκριμένους σκοπούς.

1. Χρήση του μενού πλοήγησης

Για να προσθέσετε εικονίδια στο μενού, ακολουθήστε τα παρακάτω βήματα:

• Μεταβείτε στα Μενού/Εμφάνιση από τον πίνακα ελέγχου
• Αντιγράψτε τους κώδικες HTML που έχουν σχεδιαστεί για το εικονίδιο μενού από το WordPress.org
• Επικολλήστε το στην “Ετικέτα πλοήγησης” στον πίνακα εργαλείων
• Κάντε κλικ στο κουμπί “αποθήκευση” και στη συνέχεια φορτώστε την αρχική σελίδα. Θα πρέπει να εμφανίζει το δροσερό και καθαρό εικονίδιο.

2. Χρήση στο post meta

Θα μπορείτε να χρησιμοποιείτε τα Dashicon ακριβώς μπροστά από μια ημερομηνία, το όνομα του συγγραφέα, την ετικέτα ή την κατηγορία με βάση το θέμα και τα δεδομένα που εμφανίζει.

Καθώς έχετε ήδη τοποθετήσει στην ουρά Dashicons, ανοίξτε το αρχείο style.css. Διαφορετικά, μπορείτε επίσης να χρησιμοποιήσετε ένα προσαρμοσμένο πρόγραμμα επεξεργασίας CSS, το οποίο δεν σας επιτρέπει να χάσετε τις αλλαγές σας μετά τις ενημερώσεις θέματος. Στη συνέχεια, προσθέστε τον κωδικό CSS αφού βρείτε έναν αντίστοιχο επιλογέα.

3. Στο backend του WordPress

Εάν θέλετε να περιλαμβάνονται διαφορετικά εικονίδια για διαφορετικούς προσαρμοσμένους τίτλους αναρτήσεων, τύπους αναρτήσεων ή γραφικά στοιχεία, είναι εύκολο να το κάνετε.

Μια γρήγορη συμβουλή: Δημιουργήστε έναν σύντομο κωδικό

Για να χρησιμοποιήσετε εύκολα τα Dashicons, μπορείτε να δημιουργήσετε έναν σύντομο κώδικα για αυτό. Είναι χρήσιμο, ειδικά όταν φτιάχνετε έναν ιστότοπο για τους πελάτες σας που θα ήταν εύκολο να εισάγουν Dashicons χωρίς να μπλέκουν με τους κωδικούς.

συμπέρασμα

Ελπίζω τα πράγματα να είναι αρκετά ξεκάθαρα από την πλευρά σας σχετικά με τα WordPress Dashicons. Δεν καλύπτουν μόνο την αισθητική της ιστοσελίδας σας αλλά είναι επίσης εύχρηστα και βελτιώνουν την ταχύτητα φόρτωσης της σελίδας.

Και ξέρετε, «ομορφιά και μυαλό» είναι ένας σπάνιος συνδυασμός.

Επομένως, βιαστείτε, χρησιμοποιήστε αυτά τα εντυπωσιακά Dashicon στον ιστότοπό σας στο WordPress!