Comment styliser les tags dans WordPress

WordPress vous permet de trier votre contenu en taxonomies. Par défaut, il est livré avec des catégories et des balises. Bien que les catégories puissent être utilisées pour trier votre contenu en différentes sections, les balises peuvent être utilisées pour trier le contenu dans des rubriques plus spécifiques. Vous pouvez afficher les tags utilisés sur votre site dans un nuage de tags ou dans un format de liste. Dans cet article, nous allons vous montrer comment styliser les balises dans WordPress.

Afficher toutes les balises avec un nombre de posts dans WordPress

Certains sites Web populaires affichent leurs tags les plus populaires sous forme de sujets sur leur page d'archives ou dans la zone de bas de page. Voici comment vous pouvez afficher toutes vos étiquettes de publication, avec décompte et sans utiliser le nuage de tags..

La première chose à faire est de copier et coller ce code dans le fichier functions.php ou le plugin spécifique au site de votre thème..

 fonction wpb_tags () $ wpbtags = get_tags (); foreach ($ wpbtags as $ tag) $ string. = 'id_terminaire.' "> '. $ tag-> nom.' '. $ tag-> nombre.' '." \ n "; retour $ chaîne;  add_shortcode ('wpbtags', 'wpb_tags'); 

Ce code affiche simplement tous vos tags avec leur nombre de messages à côté d'eux. Cependant, pour l'afficher sur votre page d'archives ou dans un widget, vous devez utiliser ce shortcode:

[wpbtags]

L'utilisation de ce code seul montrera simplement les liens des tags et le nombre de posts à côté d'eux. Cela ne le rendra pas joli. Ajoutons un peu de CSS pour le rendre joli. Copiez et collez ce CSS dans la feuille de style de votre thème.

 .tagbox background-color: #eee; bordure: 1px solide #ccc; marge: 0px 10px 10px 0px; hauteur de trait: 200%; remplissage: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: visité, .tagbox a: active text-decoration: none;  .tagcount background-color: green; Couleur blanche; position: relative; rembourrage: 2px;  

N'hésitez pas à modifier le CSS pour répondre à vos besoins. Voici à quoi cela ressemblait sur notre site de démonstration:

Étiquettes de style dans les méta-informations postérieures

Certains thèmes WordPress affichent des balises sous les informations de méta-données post avec la date de publication, l'auteur et d'autres liens méta. Cependant, certains thèmes peuvent ne pas les décrire du tout, ou vous pouvez les définir différemment..

Permet de voir comment nous pouvons styler les liens de tag sous un message dans WordPress.

Tout d'abord, vous devez connaître la classe CSS utilisée par votre thème WordPress pour afficher les tags. Pour ce faire, cliquez avec le bouton droit sur les balises et sélectionnez inspecter l'élément dans le menu du navigateur..

Cela divisera l'écran du navigateur pour afficher la boîte à outils de développement sous la page Web. Dans la boîte à outils du développeur, vous pouvez voir la classe CSS utilisée par votre thème WordPress pour afficher les balises..

Dans la capture d'écran ci-dessus, vous pouvez voir que le thème utilise termes pour la classe CSS. Nous allons maintenant utiliser cette classe dans la feuille de style de notre thème ou de notre thème enfant pour remplacer le CSS par défaut du thème..

 .termes a, .terms a: visité, .terms a: actif background: #eee; bordure: 1px solide #ccc; border-radius: 5px; texte-décoration: aucun; rembourrage: 3px; marge: 3px; text-transform: majuscule;  .terms a: hover background: # a8281a; couleur: #FFF;  

N'hésitez pas à modifier CSS pour correspondre aux couleurs de votre thème. Voici à quoi ressemblaient les tags sur notre site de démonstration:

Vous remarquerez peut-être la différence entre les deux captures d’écran autres que les modifications CSS, nous avons également remplacé Balises en Balises et enlevé les virgules entre balises. Comment avons-nous fait cela?

Nous avons modifié the_tags (); balise de modèle dans notre fichier single.php comme ceci:

Si vous souhaitez limiter le nombre total de balises affichées à 5 ou à quelque chose d'autre, reportez-vous à cet article pour savoir comment afficher un nombre limité de balises après publication..

Nous espérons que cet article vous a aidé à styler les balises dans WordPress. N'hésitez pas à expérimenter avec le CSS jusqu'à obtenir le résultat souhaité.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour plus de tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Google+ et Twitter.