{"id":80216,"date":"2025-06-30T14:32:26","date_gmt":"2025-06-30T13:32:26","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=80216&#038;preview=true&#038;preview_id=80216"},"modified":"2025-07-02T11:04:46","modified_gmt":"2025-07-02T10:04:46","slug":"astuces-css-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/","title":{"rendered":"9 astuces CSS pour les utilisateurs de WordPress"},"content":{"rendered":"<p>Que vous <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">personnalisiez un th\u00e8me<\/a>, que vous essayiez de d\u00e9sencombrer un tableau de bord riche en extensions ou que vous souhaitiez simplement que votre blog soit beau sur tous les \u00e9crans, <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">CSS<\/a> reste l&rsquo;un des moyens les plus rapides de r\u00e9aliser des choses avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\">WordPress<\/a> sans installer une <em>\u00e9ni\u00e8me<\/em> extension.<\/p>\n<p>Mais soyons r\u00e9alistes : Tous les utilisateurs de WordPress n&rsquo;ont pas le temps de fouiller dans les feuilles de style des th\u00e8mes ou de d\u00e9chiffrer les bizarreries de <a href=\"https:\/\/www.youtube.com\/shorts\/yYcL3kUSGZA\">l&rsquo;\u00c9diteur de blocs<\/a>. C&rsquo;est pourquoi nous avons dress\u00e9 cette liste d&rsquo;astuces CSS pratiques, con\u00e7ues sp\u00e9cifiquement pour WordPress et permettant de gagner du temps.<\/p>\n<p>Il ne s&rsquo;agit pas d&rsquo;astuces g\u00e9n\u00e9riques. Au contraire, elles peuvent vous aider \u00e0 r\u00e9soudre les frustrations communes rencontr\u00e9es par les blogueurs, les propri\u00e9taires de sites, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-de-developpeurs\/\">d\u00e9veloppeurs<\/a> et les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-outils-pour-freelances\/\">ind\u00e9pendants<\/a> qui travaillent avec WordPress tous les jours.<\/p>\n<p>Ce guide vous explique comment :<\/p>\n<ul>\n<li>R\u00e9soudre les probl\u00e8mes d&rsquo;en-t\u00eate collant avec des liens d&rsquo;ancrage<\/li>\n<li>Acc\u00e9l\u00e9rer les grilles d&rsquo;articles longs avec des techniques de mise en page modernes<\/li>\n<li>Personnaliser l&rsquo;\u00e9cran de connexion sans extension<\/li>\n<li>Cacher les \u00e9l\u00e9ments gonfl\u00e9s de l&rsquo;interface utilisateur de l&rsquo;extension<\/li>\n<li>Et plus encore&#8230;<\/li>\n<\/ul>\n<p>Que vous utilisiez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\">th\u00e8me classique<\/a>, un <a href=\"https:\/\/kinsta.com\/fr\/blog\/developpement-theme-bloc-wordpress\/\">th\u00e8me bas\u00e9 sur des blocs<\/a> ou un <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeur<\/a>, ces conseils peuvent vous aider \u00e0 rationaliser votre flux de travail et \u00e0 am\u00e9liorer les performances, le tout avec quelques lignes de <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>1. R\u00e9soudre les probl\u00e8mes li\u00e9s aux liens d&rsquo;ancrage avec des en-t\u00eates collants<\/h2>\n<p>Avez-vous d\u00e9j\u00e0 cliqu\u00e9 sur un lien ancr\u00e9 dans une section d&rsquo;une page pour d\u00e9couvrir que la rubrique cible \u00e9tait cach\u00e9e derri\u00e8re votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/en-tete-epingle\/\">barre de navigation collante<\/a> ? Il s&rsquo;agit d&rsquo;un probl\u00e8me courant dans WordPress. Il appara\u00eet g\u00e9n\u00e9ralement dans les articles longs qui utilisent des extensions de table des mati\u00e8res.<\/p>\n<p>La plupart des th\u00e8mes utilisent <code>position: sticky<\/code> ou <code>fixed<\/code> pour les barres de navigation, qui recouvrent le haut de la page. Lorsqu&rsquo;un utilisateur clique sur un lien d&rsquo;ancrage (comme <code>#faq<\/code> ou <code>#pricing<\/code>), le navigateur fait d\u00e9filer cette section tout en haut, juste en dessous de la barre de navigation.<\/p>\n<p>Vous pouvez rem\u00e9dier \u00e0 ce probl\u00e8me en utilisant la propri\u00e9t\u00e9 CSS <code>scroll-margin-top<\/code>. Elle ajoute de l&rsquo;espace au-dessus de l&rsquo;en-t\u00eate, afin qu&rsquo;il ne soit pas coinc\u00e9 sous la barre de navigation collante.<\/p>\n<pre><code class=\"language-css\">h2, h3 {\n  scroll-margin-top: 80px;\n}<\/code><\/pre>\n<p>La meilleure pratique consiste \u00e0 faire correspondre la valeur \u00e0 la hauteur de votre en-t\u00eate. Si votre barre de navigation collante a une hauteur de 64 px, utilisez <code>scroll-margin-top: 64px<\/code> ou un peu plus. Appliquez-le aux niveaux d&rsquo;en-t\u00eate que vous utilisez dans les liens d&rsquo;ancrage &#8211; g\u00e9n\u00e9ralement <code>h2<\/code> ou <code>h3<\/code>.<\/p>\n<h2>2. Cibler des \u00e9crans d&rsquo;administration WordPress sp\u00e9cifiques avec les classes &lt;body&gt;<\/h2>\n<p>De nombreuses extension WordPress encombrent l&rsquo;interface d&rsquo;administration avec des annonces de vente, des banni\u00e8res ou des \u00e9l\u00e9ments non stylis\u00e9s. Mais les supprimer ou les ajuster sur l&rsquo;ensemble du site n&rsquo;est pas toujours pratique, en particulier lorsque vous ne voulez des changements que sur un \u00e9cran sp\u00e9cifique comme les r\u00e9glages de <a href=\"https:\/\/kinsta.com\/fr\/blog\/tutoriel-woocommerce\/\">WooCommerce<\/a> ou un \u00e9diteur de <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">type de publication personnalis\u00e9<\/a>.<\/p>\n<p>WordPress ajoute automatiquement des classes contextuelles \u00e0 la balise <code>&lt;body&gt;<\/code> sur les pages d&rsquo;administration. Celles-ci incluent les pages, les types de publication et les r\u00e9f\u00e9rences aux \u00e9l\u00e9ments de menu &#8211; et elles sont incroyablement utiles pour \u00e9crire du CSS cibl\u00e9 qui ne s&rsquo;applique que l\u00e0 o\u00f9 c&rsquo;est n\u00e9cessaire.<\/p>\n<p>Par exemple, imaginons que vous souhaitiez masquer les avis sur la seule page de configuration de WooCommerce.<\/p>\n<pre><code class=\"language-css\">body.toplevel_page_woocommerce .notice {\n  display: none;\n}<\/code><\/pre>\n<p>Pour trouver ces classes, ouvrez l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">interface d&rsquo;administration de WordPress<\/a>, faites un clic droit et choisissez <strong>Inspecter<\/strong> (ou appuyez sur <code>Cmd+Option+I<\/code> \/ <code>Ctrl+Shift+I<\/code>). Recherchez la balise <code>&lt;body&gt;<\/code> &#8211; elle contiendra plusieurs classes utiles.<\/p>\n<p>Par exemple, vous pouvez obtenir ceci \u00e0 partir d&rsquo;un \u00e9cran de tableau de bord :<\/p>\n<pre><code class=\"language-css\">&lt;body class=\"wp-admin wp-core-ui index-php wp-dashboard theme-astra ...\"&gt;<\/code><\/pre>\n<p>Quelques classes courantes que vous pourriez voir :<\/p>\n<ul>\n<li><code>post-type-product<\/code>: \u00c9diteur de produit WooCommerce<\/li>\n<li><code>edit-tags-php<\/code>: Gestion des cat\u00e9gories\/\u00e9tiquettes<\/li>\n<li><code>settings_page_yoast<\/code>: R\u00e9glages Yoast SEO<\/li>\n<li><code>toplevel_page_woocommerce<\/code>: Page principale des r\u00e9glages de WooCommerce<\/li>\n<\/ul>\n<p>Pour les utiliser dans votre CSS, vous devez <a href=\"https:\/\/kinsta.com\/fr\/blog\/wp-enqueue-scripts\/\">cr\u00e9er<\/a> une feuille de style personnalis\u00e9e pour l&rsquo;administration. Vous ne pouvez pas les ajouter via la personnalisation &#8211; cela n&rsquo;affecte que l&rsquo;interface publique.<\/p>\n<p>Ajoutez ceci \u00e0 la page <code>functions.php<\/code> de votre th\u00e8me :<\/p>\n<pre><code class=\"language-php\">function my_custom_admin_styles() {\n  wp_enqueue_style(\n    'my-admin-css',\n    get_stylesheet_directory_uri() . '\/admin.css'\n  );\n}\nadd_action('admin_enqueue_scripts', 'my_custom_admin_styles');<\/code><\/pre>\n<p>Cr\u00e9ez ensuite un fichier appel\u00e9 <code>admin.css<\/code> dans le dossier de votre th\u00e8me et ajoutez-y vos styles d\u00e9finis.<\/p>\n<h2>3. Construire des grilles r\u00e9actives sans constructeur de pages<\/h2>\n<p>Les constructeurs de pages facilitent la mise en page, mais ils ajoutent aussi de la lourdeur. Si vous travaillez avec un th\u00e8me classique (comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/generatepress-vs-astra\/\">Astra ou GeneratePress<\/a>) ou m\u00eame si vous cr\u00e9ez votre propre <a href=\"https:\/\/kinsta.com\/fr\/blog\/modeles-blocs-wordpress\/\">mod\u00e8le bas\u00e9 sur des blocs<\/a>, les grilles CSS permettent de cr\u00e9er une mise en page r\u00e9active plus rapidement et plus proprement.<\/p>\n<p>C&rsquo;est particuli\u00e8rement utile pour :<\/p>\n<ul>\n<li>Les grilles d&rsquo;articles de blog sur les pages d&rsquo;accueil ou d&rsquo;archives<\/li>\n<li>Les listes de types de publication personnalis\u00e9s comme les \u00e9v\u00e8nements, les membres de l&rsquo;\u00e9quipe ou les t\u00e9moignages<\/li>\n<li>Les mises en page de produits WooCommerce sans surcharger les fichiers de mod\u00e8les<\/li>\n<\/ul>\n<p>Vous pouvez simplement ajouter ceci \u00e0 la feuille de style de votre th\u00e8me enfant (ou enqueue via <code>functions.php<\/code>) :<\/p>\n<pre><code class=\"language-css\">.post-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}<\/code><\/pre>\n<p>Puis enveloppez votre boucle dans un conteneur comme ceci :<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"post-list\"&gt;\n  &lt;?php while (have_posts()) : the_post(); ?&gt;\n    &lt;div class=\"post-card\"&gt;\n      &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n      &lt;p&gt;&lt;?php the_excerpt(); ?&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;?php endwhile; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ce CSS cr\u00e9e automatiquement autant de colonnes que n\u00e9cessaire, s&rsquo;assure que chaque \u00e9l\u00e9ment a une largeur d&rsquo;au moins 280 px et r\u00e9duit le nombre de colonnes sur les petits \u00e9crans &#8211; aucune <a href=\"https:\/\/kinsta.com\/fr\/blog\/media-query-javascript\/\">requ\u00eate m\u00e9dia<\/a> ni aucune extension n&rsquo;est n\u00e9cessaire.<\/p>\n<h2>4. Utiliser clamp() pour des tailles de police r\u00e9actives sans requ\u00eates m\u00e9dia<\/h2>\n<p>Concevoir pour plusieurs tailles d&rsquo;\u00e9cran signifie souvent jongler avec les tailles de police \u00e0 l&rsquo;aide de media queries. Mais les requ\u00eates de m\u00e9dia peuvent s&rsquo;av\u00e9rer compliqu\u00e9es, en particulier lorsque vous avez affaire \u00e0 plusieurs points de rupture ou que vous souhaitez une mise \u00e0 l&rsquo;\u00e9chelle coh\u00e9rente entre les appareils.<\/p>\n<p>C&rsquo;est l\u00e0 qu&rsquo;intervient <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\">clamp()<\/a><\/code> une fonction CSS moderne qui vous permet de d\u00e9finir une valeur fluide entre une taille minimale, une taille pr\u00e9f\u00e9r\u00e9e et une taille maximale, le tout en une seule ligne.<\/p>\n<p>Voici le format de base :<\/p>\n<pre><code class=\"language-css\">font-size: clamp(min, preferred, max);<\/code><\/pre>\n<p>Elle permet au navigateur d&rsquo;ajuster automatiquement la taille de la police en fonction de la largeur de la fen\u00eatre de visualisation, <em>sans qu&rsquo;<\/em> il soit n\u00e9cessaire de recourir \u00e0 des requ\u00eates m\u00e9dia distinctes.<\/p>\n<p>La plupart des th\u00e8mes WordPress (en particulier les th\u00e8mes \u00e0 base de blocs) int\u00e8grent la conception fluide. Mais <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">l&rsquo;\u00e9diteur de blocs de Gutenberg<\/a> ne vous donne pas toujours un contr\u00f4le total sur la mise \u00e0 l&rsquo;\u00e9chelle des polices, en particulier pour des choses comme :<\/p>\n<ul>\n<li>Les titres des sections Hero<\/li>\n<li>Les titres des articles mis en avant<\/li>\n<li>Les mises en page pleine largeur<\/li>\n<\/ul>\n<p>Au lieu de coder en dur plusieurs tailles de police avec des requ\u00eates m\u00e9dia, <code>clamp()<\/code> fournit un code plus propre, moins de r\u00e9p\u00e9titions et une meilleure r\u00e9activit\u00e9 par d\u00e9faut. Vous pouvez l&rsquo;utiliser pour les titres, les boutons, les guillemets, etc., \u00e0 l&rsquo;int\u00e9rieur de styles de blocs personnalis\u00e9s via <code>theme.json<\/code> ou <code>editor-style.css<\/code>.<\/p>\n<pre><code class=\"language-css\">h1 {\n  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);\n}<\/code><\/pre>\n<p><code>clamp()<\/code> est pris en charge par tous les navigateurs modernes. Vous pouvez l&rsquo;utiliser en toute s\u00e9curit\u00e9 sur tous les projets WordPress, \u00e0 moins que vous ne visiez des navigateurs d&rsquo;entreprise extr\u00eamement obsol\u00e8tes (par exemple, Internet Explorer 11, que WordPress lui-m\u00eame ne prend plus en charge).<\/p>\n<h2>5. Am\u00e9liorer les performances des pages longues avec la visibilit\u00e9 du contenu<\/h2>\n<p>Si votre page d&rsquo;accueil liste des articles de blog, que votre page de vente charge des dizaines de produits, ou que vous utilisez une requ\u00eate personnalis\u00e9e pour afficher des t\u00e9moignages, vous avez probablement rencontr\u00e9 des probl\u00e8mes de performance, en particulier sur mobile. Ce d\u00e9calage que vous ressentez lorsque vous faites d\u00e9filer une longue liste ? C&rsquo;est le navigateur qui fait plus de travail que n\u00e9cessaire.<\/p>\n<p>La propri\u00e9t\u00e9 <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/content-visibility\">content-visibility<\/a><\/code> Peut vous aider en indiquant au navigateur \u00ab Ne rendez pas cet \u00e9l\u00e9ment avant qu&rsquo;il ne d\u00e9file \u00bb<\/p>\n<pre><code class=\"language-css\">.article-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 400px;\n}<\/code><\/pre>\n<p>C&rsquo;est un peu comme le chargement diff\u00e9r\u00e9 (lazy-loading) pour les \u00e9l\u00e9ments HTML, qui r\u00e9duit les co\u00fbts de mise en page et de peinture pour le contenu hors \u00e9cran. L&rsquo;\u00e9l\u00e9ment <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/contain-intrinsic-size\">contain-intrinsic-size<\/a><\/code> donne au navigateur une estimation de la hauteur pour r\u00e9server de l&rsquo;espace, de sorte que la mise en page ne se d\u00e9place pas lorsque le contenu se charge.<\/p>\n<p>Pour cela, ajoutez une classe telle que <code>.article-card<\/code> ou <code>.product-card<\/code>\u00a0\u00e0 chaque \u00e9l\u00e9ment de la boucle lorsque vous modifiez un th\u00e8me, puis ins\u00e9rez le CSS dans la feuille de style de <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">votre th\u00e8me enfant<\/a> ou mettez-le en file d&rsquo;attente via <code>functions.php<\/code>.<\/p>\n<p>Si vous utilisez Gutenberg, vous pouvez ajouter une classe personnalis\u00e9e au bloc (dans les <strong>r\u00e9glages avanc\u00e9s<\/strong>), puis la cibler dans la section <strong>CSS suppl\u00e9mentaire<\/strong> ou dans le fichier de votre th\u00e8me.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Cette astuce ne remplacera pas une bonne <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/cache\/\">mise en cache<\/a> ou un <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-un-cdn\/\">CDN<\/a> &#8211; mais c&rsquo;est un moyen intelligent, uniquement en CSS, d&rsquo;augmenter les performances per\u00e7ues lors du rendu de longues listes de contenu. Elle n&rsquo;est pas non plus utile pour les images (celles-ci sont d\u00e9j\u00e0 charg\u00e9es paresseusement dans les versions modernes de WordPress).<\/p>\n<\/aside>\n\n<h2>6. Utilisez !important avec parcimonie mais intelligemment lorsque vous remplacez les styles des plugins<\/h2>\n<p>Dans la plupart des projets WordPress, vous essayez de styliser quelque chose, et rien ne se passe. Vous \u00e9crivez la r\u00e8gle, v\u00e9rifiez votre s\u00e9lecteur, rafra\u00eechissez&#8230; et c&rsquo;est toujours le style original du plugin qui l&#8217;emporte.<\/p>\n<p>C&rsquo;est parce que de nombreuses extension WordPress ajoutent des styles avec :<\/p>\n<ul>\n<li>Une grande sp\u00e9cificit\u00e9 (longues cha\u00eenes de classes)<\/li>\n<li>Des attributs en ligne <code>style<\/code><\/li>\n<li>Des feuilles de style qui se chargent apr\u00e8s les v\u00f4tres<\/li>\n<\/ul>\n<p>Plut\u00f4t que de courir apr\u00e8s des s\u00e9lecteurs complexes, la solution la plus simple consiste souvent \u00e0 utiliser <code>!important<\/code> lorsque c&rsquo;est justifi\u00e9.<\/p>\n<p>Par exemple, <a href=\"https:\/\/kinsta.com\/fr\/blog\/contact-form-7\/\">Contact Form 7<\/a> utilise des classes sp\u00e9cifiques comme <code>.wpcf7-form-control<\/code>, mais ses styles par d\u00e9faut peuvent \u00eatre difficiles \u00e0 remplacer sans <code>!important<\/code>.<\/p>\n<p>Voici comment arrondir les entr\u00e9es du formulaire :<\/p>\n<pre><code class=\"language-css\">input.wpcf7-form-control {\n  border-radius: 6px !important;\n}<\/code><\/pre>\n<p>Il est important de l&rsquo;utiliser avec intention. Au lieu de disperser <code>!important<\/code> un peu partout, isolez les d\u00e9rogations dans une feuille de style d\u00e9di\u00e9e \u00e0 l&rsquo;administration ou aux extensions. Cela permet de conserver la CSS de votre th\u00e8me principal propre et d&rsquo;\u00e9viter les conflits accidentels par la suite.<\/p>\n<p>Si vous travaillez avec des sites clients, cette approche vous permet d&rsquo;apprivoiser les styles agressifs des extensions <em>sans<\/em> avoir \u00e0 modifier les mod\u00e8les ou \u00e0 ajouter une autre extension.<\/p>\n<h2>7. Utiliser :where() pour remplacer les styles de blocs sans probl\u00e8mes de sp\u00e9cificit\u00e9<\/h2>\n<p>Si vous avez d\u00e9j\u00e0 essay\u00e9 de modifier le style par d\u00e9faut des <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">blocs Gutenberg<\/a>, vous connaissez la douleur : Le noyau de WordPress et les th\u00e8mes bas\u00e9s sur des blocs sont souvent livr\u00e9s avec des s\u00e9lecteurs extr\u00eamement sp\u00e9cifiques. M\u00eame des changements mineurs comme l&rsquo;ajustement des marges des boutons ou la suppression de l&rsquo;espacement des blocs n\u00e9cessitent soit des surcharges complexes, soit beaucoup d&rsquo;essais et d&rsquo;erreurs.<\/p>\n<p>Vous pouvez r\u00e9soudre ce probl\u00e8me en utilisant la <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:where\">:where()<\/a><\/code> une enveloppe de s\u00e9lecteur CSS qui a toujours z\u00e9ro sp\u00e9cificit\u00e9, peu importe ce que vous mettez \u00e0 l&rsquo;int\u00e9rieur.<\/p>\n<pre><code class=\"language-css\">:where(.wp-block-button) {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Cela permet d&rsquo;appliquer un style \u00e0 <code>.wp-block-button<\/code>, mais contrairement \u00e0 un s\u00e9lecteur normal, il n&rsquo;entre pas en \u00ab concurrence \u00bb avec d&rsquo;autres r\u00e8gles CSS, ce qui le rend s\u00fbr et flexible.<\/p>\n<p>Supposons que vous travailliez sur un site dot\u00e9 d&rsquo;un th\u00e8me de blocs (comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-four\/\">Twenty Twenty-Four<\/a> ou Astra&rsquo;s block starter). Vous souhaitez supprimer la marge suppl\u00e9mentaire sous les boutons :<\/p>\n<pre><code class=\"language-css\">.wp-block-button {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Mais cela pourrait ne pas fonctionner parce que le noyau de WordPress ou le th\u00e8me pourrait avoir une r\u00e8gle plus sp\u00e9cifique, comme :<\/p>\n<pre><code class=\"language-css\">.entry-content .wp-block-button:not(.is-style-outline) {\n  margin-bottom: 1.5rem;\n}<\/code><\/pre>\n<p>Vous pouvez ajouter plus de sp\u00e9cificit\u00e9 (fragile), utiliser <code>!important<\/code> (lourd) ou utiliser <code>:where()<\/code> pour \u00e9crire des feuilles de style CSS plus faciles \u00e0 maintenir et qui s&rsquo;int\u00e8grent bien au reste de votre code.<\/p>\n<h2>8. Personnaliser l&rsquo;\u00e9cran de connexion de WordPress sans plugin<\/h2>\n<p>Vous voulez ajouter votre logo \u00e0 la page de connexion ? Changer la couleur d&rsquo;arri\u00e8re-plan ? Modifier les polices de caract\u00e8res ou le style des boutons ? Vous n&rsquo;avez pas besoin d&rsquo;une extension pour cela. WordPress facilite la <a href=\"https:\/\/kinsta.com\/fr\/blog\/formulaire-inscription-wordpress\/\">personnalisation de l&rsquo;\u00e9cran de connexion<\/a> avec votre propre CSS. Tout ce dont vous avez besoin, c&rsquo;est d&rsquo;un crochet d&rsquo;action.<\/p>\n<p>Enqu\u00eatez simplement une feuille de style personnalis\u00e9e \u00e0 l&rsquo;aide du crochet <code>login_enqueue_scripts<\/code>:<\/p>\n<pre><code class=\"language-php\">function custom_login_styles() {\n  wp_enqueue_style(\n    'my-login-styles',\n    get_stylesheet_directory_uri() . '\/login.css'\n  );\n}\nadd_action('login_enqueue_scripts', 'custom_login_styles');<\/code><\/pre>\n<p>Ensuite, dans votre fichier <code>login.css<\/code>, vous pouvez ajouter des styles comme celui-ci :<\/p>\n<pre><code class=\"language-css\">body.login {\n  background-color: #f9f9f9;\n}\n\n.login h1 a {\n  background-image: url('\/wp-content\/uploads\/your-logo.png');\n  background-size: contain;\n  width: 100%;\n  height: 80px;\n}\n\n.login #loginform {\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<p>Cela donne \u00e0 votre site une touche professionnelle et \u00e9vite un autre plugin qui ne fait qu&rsquo;une chose.<\/p>\n<h2>9. Emp\u00eacher les images de casser votre mise en page<\/h2>\n<p>L&rsquo;ajout d&rsquo;une image trop large pour son conteneur peut casser la mise en page d&rsquo;un site WordPress, en particulier dans les th\u00e8mes classiques ou le contenu des pages\/articles. Si l&rsquo;image n&rsquo;est pas limit\u00e9e par un CSS, elle peut d\u00e9border de son parent et provoquer un d\u00e9filement horizontal ou des sections mal align\u00e9es.<\/p>\n<p>Cela se produit g\u00e9n\u00e9ralement dans les cas suivants<\/p>\n<ul>\n<li>Un \u00e9diteur de contenu colle une image sans en d\u00e9finir l&rsquo;alignement ou la taille<\/li>\n<li>Un th\u00e8me ne g\u00e8re pas les images r\u00e9actives par d\u00e9faut<\/li>\n<li>Vous ajoutez des images \u00e0 l&rsquo;int\u00e9rieur de blocs personnalis\u00e9s ou de codes courts h\u00e9rit\u00e9s<\/li>\n<\/ul>\n<p>Pour r\u00e9soudre ce probl\u00e8me, vous devez d\u00e9finir une largeur maximale et r\u00e9initialiser la mise en page :<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>Voici ce que cela fait :<\/p>\n<ul>\n<li><code>max-width: 100%<\/code>: Assure que l&rsquo;image ne d\u00e9borde jamais de son conteneur<\/li>\n<li><code>height: auto<\/code>: Pr\u00e9serve le rapport hauteur\/largeur d&rsquo;origine<\/li>\n<li><code>display: block<\/code>: Supprime les vides inattendus sous les images caus\u00e9s par les d\u00e9fauts de mise en page en ligne<\/li>\n<\/ul>\n<p>Vous pouvez appliquer le m\u00eame mod\u00e8le pour contraindre les vid\u00e9os :<\/p>\n<pre><code class=\"language-css\">iframe {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>Ou utiliser un wrapper avec <code>aspect-ratio<\/code> si votre th\u00e8me prend en charge les CSS modernes.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le CSS peut ne pas sembler changer la donne en soi, mais dans WordPress, quelques lignes bien plac\u00e9es peuvent vous \u00e9pargner des heures de frustration.<\/p>\n<p>Que vous souhaitiez personnaliser la mise en page, nettoyer le tableau de bord de l&rsquo;administrateur ou am\u00e9liorer les performances de l&rsquo;interface publique, les conseils de ce guide sont con\u00e7us pour vous aider \u00e0 travailler plus intelligemment, et non plus difficilement.<\/p>\n<p>Mais m\u00eame le CSS le plus optimis\u00e9 ne peut pas tout faire. Pour que les am\u00e9liorations apport\u00e9es \u00e0 votre interface frontale se traduisent par des pages \u00e0 chargement rapide, des mises en page stables et une interactivit\u00e9 fluide, vous avez \u00e9galement besoin d&rsquo;une <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">plateforme d&rsquo;h\u00e9bergement con\u00e7ue pour la performance<\/a>.<\/p>\n<p>Chez Kinsta, <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/premiers-pas-wordpress\/infrastructure-wordpress\/\">notre infrastructure<\/a> est con\u00e7ue pour compl\u00e9ter ces optimisations, avec l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#image-optimization-1\">optimisation d&rsquo;image int\u00e9gr\u00e9e<\/a>, la <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/cache\/cache-edge\/\">mise en cache<\/a>, le <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/\">support CDN<\/a>, et la performance au niveau du serveur r\u00e9gl\u00e9e pour WordPress.<\/p>\n<p>Ainsi, alors que ces astuces CSS vous aident \u00e0 contr\u00f4ler l&rsquo;apparence de votre site, Kinsta vous aide \u00e0 vous assurer qu&rsquo;il <em>se charge<\/em> et <em>fonctionne<\/em> comme vos utilisateurs l&rsquo;attendent.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Que vous personnalisiez un th\u00e8me, que vous essayiez de d\u00e9sencombrer un tableau de bord riche en extensions ou que vous souhaitiez simplement que votre blog soit &#8230;<\/p>\n","protected":false},"author":287,"featured_media":80217,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1039],"class_list":["post-80216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-conseils-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 astuces CSS pour gagner du temps pour les utilisateurs de WordPress<\/title>\n<meta name=\"description\" content=\"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 astuces CSS pour les utilisateurs de WordPress\" \/>\n<meta property=\"og:description\" content=\"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-30T13:32:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-02T10:04:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"9 astuces CSS pour les utilisateurs de WordPress\",\"datePublished\":\"2025-06-30T13:32:26+00:00\",\"dateModified\":\"2025-07-02T10:04:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\"},\"wordCount\":2597,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\",\"name\":\"9 astuces CSS pour gagner du temps pour les utilisateurs de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"datePublished\":\"2025-06-30T13:32:26+00:00\",\"dateModified\":\"2025-07-02T10:04:46+00:00\",\"description\":\"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conseils WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"9 astuces CSS pour les utilisateurs de WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 astuces CSS pour gagner du temps pour les utilisateurs de WordPress","description":"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"9 astuces CSS pour les utilisateurs de WordPress","og_description":"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.","og_url":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-06-30T13:32:26+00:00","article_modified_time":"2025-07-02T10:04:46+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"9 astuces CSS pour les utilisateurs de WordPress","datePublished":"2025-06-30T13:32:26+00:00","dateModified":"2025-07-02T10:04:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/"},"wordCount":2597,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/","name":"9 astuces CSS pour gagner du temps pour les utilisateurs de WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","datePublished":"2025-06-30T13:32:26+00:00","dateModified":"2025-07-02T10:04:46+00:00","description":"Conseils CSS simples pour corriger les probl\u00e8mes courants de mise en page WordPress, nettoyer le tableau de bord et faciliter la gestion de votre site.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/06\/x-time-saving-css-tips-for-wordpress-users.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/astuces-css-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conseils WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/"},{"@type":"ListItem","position":3,"name":"9 astuces CSS pour les utilisateurs de WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/80216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=80216"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/80216\/revisions"}],"predecessor-version":[{"id":80230,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/80216\/revisions\/80230"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/translations\/jp"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/80216\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/80217"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=80216"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=80216"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=80216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}