{"id":14161,"date":"2020-05-21T20:06:08","date_gmt":"2020-05-21T20:06:08","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-styliser-des-balises-dans-wordpress\/"},"modified":"2020-05-21T20:06:08","modified_gmt":"2020-05-21T20:06:08","slug":"comment-styliser-des-balises-dans-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-styliser-des-balises-dans-wordpress\/","title":{"rendered":"Comment styliser des balises dans WordPress"},"content":{"rendered":"

WordPress vous permet de trier votre contenu en taxonomies. Par d\u00e9faut, il est livr\u00e9 avec des cat\u00e9gories et des \u00e9tiquettes. Alors que les cat\u00e9gories peuvent \u00eatre utilis\u00e9es pour trier votre contenu en diff\u00e9rentes sections, les balises peuvent \u00eatre utilis\u00e9es pour trier le contenu sur des sujets plus sp\u00e9cifiques. Vous pouvez afficher les balises utilis\u00e9es 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.<\/p>\n

<\/span>Afficher toutes les balises avec le nombre de publications WordPress<\/span><\/h4>\n

Certains sites Web populaires affichent leurs balises les plus populaires sous forme de th\u00e8mes 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. <\/p>\n

La premi\u00e8re chose \u00e0 faire est de copier et coller ce code dans le fichier functions.php ou le plugin sp\u00e9cifique au site de votre th\u00e8me. <\/p>\n

function wpb_tags() { \r\n$wpbtags =  get_tags();\r\nforeach ($wpbtags as $tag) { \r\n$string .= 'term_id) .'\">'. $tag->name . ''. $tag->count .'' . \"n\"   ;\r\n} \r\nreturn $string;\r\n} \r\nadd_shortcode('wpbtags' , 'wpb_tags' );\r\n<\/pre>\n
Ce code affiche simplement tous vos tags avec le nombre de messages \u00e0 c\u00f4t\u00e9 d’eux. Cependant, pour l’afficher sur votre page de fichier ou widget, vous devez utiliser ce code court: <\/p>\n
[wpbtags]<\/p>\n
L’utilisation de ce code n’affichera que les liens de balises et le nombre de publications \u00e0 c\u00f4t\u00e9 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\u00e8me. <\/p>\n
.tagbox { \r\nbackground-color:#eee;\r\nborder: 1px solid #ccc;\r\nmargin:0px 10px 10px 0px;\r\nline-height: 200%;\r\npadding:2px 0 2px 2px;\r\n\r\n}\r\n.taglink  { \r\npadding:2px;\r\n}\r\n\r\n.tagbox a, .tagbox a:visited, .tagbox a:active { \r\ntext-decoration:none;\r\n}\r\n\r\n.tagcount { \r\nbackground-color:green;\r\ncolor:white;\r\nposition: relative;\r\npadding:2px;\r\n}\r\n<\/pre>\n
N’h\u00e9sitez pas \u00e0 modifier le CSS selon vos besoins. Voici \u00e0 quoi cela ressemblait sur notre site de d\u00e9monstration:<\/p>\n
\"Afficher<\/p>\n
<\/span>Balises de style dans les informations post-m\u00e9ta<\/span><\/h4>\n
Certains th\u00e8mes WordPress affichent tr\u00e8s bien les balises sous les informations de m\u00e9tadonn\u00e9es de publication avec la date de publication, l’auteur et d’autres liens m\u00e9talliques. Cependant, certains th\u00e8mes peuvent ne pas les concevoir du tout ou vous pouvez les concevoir diff\u00e9remment. <\/p>\n
Voyons comment nous pouvons concevoir des liens de balises sous un article WordPress. <\/p>\n
Vous devez d’abord d\u00e9couvrir la classe CSS utilis\u00e9e par votre th\u00e8me WordPress pour afficher les balises. Pour ce faire, cliquez avec le bouton droit sur les \u00e9tiquettes et s\u00e9lectionnez inspecter l’\u00e9l\u00e9ment dans le menu du navigateur. <\/p>\n
Cela divisera l’\u00e9cran du navigateur pour afficher la bo\u00eete \u00e0 outils du d\u00e9veloppeur sous la page Web. Dans la bo\u00eete \u00e0 outils du d\u00e9veloppeur, vous pouvez voir la classe CSS utilis\u00e9e par votre th\u00e8me WordPress pour afficher les balises. <\/p>\n
\"Trouver<\/p>\n
Dans la capture d’\u00e9cran ci-dessus, vous pouvez voir que le th\u00e8me utilise des termes pour la classe CSS. Nous allons maintenant utiliser cette classe dans notre th\u00e8me ou dans la feuille de style du th\u00e8me enfant pour remplacer le th\u00e8me CSS par d\u00e9faut. <\/p>\n
.terms a, .terms a:visited, .terms a:active { \r\nbackground:#eee;\r\nborder:1px solid #ccc;\r\nborder-radius:5px;\r\ntext-decoration:none;\r\npadding:3px;\r\nmargin:3px;\r\ntext-transform:uppercase;\r\n}\r\n\r\n.terms a:hover { \r\nbackground:#a8281a;\r\ncolor:#FFF;\r\n}\r\n<\/pre>\n
N’h\u00e9sitez pas \u00e0 modifier le CSS pour qu’il corresponde aux couleurs de votre th\u00e8me. Voici \u00e0 quoi ressemblaient les labels sur notre site de d\u00e9monstration: <\/p>\n
\"Le<\/p>\n
Vous pouvez remarquer la diff\u00e9rence entre les deux captures d’\u00e9cran en plus des modifications CSS, nous avons \u00e9galement chang\u00e9 les balises en Tagged et supprim\u00e9 les virgules entre les balises. Comment avons-nous fait cela? <\/p>\n
Nous modifions the_tags (); balise de mod\u00e8le dans notre fichier single.php comme ceci: <\/p>\n
\r\n<\/pre>\n
Si vous souhaitez limiter le nombre total d’\u00e9tiquettes affich\u00e9es \u00e0 dire 5 ou autre chose, consultez cet article sur la fa\u00e7on d’afficher un nombre limit\u00e9 d’\u00e9tiquettes apr\u00e8s la publication.<\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 concevoir des balises WordPress. N’h\u00e9sitez pas \u00e0 exp\u00e9rimenter avec le CSS jusqu’\u00e0 ce que vous obteniez le r\u00e9sultat souhait\u00e9. <\/p>\n
Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour plus de didacticiels vid\u00e9o WordPress. Vous pouvez \u00e9galement nous trouver sur Google+ et Twitter. <\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n