{"id":8961,"date":"2021-08-28T14:50:33","date_gmt":"2021-08-28T14:50:33","guid":{"rendered":"\/tutoriels\/?p=8961"},"modified":"2026-02-25T18:46:20","modified_gmt":"2026-02-25T18:46:20","slug":"comment-ajouter-un-css-personnalise-a-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/comment-ajouter-un-css-personnalise-a-wordpress","title":{"rendered":"Comment ajouter du CSS personnalis\u00e9 \u00e0 WordPress (4 m\u00e9thodes faciles)"},"content":{"rendered":"<p>Les feuilles de style en cascade (CSS) d&eacute;finissent la mani&egrave;re dont les &eacute;l&eacute;ments HTML apparaissent sur une page web, en contr&ocirc;lant les polices, les couleurs, l&rsquo;espacement et la mise en page. Les th&egrave;mes WordPress comprennent des param&egrave;tres de conception int&eacute;gr&eacute;s, mais vous avez souvent besoin de CSS personnalis&eacute;s pour ajuster les &eacute;l&eacute;ments visuels que les options par d&eacute;faut ne peuvent pas atteindre.<\/p><p>Il existe quatre fa&ccedil;ons fiables d&rsquo;ajouter un style personnalis&eacute; &agrave; votre site WordPress :<\/p><ul class=\"wp-block-list\">\n<li><strong>L&rsquo;&eacute;diteur de blocs<\/strong>. Ajoutez une nouvelle classe CSS dans l&rsquo;&eacute;diteur de site, puis attribuez-la &agrave; des blocs sp&eacute;cifiques dans le panneau des param&egrave;tres <strong>Avanc&eacute;<\/strong>.<\/li>\n\n\n\n<li><strong>Le personnalisateur du th&egrave;me<\/strong>. Ouvrez le panneau <strong>CSS<\/strong> <strong>additionnel<\/strong> dans votre tableau de bord et collez votre code pour pr&eacute;visualiser les modifications en temps r&eacute;el.<\/li>\n\n\n\n<li><strong>Un th&egrave;me enfant<\/strong>. Cr&eacute;ez un r&eacute;pertoire de th&egrave;me enfant et modifiez le fichier <strong>style.css<\/strong> afin que vos modifications soient prises en compte lors des mises &agrave; jour du th&egrave;me parent.<\/li>\n\n\n\n<li><strong>Un plugin<\/strong>. Installez un gestionnaire d&rsquo;extraits de code pour ins&eacute;rer, organiser et faire basculer les r&egrave;gles CSS personnalis&eacute;es sans modifier les fichiers du th&egrave;me.<\/li>\n<\/ul><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-custom-css-class-using-the-block-editor\">Comment ajouter une classe CSS personnalis&eacute;e &agrave; l&rsquo;aide de l&rsquo;&eacute;diteur de blocs<\/h2><p>Si vous utilisez un th&egrave;me &agrave; blocs (WordPress <strong>5.9<\/strong> et sup&eacute;rieur), vous pouvez appliquer des feuilles de style <a href=\"\/fr\/tutoriels\/css-cest-quoi\">CSS<\/a> personnalis&eacute;es &agrave; des &eacute;l&eacute;ments sp&eacute;cifiques dans l&rsquo;&eacute;diteur de blocs. Cette m&eacute;thode n&eacute;cessite la d&eacute;finition d&rsquo;une classe dans l&rsquo;&eacute;diteur de site, puis l&rsquo;affectation de cette classe &agrave; un bloc.<\/p><p>Tout d&rsquo;abord, ajoutez le code CSS dans l&rsquo;&eacute;diteur de site :<\/p><ol class=\"wp-block-list\">\n<li>Connectez-vous &agrave; votre tableau de bord WordPress et allez dans <strong>Apparence &rarr; &Eacute;diteur<\/strong>.<\/li>\n\n\n\n<li>Cliquez sur l&rsquo;ic&ocirc;ne <strong>Styles<\/strong> dans la barre lat&eacute;rale gauche (le cercle noir et blanc) et s&eacute;lectionnez <strong>CSS additionnel<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff147b8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"962\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-additional-css-highlighted.png\/public\" alt=\"L'&eacute;diteur de site WordPress montrant le panneau Styles avec la section Additional CSS en surbrillance\" class=\"wp-image-46287\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-additional-css-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-additional-css-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-additional-css-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-additional-css-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>D&eacute;finissez votre nouvelle <a href=\"\/fr\/tutoriels\/classe-css\">classe CSS<\/a>. Pour cet exemple, cr&eacute;ez une classe nomm&eacute;e <strong>custom-highlight<\/strong> qui ajoute un fond vert et un texte blanc :<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.custom-highlight {\n   background-color: #28a745;\n   color: #ffffff;\n   padding: 10px;\n}<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff15969\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"624\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-css.png\/public\" alt=\"L'&eacute;diteur de WordPress affiche le champ Additional CSS avec les styles personnalis&eacute;s saisis.\" class=\"wp-image-46288\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-css.png\/w=624,fit=scale-down 624w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-css.png\/w=183,fit=scale-down 183w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-editor-styles-css.png\/w=91,fit=scale-down 91w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Cliquez sur <strong>Passer en revue 1 modification &rarr; Enregistrer<\/strong> pour appliquer vos modifications.<\/li>\n<\/ol><p>Une fois la classe d&eacute;finie, vous pouvez l&rsquo;attribuer &agrave; n&rsquo;importe quel bloc de vos articles ou pages :<\/p><ol class=\"wp-block-list\">\n<li>Allez dans <strong>Articles &rarr; Tous les articles<\/strong> et modifiez l&rsquo;article que vous souhaitez mettre &agrave; jour.<\/li>\n\n\n\n<li>S&eacute;lectionnez le bloc que vous souhaitez modifier (par exemple, un bloc <strong>Paragraphe<\/strong>).<\/li>\n\n\n\n<li>Dans la barre lat&eacute;rale droite, ouvrez la section <strong>Avanc&eacute;<\/strong>.<\/li>\n\n\n\n<li>Dans le champ <strong>Classe(s) CSS additionnelle(s)<\/strong>, saisissez le nom de la classe que vous avez cr&eacute;&eacute;e.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff1691f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"483\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-article-additional-css-class-es-highlighted.png\/public\" alt=\"&Eacute;diteur d'articles WordPress avec r&eacute;glages avanc&eacute;s des blocs et champ de classe CSS mis en &eacute;vidence\" class=\"wp-image-46289\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-article-additional-css-class-es-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-article-additional-css-class-es-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-article-additional-css-class-es-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/wordpress-admin-article-additional-css-class-es-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Cliquez sur <strong>Enregistrer<\/strong>. Le bloc refl&egrave;te maintenant le style d&eacute;fini dans votre feuille de style.<\/li>\n<\/ol><p>Cette m&eacute;thode vous permet d&rsquo;appliquer des styles &agrave; des blocs individuels plut&ocirc;t qu&rsquo;&agrave; des &eacute;l&eacute;ments de l&rsquo;ensemble du site. Il est id&eacute;al pour un style unique, par exemple pour mettre en &eacute;vidence un paragraphe ou un appel &agrave; l&rsquo;action, sans affecter les autres blocs du m&ecirc;me type sur votre site.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-the-theme-customizer\">Comment ajouter du CSS personnalis&eacute; &agrave; l&rsquo;aide du personnalisateur du th&egrave;me<\/h2><p>Si vous utilisez un th&egrave;me classique, le personnalisateur de WordPress est le moyen le plus convivial d&rsquo;ajouter des CSS personnalis&eacute;s. Introduit dans WordPress <strong>4.7<\/strong>, il vous permet d&rsquo;&eacute;crire du CSS et de voir les changements imm&eacute;diatement avant la publication.<\/p><ol class=\"wp-block-list\">\n<li>Allez dans <strong>Apparence &rarr; Personnaliser<\/strong>.<\/li>\n\n\n\n<li>Dans la barre lat&eacute;rale gauche, cliquez sur <strong>CSS additionnel<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff17839\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"356\" height=\"553\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_28_PM.png\/public\" alt=\"Le Personnalisateur WordPress avec l'option CSS additionnel mise en &eacute;vidence dans la barre lat&eacute;rale\" class=\"wp-image-46319\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_28_PM.png\/w=356,fit=scale-down 356w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_28_PM.png\/w=193,fit=scale-down 193w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_28_PM.png\/w=97,fit=scale-down 97w\" sizes=\"(max-width: 356px) 100vw, 356px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Un &eacute;diteur de code s&rsquo;ouvre. Tapez ou collez vos r&egrave;gles CSS. Par exemple, pour styliser le texte d&rsquo;un paragraphe :<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\n   color: green;\n   font-size: 16px;\n}<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Le volet de pr&eacute;visualisation &agrave; droite est mis &agrave; jour instantan&eacute;ment.<\/li>\n\n\n\n<li>Lorsque vous &ecirc;tes satisfait du r&eacute;sultat, cliquez sur <strong>Publier<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff18608\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"519\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/public\" alt=\"Le Customizer de WordPress montre un &eacute;diteur CSS additionnel avec un panneau de pr&eacute;visualisation en direct\" class=\"wp-image-46320\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Personnalisez-Accueil-Cool-tech-reviews-02-25-2026_05_30_PM.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Cette m&eacute;thode permet d&rsquo;enregistrer vos feuilles de style CSS dans la base de donn&eacute;es plut&ocirc;t que dans les fichiers du th&egrave;me, de sorte que vos modifications restent intactes lorsque vous mettez le th&egrave;me &agrave; jour. Toutefois, ils dispara&icirc;tront si vous changez de th&egrave;me. Si vous changez fr&eacute;quemment de th&egrave;me, envisagez plut&ocirc;t d&rsquo;utiliser un plugin.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-a-child-theme\">Comment ajouter du CSS personnalis&eacute; &agrave; l&rsquo;aide d&rsquo;un th&egrave;me enfant<\/h2><p>Il est risqu&eacute; de modifier le fichier <strong>style.css<\/strong> du th&egrave;me parent, car les mises &agrave; jour du th&egrave;me l&rsquo;&eacute;crasent et effacent vos personnalisations. Un <a href=\"\/fr\/tutoriels\/theme-enfant-wordpress\">th&egrave;me enfant<\/a> &eacute;vite cela en stockant vos modifications dans un r&eacute;pertoire s&eacute;par&eacute; que WordPress charge apr&egrave;s le th&egrave;me parent, ce qui permet &agrave; vos modifications de remplacer les styles du th&egrave;me parent.<\/p><ol class=\"wp-block-list\">\n<li>Acc&eacute;dez aux fichiers de votre site via le gestionnaire de fichiers de votre panneau de contr&ocirc;le d&rsquo;h&eacute;bergement ou un <a href=\"\/fr\/tutoriels\/utiliser-filezilla\">client FTP tel que FileZilla<\/a>.<\/li>\n\n\n\n<li>Allez dans le r&eacute;pertoire <strong>wp-content\/themes\/<\/strong>.<\/li>\n\n\n\n<li>Ouvrez le dossier de votre th&egrave;me enfant actif.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff195fc\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"580\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-public-html-wp-content-themes-twentytwentyfour-child-surligne.png\/public\" alt=\"Le gestionnaire de fichiers affiche le dossier themes de wp-content avec le th&egrave;me enfant en surbrillance\" class=\"wp-image-46292\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-public-html-wp-content-themes-twentytwentyfour-child-surligne.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-public-html-wp-content-themes-twentytwentyfour-child-surligne.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-public-html-wp-content-themes-twentytwentyfour-child-surligne.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-public-html-wp-content-themes-twentytwentyfour-child-surligne.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Localisez et ouvrez le fichier <strong>style.css<\/strong>.<\/li>\n\n\n\n<li>Ajoutez votre CSS personnalis&eacute; en bas de page. Par exemple :<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n   background-color: #f0f0f1;\n}<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li>Enregistrez le fichier ou t&eacute;l&eacute;chargez-le &agrave; nouveau sur votre serveur.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff1a859\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"497\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-editeur-de-texte-style-css.png\/public\" alt=\"L'&eacute;diteur de texte du gestionnaire de fichiers est ouvert et le fichier style.css est affich&eacute; pour &ecirc;tre modifi&eacute;.\" class=\"wp-image-46293\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-editeur-de-texte-style-css.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-editeur-de-texte-style-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-editeur-de-texte-style-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2026\/02\/gestionnaire-de-fichiers-editeur-de-texte-style-css.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Cette approche convient mieux aux d&eacute;veloppeurs ou aux propri&eacute;taires de sites qui pr&eacute;voient d&rsquo;importantes mises &agrave; jour de leur conception, car elle permet d&rsquo;organiser le code personnalis&eacute; et de le prot&eacute;ger contre les futures mises &agrave; jour du th&egrave;me.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-a-plugin\">Comment ajouter du CSS personnalis&eacute; &agrave; l&rsquo;aide d&rsquo;un plugin<\/h2><p>Si vous pr&eacute;f&eacute;rez ne pas modifier les fichiers du th&egrave;me ou utiliser l&rsquo;outil de personnalisation, un plugin offre une alternative s&ucirc;re et organis&eacute;e. Nous recommandons l&rsquo;utilisation de <strong>WPCode<\/strong> pour sa gestion robuste des snippets et sa biblioth&egrave;que de plus de 100 snippets pr&eacute;-fabriqu&eacute;s.<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/fr\/tutoriels\/ajouter-plugin-wordpress\">Installez et activez le plugin<\/a> &agrave; partir d&rsquo;<strong>Extensions &rarr; Ajouter une extension<\/strong>.<\/li>\n\n\n\n<li>Allez dans <strong>Extraits de code &rarr; + Ajouter un extrait<\/strong>.<\/li>\n\n\n\n<li>Passez la souris sur <strong>Ajoutez votre code personnalis&eacute; (nouvel extrait)<\/strong> et cliquez sur <strong>+ Ajouter un extrait personnalis&eacute;<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff1bafb\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2021\/08\/Ajoutez-lextrait-WPCode-%E2%80%B9-Cool-tech-reviews-%E2%80%94-WordPress-02-25-2026_05_39_PM-1024x421.png\" alt=\"L'interface WPCode montre l'option Ajoutez votre code personnalis&eacute; en surbrillance dans le tableau de bord\" class=\"wp-image-46321\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>S&eacute;lectionnez<strong> Extrait CSS<\/strong> comme type de code.<\/li>\n\n\n\n<li>Saisissez un titre pour votre extrait (par exemple, &laquo;&nbsp;Styles d&rsquo;en-t&ecirc;te personnalis&eacute;s&nbsp;&raquo;).<\/li>\n\n\n\n<li>Collez votre CSS dans l&rsquo;&eacute;diteur de code. Par exemple :<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Surligner le texte important *\/\n.highlight {\n   background-color: #fffa9c;\n   padding: 4px 6px;\n   border-radius: 4px;\n}<\/pre><ol start=\"7\" class=\"wp-block-list\">\n<li>Activez la fonction <strong>Actif<\/strong>, puis cliquez sur <strong>Enregistrer l&rsquo;extrait<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff1cb47\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2021\/08\/Ajoutez-lextrait-WPCode-%E2%80%B9-Cool-tech-reviews-%E2%80%94-WordPress-02-25-2026_05_41_PM-1024x444.png\" alt=\"L'&eacute;diteur WPCode affiche un nouvel extrait CSS personnalis&eacute; dans la zone de pr&eacute;visualisation du code.\" class=\"wp-image-46322\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Les plugins sont particuli&egrave;rement utiles si vous changez fr&eacute;quemment de th&egrave;me, car le CSS reste actif quel que soit le th&egrave;me s&eacute;lectionn&eacute;. Vos styles personnalis&eacute;s sont stock&eacute;s ind&eacute;pendamment des fichiers de votre th&egrave;me.<\/p><h2 class=\"wp-block-heading\" id=\"h-troubleshooting-common-wordpress-custom-css-issues\"><strong>D&eacute;pannage des probl&egrave;mes courants li&eacute;s au CSS personnalis&eacute; dans WordPress<\/strong><\/h2><p>Vous pouvez r&eacute;soudre la plupart des probl&egrave;mes li&eacute;s aux CSS personnalis&eacute;s de WordPress en vidant votre cache, en v&eacute;rifiant la sp&eacute;cificit&eacute; des s&eacute;lecteurs et en corrigeant les erreurs de syntaxe.<\/p><h3 class=\"wp-block-heading\" id=\"h-style-changes-are-not-appearing\">Les modifications de style n&rsquo;apparaissent pas<\/h3><p>La raison la plus fr&eacute;quente pour laquelle les nouveaux styles n&rsquo;apparaissent pas est la mise en cache. Les navigateurs et les plugins de mise en cache stockent des versions statiques de votre site pour am&eacute;liorer la vitesse, ce qui peut emp&ecirc;cher les feuilles de style CSS mises &agrave; jour de s&rsquo;afficher imm&eacute;diatement.<\/p><ul class=\"wp-block-list\">\n<li><strong>Cache du navigateur<\/strong>. Videz le cache de votre navigateur ou proc&eacute;dez &agrave; une actualisation compl&egrave;te (<strong>Ctrl+Shift+R<\/strong> sous Windows, <strong>Cmd+Shift+R<\/strong> sous Mac). Vous pouvez &eacute;galement ouvrir la page dans une fen&ecirc;tre Incognito ou priv&eacute;e pour contourner les fichiers mis en cache.<\/li>\n\n\n\n<li><strong>Cache du serveur ou du plugin<\/strong>. Si vous utilisez un <a href=\"\/fr\/tutoriels\/plugin-de-cache-wordpress\">plugin de mise en cache<\/a> tel que WP Super Cache, W3 Total Cache ou LiteSpeed Cache, effacez le cache dans les param&egrave;tres du plugin. Si votre <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" data-type=\"link\" data-id=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\">h&eacute;bergeur WordPress<\/a> utilise une mise en cache au niveau du serveur (comme le Gestionnaire de cache d&rsquo;Hostinger), supprimez-la &eacute;galement de votre panneau de contr&ocirc;le.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f238ff1db9f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1144\" height=\"492\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/public\" alt=\"le Gestionnaire de cache d'Hostinger affiche l'option Purger tout en surbrillance dans le tableau de bord\" class=\"wp-image-46323\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/w=1144,fit=scale-down 1144w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2021\/08\/Gestionnaire-de-cache-Hostinger-02-25-2026_05_43_PM.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1144px) 100vw, 1144px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-css-selector-specificity\">Sp&eacute;cificit&eacute; du s&eacute;lecteur CSS<\/h3><p>Si votre code est pr&eacute;sent mais ne s&rsquo;applique pas, il se peut que les styles de th&egrave;mes existants le remplacent. CSS hi&eacute;rarchise les r&egrave;gles en fonction de leur sp&eacute;cificit&eacute; &ndash; un syst&egrave;me de notation dans lequel les styles en ligne l&rsquo;emportent sur les ID, les ID sur les classes et les classes sur les s&eacute;lecteurs d&rsquo;&eacute;l&eacute;ments.<\/p><p>Pour y rem&eacute;dier, utilisez un s&eacute;lecteur plus sp&eacute;cifique. Par exemple, au lieu de cibler <strong>.button<\/strong>, ciblez <strong>div.content .button<\/strong> ou incluez un conteneur parent dans votre s&eacute;lecteur.<\/p><p>En dernier recours, vous pouvez utiliser la d&eacute;claration <strong>!important<\/strong> :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button {\n   background-color: #ff0000 !important;\n}<\/pre><p>N&rsquo;oubliez pas d&rsquo;utiliser <strong>!important<\/strong> avec parcimonie. Son utilisation excessive rend la maintenance plus difficile, car les modifications futures auront &eacute;galement besoin de<strong> !important<\/strong> pour remplacer les r&egrave;gles ant&eacute;rieures. Cela conduit &agrave; des &laquo;&nbsp;guerres de sp&eacute;cificit&eacute;&nbsp;&raquo;, qui rendent vos styles plus difficiles &agrave; g&eacute;rer au fil du temps.<\/p><h3 class=\"wp-block-heading\" id=\"h-misspelled-css-syntax\">Syntaxe CSS mal orthographi&eacute;e<\/h3><p>Un seul crochet<strong> }<\/strong> ou point-virgule <strong>;<\/strong> manquant peut casser toute la feuille de style. Si vous modifiez les fichiers manuellement, v&eacute;rifiez que votre syntaxe est correcte.<\/p><p>Nous vous recommandons d&rsquo;utiliser un &eacute;diteur de code comme <strong>Visual Studio Code<\/strong>, qui met en &eacute;vidence les erreurs de syntaxe en temps r&eacute;el. L&rsquo;outil de mise en &eacute;vidence de la syntaxe int&eacute;gr&eacute; au Customizer de WordPress signale &eacute;galement les erreurs en rouge avant que vous ne les enregistriez.<\/p><h3 class=\"wp-block-heading\" id=\"h-the-new-design-is-not-responsive\">Le nouveau design n&rsquo;est pas r&eacute;actif<\/h3><p>Les feuilles de style CSS personnalis&eacute;es peuvent parfois perturber la mise en page sur les appareils mobiles. Testez toujours vos modifications sur diff&eacute;rentes tailles d&rsquo;&eacute;cran &agrave; l&rsquo;aide des outils de d&eacute;veloppement de votre navigateur (<strong>Inspecter &rarr; Basculer la barre d&rsquo;outils de l&rsquo;appareil<\/strong>).<\/p><p>Pour am&eacute;liorer la r&eacute;activit&eacute;, int&eacute;grez votre code dans une requ&ecirc;te m&eacute;dia :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 600px) {\n   body {\n      font-size: 14px;\n   }\n}<\/pre><h2 class=\"wp-block-heading\" id=\"h-how-do-i-add-other-custom-code-to-wordpress\">Comment ajouter d&rsquo;autres codes personnalis&eacute;s &agrave; WordPress ?<\/h2><p>Vous pouvez ajouter d&rsquo;autres types de codes personnalis&eacute;s &agrave; WordPress en utilisant deux m&eacute;thodes principales, selon le langage de programmation et selon que vous avez besoin de modifier les fonctionnalit&eacute;s c&ocirc;t&eacute; serveur ou le comportement de l&rsquo;interface.<\/p><ul class=\"wp-block-list\">\n<li><strong>PHP<\/strong>. Pour modifier les fonctions de base &ndash; telles que la cr&eacute;ation de types d&rsquo;articles personnalis&eacute;s ou le filtrage du contenu &ndash; il faut <a href=\"\/fr\/tutoriels\/ajouter-php-a-wordpress\">ajouter du code PHP &agrave; WordPress<\/a>. Ce code s&rsquo;ex&eacute;cute sur le serveur avant le chargement de la page.<\/li>\n\n\n\n<li><strong>JavaScript<\/strong>. Pour les fonctions dynamiques telles que les animations, la gestion des &eacute;v&eacute;nements ou les scripts de suivi, envisagez d&rsquo;ajouter JavaScript &agrave; WordPress. Ce code s&rsquo;ex&eacute;cute dans le navigateur de l&rsquo;utilisateur apr&egrave;s le chargement de la page.<\/li>\n<\/ul><p>Quelle que soit la m&eacute;thode choisie, assurez-vous toujours de disposer d&rsquo;une sauvegarde r&eacute;cente de votre site web avant d&rsquo;ajouter un code personnalis&eacute; afin d&rsquo;&eacute;viter toute perte de donn&eacute;es ou erreur de site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les feuilles de style en cascade (CSS) d&eacute;finissent la mani&egrave;re dont les &eacute;l&eacute;ments HTML apparaissent sur une page web, en contr&ocirc;lant les polices, les couleurs, l&rsquo;espacement et la mise en page. Les th&egrave;mes WordPress comprennent des param&egrave;tres de conception int&eacute;gr&eacute;s, mais vous avez souvent besoin de CSS personnalis&eacute;s pour ajuster les &eacute;l&eacute;ments visuels que les [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/comment-ajouter-un-css-personnalise-a-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":212,"featured_media":46314,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment ajouter du CSS personnalis\u00e9 \u00e0 WordPress","rank_math_description":"Apprenez \u00e0 ajouter du CSS personnalis\u00e9 \u00e0 WordPress en m\u00e9thodes simples : \u00e9diteur de blocs, outil de personnalisation, plugins et th\u00e8me enfant.","rank_math_focus_keyword":"css wordpress","footnotes":""},"categories":[4777],"tags":[5711,4900,5710,5731,5732,4898],"class_list":["post-8961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-aide-memoire-css","tag-code-css","tag-css-cheat-sheet","tag-css-personnalise","tag-custom-css","tag-style-css"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/adicionar-css-personalizado-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-ajouter-un-css-personnalise-a-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-css-wordpress","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-css","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-css","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-css","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/adicionar-css-personalizado-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-custom-css-to-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/8961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/212"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=8961"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/8961\/revisions"}],"predecessor-version":[{"id":46346,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/8961\/revisions\/46346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/46314"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=8961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=8961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=8961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}