WordPress vous permet de trier votre contenu en taxonomies. Par défaut, il est livré avec des catégories et des étiquettes. Alors que les catégories peuvent être utilisées pour trier votre contenu en différentes sections, les balises peuvent être utilisées pour trier le contenu sur des sujets plus spécifiques. Vous pouvez afficher les balises utilisées sur votre site dans un nuage de balises ou dans un format de liste. Dans cet article, nous vous montrerons comment concevoir des tags WordPress.
Afficher toutes les balises avec le nombre de publications WordPress
Certains sites Web populaires affichent leurs balises les plus populaires sous forme de thèmes sur leur page de fichiers ou dans la zone de pied de page. Voici comment afficher toutes vos balises de publication, avec le nombre de publications et sans utiliser le nuage de balises.
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.
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= 'term_id) .'">'. $tag->name . ''. $tag->count .'' . "n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Ce code affiche simplement tous vos tags avec le nombre de messages à côté d’eux. Cependant, pour l’afficher sur votre page de fichier ou widget, vous devez utiliser ce code court:
[wpbtags]
L’utilisation de ce code n’affichera que les liens de balises et le nombre de publications à côté d’eux. Cela ne la rendra pas jolie. Ajoutons du CSS pour le rendre joli. Copiez et collez ce CSS dans la feuille de style de votre thème.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
N’hésitez pas à modifier le CSS selon vos besoins. Voici à quoi cela ressemblait sur notre site de démonstration:
Balises de style dans les informations post-méta
Certains thèmes WordPress affichent très bien les balises sous les informations de métadonnées de publication avec la date de publication, l’auteur et d’autres liens métalliques. Cependant, certains thèmes peuvent ne pas les concevoir du tout ou vous pouvez les concevoir différemment.
Voyons comment nous pouvons concevoir des liens de balises sous un article WordPress.
Vous devez d’abord découvrir la classe CSS utilisée par votre thème WordPress pour afficher les balises. Pour ce faire, cliquez avec le bouton droit sur les étiquettes et sélectionnez inspecter l’élément dans le menu du navigateur.
Cela divisera l’écran du navigateur pour afficher la boîte à outils du développeur 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 des termes pour la classe CSS. Nous allons maintenant utiliser cette classe dans notre thème ou dans la feuille de style du thème enfant pour remplacer le thème CSS par défaut.
.terms a, .terms a:visited, .terms a:active {
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}
.terms a:hover {
background:#a8281a;
color:#FFF;
}
N’hésitez pas à modifier le CSS pour qu’il corresponde aux couleurs de votre thème. Voici à quoi ressemblaient les labels sur notre site de démonstration:
Vous pouvez remarquer la différence entre les deux captures d’écran en plus des modifications CSS, nous avons également changé les balises en Tagged et supprimé les virgules entre les balises. Comment avons-nous fait cela?
Nous modifions the_tags (); balise de modèle dans notre fichier single.php comme ceci:
Si vous souhaitez limiter le nombre total d’étiquettes affichées à dire 5 ou autre chose, consultez cet article sur la façon d’afficher un nombre limité d’étiquettes après la publication.
Nous espérons que cet article vous a aidé à concevoir des balises WordPress. N’hésitez pas à expérimenter avec le CSS jusqu’à ce que vous obteniez le résultat souhaité.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour plus de didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Google+ et Twitter.
