Modification du CSS du thème par défaut – Wordpress

prérequis

Avant de consulter ce document, il est conseillé d'avoir consulté les documentations sur :

• le terminal
• node.js
• l'organisation d'une installation wordpress de base, en particulier celle d'un thème par défaut.

lancer les scripts node.js fournis avec le script

Nous avions vu dans la documentation relative à l'organisation d'une installation wordpress de base que notre thème par défaut comportait un fichier package.json.

Ce fichier package.json comporte un champs scripts avec plusieurs scripts intéressants, entre autres build et watch.

• build : compile les fichiers SASS pour générer le CSS final
• watch : surveille les fichiers SASS et relance build s'ils sont modifiés

expérimentons les scripts

ℹ️ → Rappel : une documentation vous est fournie sur le terminal

ℹ️ → Pour faire cette expérimentation, vous devez avoir une distribution serveur sur votre ordinateur et une instance de Wordpress installée.

1. lancez votre serveur local
2. Affichez votre site Wordpress dans un onglet de votre navigateur. Nous nous référerons à cet onglet comme étant l'onglet 1. Cet affichage servira de référence.
3. rendez-vous dans le dossier mon-dossier-wordpress/wp-content/themes/twentynineteen/sass/variables-site/
4. ouvrez le fichier _colors.scss

→ Observez la première variable SCSS :

  $color__background-body: #fff;

→ Modifiez-la comme suit, et sauvegardez le fichier _colors.scss :

  $color__background-body: #ff0000;

5. dans votre navigateur, ouvrez à côté de l'onglet 1, un onglet 2. Chargez-y votre site Wordpress : on constate que rien n'a changé.
6. en utilisant le terminal, rendez-vous dans le dossier mon-dossier-wordpress/wp-content/themes/twentynineteen/
7. lancez la commande npm install pour installer les dépendances
8. lancez la commande npm run build
9. rechargez l'onglet 2
10. le fond de votre site doit maintenant être de couleur rouge.
11. agencez votre terminal et votre éditeur de texte de manière à pouvoir avoir un oeil sur les deux en même temps
12. lancez la commande npm run watch
13. modifiez à nouveau la première variable de _colors.scss comme suit :

  $color__background-body: #00ff00;

14. sauvegardez, et observez en même temps le terminal : la sauvegarde du fichier a été détectée, et le CSS est donc regénéré automatiquement.
15. rechargez l'onglet 2
16. le fond de votre site doit maintenant être de couleur rouge.

utiliser les sourcemaps

ℹ️ → Les sourcemaps sont des fichiers qui font le lien entre le CSS et les fichiers sources SCSS. Ils permettent de savoir à quel endroit de la source SCSS une règle CSS a été définie.

Dans votre navigateur, sur votre site Wordpress, affichez les outils de développement.

Dans l'inspecteur, cliquez sur l'élément body.

Observez les règles CSS associées, et surtout, la source indiquée : par défaut, on nous indique la source comme étant le fichier style.css.

Problème, il ne s'agit pas de notre fichier source, de notre fichier de travail.

Savoir que la couleur de l'élément body est défini à la ligne 765 du style.css ne nous ait d'aucune utilité, car nous souhaiterions plutôt savoir à quel fichier SCSS et à quelle ligne cela correspond.

Pour cela, il faut générer des fichiers .map, dits « sourcemaps » qui vont faire le lien entre les fichiers CSS générés, et les sources SCSS.

🌁 ↓ figure 1 : sans sourcemaps 👎

🌁 ↓ figure 2 : avec sourcemaps 👍

modification du fichier package.json pour générer les sourcemaps

En regardant notre fichier package.json, on observe, dans la partie scripts, que le module node-sass est utilisé pour compiler le SASS.

Regardons la documentation du paquet node-sass :

« The --source-map option accepts a boolean value, in which case it replaces destination extension with .css.map. (…)»

« L'option --source-map accepte une valeur booléenne, cas dans lequel l'extension de la destination est remplacée par .css.map »

Nous devons donc rajouter l'option --source-map true quelque part.

En l'occurence, nous allons modifier la ligne :

"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css"

De cette manière :

"build:style": "node-sass --source-map true style.scss style.css --output-style expanded && postcss -r style.css",

Si nous relançons npm run build ou npm run watch, et que nous rechargeons la page, nous observons qu'il nous ait maintenant possible de remonter à la source d'un règle CSS directement dans les outils de développement du navigateur.

en vidéo