De retour pour la suite de Créer un thème Repo-Ready ! Dans l’article précédent, on a parlé des hooks de WordPress et on a chargé notre feuille de style comme il fallait. Maintenant, on on va s’occuper des autres ressources à charger, notamment le JavaScript.

Quand on regarde notre balise <head>, on voit qu’il y a encore plein de choses à charger.

[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=”header.php” highlight=”7, 8, 9, 10, 11″ provider=”manual”/]

  • D’abord, il y a les polices de caractères : Audiowide, Exo 2 et Space Mono.
  • Ensuite il y a aussi les icônes qui demandent un petit bout de CSS et JS.
  • Et enfin, il y a nos petits scripts:  le petit script de detection, qui change juste la classe no-js  en js, pour plus de contrôle si besoin est.
  • Si on va dans footer.php, on voit qu’il y aussi un petit script qui améliore l’accessibilité du skip link et un script qui va gérer l’ouverture/fermeture du menu de navigation.

[pastacode lang=”php” manual=”%3C%2Fdiv%3E%3C!–%20%23page%20–%3E%0A%0A%3Cscript%20src%3D%22js%2Fnavigation.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fskip-link-focus-fix.js%22%3E%3C%2Fscript%3E%0A%3C%2Fbody%3E” message=”footer.php” highlight=”3-4″ provider=”manual”/]

Les scripts du menu

On va commencer par charger le script du menu. Pour charger un script, la procédure est exactement la même que pour charger une feuille de style, à la différence qu’au lieu d’utiliser wp_enqueue_style(),  on utilise la fonction wp_enqueue_script().

En allant faire un petit tour sur la code reference, on voit qu’elle admet 5 paramètres et qu’elle ressemble fortement à celle pour charger les styles, sauf le dernier paramètre.

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

$handle est le nom qu’on va lui donner, $src est l’url où aller chercher le fichier, $deps est un tableau de dépendance, $ver le numéro de version, et $in_footer c’est un booléen pour indiquer si on mets le script dans le footer, juste avant la balise fermante </body> ou alors dans la balise <head>, comme le fait la fonction par défaut.

Les scripts sont à hooker dans le même hook que les styles : wp_enqueue_scripts, donc, je vais utiliser cette fonction wp_enqueue_script dans ma fonction carbon_scripts , qui est déjà hookée correctement.

[pastacode lang=”php” manual=”function%20carbon_scripts()%7B%0A%20%20%20wp_enqueue_style(%20’carbon-styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-navigation’%2C%20get_theme_file_uri(%20’js%2Fnavigation.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%7D” message=”functions.php” highlight=”3″ provider=”manual”/]

Ici, j’utilise la fonction get_theme_file_uri() pour obtenir l’url vers mon fichier (que j’ai préalablement copié dans mon dossier js/ ). Le script n’a pas de dépendances, je ne veux pas mettre de numéro de version, donc je passe null en quatrième paramètre. Par contre, je veux que mon script soit chargé en footer, donc le dernier paramètre est fixé à true.

Et quand on sauvegarde, on rafraîchit la page, ça marche pas !

Simplement parce qu’on a dit à la fonction de placer le script dans le bas de la page, mais on a pas montré à WordPress où placer ces scripts. On a en fait exactement la même erreur que pour les styles. Dans la vidéo précédente, on a ajouté la fonction wp_head(); dans header.php pour permettre à WordPress d’écrire la balise <link> responsable du chargement de la feuille de styles.

On va donc faire pareil dans le bas de la page, et on va placer la fonction wp_footer(): qui va créer le hook nécessaire à WordPress pour écrire nos balises <script> juste avant de fermer le </body>

[pastacode lang=”php” manual=”%3C%2Fdiv%3E%3C!–%20%23page%20–%3E%0A%0A%3C%3Fphp%20wp_footer()%3B%20%3F%3E%0A%3Cscript%20src%3D%22js%2Fnavigation.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fskip-link-focus-fix.js%22%3E%3C%2Fscript%3E%0A%3C%2Fbody%3E” message=”footer.php” highlight=”3″ provider=”manual”/]

Et maintenant, notre navigation fonctionne !

On peut charger les deux autres scripts de la même façon. Notez juste que je mets le script detection.js dans le header.

[pastacode lang=”php” manual=”function%20carbon_scripts()%7B%0A%20%20%20wp_enqueue_style(%20’carbon-styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-detection’%2C%20get_theme_file_uri(%20’js%2Fdetection.js’%20)%2C%20array()%2C%20null%2C%20false%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-navigation’%2C%20get_theme_file_uri(%20’js%2Fnavigation.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-skip-link-focus-fix’%2C%20get_theme_file_uri(%20’js%2Fskip-link-focus-fix.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%7D” message=”functions.php” highlight=”3, 4, 5″ provider=”manual”/]

 

Chercher des fichiers dans notre thème

Il y a plusieurs façons d’obtenir l’url d’un fichier du thème.

  • get_template_directory_uri(),
  • get_stylesheet_directory_uri(),
  • get_theme_file_uri()

Les trois vont donner dans notre cas le même résultat. La différence entre ces trois fonctions est importante à saisir quand on est dans un thème enfant.

  • get_template_directory_uri() : permet de chercher un fichier dans le thème parent
  • get_stylesheet_directory_uri() :  permet de chercher dans le thème activé
  • get_theme_file_uri() : permet d’aller chercher d’abord dans l’enfant, puis dans le parent.

Vu que le thème actif est un thème parent les trois fonctions font la même chose. Mais en utilisant get_theme_file_uri(), on permet de surcharger plus facilement les fichiers dans le thème enfant sans avoir besoin de désenregistrer dans WordPress le fichier du thème parent.

 

Charger les icônes

Les icônes fonctionnent correctement ici parce que les balises <link> et <script> dans header.php lient directement vers le CDN où les fichiers sont hébergés. Mais si vous gardez cette balise comme ça dans le header, le thème sera refusé sur le répertoire de WordPress pour deux raisons:

  • La balise est harcodée, donc WordPress n’a aucune connaissance de nos icônes.
  • Hotlinker (lier vers une ressource externe) n’est pas recommandé. Il faut inclure tous les scripts et feuilles de styles utilisés dans les fichiers du thème. C’est à dire que le thème doit constituer un package complet, sans avoir besoin d’aller chercher une ressource externe pour fonctionner.

Donc on va créer un dossier icons/, dans lequel on va mettre les fichiers nécessaires pour que les icônes fonctionnent. Vous pouvez télécharger les fichiers sur https://evil-icons.io.
On peut ainsi récupérer le fichier JavaScript et sa version minifiée, et idem pour la feuille de styles.

Maintenant, dans notre fonction carbon_scripts, on va utiliser wp_enqueue_script et wp_enqueue_style pour charger les icônes.

[pastacode lang=”php” manual=”function%20carbon_scripts()%7B%0A%20%20%20wp_enqueue_style(%20’carbon-styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-detection’%2C%20get_theme_file_uri(%20’js%2Fdetection.js’%20)%2C%20array()%2C%20null%2C%20false%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-navigation’%2C%20get_theme_file_uri(%20’js%2Fnavigation.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-skip-link-focus-fix’%2C%20get_theme_file_uri(%20’js%2Fskip-link-focus-fix.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%20%20%20wp_enqueue_style(%20’carbon-icons’%2C%20get_theme_file_uri(%20’icons%2Fevil-icons.min.css’%20)%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-icons’%2C%20get_theme_file_uri(%20’icons%2Fevil-icons.min.js’%20)%2C%20array()%2C%20null%2C%20false%20)%3B%0A%7D” message=”functions.php” highlight=”6-7″ provider=”manual”/]

On enlève les balises <link> et <script> hardcodées dans header.php, et bim ça marche. Si on vérifie le code source, et on va trouver nos feuilles de styles et scripts.

 

Les polices de caractère

Maintenant il reste à charger les polices de caractères. Quand on regarde dans la balise <head> hardcodée, on voit que je lie directement vers Google Fonts.

[pastacode lang=”php” manual=”%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=”header.php” highlight=”5-6″ provider=”manual”/]

Je vais charger les polices de la même façon que les autres feuilles de styles: avec wp_enqueue_style, juste avant ma feuille de styles principale :

[pastacode lang=”php” manual=”function%20carbon_scripts()%7B%0A%20%20%20wp_enqueue_style(%20’carbon-fonts’%2C%20’https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DAudiowide%7CSpace%2BMono%7CExo%2B2%3A300%2C300i%2C400%2C400i%2C700%2C700i%26amp%3Bsubset%3Dlatin-ext’%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_style(%20’carbon-styles’%2C%20get_stylesheet_uri()%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-detection’%2C%20get_theme_file_uri(%20’js%2Fdetection.js’%20)%2C%20array()%2C%20null%2C%20false%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-navigation’%2C%20get_theme_file_uri(%20’js%2Fnavigation.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-skip-link-focus-fix’%2C%20get_theme_file_uri(%20’js%2Fskip-link-focus-fix.js’%20)%2C%20array()%2C%20null%2C%20true%20)%3B%0A%20%20%20wp_enqueue_style(%20’carbon-icons’%2C%20get_theme_file_uri(%20’icons%2Fevil-icons.min.css’%20)%2C%20array()%2C%20null%20)%3B%0A%20%20%20wp_enqueue_script(%20’carbon-icons’%2C%20get_theme_file_uri(%20’icons%2Fevil-icons.min.js’%20)%2C%20array()%2C%20null%2C%20false%20)%3B%0A%7D” message=”functions.php” highlight=”2″ provider=”manual”/]

On enlève les balises hardcodées dans header.php, et ça marche, pas de soucis.

Ok, je sais.

Je vous ai dit il y a deux minutes que c’était pas tip top de hotlinker et que le thème se verrait refusé sur le répo. Hotlinker est interdit, SAUF pour les Google Fonts. C’est la seule exception. Donc on pourrait télécharger les fichiers de polices, et les inclure dans le thème comme on a dû faire pour les icônes, mais on ne va pas se priver d’alléger notre thème et de taper dans la bande passante des serveurs de chez Google.

Et voilà ! Nos polices, styles et scripts chargent correctement !

Dans le prochain article, on va faire un peu de nettoyage, et on va s’occuper de rendre notre menu fonctionnel. Inscrivez-vous pour le recevoir !

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 !