Ajouter du CSS additionnel sous WordPress

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.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Des tutoriels et des bons plans en exclusivité !
  • Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
13 commentaires
  1. Cédric

    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. Elise

    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. ELENA

    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. 😉

  6. Brigitte

    Bonjour : quelle est la syntaxe coté CSS additionnel avec/sans le point (exemple .box { border-style:solid… }
    Et dans Elementor dans l’onglet Additionnel faut -il mettre le point ?

  7. SAHEB-JAMII

    Bonjour,

    J’aimerai vous faire connaître le plugin Anym Live Editor qui permet une édition complète du CSS ou du SCSS et du Javascript depuis n’importe quelle page WordPress, et qui offre un rendu en direct des modifications apportées ! En plus le plugin est équipé d’une panoplie d’outils permettant d’interagir avec la page que l’on souhaite modifier, et fonctionne comme n’importe quel IDE ordinaire (style Sublime text), mais cette fois, dédié à votre site WordPress.

    Voici un lien qui détaille bien le plugin en question : https://live.anym.fr

  8. Fanfan07

    Bonjour,
    Mon thème est un thème enfant de Oceanwp.
    Lorsque j’ouvre « css additionnel », je n’ai aucun endroit ou entrer un css quelconque. Je n’ai que les recommandations, mais aucune ligne d’écriture. Qu’en pensez-vous ?

Laisser un commentaire