{"id":72408,"date":"2021-11-03T07:13:00","date_gmt":"2021-11-03T07:13:00","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-styliser-les-balises-dans-wordpress\/"},"modified":"2021-11-03T07:13:00","modified_gmt":"2021-11-03T07:13:00","slug":"comment-styliser-les-balises-dans-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-styliser-les-balises-dans-wordpress\/","title":{"rendered":"Comment styliser les balises dans WordPress"},"content":{"rendered":"<p>WordPress vous permet de classer 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 classer votre contenu dans diff\u00e9rentes sections, les balises peuvent \u00eatre utilis\u00e9es pour classer le contenu dans des sujets plus sp\u00e9cifiques.  Vous pouvez afficher les balises utilis\u00e9es sur votre site sous forme de nuage de balises ou de liste.  Dans cet article, nous allons vous montrer comment cr\u00e9er des balises WordPress.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Afficher_toutes_les_balises_avec_le_nombre_de_publications_WordPress\"><\/span>Afficher toutes les balises avec le nombre de publications WordPress<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Certains sites populaires affichent leurs balises les plus populaires sous forme de th\u00e8mes sur leurs pages d&#8217;archives ou dans la zone de pied de page.  D\u00e9couvrez comment afficher toutes vos balises de publication, avec le nombre de publications et sans utiliser le nuage de balises. <\/p>\n<p>La premi\u00e8re chose \u00e0 faire est de copier et coller ce code dans le fichier functions.php du th\u00e8me ou dans le plugin sp\u00e9cifique au site. <\/p>\n<p>  fonction wpb_tags() {<br \/> $wpbtags = get_tags();<br \/> foreach ($wpbtags as $tag) {<br \/> $cha\u00eene.  = &#8216;term_id).&#8217;  &#8220;> &#8216;.$ tag-> nom.&#8217;  &#8216;.$ tag->count.&#8217;  &#8216;.&#8221;  n&#8221;\u00a0;<br \/> }<br \/> renvoie $cha\u00eene\u00a0;<br \/> }<br \/> add_shortcode(&#8216;wpbtags&#8217;, &#8216;wpb_tags&#8217;);<\/p>\n<p>Ce code affiche simplement toutes vos balises avec le nombre de publications \u00e0 c\u00f4t\u00e9 d&#8217;elles.  Cependant, pour l&#8217;afficher sur votre page ou widget, vous devez utiliser ce short code : <\/p>\n<p>(wpbtags)<\/p>\n<p>L&#8217;utilisation de ce code n&#8217;affichera que les liens des balises et le nombre de publications \u00e0 c\u00f4t\u00e9 d&#8217;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\u00e8me. <\/p>\n<p>  .tagbox {<br \/> couleur d&#8217;arri\u00e8re-plan\u00a0: #eee\u00a0;<br \/> bordure\u00a0: 1px solide #ccc\u00a0;<br \/> marge : 0 px 10 px 10 px 0 px ;<br \/> hauteur de ligne : 200 % ;<br \/> remplissage\u00a0: 2px 0 2px 2px\u00a0;<\/p>\n<p> }<br \/> .taglink {<br \/> remplissage : 2px ;<br \/> }<\/p>\n<p> .tagbox a, .tagbox a : visit\u00e9, .tagbox a : actif {<br \/> d\u00e9coration de texte : aucune ;<br \/> }<\/p>\n<p> .tagcount {<br \/> couleur de fond : vert ;<br \/> Couleur blanche;<br \/> position : relative ;<br \/> remplissage : 2px ;<br \/> }<\/p>\n<p>N&#8217;h\u00e9sitez pas \u00e0 modifier le CSS en fonction de vos besoins.  Voici \u00e0 quoi cela ressemblait sur notre site de d\u00e9monstration\u00a0:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/tags-post-count.png\" alt=\"Afficher les balises du nombre de publications dans WordPress\" width=\"520\" height=\"340\" class=\"alignnone size-full wp-image-18478\" title=\"Afficher les balises du nombre de publications dans WordPress\"\/><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Balises_de_style_dans_les_meta-informations_de_la_publication\"><\/span>Balises de style dans les m\u00e9ta-informations de la publication<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>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&#8217;auteur et d&#8217;autres liens m\u00e9talliques.  Cependant, certains th\u00e8mes peuvent ne pas les cr\u00e9er ou vous souhaiterez peut-\u00eatre les concevoir diff\u00e9remment. <\/p>\n<p>Voyons comment nous pouvons cr\u00e9er des liens de balise sous un article WordPress. <\/p>\n<p>Vous devez d&#8217;abord conna\u00eetre 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&#8217;\u00e9l\u00e9ment dans le menu du navigateur. <\/p>\n<p>Cela divisera l&#8217;\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<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/css-class-tags.png\" alt=\"Trouver la classe css utilis\u00e9e par le th\u00e8me pour les balises\" width=\"520\" height=\"276\" class=\"alignnone size-full wp-image-21047\" title=\"Trouver la classe css utilis\u00e9e par le th\u00e8me pour les balises\"\/><\/p>\n<p>Dans la capture d&#8217;\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 feuille de style de th\u00e8me ou de th\u00e8me enfant pour remplacer le th\u00e8me CSS par d\u00e9faut. <\/p>\n<p>  .terms a, .terms a : visit\u00e9, .terms a : actif {<br \/> arri\u00e8re-plan\u00a0: #eee\u00a0;<br \/> bordure\u00a0: 1px solide #ccc\u00a0;<br \/> rayon du bord : 5px ;<br \/> d\u00e9coration de texte : aucune ;<br \/> remplissage : 3px ;<br \/> marge : 3px ;<br \/> transformation de texte : majuscule ;<br \/> }<\/p>\n<p> .termes pour\u00a0: survoler {<br \/> arri\u00e8re-plan\u00a0: #a8281a\u00a0;<br \/> couleur\u00a0: #FFF\u00a0;<br \/> }<\/p>\n<p>N&#8217;h\u00e9sitez pas \u00e0 modifier le CSS pour qu&#8217;il corresponde aux couleurs de votre th\u00e8me.  Voici comment \u00e9taient les \u00e9tiquettes sur notre site de d\u00e9monstration\u00a0: <\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/transformed-tags1.png\" alt=\"Style CSS modifi\u00e9 pour les balises dans les publications WordPress\" width=\"520\" height=\"106\" class=\"alignnone size-full wp-image-21046\" title=\"Style CSS modifi\u00e9 pour les balises dans les publications WordPress\"\/><\/p>\n<p>Vous pouvez remarquer la diff\u00e9rence entre les deux captures d&#8217;\u00e9cran, en plus des modifications CSS, nous avons \u00e9galement modifi\u00e9 les balises en Tagged et supprim\u00e9 les virgules entre les balises.  Comment avons-nous fait \u00e7a? <\/p>\n<p>Nous avons modifi\u00e9 the_tags();  balise template dans notre fichier single.php comme ceci : <\/p>\n<p>Si vous souhaitez limiter le nombre total de balises affich\u00e9es \u00e0 5 ou autre chose, consultez cet article sur la fa\u00e7on d&#8217;afficher un nombre limit\u00e9 de balises apr\u00e8s publication.<\/p>\n<p>Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 concevoir des balises WordPress.  N&#8217;h\u00e9sitez pas \u00e0 exp\u00e9rimenter avec CSS jusqu&#8217;\u00e0 ce que vous obteniez le r\u00e9sultat souhait\u00e9. <\/p>\n<p>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  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/comment-styliser-les-balises-dans-wordpress\/#Afficher_toutes_les_balises_avec_le_nombre_de_publications_WordPress\" >Afficher toutes les balises avec le nombre de publications WordPress<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/comment-styliser-les-balises-dans-wordpress\/#Balises_de_style_dans_les_meta-informations_de_la_publication\" >Balises de style dans les m\u00e9ta-informations de la publication<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>WordPress vous permet de classer 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 classer votre contenu dans diff\u00e9rentes sections, les balises peuvent \u00eatre utilis\u00e9es pour classer le contenu dans des sujets plus sp\u00e9cifiques. Vous pouvez afficher les balises utilis\u00e9es sur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":72409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1278,31,57,43,10624,45],"class_list":["post-72408","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-balises","tag-comment","tag-dans","tag-les","tag-styliser","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/72408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=72408"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/72408\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/72409"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=72408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=72408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=72408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}