Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Comment styliser les balises dans WordPress

WordPress vous permet de classer 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 classer votre contenu dans différentes sections, les balises peuvent être utilisées pour classer le contenu dans des sujets plus spécifiques. Vous pouvez afficher les balises utilisées sur votre site sous forme de nuage de balises ou de liste. Dans cet article, nous allons vous montrer comment créer des balises WordPress.

Afficher toutes les balises avec le nombre de publications WordPress

Certains sites populaires affichent leurs balises les plus populaires sous forme de thèmes sur leurs pages d’archives ou dans la zone de pied de page. Découvrez 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 du thème ou dans le plugin spécifique au site.

fonction wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$chaîne. = ‘term_id).’ “> ‘.$ tag-> nom.’ ‘.$ tag->count.’ ‘.” n” ;
}
renvoie $chaîne ;
}
add_shortcode(‘wpbtags’, ‘wpb_tags’);

Ce code affiche simplement toutes vos balises avec le nombre de publications à côté d’elles. Cependant, pour l’afficher sur votre page ou widget, vous devez utiliser ce short code :

(wpbtags)

L’utilisation de ce code n’affichera que les liens des balises et le nombre de publications à côté d’eux. Cela ne vous 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 {
couleur d’arrière-plan : #eee ;
bordure : 1px solide #ccc ;
marge : 0 px 10 px 10 px 0 px ;
hauteur de ligne : 200 % ;
remplissage : 2px 0 2px 2px ;

}
.taglink {
remplissage : 2px ;
}

.tagbox a, .tagbox a : visité, .tagbox a : actif {
décoration de texte : aucune ;
}

.tagcount {
couleur de fond : vert ;
Couleur blanche;
position : relative ;
remplissage : 2px ;
}

N’hésitez pas à modifier le CSS en fonction de vos besoins. Voici à quoi cela ressemblait sur notre site de démonstration :

Afficher les balises du nombre de publications dans WordPress

Balises de style dans les méta-informations de la publication

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 créer ou vous souhaiterez peut-être les concevoir différemment.

Voyons comment nous pouvons créer des liens de balise sous un article WordPress.

Vous devez d’abord connaître 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.

Trouver la classe css utilisée par le thème pour 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 feuille de style de thème ou de thème enfant pour remplacer le thème CSS par défaut.

.terms a, .terms a : visité, .terms a : actif {
arrière-plan : #eee ;
bordure : 1px solide #ccc ;
rayon du bord : 5px ;
décoration de texte : aucune ;
remplissage : 3px ;
marge : 3px ;
transformation de texte : majuscule ;
}

.termes pour : survoler {
arrière-plan : #a8281a ;
couleur : #FFF ;
}

N’hésitez pas à modifier le CSS pour qu’il corresponde aux couleurs de votre thème. Voici comment étaient les étiquettes sur notre site de démonstration :

Style CSS modifié pour les balises dans les publications WordPress

Vous pouvez remarquer la différence entre les deux captures d’écran, en plus des modifications CSS, nous avons également modifié les balises en Tagged et supprimé les virgules entre les balises. Comment avons-nous fait ça?

Nous avons modifié the_tags(); balise template dans notre fichier single.php comme ceci :

Si vous souhaitez limiter le nombre total de balises affichées à 5 ou autre chose, consultez cet article sur la façon d’afficher un nombre limité de balises après publication.

Nous espérons que cet article vous a aidé à concevoir des balises WordPress. N’hésitez pas à expérimenter avec 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.