Formation « Développer un thème WordPress sur mesure »

Charger les scripts et les styles

Lecture : 5 minutes • 2

Le fichier functions.php permet de charger les scripts JS et les feuilles de styles CSS de la bonne manière, afin de prendre en compte les éventuelles dépendances.

Dans notre thème, on va avoir besoin de charger une feuille de styles CSS et bien souvent un script JS pour ajouter de l’interactivité, mais on va voir qu’on ne les appelle pas directement depuis le code de notre header.php. C’est dans functions.php que ça se passe, et il y a une bonne raison à cela !

Pourquoi ne pas charger scripts et styles directement dans le head ?

Après tout, qu’est-ce qui nous empêche de les charger « à la main », en dur dans le code ?

En fait il faut voir votre site WordPress comme un écosystème dans lequel interagissent le coeur du CMS, les extensions et votre thème.

Et tout ce petit monde aura ses propres scripts et styles à charger, mais encore faut-il que ce soit fait dans le bon ordre : Imaginez que votre script utilise la librairie select2, qui elle même a besoin de jQuery. Il vous faudra alors :

  • Charger jQuery en premier ;
  • Charger ensuite Select2 ;
  • Charger enfin votre script, qui pourra appeler le composant Select2 sans souci.
HTML

D’autres scripts, en provenance des extensions, auront également besoin de mettre jQuery comme une dépendance.

Pareil pour les styles : vous aurez peut-être envie de charger votre feuille de style en dernier afin d’écraser plus facilement des styles CSS apportés par une extension.

Le principe est donc simple : le thème et les extensions vont déclarer leurs scripts et styles à WordPress, indiquer les dépendances nécessaires à chacun d’entre eux. Et c’est le CMS qui va automatiquement charger le tout dans le bon ordre, au travers de la fonction wp_head() que l’on avait mise dans notre fichier header.php (d’où l’importance capitale de cette fonction).

Bien déclarer ses scripts et styles dans functions.php

Pour déclarer tout cela, on va utiliser le hook suivant :add_action( 'wp_enqueue_scripts', 'votre_fonction' );

Pour rappel, le principe des Hooks est de dire à WordPress que lorsqu’il arrive au point clé wp_enqueue_scripts, il lance notre fonction nommée en deuxième paramètre (on appelle cela une fonction de callback).

Voici ce que ça peut donner dans votre functions.php :

PHP
functions.php

La fonction wp_enqueue_script() permet d’inscrire un fichier JS à afficher dans la page. Et la fonction wp_enqueue_style() permet d’inscrire un fichier CSS.

Il y a plusieurs paramètres à renseigner :

Le handle : nom du style / script

Le premier paramètre est le handle, c’est le nom unique que vous allez donner à votre fichier. Je met en général le nom du thème pour les deux.

L’adresse du fichier

C’est l’emplacement absolu où se trouve le fichier. Pour cela on va utiliser get_template_directory_uri() pour donner le chemin vers le thème, suivi du nom de fichier et éventuellement des sous-répertoires intermédiaires.

Si vous voulez charger directement le fichier style.css à la racine du thème, utilisez alors la fonction get_stylesheet_uri() seule. Pour rappel ce fichier style.css est obligatoire car c’est lui qui contient la définition du thème.

Les éventuelles dépendances

C’est ici que prend tout l’intérêt de ce système : pouvoir déclarer des dépendances, autrement dit indiquer à WordPress que mon script/style devrait absolument être chargé après les scripts/styles indiqués en dépendances.

Pour cela on indique un tableau via array(), et on liste le handle des scripts/styles qui devront être chargés avant.

Voici le rendu en HTML lorsque je demande jQuery en dépendance de mon script :

HTML

L’ordre est bien respecté : jQuery est chargé le premier, puis notre script du thème ensuite ! Une fois que vous aurez installé de nouvelles extensions, vous verrez que d’autres scripts et styles s’ajouteront à cette liste !

Le numéro de version

Ce numéro de version est important car il va permettre d’invalider le cache du navigateur lorsque vous changerez la valeur. Il permet d’ajouter un paramètre à la fin de l’URL du fichier : script.js?ver=1.0.

Lorsque vous ferez évoluer votre thème et votre script, incrémentez le numéro de version vers 1.1 par exemple. La fin de l’URL sera alors script.js?ver=1.1. Pour votre navigateur, c’est une nouvelle URL (même si c’est le même fichier) et du coup ça invalidera son cache.

Cela vise à répondre à une problématique de longue date : le navigateur de l’internaute met en cache certains fichiers afin d’éviter de les charger à chaque fois depuis votre site. Mais lorsque ceux-ci changent sur le serveur, ils ne sont pas pris en compte tout de suite. Ce qui peut résulter en des défauts d’affichage de votre site.

Avec le numéro de version : plus de soucis !

Si vous utilisez un script externe (jQuery par exemple), indiquez simplement le numéro de version utilisé. Dans mon exemple, c’est la version 3.3.1.

Le chargement en haut ou en bas de page (scripts seulement)

Et enfin, le dernier paramètre pour les scripts est un booléen : s’il est passé à true, le script sera chargé en bas de page, via le wp_footer et non pas wp_header(), en haut.

Conseil

Pour de meilleures performances de chargement de la page, préférez appeler vos scripts en bas de page.

En effet, les scripts ne sont généralement pas exécutés par le navigateur tant que la page n’a pas reçu le signal comme quoi elle est « prête » (en d’autre terme, que le DOM est ready).

Les scripts ne sont généralement pas exécutés par le navigateur tant que la page n’a pas reçu le signal comme quoi elle est « prête » (en d’autre terme, que le DOM est ready).

Donc à quoi bon les charger tout de suite ? Le navigateur, quand il interprète votre page HTML, va charger les styles, scripts, et images dans l’ordre où il les a trouvés.

Pour voir tout ce qui est chargé dans une page, et toutes les requêtes HTTP que fait le navigateur, ainsi que le temps que ça prend, ouvrez la console de votre navigateur (clic droit, inspecter) puis allez dans l’onglet Network. Rechargez votre page :

La console du navigateur propose un outil Network, qui calcule le temps de chargement de la page
La page a mis 2 secondes 79 pour se charger complètement, après 39 requêtes HTTP

L’optimisation des pages web est une thématique importante lorsque l’on développe des sites sur mesure !

Information

Notez qu’il y a aussi des fonctions wp_register_script() et wp_register_style() qui permettent de déclarer un script sans pour autant l’ajouter dans la page. Mais ce n’est pas utile à notre niveau.

Pour en savoir plus au sujet de ces fonctions, direction la documentation !

Changer la version de jQuery

Par défaut WordPress va charger une version de jQuery avec le complément jQuery Migrate afin de garder la retrocompatibilité avec les très vieux navigateurs (on parle des vieux Internet Explorer). Ce n’est donc plus très utile.

En plus, ça fait 2 requêtes HTTP pour pas grand chose…

HTML

Afin d’éviter cela on va devoir annuler l’inscription de jQuery de la liste des scripts déclarés, et refaire notre propre déclaration, avec la toute dernière version en branche 3.x :

PHP
functions.php

Vérifiez à nouveau le code source généré par la page :

HTML

Ok ! Cette fois c’est bon ! Votre site ne sera plus compatible IE6-8 mais qui s’en souci encore ?


Et voilà, vous savez désormais comment bien charger vos scripts et styles dans WordPress, et surtout pourquoi c’est une bonne pratique. Dans le prochain cours on va aborder les tailles d’images et l’image mise en avant.

2

Questions, réponses et commentaires

  1. Cisco

    Le 15 février 2019

    Bonjour,

    Lorsque je charge mes css de cette manière il m’est nécéssaire de nommer leurs appels différemment pour qu’ils soient pris en compte. Dans ton exemple, tu les appelles toutes les deux via l’appel ‘capitaine’, dans mon cas je suis obligé de les nommer différemment sinon la seconde n’est pas chargée. Pourquoi est ce différent par rapport à ton contexte ?

    1. Cisco

      Le 15 février 2019

      Pardon, je parle du fameux ‘handle’ pour éclaircir ma question…

      Merci

Laisser un commentaire