La fonction de menu personnalisé de WordPress 3.0+ «pas si nouveau» n’est pas seulement extrêmement utile, mais aussi 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 .

Ajout d’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 d’ajout d’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 le plaisir 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 les «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 vers la page d’accueil et y ajouter une nouvelle classe. J’ai ajouté une classe appelée “home-link-icon”.

Classe de lien d'accueil WordPress

Étape 4: Ajouter CSS pour l’icône du menu d’accueil

Il ne vous 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 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. Ce n’est pas vraiment parfaitement positionné et l’icône ne correspond pas, mais pour ce tutoriel, vous pouvez voir comment cela est censé fonctionner.

Démo du lien de la page d'accueil du thème WordPress

Share: