Ajouter du CSS sur un site WordPress (De manière moderne)

Pour ajouter du CSS sur un site WordPress, les manières ne manquent pas. Il y en a forcément une qui est plus adaptée à votre problème, votre architecture. Découvrons comment ajouter du CSS additionnel sur votre WordPress. De manière moderne et professionnelle. Et utilisez les extraits de code à votre disposition !

Thème enfant, plugin, header, footer ou CSS inline. Les outils ne manquent pas pour ajouter du CSS à votre site WordPress. Alors, comment et pourquoi le faire pour chacune des solutions possible ?

Attention : vous aurez toujours besoin d’avoir un accès aux fichiers de votre site internet pour les éditer. Par FTP, SFTP, ou directement en local, si vous travaillez sur votre machine.

Dans cette page, nous partons du principe qu’ouvrir un fichier de code est normal pour vous. Que vous travaillez sur un thème, thème enfant ou un plugin. Le public visé est donc confirmé.

Si vous cherchez à modifier du CSS sur un site WordPress fait avec un page builder (Divi, Elementor, Oxygen Builder…). Ou que vous ne savez pas travailler avec un fichier de code. Référez vous au sujet général du CSS sur WordPress. Ou à la documentation de votre solution.

Ajouter des fichiers CSS pour votre Thème ou Thème Enfant via le fichier functions.php 🎨

Le fichier style.css de votre thème WordPress est à la fois le fichier clé, celui qui va notifier à WordPress qu’il s’agit d’un thème. Et à la fois la base de tout le style de votre site.

Pour ajouter ce fichier et qu’il soit valide, vous devrez bien entendu le créer à la racine de votre thème ou de votre thème enfant. Puis le « register ». Classiquement via votre fichier functions.php à l’aide du code suivant. N’hésitez pas à le copier.

/*
*   ===================================================
*   Ajouter un fichier de style via mon thème WordPress
*   ===================================================
*/
 
function ncwebstudio_static_files() {
 
    // Fichier CSS principal
    wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/style.css' );
 
}
add_action( 'wp_enqueue_scripts', 'ncwebstudio_static_files' );

Avoir un fichier style.css est obligatoire, mais vous pouvez tout à fait en avoir plusieurs.

Ajouter des fichiers CSS additionnels via un plugin WordPress

Un plugin WordPress est une extension. On peut l’imaginer comme un bloc modulable de code. Qu’on peut activer et désactiver.

C’est une bonne pratique de séparer les différentes logiques en développement. Et les plugins WordPress sont un outil idéal pour le faire.

Pourquoi ajouter du CSS via un plugin ?

Les raisons pour ajouter du CSS via un plugin sur votre site WordPress sont multiples. Évidemment, la plus logique est si vous développez un plugin et que le style de ce dernier se trouve dans le même dossier. Mais ce n’est pas tout.

En effet, vous pouvez créer un plugin WordPress uniquement pour ajouter des styles. Si vous avez différents fichiers et une architecture complexe de style, que vous réutiliserez sur différents sites. Alors un plugin est tout indiqué !

Vous profiterez du versionning de ce plugin et pourrez beaucoup plus facilement travailler / déboguer dans un environnement multi-site.

Le plugin WordPress pour du style, c’est donc commun pour les agences qui développent leur propre petit framework CSS. Mais vous n’avez bien entendu pas besoin d’être une agence de 10 personnes pour en tirer des bénéfices, suivant votre cas.

Comment ajouter du CSS via un plugin ?

Vérifiez bien l’architecture de votre plugin et adaptez les paths (chemins). Pour ajouter du CSS depuis un plugin WordPress. Vous aurez une bonne base en copiant le code ci-après dans l’index de votre plugin.

/*
*   ============================================================
*   Ajouter un fichier de style via index.php dans mon plugin WP
*   ============================================================
*/
 
function ncwebstudio_static_files() {
 
    // Ajouter un fichier CSS localisé par plugin_dir_url()
    wp_enqueue_style( 'main-css', plugin_dir_url( __FILE__ ) . 'plugin-style.css' );
 
}
add_action( 'wp_enqueue_scripts', 'ncwebstudio_static_files' );

Le CSS additionnel pour mon site WordPress sans créer de fichiers, directement dans le header ou le footer

Parfois, vous ne souhaiterez pas créer un fichier ni ajouter du style à votre fichier style.css. Les raisons peuvent être très variées. Mais vous aurez alors besoin d’insérer des balises de style dans le header ou le footer via les hooks WordPress.

Pourquoi ajouter du CSS à mon site WordPress sans créer de fichier ? Pourquoi ne pas écrire directement à la suite de mon fichier style.css ?

On peut se demander pourquoi vouloir ajouter du style dans le header ou le footer plutôt que dans le fichier de style. A juste titre. Pourtant les raisons sont nombreuses :

• Ne pas séparer la logique d’un composant et son style
• Utiliser des fonctions PHP dans du style CSS (Vous ne pouvez pas écrire de PHP pour aller chercher une variable dans un fichier de style, mais si vous insérez du style via le header ou le footer dans un hook, tout devient possible).
• Se servir des conditions ou d’une logique complexe pour insérer (ou non) le style – en effet, si vous l’écrivez dans votre fichier style.css alors le style sera toujours chargé. Peut-être n’est-ce pas ce que vous souhaitez

Comment ajouter du CSS dans le header ou le footer de mon site WordPress ?

Encore une fois, vérifiez bien le nom de vos fichiers et vos chemins (paths). Vous aurez une bonne base en copiant le code ci-après pour ajouter du CSS soit dans votre header soit dans votre footer.

/*
*   ==============================================================
*   Ajouter une balise de style dans le header via le hook wp_head
*   ==============================================================
*/
 
function ncwebstudio_head_css() {
    ?>
 
    <style>
 
        /* Mon CSS ici */
 
    </style>
 
    <?php
}
add_action( 'wp_head', 'ncwebstudio_head_css' );

/*
*   ================================================================
*   Ajouter une balise de style dans le footer via le hook wp_footer
*   ================================================================
*/
 
function ncwebstudio_footer_css() {
    ?>
 
    <style>
 
        /* Mon CSS ici */
 
    </style>
 
    <?php
}
add_action( 'wp_footer', 'ncwebstudio_footer_css' );

Exemple : ajouter des variables PHP dans du CSS ⚙️

Vous avez besoin de vos variables PHP pour votre CSS ? C’est un cas très courant. Et les fichiers .css ne comprennent que les propriétés CSS. Impossible donc d’y utiliser vos variables.

Nous venons de voir qu’il était possible de le faire en utilisant les hooks wp_head et wp_footer. Voici un exemple concret.

Imaginez que vous souhaitez définir une image en background sur vos articles. Et pas en utilisant un balise <img>. L’idéal serait de pouvoir écrire du CSS (background-image) et aller chercher votre thumbnail pour la valeur, correct ? Et bien c’est exactement le but de l’exercice. On peut comme suit :

/*
*   ================================================================
*   Variables PHP dans du CSS via wp_footer
*   ================================================================
*/
 
function ncwebstudio_footer_css() {

    $article_background_img_url = /* Allez chercher votre variable ici */

    ?>
 
    <style>
 
        .article-header {
            background-image: url('<php echo $article_background_img_url; ?>');
        }
 
    </style>
 
    <?php
}
add_action( 'wp_footer', 'ncwebstudio_footer_css' );

Dois-je privilégier l’ajout de CSS dans le header ou dans le footer ? 🙋

Excellente question. La réponse est presque toujours dans le footer, pour des raisons de performances. Toutefois, dans certains cas, pour du CSS critique, le header peut être indiquée.

C’est d’ailleurs un sujet dans tous les résultats d’audit de performances. Comme Google Page Speed Insight ou GTMetrix.

Si vous avez un problème avec les chaînes critiques ou que votre temps de chargement est trop long. Commencez par vérifier que vous n’injectez pas trop de CSS avant votre DOM (Contenu de votre page).

Toujours pas sûrs de si vous devez insérer votre style dans le header ou le footer ? Commencez toujours pas le footer. Si vous ne rencontrez pas de problèmes. Laissez le ici.

Ajouter du CSS directement sur les éléments : Le CSS inline

Comme toujours en développement web, vous pouvez ajouter du style « inline ». C’est à dire directement sur vos éléments HTML à l’aide de l’attribut style.

<p style="font-size: 18px;">Un paragraphe à la taille légèrement augmentée.</p>

Les avantages et inconvénients à ajouter du CSS inline – le CSS additionnel directement dans l’attribut HTML

Sur ce sujet, il y a les totalement pour et les totalement contre. Essayons ici d’avoir une vision plus nuancée. C’est une possibilité qui existe et peut vous servir dans certains cas.

Vous n’avez qu’une petite propriété CSS à écrire sur un élément, et cette propriété ne sera pas réutilisé ailleurs ? Il peut-être logique de n’écrire que du CSS inline sur cet élément.

Certains framework, comme Bootstrap ou Tailwind utilisent des noms de classe descriptives qui s’apparentent presque à du CSS inline. Quand on intègre de cette manière, ajouter du style inline dans une balise style en plus des classes n’est pas un non-sens. La lecture se fait de la même manière que les classes.

Voyez l’exemple ci-après d’un élément stylisé avec Tailwind.

/* Exemple d'un élément stylisé avec Tailwind.css */
<div class="bg-white rounded-8xl py-2 px-3 uppercase text-xs font-bold tracking-wider text-gray-300">Mon texte</div>

Tester les performances de mon CSS additionnel et bonnes pratiques en matière de temps de chargement

Pour ajouter du CSS de manière professionnelle à un site WordPress, vous ne pouvez pas omettre les performances.

Vous devriez régulièrement vérifier que vos ajouts n’entrainent pas de problèmes de performances sur des outils d’audit comme GTMetrix ou Google Page Speed

Les bonnes pratiques en matière de performance et de CSS additionnel sur un site WordPress

D’une manière générale :

• N’ajoutez jamais de CSS inutile
• Quand vous ajoutez des dépendances, ajoutez toujours les versions minifiées et si possible les plus légères
• Si vous n’utilisez que le layout de bootstrap (par exemple) n’appelez que le fichier grid…
• Ajoutez toujours le CSS dans le footer après le contenu de votre page
• N’installez jamais trop de plugins
• N’installez jamais de plugins qui résolvent des problèmes de style (écrivez votre CSS vous même)
• N’appelez jamais du CSS globalement si vous ne l’utilisez qu’à des endroits précis
• Si vous développez des blocs Gutenberg, utilisez la fonctionnalité permettant d’appeler le CSS du bloc uniquement s’il est appelé sur une page
• Commentez toujours votre CSS (vous vous remercierez plus tard)
• Quand vous n’utilisez plus une classe ou une librairie, ne supprimez pas le fichier mais retirez le de votre appel dans functions.php (Il ne sera plus appelé)
• Si vous n’utilisez plus des parties de votre fichier style.css, ne le supprimez pas, commentez le CSS inutilisé, un minificateur de fichier CSS retirera les commentaires pour les utilisateurs (et ils pourront toujours vous servir plus tard)

Bonus : vous pouvez minifier et combiner vos fichiers avec WP Rocket.

Conclusion : vous savez ajouter du style de manière professionnelle sur WordPress, en respectant les performances et les bonnes pratiques de développement

Nous venons de survoler le sujet de l’ajout de CSS sur un site WordPress. Vous êtes maintenant capable de comprendre où et comment ajouter votre CSS.

De choisir la solution la plus adaptée à votre situation. Et de respecter les bonnes pratiques en matière de développement et de performances.