De retour dans Créer un thème Repo-Ready ! Dans l’article précédent, on a réorganisé un peu notre code pour le rendre plus lisible et maintenable. Mais on a toujours le problème des scripts et styles qui ne chargent pas. On va régler ce problème tout de suite et je vais vous montrer comment charger la feuille de styles correctement, the WordPress Way.
Pourquoi les styles et scripts ne chargent pas
Les scripts et styles ne chargent pas alors que dans header.php
, il y a les bonnes balises <link>
dans notre <head>
. Le soucis c’est que l’url des sources est relative. Donc ici, la balise va chercher le fichier style.css
à la racine du site, alors qu’il est dans le dossier des thèmes.
Surtout, il ne faut pas hardcoder ici le chemin vers le fichier style.css
, car sinon WordPress n’aura pas connaissance de ce fichier. Ce qu’on va faire, c’est qu’on va proprement enregistrer la feuille de style dans WordPress, puis lui demander de la charger au moment voulu.
Charger les styles et scripts dans functions.php
Pour charger la feuille de style, on va créer une fonction, que l’on va placer dans un nouveau fichier: functions.php
. Ce fichier est très important et va contenir toutes les fonctionnalités du thème.
Le docblock
C’est important de bien commenter son code, pour pouvoir s’y retrouver et aider les collaborateurs ou autres développeurs qui veulent travailler avec votre thème. Mais c’est surtout très important pour vous, car quand on revient sur du code qu’on a écrit il y a six mois, c’est assez pénible de devoir relire tout le code pour savoir où on en était et pourquoi on a fait comme ça.
Donc je vais ajouter un petit bloc de commentaires pour décrire ce que je fais et comment la fonction … fonctionne. Sur VSCode, on peut taper doc_f
( f
comme function
) pour automatiquement créer un petit bloc et le conteneur pour notre fonction. On va donc créer notre fonction, qu’on va appeler carbon_scripts()
. C’est important aussi de préfixer nos fonctions pour éviter qu’un plugin déclare une fonction avec le même nom. C’est pourquoi chaque fonction de ce thème commencera par carbon_
.
Ce qui est utile aussi, c’est de mettre la fonction dans un if
qui va vérifier si la fonction n’est pas déjà déclarée dans le thème enfant. Le fichier functions.php
du thème enfant est chargé juste avant celui du parent, donc ses fonctionnalités s’ajoutent à celui du parent, mais parfois, il peut être utile d’écraser le comportement du parent. En vérifiant si la fonction existe avant de la déclarer, on permet au thème enfant de remplacer cette fonction par la sienne.
[pastacode lang=”php” manual=”if%20(%20!%20function_exists(%20’carbon_scripts’%20)%20)%20%3A%0A%2F**%0A%20*%20Enqueues%20stylesheets%0A%20**%2F%0Afunction%20carbon_scripts()%7B%0A%20%20%20%20%0A%7D%0Aendif%3B” message=”” highlight=”” provider=”manual”/]
La fonction wp_enqueue_style()
C’est la fonction wp_enqueue_style()
qui est chargée d’enregistrer la feuille de styles pour que WordPress puisse créer la balise <link>
qui va bien. On va jeter un oeil à la doc pour voir comment l’utiliser correctement.
Sur la Code Reference ( https://developer.wordpress.org/reference/functions/wp_enqueue_style/ ) On peut voir qu’elle prend 5 paramètres:
wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' );
$handle
est le nom qu’on va lui donner.
$src
est l’url de la source.
$deps
est un tableau de dépendance. C’est-à-dire que WordPress est assez intelligent pour charger les feuilles de styles dans le bon ordre si vous en utilisez plusieurs et que certaines dépendent d’autres et donc doivent être chargées après. Et ça c’est cool.
$ver
est la version de la feuille de style.
$media
est pour indiquer si vous voulez que votre feuille de style ne soit chargée que sur mobile, que sur print, etc… On peut simplement lui donner une media query. Par défaut, la feuille est chargée dans tous les cas.
On va utiliser cette fonction pour charger notre feuille de styles.
[pastacode lang=”php” manual=”if%20(%20!%20function_exists(%20’carbon_scripts’%20)%20)%20%3A%0A%2F**%0A%20*%20Enqueues%20stylesheets%0A%20**%2F%0Afunction%20carbon_scripts()%7B%0A%20%20%20%20wp_enqueue_style(%20’carbon_styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%7D%0Aendif%3B” message=”” highlight=”6″ provider=”manual”/]
get_stylesheet_uri()
est une fonction de WordPress bien pratique, qui va simplement retourner l’url vers style.css
du thème ! Magique ! Quant au numéro de version, passer null
permet de ne pas en mettre, simplement.
Et là, si on retourne sur notre site, ça ne fait rien !
Simplement parce qu’on a pas dit à WordPress d’exécuter notre fonction ! Bummer !
Les hooks de WordPress
Il faut qu’on utilise les fameux hooks de WordPress. Pour bien comprendre les hooks, il faut avoir en tête que WordPress est programme. C’est juste un gros script PHP, qui s’exécute de façon plus ou moins linéaire.
Qu’est-ce qu’un hook ? Hook veut dire “crochet / hameçon”. Un hook est un point d’accroche dans le déroulement de WordPress. C’est simplement un moyen d’intervenir pendant le déroulement du programme.
A différents moments du déroulement de WordPress, il va vérifier si à ce moment précis il n’a pas certaines fonctions à exécuter. S’il y a des fonctions enregistrées pour être exécutées à ce moment, il le fait. Simplement.
En utilisant les hooks, on vient intervenir dans le déroulement, ce qui veut dire qu’on peut lui dire “Ok, quand tu dois charger les feuilles de styles, n’oublie pas d’exécuter ma fonction (et donc d’enregistrer ma feuille de styles)”.
Dans notre exemple, on a oublié de dire à WordPress d’exécuter notre fonction !
Le hook wp_enqueue_scripts
Pour charger notre feuille de style, on va utiliser le hook wp_enqueue_scripts
.
[pastacode lang=”php” manual=”if%20(%20!%20function_exists(%20’carbon_scripts’%20)%20)%20%3A%0A%2F**%0A%20*%20Enqueues%20stylesheets%0A%20**%2F%0Afunction%20carbon_scripts()%7B%0A%20%20%20%20wp_enqueue_style(%20’carbon_styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%7D%0Aendif%3B%0A%0Aadd_action(%20’wp_enqueue_scripts’%2C%20’carbon_scripts’%20)%3B” message=”” highlight=”10″ provider=”manual”/]
Là, on dit à WordPress : “Quand tu dois charger les styles et scripts, exécute ma fonction carbon_scripts
.”
Précision sur les hooks
Il existe deux types de hooks, les actions et les filtres.
Les actions s’enregistrent avec add_action()
et elles permettent d’exécuter une fonction à un moment donné, mais demande pas de valeur de retour.
Les filtres permettent de manipuler une donnée de WordPress. C’est à dire qu’en enregistrant un filtre avec add_filter()
, la fonction enregistrée va pouvoir modifier une donnée avant de la retourner à WordPress. Et ça c’est très important. Il ne faut pas oublier de retourner la donnée que l’on a modifiée.
Ne vous inquiétez pas si ce n’est pas 100% clair tout de suite, on verra des dizaines d’exemples de hooks au long de ce projet.
Donc, on a hooké notre fonction au bon endroit, on va sur notre site, on rafraîchit, et bim ! Ca ne marche toujours pas !
Simplement parce qu’on a dit à WordPress de charger notre feuille de styles, mais on ne lui a pas dit où mettre sa balise <link>
! Il faut qu’on utilise un autre hook, que l’on va insérer dans notre thème.
La fonction wp_head()
Dans notre thème, on veut insérer les balises qui vont bien dans header.php
, entre les balises <head>
.
Donc dans notre fichier header.php
et entre les balises <head>
, on va mettre la fonction WordPress wp_head()
qui va créer un point d’accroche dans notre thème.
[pastacode lang=”php” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22fr%22%20class%3D%22no-js%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%20%20%20%20%3Clink%20rel%3D%22profile%22%20href%3D%22http%3A%2F%2Fgmpg.org%2Fxfn%2F11%22%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DAudiowide%7CExo%2B2%3A300%2C300i%2C400%2C400i%2C700%2C700i%26amp%3Bsubset%3Dlatin-ext%22%20rel%3D%22stylesheet%22%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DSpace%2BMono%22%20rel%3D%22stylesheet%22%3E%0A%20%20%20%20%3Cscript%20src%3D%22js%2Fdetection.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fevil-icons%2F1.9.0%2Fevil-icons.min.css%22%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fevil-icons%2F1.9.0%2Fevil-icons.min.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3C%3Fphp%20wp_head()%3B%20%3F%3E%0A%3C%2Fhead%3E” message=”” highlight=”12″ provider=”manual”/]
Cette fonction permet simplement de placer un hook pour permettre à WordPress d’écrire dans notre <head>
.
Ca marche. Ouf. On peut donc enlever notre balise <link>
hardcodée.
Prochaine vidéo, on s’occupe du JavaScript avec wp_enqueue_scripts
. Pour ne rien rater, inscrivez-vous ! Et partagez au passage !
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !