Comment utiliser Dashicons dans WordPress ?

Cela arrive à tout le monde.

Vous choisissez un thème que vous aimez, l'installez, et passez quelques mois à admirer l'apparence de votre site. Après quelques mois, cependant, le thème commence à sembler fade. Il est un peu terne.

La seule difficulté, c'est que vous ne voulez pas perdre de temps à chercher quelque chose de nouveau. Si seulement il y avait un moyen de rehausser votre thème, d'ajouter un peu de style pour le faire ressortir.

Avant de désespérer, laissez-moi vous montrer une méthode simple pour rehausser votre thème sans trop d'efforts ni l'ajout de photos inutiles qui pourraient ralentir votre site.

Il y a ensuite les Dashicons. WordPress 3.8 introduit les Dashicons, qui sont des icônes de police de caractères. Ce sont les icônes cool que vous voyez lorsque vous vous connectez à votre tableau de bord. Ne serait-ce pas génial si vous pouviez les incorporer dans votre thème également ?

Eh bien, vous le pouvez, et je vais vous montrer comment.

Comment incorporer les Dashicons dans votre menu de navigation ?

Commençons par un exemple simple. Bien que les Dashicons aient été incluses dans WordPress depuis la version 3.8, vous devez toujours les inclure pour qu'elles s'affichent correctement à l'avant de votre site, c'est-à-dire dans votre thème.

Étape 1 : Préparez vos Dashicons de thème

Pour préparer vos Dashicons de thème, ouvrez votre fichier functions.php (il se trouve dans Apparence>Éditeur - par défaut, il ouvrira le fichier CSS de votre thème actuel). Recherchez le fichier functions.php et double-cliquez dessus pour l'ouvrir dans l'éditeur.

Étape 2 : Exécutez le script

Faites défiler jusqu'en bas et copiez-collez les lignes de code suivantes à la fin :

Bon, maintenant votre thème est prêt à utiliser les Dashicons.

Étape 3 : Inclure les Dashicons dans les éléments du menu

Ajoutons une Dashicon à côté de votre lien Accueil. Rendez-vous sur le site Dashicons et choisissez une icône.

Les Dashicons étaient initialement disponibles sur GitHub.io, mais elles sont maintenant disponibles sur WordPress.org.

Étape 4 :

Sélectionnez l'icône souhaitée (dans ce cas, l'icône Accueil) et cliquez sur Copier HTML. Cela affichera une fenêtre pop-up contenant le code nécessaire.

Étape 5 :

Retournez à votre tableau de bord WordPress, accédez à Apparence > Menus et collez le code dans le champ Libellé de navigation.

Si vous souhaitez toujours que le mot apparaisse, placez-le après la dernière balise div.

Enregistrez et retournez sur votre page d'accueil. Votre lien Accueil devrait maintenant afficher une Dashicon propre.

Cela peut être fait pour tous les éléments du menu de navigation ou simplement pour la page d'accueil. Répétez simplement les étapes précédentes avec les icônes appropriées. N'était-ce pas simple ?

Quelle est la meilleure façon d'utiliser les Dashicons dans les métadonnées de publication ?

Vous pouvez aller plus loin en ajoutant les Dashicons dans vos métadonnées de publication, ou devant le nom de l'auteur, la date, la catégorie ou l'étiquette, en fonction de votre thème et des informations affichées.

Étant donné que vous avez déjà chargé les Dashicons dans votre thème, tout ce que vous avez à faire maintenant est d'ouvrir votre fichier de style. Trouvez le sélecteur correspondant et ajoutez le code CSS au fichier CSS (ou utilisez l'éditeur CSS personnalisé, ce qui est toujours une meilleure option pour ne pas perdre les modifications lors de la mise à jour de votre thème).

Supposons que vous vouliez placer une icône devant votre nom ou le nom de l'auteur.

Étape 1 :

Tout d'abord, nous allons choisir une icône appropriée.

Étape 2 :

Ensuite, cliquez à nouveau dessus et sélectionnez Copier CSS. Encore une fois, une fenêtre pop-up apparaîtra avec le code à coller.

Étape 3 :

Ouvrez votre fichier style.css et recherchez le sélecteur correspondant, dans ce cas, .entry-author. Le nom de l'auteur recevra une superbe icône devant lui si vous ajoutez :before et collez ensuite le code CSS que vous avez pris sur la page Dashicons. Vous devez également indiquer que vous utilisez la police de caractères Dashicons. Le code modifié ressemble à ceci :

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

Le résultat final

Alors, quel sera le résultat final ?

Quelque chose comme ça :

‍

Les Dashicons peuvent être utilisées de différentes manières ; laissez libre cours à votre imagination et voyez ce que vous pouvez créer.

Tout mettre en place

Outre les exemples ci-dessus, vous pouvez utiliser les Dashicons dans votre interface d'administration pour fournir différentes icônes pour différents types de publications, ou vous pouvez les utiliser dans les titres de publication, les titres de widgets, ou si vous créez une page de destination personnalisée pour distinguer différentes sections de votre site.

Voici un exemple simple de ce que vous pourriez faire avec eux.

‍