 Dans cette vidéo, on va voir comment synchroniser le CSS entre le back-office et le front-office. Je viens d'une époque où le fichier style.css avait une incidence directe sur le front-office. On mettait une règle au CSS et ça changeait le style automatiquement dans la page web. Évidemment, ça ne le changeait pas dans le back-office et c'était même assez compliqué. Là maintenant, avec le FSE, c'est complètement différent. Déjà, les styles ne sont pas chargés automatiquement et on doit les déclarer, vraiment dire que ça s'applique dans le back-office et le front-office. La bonne nouvelle, c'est que c'est transparent entre le front et le back. Je suis reparti dans mon back-office et j'ai ajouté un petit peu de CSS. Donc je suis dans un article. J'ai changé la couleur du paragraphe. Je suis dans le dossier de mon thème, le fichier qui s'appelle style.css et j'ai juste ajouté une règle CSS où je fais color, red. Je mets important, bien sûr ce n'est pas forcément la bonne pratique, mais c'est pour m'assurer que je suis sûr que ça s'applique. Après, j'enlèverai important. Donc si j'enregistre et que je repars sur le front, je recharge la page et tu vois qu'au niveau du paragraphe, il ne se passe rien. Il ne trouve même pas la règle. C'est valable aussi bien dans le back-office et dans le front-office. Donc si je fais modifier l'article, c'est pareil. Pour que ça marche dans ton thème, tu dois ajouter un nouveau fichier. Donc clique droit à nouveau fichier, fonction.php. Tu ouvres PHP, un commentaire et je colle ce morceau de code. Je t'explique comment ça marche en quelques mots. Eh bien on a d'abord un premier hook. On s'assure que le hook est appliqué une fois que le thème est choisi. C'est pour ça qu'on met AfterSetUpThème. J'appelle une callback function. Et dans cette fonction, je dis que l'éditeur de style prend en charge le fichier qui s'appelle style.css. Ensuite, au passage, je supprime les compositions par défaut pour avoir mes propres compositions. Ça évidemment c'est optionnel, mais moi je l'ajoute systématiquement. C'est la première partie. La deuxième partie, c'est un autre hook qui ajoute ce même fichier style.css qui l'encapsule dans la page HTML pour que ce soit chargé en front. Alors je t'ai mis AddAction avant la fonction volontairement simplement pour que tu te rendes compte que si c'est avant ou après, c'est pas très important. Là, il y a une petite nuance. C'est que j'utilise la fonction qui s'appelle wpEncueStyle. ThèmeName, tu peux mettre le nom de ton thème. Ensuite, j'appelle le fichier template.getTemplateDirectorieURI. C'est le fichier qui s'appelle style.css. Le fichier qui est dans mon thème. Et la dernière partie qui est importante, c'est que je reprends la version du fichier que j'ajoute à la fin. Pourquoi ? Parce que si un moment tu changes au niveau de ton fichier style.css, la version du thème, eh bien ça va forcer le rafraîchissement au niveau du navigateur. Je te propose de retester à nouveau pour voir si ça marche. Je repars dans mon navigateur. Je recharge la page. Et là, tu vois que tous les textes sont rouges. Si je vais dans modifier l'article, donc dans le backoffice, ça marche également. Si je repars sur mon code, eh bien je vais juste enlever un portant, a priori ça marche. J'enregistre. Je suis reparti sur le back. Je recharge et ça marche. Si je réaffiche la page, ça marche également en frontoffice. Je te montre ce que ça donne au niveau du nom du fichier. J'inspète. Et regarde, tu vois, j'ai version 1.0.0.17. Je vais changer la version du thème pour te montrer. J'enregistre. Je suis reparti dans le front. Je recharge. Et là, tu vois que le nom du fichier a été changé. Enfin, c'est pas le nom du fichier qui a été changé. C'est que ça ajoute dynamiquement la version après le nom du fichier. Donc tu indiques au navigateur que le CSS a changé, qu'il faut rafraîchir l'affichage des CSS. Alors franchement, j'ignore pourquoi c'est pas en natif. Typiquement, quand j'ai appris les thèmes WordPress, le fichier style.css était toujours dans un thème WordPress. C'était même obligatoire pour afficher automatiquement les CSS dans le front office. Là, ce qui est nouveau et ce qui est assez génial, c'est que le CSS se synchronise automatiquement entre le back et le front quand on installe cette fonction. Et il y a une routine dans le back office qui dynamiquement change la classe dans le back office pour que le CSS ne s'applique que sur la partie éditeur.