Συμβαίνει σε όλους.

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

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

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

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

Λοιπόν, μπορείτε και θα σας δείξω πώς.

Πώς μπορείτε να χρησιμοποιήσετε Dashicons στο μενού πλοήγησης;

Ας ξεκινήσουμε με ένα απλό παράδειγμα. Τα Dashicons περιλαμβάνονται ήδη στο WordPress από την έκδοση 3.8, αλλά πρέπει να τα συμπεριλάβετε για να εμφανίζονται σωστά στο front end του ιστότοπού σας, δηλαδή στο θέμα σας.

Βήμα 1: Ετοιμάστε τα Dashicons του θέματός σας

Για να καταστήσετε το θέμα σας Dashicons έτοιμο, ανοίξτε πρώτα το αρχείο functions.php (που βρίσκεται στο Appearance>Editor - από προεπιλογή θα ανοίξει το αρχείο CSS του τρέχοντος θέματος. Προχωρήστε και αναζητήστε το αρχείο functions.php και κάντε κλικ σε αυτό για να το φορτώσετε στον Editor).

Βήμα 2: Αναμονή της δέσμης ενεργειών

Μετακινηθείτε μέχρι το τέλος και επικολλήστε αυτές τις γραμμές κώδικα στο τέλος:

 //Εναρμόζουμε το σενάριο Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Εντάξει! Τώρα το θέμα σας είναι έτοιμο να χρησιμοποιήσει τα Dashicons.

Βήμα 3: Προσθήκη Dashicons σε στοιχεία μενού

Ας προσθέσουμε ένα Dashicon για τον σύνδεσμο Home. Μεταβείτε στον ιστότοπο Dashicons και επιλέξτε το εικονίδιο που σας αρέσει.

Ενημέρωση: Τα Dashicons ήταν αρχικά διαθέσιμα στο GitHub.io, αλλά έκτοτε έχουν γίνει διαθέσιμα στο WordPress.org.

Βήμα 4:

Κάντε κλικ στο επιθυμητό εικονίδιο (σε αυτή την περίπτωση επέλεξα το εικονίδιο home) και στη συνέχεια κάντε κλικ στο Copy HTML. Θα σας εμφανιστεί ένα αναδυόμενο παράθυρο με τον κώδικα που χρειάζεστε.

Βήμα 5:

Επιστρέψτε στο ταμπλό του WordPress σας, κάντε κλικ στην επιλογή Εμφάνιση> Μενού και επικολλήστε τον κώδικα ακριβώς εκεί που λέει Ετικέτα πλοήγησης.

Αν θέλετε ακόμα να εμφανίζεται η λέξη, πληκτρολογήστε την μετά την κλειστή αγκύλη div.

Κάντε κλικ στο save και φορτώστε την αρχική σας σελίδα. Ο αρχικός σας σύνδεσμος θα πρέπει τώρα να εμφανίζει ένα ωραίο, ευκρινές Dashicon.

Μπορείτε να το κάνετε αυτό για όλα τα στοιχεία του μενού πλοήγησης ή μόνο για το home. Απλά επαναλάβετε τα παραπάνω βήματα με τα αντίστοιχα εικονίδια. Αυτό ήταν εύκολο, σωστά;

Πώς χρησιμοποιείτε τα Dashicons σε post meta;

Μπορείτε να προχωρήσετε ένα βήμα παραπέρα και να προσθέσετε Dashicons στις μετα-συντάξεις της ανάρτησής σας, ή με άλλα λόγια να προσθέσετε Dashicons μπροστά από το όνομα του συγγραφέα, την ημερομηνία, την κατηγορία ή την ετικέτα, ανάλογα με το θέμα σας και τις πληροφορίες που εμφανίζει.

Εφόσον έχετε ήδη καταχωρήσει τα Dashicons στο θέμα σας, το μόνο που έχετε να κάνετε τώρα είναι να ανοίξετε το αρχείο style.css (ή να χρησιμοποιήσετε τον επεξεργαστή Custom 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 στο backend σας για να καθορίσετε διαφορετικά εικονίδια για διαφορετικούς τύπους δημοσιεύσεων ή μπορείτε να τα χρησιμοποιήσετε στους τίτλους των δημοσιεύσεων, στους τίτλους των widget ή αν δημιουργείτε μια προσαρμοσμένη σελίδα προορισμού, μπορείτε να διαφοροποιήσετε τις διάφορες σελίδες του ιστότοπού σας.

Ακολουθεί ένα βασικό παράδειγμα του τι θα μπορούσατε να χρησιμοποιήσετε για να δημιουργήσετε: