Que vous personnalisiez un thème, que vous essayiez de désencombrer un tableau de bord riche en extensions ou que vous souhaitiez simplement que votre blog soit beau sur tous les écrans, CSS reste l’un des moyens les plus rapides de réaliser des choses avec WordPress sans installer une énième extension.

Mais soyons réalistes : Tous les utilisateurs de WordPress n’ont pas le temps de fouiller dans les feuilles de style des thèmes ou de déchiffrer les bizarreries de l’Éditeur de blocs. C’est pourquoi nous avons dressé cette liste d’astuces CSS pratiques, conçues spécifiquement pour WordPress et permettant de gagner du temps.

Il ne s’agit pas d’astuces génériques. Au contraire, elles peuvent vous aider à résoudre les frustrations communes rencontrées par les blogueurs, les propriétaires de sites, les développeurs et les indépendants qui travaillent avec WordPress tous les jours.

Ce guide vous explique comment :

  • Résoudre les problèmes d’en-tête collant avec des liens d’ancrage
  • Accélérer les grilles d’articles longs avec des techniques de mise en page modernes
  • Personnaliser l’écran de connexion sans extension
  • Cacher les éléments gonflés de l’interface utilisateur de l’extension
  • Et plus encore…

Que vous utilisiez un thème classique, un thème basé sur des blocs ou un constructeur, ces conseils peuvent vous aider à rationaliser votre flux de travail et à améliorer les performances, le tout avec quelques lignes de CSS.

1. Résoudre les problèmes liés aux liens d’ancrage avec des en-têtes collants

Avez-vous déjà cliqué sur un lien ancré dans une section d’une page pour découvrir que la rubrique cible était cachée derrière votre barre de navigation collante ? Il s’agit d’un problème courant dans WordPress. Il apparaît généralement dans les articles longs qui utilisent des extensions de table des matières.

La plupart des thèmes utilisent position: sticky ou fixed pour les barres de navigation, qui recouvrent le haut de la page. Lorsqu’un utilisateur clique sur un lien d’ancrage (comme #faq ou #pricing), le navigateur fait défiler cette section tout en haut, juste en dessous de la barre de navigation.

Vous pouvez remédier à ce problème en utilisant la propriété CSS scroll-margin-top. Elle ajoute de l’espace au-dessus de l’en-tête, afin qu’il ne soit pas coincé sous la barre de navigation collante.

h2, h3 {
  scroll-margin-top: 80px;
}

La meilleure pratique consiste à faire correspondre la valeur à la hauteur de votre en-tête. Si votre barre de navigation collante a une hauteur de 64 px, utilisez scroll-margin-top: 64px ou un peu plus. Appliquez-le aux niveaux d’en-tête que vous utilisez dans les liens d’ancrage – généralement h2 ou h3.

2. Cibler des écrans d’administration WordPress spécifiques avec les classes <body>

De nombreuses extension WordPress encombrent l’interface d’administration avec des annonces de vente, des bannières ou des éléments non stylisés. Mais les supprimer ou les ajuster sur l’ensemble du site n’est pas toujours pratique, en particulier lorsque vous ne voulez des changements que sur un écran spécifique comme les réglages de WooCommerce ou un éditeur de type de publication personnalisé.

WordPress ajoute automatiquement des classes contextuelles à la balise <body> sur les pages d’administration. Celles-ci incluent les pages, les types de publication et les références aux éléments de menu – et elles sont incroyablement utiles pour écrire du CSS ciblé qui ne s’applique que là où c’est nécessaire.

Par exemple, imaginons que vous souhaitiez masquer les avis sur la seule page de configuration de WooCommerce.

body.toplevel_page_woocommerce .notice {
  display: none;
}

Pour trouver ces classes, ouvrez l’interface d’administration de WordPress, faites un clic droit et choisissez Inspecter (ou appuyez sur Cmd+Option+I / Ctrl+Shift+I). Recherchez la balise <body> – elle contiendra plusieurs classes utiles.

Par exemple, vous pouvez obtenir ceci à partir d’un écran de tableau de bord :

<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">

Quelques classes courantes que vous pourriez voir :

  • post-type-product: Éditeur de produit WooCommerce
  • edit-tags-php: Gestion des catégories/étiquettes
  • settings_page_yoast: Réglages Yoast SEO
  • toplevel_page_woocommerce: Page principale des réglages de WooCommerce

Pour les utiliser dans votre CSS, vous devez créer une feuille de style personnalisée pour l’administration. Vous ne pouvez pas les ajouter via la personnalisation – cela n’affecte que l’interface publique.

Ajoutez ceci à la page functions.php de votre thème :

function my_custom_admin_styles() {
  wp_enqueue_style(
    'my-admin-css',
    get_stylesheet_directory_uri() . '/admin.css'
  );
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');

Créez ensuite un fichier appelé admin.css dans le dossier de votre thème et ajoutez-y vos styles définis.

3. Construire des grilles réactives sans constructeur de pages

Les constructeurs de pages facilitent la mise en page, mais ils ajoutent aussi de la lourdeur. Si vous travaillez avec un thème classique (comme Astra ou GeneratePress) ou même si vous créez votre propre modèle basé sur des blocs, les grilles CSS permettent de créer une mise en page réactive plus rapidement et plus proprement.

C’est particulièrement utile pour :

  • Les grilles d’articles de blog sur les pages d’accueil ou d’archives
  • Les listes de types de publication personnalisés comme les évènements, les membres de l’équipe ou les témoignages
  • Les mises en page de produits WooCommerce sans surcharger les fichiers de modèles

Vous pouvez simplement ajouter ceci à la feuille de style de votre thème enfant (ou enqueue via functions.php) :

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Puis enveloppez votre boucle dans un conteneur comme ceci :

<div class="post-list">
  <?php while (have_posts()) : the_post(); ?>
    <div class="post-card">
      <h2><?php the_title(); ?></h2>
      <p><?php the_excerpt(); ?></p>
    </div>
  <?php endwhile; ?>
</div>

Ce CSS crée automatiquement autant de colonnes que nécessaire, s’assure que chaque élément a une largeur d’au moins 280 px et réduit le nombre de colonnes sur les petits écrans – aucune requête média ni aucune extension n’est nécessaire.

4. Utiliser clamp() pour des tailles de police réactives sans requêtes média

Concevoir pour plusieurs tailles d’écran signifie souvent jongler avec les tailles de police à l’aide de media queries. Mais les requêtes de média peuvent s’avérer compliquées, en particulier lorsque vous avez affaire à plusieurs points de rupture ou que vous souhaitez une mise à l’échelle cohérente entre les appareils.

C’est là qu’intervient clamp() une fonction CSS moderne qui vous permet de définir une valeur fluide entre une taille minimale, une taille préférée et une taille maximale, le tout en une seule ligne.

Voici le format de base :

font-size: clamp(min, preferred, max);

Elle permet au navigateur d’ajuster automatiquement la taille de la police en fonction de la largeur de la fenêtre de visualisation, sans qu’ il soit nécessaire de recourir à des requêtes média distinctes.

La plupart des thèmes WordPress (en particulier les thèmes à base de blocs) intègrent la conception fluide. Mais l’éditeur de blocs de Gutenberg ne vous donne pas toujours un contrôle total sur la mise à l’échelle des polices, en particulier pour des choses comme :

  • Les titres des sections Hero
  • Les titres des articles mis en avant
  • Les mises en page pleine largeur

Au lieu de coder en dur plusieurs tailles de police avec des requêtes média, clamp() fournit un code plus propre, moins de répétitions et une meilleure réactivité par défaut. Vous pouvez l’utiliser pour les titres, les boutons, les guillemets, etc., à l’intérieur de styles de blocs personnalisés via theme.json ou editor-style.css.

h1 {
  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}

clamp() est pris en charge par tous les navigateurs modernes. Vous pouvez l’utiliser en toute sécurité sur tous les projets WordPress, à moins que vous ne visiez des navigateurs d’entreprise extrêmement obsolètes (par exemple, Internet Explorer 11, que WordPress lui-même ne prend plus en charge).

5. Améliorer les performances des pages longues avec la visibilité du contenu

Si votre page d’accueil liste des articles de blog, que votre page de vente charge des dizaines de produits, ou que vous utilisez une requête personnalisée pour afficher des témoignages, vous avez probablement rencontré des problèmes de performance, en particulier sur mobile. Ce décalage que vous ressentez lorsque vous faites défiler une longue liste ? C’est le navigateur qui fait plus de travail que nécessaire.

La propriété content-visibility Peut vous aider en indiquant au navigateur « Ne rendez pas cet élément avant qu’il ne défile »

.article-card {
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}

C’est un peu comme le chargement différé (lazy-loading) pour les éléments HTML, qui réduit les coûts de mise en page et de peinture pour le contenu hors écran. L’élément contain-intrinsic-size donne au navigateur une estimation de la hauteur pour réserver de l’espace, de sorte que la mise en page ne se déplace pas lorsque le contenu se charge.

Pour cela, ajoutez une classe telle que .article-card ou .product-card à chaque élément de la boucle lorsque vous modifiez un thème, puis insérez le CSS dans la feuille de style de votre thème enfant ou mettez-le en file d’attente via functions.php.

Si vous utilisez Gutenberg, vous pouvez ajouter une classe personnalisée au bloc (dans les réglages avancés), puis la cibler dans la section CSS supplémentaire ou dans le fichier de votre thème.

6. Utilisez !important avec parcimonie mais intelligemment lorsque vous remplacez les styles des plugins

Dans la plupart des projets WordPress, vous essayez de styliser quelque chose, et rien ne se passe. Vous écrivez la règle, vérifiez votre sélecteur, rafraîchissez… et c’est toujours le style original du plugin qui l’emporte.

C’est parce que de nombreuses extension WordPress ajoutent des styles avec :

  • Une grande spécificité (longues chaînes de classes)
  • Des attributs en ligne style
  • Des feuilles de style qui se chargent après les vôtres

Plutôt que de courir après des sélecteurs complexes, la solution la plus simple consiste souvent à utiliser !important lorsque c’est justifié.

Par exemple, Contact Form 7 utilise des classes spécifiques comme .wpcf7-form-control, mais ses styles par défaut peuvent être difficiles à remplacer sans !important.

Voici comment arrondir les entrées du formulaire :

input.wpcf7-form-control {
  border-radius: 6px !important;
}

Il est important de l’utiliser avec intention. Au lieu de disperser !important un peu partout, isolez les dérogations dans une feuille de style dédiée à l’administration ou aux extensions. Cela permet de conserver la CSS de votre thème principal propre et d’éviter les conflits accidentels par la suite.

Si vous travaillez avec des sites clients, cette approche vous permet d’apprivoiser les styles agressifs des extensions sans avoir à modifier les modèles ou à ajouter une autre extension.

7. Utiliser :where() pour remplacer les styles de blocs sans problèmes de spécificité

Si vous avez déjà essayé de modifier le style par défaut des blocs Gutenberg, vous connaissez la douleur : Le noyau de WordPress et les thèmes basés sur des blocs sont souvent livrés avec des sélecteurs extrêmement spécifiques. Même des changements mineurs comme l’ajustement des marges des boutons ou la suppression de l’espacement des blocs nécessitent soit des surcharges complexes, soit beaucoup d’essais et d’erreurs.

Vous pouvez résoudre ce problème en utilisant la :where() une enveloppe de sélecteur CSS qui a toujours zéro spécificité, peu importe ce que vous mettez à l’intérieur.

:where(.wp-block-button) {
  margin-bottom: 0;
}

Cela permet d’appliquer un style à .wp-block-button, mais contrairement à un sélecteur normal, il n’entre pas en « concurrence » avec d’autres règles CSS, ce qui le rend sûr et flexible.

Supposons que vous travailliez sur un site doté d’un thème de blocs (comme Twenty Twenty-Four ou Astra’s block starter). Vous souhaitez supprimer la marge supplémentaire sous les boutons :

.wp-block-button {
  margin-bottom: 0;
}

Mais cela pourrait ne pas fonctionner parce que le noyau de WordPress ou le thème pourrait avoir une règle plus spécifique, comme :

.entry-content .wp-block-button:not(.is-style-outline) {
  margin-bottom: 1.5rem;
}

Vous pouvez ajouter plus de spécificité (fragile), utiliser !important (lourd) ou utiliser :where() pour écrire des feuilles de style CSS plus faciles à maintenir et qui s’intègrent bien au reste de votre code.

8. Personnaliser l’écran de connexion de WordPress sans plugin

Vous voulez ajouter votre logo à la page de connexion ? Changer la couleur d’arrière-plan ? Modifier les polices de caractères ou le style des boutons ? Vous n’avez pas besoin d’une extension pour cela. WordPress facilite la personnalisation de l’écran de connexion avec votre propre CSS. Tout ce dont vous avez besoin, c’est d’un crochet d’action.

Enquêtez simplement une feuille de style personnalisée à l’aide du crochet login_enqueue_scripts:

function custom_login_styles() {
  wp_enqueue_style(
    'my-login-styles',
    get_stylesheet_directory_uri() . '/login.css'
  );
}
add_action('login_enqueue_scripts', 'custom_login_styles');

Ensuite, dans votre fichier login.css, vous pouvez ajouter des styles comme celui-ci :

body.login {
  background-color: #f9f9f9;
}

.login h1 a {
  background-image: url('/wp-content/uploads/your-logo.png');
  background-size: contain;
  width: 100%;
  height: 80px;
}

.login #loginform {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Cela donne à votre site une touche professionnelle et évite un autre plugin qui ne fait qu’une chose.

9. Empêcher les images de casser votre mise en page

L’ajout d’une image trop large pour son conteneur peut casser la mise en page d’un site WordPress, en particulier dans les thèmes classiques ou le contenu des pages/articles. Si l’image n’est pas limitée par un CSS, elle peut déborder de son parent et provoquer un défilement horizontal ou des sections mal alignées.

Cela se produit généralement dans les cas suivants

  • Un éditeur de contenu colle une image sans en définir l’alignement ou la taille
  • Un thème ne gère pas les images réactives par défaut
  • Vous ajoutez des images à l’intérieur de blocs personnalisés ou de codes courts hérités

Pour résoudre ce problème, vous devez définir une largeur maximale et réinitialiser la mise en page :

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Voici ce que cela fait :

  • max-width: 100%: Assure que l’image ne déborde jamais de son conteneur
  • height: auto: Préserve le rapport hauteur/largeur d’origine
  • display: block: Supprime les vides inattendus sous les images causés par les défauts de mise en page en ligne

Vous pouvez appliquer le même modèle pour contraindre les vidéos :

iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

Ou utiliser un wrapper avec aspect-ratio si votre thème prend en charge les CSS modernes.

Résumé

Le CSS peut ne pas sembler changer la donne en soi, mais dans WordPress, quelques lignes bien placées peuvent vous épargner des heures de frustration.

Que vous souhaitiez personnaliser la mise en page, nettoyer le tableau de bord de l’administrateur ou améliorer les performances de l’interface publique, les conseils de ce guide sont conçus pour vous aider à travailler plus intelligemment, et non plus difficilement.

Mais même le CSS le plus optimisé ne peut pas tout faire. Pour que les améliorations apportées à votre interface frontale se traduisent par des pages à chargement rapide, des mises en page stables et une interactivité fluide, vous avez également besoin d’une plateforme d’hébergement conçue pour la performance.

Chez Kinsta, notre infrastructure est conçue pour compléter ces optimisations, avec l’optimisation d’image intégrée, la mise en cache, le support CDN, et la performance au niveau du serveur réglée pour WordPress.

Ainsi, alors que ces astuces CSS vous aident à contrôler l’apparence de votre site, Kinsta vous aide à vous assurer qu’il se charge et fonctionne comme vos utilisateurs l’attendent.

Joel Olawanle Kinsta

Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.