Cela arrive à tout le monde.

Vous trouvez un thème qui vous plaît, vous l'installez et vous passez quelques mois à apprécier l'aspect de votre site. Mais au bout de quelques mois, le thème commence à vous sembler désuet, un peu ennuyeux.

Si seulement il existait un moyen d'ajouter un peu de piquant à votre thème, un peu d'éclat pour qu'il se démarque.

Avant que vous ne leviez les bras au ciel, laissez-moi vous montrer un moyen facile de donner du piquant à votre thème sans trop d'efforts, et sans ajouter d'images inutiles qui pourraient ralentir votre site.

Voici les Dashicons. Les Dashicons sont des icônes de police qui ont été introduites dans WordPress 3.8. Ce sont ces icônes géniales et cool que vous voyez lorsque vous vous connectez à votre tableau de bord. Ne serait-ce pas cool si vous pouviez les ajouter à votre thème également ?

Eh bien, c'est possible et je vais vous montrer comment.

Comment utiliser les Dashicons dans votre menu de navigation ?

Commençons par un exemple simple : les dashicons sont déjà inclus dans WordPress depuis la version 3.8, mais vous devez encore les inclure pour qu'ils s'affichent correctement dans la partie frontale de votre site, c'est-à-dire dans votre thème.

Étape 1 : Préparer les Dashicons de votre thème

Pour préparer les Dashicons de votre thème, ouvrez d'abord votre fichier functions.php (qui se trouve dans Appearance>Editor - par défaut, il ouvrira le fichier CSS de votre thème actuel. Cherchez le fichier functions.php et cliquez dessus pour le charger dans l'éditeur).

Étape 2 : Mise en file d'attente du script

Descendez jusqu'en bas et collez ces lignes de code à la fin :

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

Votre thème est maintenant prêt à utiliser les Dashicons.

Étape 3 : Ajout de Dashicons aux éléments de menu

Pour ajouter une Dashicon à votre lien Home, rendez-vous sur le site Dashicons et sélectionnez l'icône de votre choix.

Mise à jour : Les Dashicons étaient à l'origine disponibles sur GitHub.io, mais ils ont depuis été mis à disposition sur WordPress.org.

Étape 4 :

Cliquez sur l'icône souhaitée (dans ce cas, j'ai sélectionné l'icône de la maison), puis cliquez sur Copier HTML. Une fenêtre contextuelle s'ouvrira avec le code dont vous avez besoin.

Étape 5 :

Retournez dans votre tableau de bord WordPress, cliquez sur Apparence> ; Menus et collez le code à l'endroit où il est écrit Navigation Label.

Si vous souhaitez toujours que le mot apparaisse, saisissez-le après le crochet div de fermeture.

Cliquez sur enregistrer et chargez votre page d'accueil. Votre lien d'accueil devrait maintenant afficher une belle Dashicon nette.

Vous pouvez le faire pour tous les éléments du menu de navigation ou uniquement pour la page d'accueil. Il vous suffit de répéter les étapes ci-dessus avec les icônes correspondantes. C'était facile, n'est-ce pas ?

Comment utiliser les Dashicons dans la méta des messages ?

Vous pouvez aller plus loin et ajouter des Dashicons à la méta de vos articles, ou en d'autres termes ajouter des Dashicons devant le nom de l'auteur, la date, la catégorie ou le tag ; en fonction de votre thème et des informations qu'il affiche.

Puisque vous avez déjà mis en file d'attente les Dashicons dans votre thème, tout ce que vous avez à faire maintenant est d'ouvrir votre fichier style.css (ou d'utiliser l'éditeur CSS personnalisé qui est toujours une meilleure option pour ne pas perdre les changements une fois que votre thème est mis à jour !

Imaginons que vous souhaitiez ajouter une icône devant votre nom ou celui de votre auteur.

Étape 1 :

Nous allons d'abord choisir l'icône qui nous convient.

Étape 2 :

Cliquez ensuite sur le code, puis sélectionnez cette fois Copier le code CSS, ce qui vous donnera une fenêtre contextuelle avec le code que vous devez coller.

Étape 3 :

Ouvrez maintenant votre style.css et trouvez le sélecteur correspondant, dans ce cas - .entry-author. En ajoutant :before et en collant le code CSS que vous avez copié du site Dashicons, le nom de l'auteur aura une belle icône devant lui. Vous devez également spécifier que vous utilisez la police Dashicons. Le code modifié ressemble à ceci :

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

Ajoutons également un peu de style, et le code terminé ressemble maintenant à ceci :

 .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 ; } 

Le résultat final

À quoi cela va-t-il ressembler en fin de compte ?

Voici ce qu'il en est :

Il y a tant de façons d'utiliser les Dashicons - laissez libre cours à votre créativité et voyez ce que vous pouvez faire.

La mise en place de l'ensemble

Outre les exemples ci-dessus, vous pouvez utiliser les Dashicons dans votre backend pour spécifier différentes icônes pour différents types d'articles, ou vous pouvez les utiliser dans vos titres d'articles, titres de widgets, ou si vous créez une page d'atterrissage personnalisée, vous pouvez différencier les différentes pages de votre site.

Voici un exemple de base de ce que vous pouvez en faire :