L'ajout de code CSS personnalisé est une fonctionnalité native de WordPress 4.7. En utilisant l'outil de personnalisation communément appelé le Customizer, il est possible d'injecter des propriétés CSS avec la prévisualisation en temps réel.

Pour ajouter vos lignes de code CSS, rendez-vous dans Apparence puis Personnaliser. Remarquez la présence du panneau intitulé CSS additionnel. C’est ici que vous devez coller votre code CSS.

Quelques remarques complémentaires toutefois :

  • Limitez-vous à quelques lignes seulement : cet outil n’a pas vocation à remplacer une véritable feuille de styles et ce, pour des raisons évidentes liées à la performance. Pour modifier en profondeur votre code CSS, utilisez un thème enfant ;
  • Les données sont propres au thème actif. En cas de changement de thème, le code personnalisé ne sera donc pas appliqué ;

En tant que développeur, il n’est guère utile de fournir une telle fonctionnalité dans le cadre d’un projet client. Vous pouvez donc désactiver ce panneau à l’aide de ce bout de code que l’on injectera dans un mu-plugins de préférence :

function wpc_remove_css_section($wp_customize) {
	$wp_customize->remove_section('custom_css');
}
add_action('customize_register', 'wpc_remove_css_section', 15);

La personnalisation en temps réel du code CSS n’a rien de révolutionnaire… déjà présente depuis plus d’un an sur notre thème premium ONE.

9 commentaires
  1. Bonjour,

    J’ai une question concernant votre article sur le CSS additionnel WordPress. Je trouve souvent un champ dans les options des thèmes premium que j’utilise qui permet de surcharger le CSS de base du thème WordPress. Je me demande par conséquent si ce champ « CSS personnalisé » correspond à la même méthode présentée ici pour ajouter du CSS additionnel sur WordPress ?

    1. Aurélien Denis auteur de l’article

      Hello, oui c’est la même approche et comme elle était populaire elle a été introduite dans le Customizer de la 4.7.

      P.S : il n’est pas autorisé d’utiliser un nom de domaine avec WordPress à l’intérieur.

  2. Virginie64

    Bonjour,

    J’ai une autre question concernant cette surcouche CSS.
    Est-ce que comme pour un thème enfant, cette surcouche est « sauvegardée » lors des mises à jour du thème ?

    1. Aurélien Denis auteur de l’article

      Bonjour,

      oui il s’agit tout simplement d’options enregistrées en base de données.

  3. Guillaume

    Bonjour, Dans quel fichier sur le FTP peut on retrouver ces lignes de codes du « CSS additional  » ?

    1. Aurélien Denis auteur de l’article

      Elles sont stockées en base de données et ce système doit faire l’objet d’un usage modéré (génération de CSS inline dans la source).

  4. Bonjour,
    J’ai entré les quelques lignes de code CSS, et la modification s’opère sur la page en direct.
    Seulement, dès que je clique sur « publier », elle ne s’applique pas au site.
    Savez-vous ce que je dois faire ?
    Merci !

  5. BONJOUR,

    C’ÉTAIT POUR SAVOIR QU’EST-CE QUE JE PEUX METTRE SUR CSS ADDITIONNEL, PUISQUE JE VIENS SEULEMENT DE L’UTILISER ET JE NE SAIS QUOI METTRE DEDANS.

    JE VOUS REMERCIE D’AVANCE.

    1. Aurélien Denis auteur de l’article

      Inutile d’écrire votre message en majuscules. Si vous n’avez jamais entendu parler de code CSS, cette astuce n’est pas faite pour vous.

Laisser un commentaire