Cela arrive à tout le monde.

Vous trouvez un thème que vous aimez, vous l’installez et passez quelques mois à profiter de l’apparence de votre site. Mais après quelques mois, le thème commence à se sentir rassis. Un peu ennuyeux.

Le seul problème est que vous ne voulez pas passer quelques heures à chercher quelque chose de nouveau. Si seulement il y avait un moyen d’ajouter un peu de piquant à votre thème, un peu d’éclat pour le faire ressortir.

Avant de lever les mains de désespoir, laissez-moi vous montrer un moyen facile de pimenter votre thème sans trop d’effort, et sans ajouter d’images inutiles qui pourraient ralentir votre site.

Entrez les Dashicons. Les dashicons sont des icônes de police 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 également les ajouter à votre thème?

Eh bien, vous pouvez 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 toujours les inclure pour qu’ils s’affichent correctement sur le front end de votre site; c’est-à-dire votre thème.

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

Pour que vos Dashicons de thème soient prêts, ouvrez d’abord vos fonctions.fichier php (trouvé dans l’éditeur Appearance > – par défaut, il ouvrira le fichier CSS de votre thème actuel. Allez-y et cherchez des fonctions.fichier php et cliquez dessus pour le charger dans l’éditeur.)

Étape 2 : Mettez le script en file d’attente

Faites défiler jusqu’en bas et collez ces lignes de code à la fin :

D’accord! Maintenant, votre thème est prêt à utiliser des Dashicons.

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

Ajoutons un Dashicon pour votre lien d’accueil. Rendez-vous sur le site Web de Dashicons et sélectionnez l’icône que vous aimez.

Mise à jour : Les Dashicons étaient initialement 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 d’accueil), puis cliquez sur Copier HTML. Cela vous donnera une fenêtre contextuelle avec le code dont vous avez besoin.

Étape 5:

Retournez à votre tableau de bord WordPress, cliquez sur Apparence > Menus et collez le code à l’endroit où il est indiqué Étiquette de navigation.

Si vous voulez toujours que le mot apparaisse, tapez-le après le support de div de fermeture.

Cliquez sur enregistrer et chargez votre page d’accueil. Votre lien d’accueil devrait maintenant afficher un Dashicon agréable et net.

Vous pouvez le faire pour tous les éléments du menu de navigation ou simplement pour la maison. Répétez simplement les étapes ci-dessus avec les icônes correspondantes. C’était facile non?

Comment utilisez-vous les Dashicons dans post meta ?

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

Puisque vous avez déjà mis des Dashicons en file d’attente dans votre thème, il vous suffit maintenant d’ouvrir votre style.fichier css (ou utilisez un éditeur CSS personnalisé qui est toujours une meilleure option pour ne pas perdre les modifications une fois que votre thème est mis à jour!), trouvez le sélecteur correspondant et ajoutez le code CSS.

Disons que vous voulez ajouter une icône devant votre nom ou le nom de votre auteur.

Étape 1:

D’abord, nous allons choisir une icône que nous aimerions.

Étape 2:

Puis cliquez dessus, et cette fois sélectionnez Copier le CSS. Encore une fois, cela vous donnera une fenêtre contextuelle avec le code que vous devez coller.

Étape 3:

Maintenant, ouvrez votre style.css et trouvez le sélecteur correspondant, dans ce cas –.entrée – auteur. En ajoutant: avant, puis en collant le code CSS que vous avez copié à partir du site Web 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 maintenant le code terminé ressemble à ceci:

Le résultat final

Alors à quoi cela ressemblera-t-il à la fin?

Quelque chose comme ça:

Il y a tellement de façons d’utiliser les Dashicons – laissez votre créativité s’installer et voyez ce que vous pouvez faire.

Mettre tout cela ensemble

En dehors des exemples ci-dessus, vous pouvez utiliser des Dashicons dans votre backend pour spécifier différentes icônes pour différents types de publications, ou vous pouvez les utiliser dans les titres de publications, les titres de widgets, ou si vous créez une page de destination personnalisée, vous pouvez différencier les différentes pages de votre site.

L’ancienne page d’accueil de WP Superstars en est un bon exemple. Ici, vous pouvez voir les Dashicons utilisés pour différentes zones du site Web:

Les dashicons ne sont pas le seul type de polices d’icônes que vous pouvez ajouter. Consultez notre tutoriel sur les icônes FontAwesome pour en savoir plus.

Inclut le courrier électronique mises à jour. Désabonnez-vous à tout moment.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.