La fonction de menu personnalisé «pas si nouvelle» de WordPress 3.0+ est non seulement extrêmement utile, mais également très puissante. J’ai déjà écrit quelques articles sur l’édition et la personnalisation du menu (par exemple, comment mettre en évidence les liens de la page actuelle) et aujourd’hui, je vais vous montrer comment vous pouvez ajouter des classes spéciales à vos thèmes afin que vous puissiez facilement afficher des icônes personnalisées à côté de vos liens de navigation .
Ajouter une icône d’accueil à côté du lien de la page d’accueil WordPress
Afin de mieux expliquer comment ajouter des icônes, je vais vous guider à travers les étapes pour ajouter une icône de type d’accueil à côté du lien de votre page d’accueil.
Étape 1 : Téléchargez une icône de maison sympa
Pour les besoins de cet aperçu, je viens de télécharger une simple icône d’accueil sur Finicons.com – lien
Étape 2 : Activez les classes dans votre menu WordPress
Par défaut, le menu WordPress n’affiche pas les attributs « classe » dans le générateur de menu, alors cliquez sur « options d’écran » et assurez-vous qu’il est coché.
Étape 3 : Ajouter un style au lien de la page d’accueil
Vous pouvez maintenant parcourir ou créer un lien de page d’accueil et y ajouter une nouvelle classe. J’ai ajouté une classe appelée « home-link-icon ».
Étape 4 : Ajouter CSS pour l’icône du menu d’accueil
Il ne reste plus qu’à ajouter le css à votre feuille de style pour afficher l’icône de la classe que vous venez de créer. Remarque : Assurez-vous d’ajouter l’icône téléchargée à l’étape 1 dans le dossier d’images de votre thème.
Exemple de CSS
.home-link-icon a{
padding-left: 30px !important;
background-image: url(images/home.png);
background-position: left;
background-repeat: no-repeat;
}
Exemple d’image
Ci-dessous, vous pouvez voir mon CSS en action dans un thème sur lequel je travaille actuellement pour le publier gratuitement dans ma section Thèmes WordPress gratuits. Il n’est pas vraiment parfaitement positionné et l’icône ne correspond pas, mais pour les besoins de ce didacticiel, vous pouvez voir comment il est censé fonctionner.
