← Tous les articles

Tutoriels

Remodelez l'administration WordPress (wp-admin) avec JustZix

Le tableau de bord WordPress s'encombre vite : chaque extension y dépose son propre avis, sa bannière promotionnelle ou sa relance d'évaluation, l'éditeur d'articles est plus étroit qu'il ne pourrait l'être, et les tableaux de listes sont difficiles à parcourir. Vous ne pouvez pas corriger cela dans les Réglages — mais vous pouvez superposer votre propre CSS et JS avec une règle JustZix limitée à /wp-admin/. Voici quelques ajustements prêts à l'emploi qui rendent le panneau calme et lisible.

Masquer les avis et relances des extensions

La plus grande source de bruit dans wp-admin est .notice — la bande de bannière au-dessus du contenu. Les extensions la remplissent d'incitations à passer aux versions payantes, de demandes d'évaluation et de rappels de mise à jour. WordPress n'a pas d'interrupteur global, donc on les masque avec du CSS :

/* Masquer les bannières promo et les relances d'extensions */
#wpbody-content .notice,
#wpbody-content .updated,
#wpbody-content .update-nag,
#wpbody-content .notice-info,
.wp-pointer {
  display: none !important;
}

/* ...mais garder visibles les vraies alertes d'erreur */
#wpbody-content .notice-error,
#wpbody-content .notice-warning {
  display: block !important;
}

On garde .notice-error et .notice-warning parce que ce sont elles qui portent les messages qui comptent — une mise à jour critique, un problème de base de données. Le bruit promotionnel disparaît, l'essentiel reste.

Désencombrer le menu d'administration

Le menu de gauche (#adminmenu) gonfle avec le temps — une extension, un nouvel élément. Si vous n'utilisez jamais certaines sections, vous pouvez les masquer. Chaque élément de menu a un id CSS stable :

/* Masquer les éléments de menu que vous n'utilisez jamais */
#adminmenu #menu-comments,
#adminmenu #menu-tools,
#adminmenu li#menu-dashboard ul li:nth-child(2) {
  display: none !important;
}

/* Un menu plus serré = plus de place pour le contenu */
#adminmenu .wp-menu-name {
  font-size: 13px;
}

Trouvez l'id de l'élément dans les DevTools — survolez l'élément <li> à l'intérieur de #adminmenu et lisez son id (par exemple menu-plugins, menu-users).

Éditeur plus large et boîte Publier collante

Dans l'éditeur classique la colonne de contenu est plus étroite qu'elle n'en a besoin. Élargissez-la au détriment de la colonne des métaboxes, et épinglez le panneau de publication pour que le bouton Publier reste toujours à portée :

/* Colonne de contenu plus large dans l'éditeur classique */
#post-body-content {
  margin-right: 300px;
}
#postbox-container-1 {
  width: 280px;
}

/* Boîte Publier collante */
#postbox-container-1 #submitdiv {
  position: sticky;
  top: 50px;
  z-index: 10;
}

Des tableaux de listes lisibles

Les tableaux d'articles, de pages et de commentaires (.wp-list-table) sont assez espacés. Resserrez-les et mettez les lignes en surbrillance pour que votre œil ne se perde pas :

/* Tableaux de listes plus denses et plus lisibles */
.wp-list-table td,
.wp-list-table th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.wp-list-table tbody tr:hover {
  background: #f0f6fc !important;
}
.wp-list-table .check-column {
  width: 2.2em !important;
}

Une administration plus sombre et plus calme

Si vous travaillez dans wp-admin le soir, le fond clair est fatigant. WordPress a des schémas de couleurs, mais ils ne couvrent pas tout le panneau. Une légère couche CSS assombrit le fond du contenu :

/* Fond d'administration légèrement assombri */
#wpbody-content,
.wrap {
  background: #1e1e1e !important;
  color: #e4e4e4 !important;
}
#wpbody-content .wp-list-table {
  background: #2a2a2a !important;
}
#wpbody-content a {
  color: #6cb6ff !important;
}

C'est un mode sombre simplifié — un mode complet demande du travail sur les champs de formulaire. Gardez-le comme une règle distincte et activez-le le soir d'un clic depuis la barre d'actions.

Masquer l'Aide, les Options de l'écran et ajuster Gutenberg

Les onglets Aide et Options de l'écran en haut sont rarement nécessaires. Dans l'éditeur de blocs, mieux vaut élargir la zone de rédaction à la place :

// Masquer les onglets Aide / Options de l'écran (JS, document_idle)
['#contextual-help-link-wrap', '#screen-options-link-wrap']
  .forEach(sel => {
    const el = document.querySelector(sel);
    if (el) el.style.display = 'none';
  });

// Gutenberg : une zone de contenu plus large
const css = document.createElement('style');
css.textContent =
  '.editor-styles-wrapper .wp-block { max-width: 900px; }';
document.head.appendChild(css);

Construisez votre propre ensemble

Gardez chaque ajustement comme une règle distincte et nommée — « wp-admin : sans avis », « wp-admin : éditeur plus large », « wp-admin : sombre » — chacune épinglée au motif */wp-admin/*. Ensuite, en quelques secondes vous adaptez le panneau à la tâche : un tableau de bord propre le matin, le mode sombre le soir.

Des règles prêtes à l'emploi pour l'administration WordPress sont dans le catalogue — voyez les exemples pour wp-admin et copiez ce qui convient. Installez JustZix et désencombrez votre tableau de bord dès aujourd'hui.

Notez cet article

Aucune note — soyez le premier.

Essayez vous-même

Installez JustZix et collez n'importe quel snippet de cet article. Deux minutes de zéro à une règle fonctionnelle sur tous vos appareils.

Obtenir JustZix

Fonctionnalités · Comment ça marche · Exemples · Cas d'usage