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

Charger les scripts et les styles

Lecture : 7 minutes • Pratique : 10 minutes • 34

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.

Si vous venez à ajouter d’autres fichiers, il faudra alors leur donner un nom différent, le but étant de distinguer les différentes ressources avec des noms uniques :

PHP
functions.php

En ce qui concerne jQuery, vous noterez que c’est le seul paramètre que l’on indique, et il y a une bonne raison à cela : en fait WordPress a déjà déclaré le script avec tous ses paramètres, du coup on a juste besoin de le lister pour l’insérer dans notre code.

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.

Attention

Dans le cas des thèmes enfants, il faut utiliser la fonction get_stylesheet_directory_uri() à la place. Si c’est votre cas, rendez-vous à la fin de ce cours.

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 termes techniques, 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 !

Charger un script uniquement sur certaines pages

Dans certains cas, vous n’aurez besoin d’un certain script uniquement sur des pages spécifiques. Ça pourrait être le cas par exemple pour un script de diaporama, qui ne serait présent que sur la page d’accueil.

Pour cela, on va faire appel aux conditional tags, que l’on a déjà vu plus tôt dans cette formation.

Voici à quoi ressemblerait le code :

PHP
functions.php

C’est une très bonne pratique pour améliorer les performances de votre site, en ne chargeant que ce qui est nécessaire pour la page affichée.

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…

Conseil

Depuis WordPress 5.7, vous n’avez plus besoin de faire ce qui va suivre : le CMS charge enfin la version la plus récente de jQuery, sans le script de migration.

Voici ce que l’on avait avant 5.7 :

HTML

Afin d’éviter cela il fallait 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 soucie encore ?

Vous pourriez cependant avoir besoin de cette technique dans d’autres cas de figure, ou pour viser une version spécifique de jQuery, différente de celle utilisée par WordPress.

Le cas des thèmes enfants

Si vous utilisez un thème enfant, vous vous retrouverez avec une erreur en utilisant get_template_directory_uri(). C’est normal car cette fonction va aller chercher le fichier dans le thème parent.

C’est ce qu’il se passe lorsque vous générez un thème enfant. Il faut aller récupérer la feuille de style du thème parent car elle n’est pas chargée toute seule (ligne 6) :

PHP
theme-child/functions.php

Par contre, pour appeler des scripts ou styles sur mesure stockés dans votre thème enfant, il faudra utiliser plutôt cette fonction : get_stylesheet_directory_uri() (ligne 9).

En résumé :

  • Utilisez get_template_directory_uri() pour des fichiers dans le thème parent.
  • Utilisez get_stylesheet_directory_uri() pour ceux du thème enfant.

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.

34

Questions, réponses et commentaires

  1. Seb

    Le 12 avril 2021

    Hello Maxime,
    Je ne parviens pas à placer mon script Jquery dans le footer en partant de ton code. Il reste dans le header. Pourrais-tu m’aiguiller ?

    Voici mon code :

    function montheme_register_assets() {

    // Déclarer jQuery
    wp_enqueue_script(‘jquery’ );

    // Déclarer le JS
    wp_enqueue_script(
    ‘montheme’,
    get_template_directory_uri() . ‘/js/script.js’,
    array( ‘jquery’ ),
    ‘1.0’,
    true
    );

    // Déclarer style.css à la racine du thème
    wp_enqueue_style(
    ‘montheme’,
    get_stylesheet_uri(),
    array(),
    ‘1.0’
    );

    }
    add_action(‘wp_enqueue_scripts’, ‘montheme_register_assets’);

    1. Maxime BJ

      Le 12 avril 2021

      A priori ça me semble bon ! Tu n’as rien d’autre dans ton code sur ton site ? Si jamais tu as une autre dépendance à ton script, mais dans le header, ça peut faire remonter ton script montheme.

      1. Seb

        Le 13 avril 2021

        Alors dans mon header j’ai 3 scripts :

        (function() {
        var request, b = document.body, c = ‘className’, cs = ‘customize-support’, rcs = new RegExp(‘(^|\\s+)(no-)?’+cs+'(\\s+|$)’);

        request = true;

        b[c] = b[c].replace( rcs, ‘ ‘ );
        // The customizer requires postMessage and CORS (if the site is cross domain).
        b[c] += ( window.postMessage && request ? ‘ ‘ : ‘ no-‘ ) + cs;
        }());

        Et j’ai également une erreur dans la console :
        Échec du chargement pour l’élément dont la source est « http://montheme.local/wp-content/themes/montheme/js/script.js?ver=1.0 ».

        1. Maxime BJ

          Le 13 avril 2021

          Il faut donc résoudre en premier lieu les problèmes de script de ta console. Il y a quelque chose qui doit manquer ou être erroné dans ton code, peut-être juste une broutille d’ailleurs (toujours les plus chiantes à trouver du coup). Essaie de partir du code de mon repo : https://github.com/maximebj/capitaine.course.theme

          1. Seb

            Le 13 avril 2021

            Merci pour ta réponse ! Donc en comparant avec ton thème j’ai trouvé le problème, cela venait du fait que je n’avais pas encore ajouté la fonction  » wp_deregister_script( ‘jquery’ );  »

            Et pour l’erreur en console c’était lié au pointage JS et JQuery qui n’étaient pas faits. J’avais un peu trop bêtement recopié à la lettre les bouts de codes du tuto 🙂

            1. Maxime BJ

              Le 13 avril 2021

              Ok bon à savoir ! C’est vrai que ça peut vite être piégeux tout ça

  2. Audrey

    Le 23 mars 2021

    Bonjour et merci pour votre formation de qualité.

    Mon problème est que mes styles et script ne se chargent pas quand j’inspecte mon code source ils n’y sont pas.J’ai pourtant suivi votre formation pas à pas j’ai lu la documentation WordPress fait des recherches et malgré tout cela ne fonctionne pas auriez vous une idée une piste?
    Merci d’avance

    1. Maxime BJ

      Le 23 mars 2021

      Il va falloir vérifier tout d’abord que WordPress rentre bien dans ta fonction. Pour cela tu peux ajouter à l’intérieur (au tout début) un var_dump(‘coucou’); die; Si quand tu recharges la pages, tu ne vois pas ton coucou (qui devrait être du coup seul) c’est que WordPress ne vient pas exécuter la fonction. Le but c’est de trouver quelle est la source du problème dans un premier temps.

      1. Audrey

        Le 23 mars 2021

        Merci de ta réponse rapide. j’ai effectué le var_dump et aucun « coucou » ne s’affiche cela me redonne une piste du coup je repars dans mes recherches

        1. Maxime BJ

          Le 23 mars 2021

          La cause la plus fréquente serait que le thème sur lequel tu travailles n’est pas le thème actuellement actif. Vérifie également le nom du hook pour voir si c’est bien le bon.

    2. Audrey

      Le 23 mars 2021

      bon je me sent vraiment nul mais j’avais fait une faute dans le nom de mon fichier lors de sa création (function.php au lieu de functions.php) le var_dump m’a bien aidé et je peux poursuivre la formation merci de ta réponse rapide et efficace

      1. Maxime BJ

        Le 23 mars 2021

        De rien ! Et ne t’inquiète pas, c’est pas la dernière fois que ça va t’arriver ce genre d’erreur 😉 crois-en mon expérience. Ça m’arrive encore parfois.

  3. Jonathan S

    Le 4 mars 2021

    Bonjour et merci pour le travail effectué.

    Mon souci actuel est que j’aimerais utilisé un fichier CSS diffèrent suivant le type de page ou je suis ( blog, article, etc.).

    Il me semble qu’il existe une fonction mais pas moyen de remettre la main dessus.

    Auriez-vous une piste a me proposer ?

    Merci d’avance.

    1. Maxime BJ

      Le 5 mars 2021

      C’est le rôle des conditional tags, que l’on a vu un peu avant dans cette formation : https://capitainewp.io/formations/developper-theme-wordpress/conditional-tags/.

      C’est une très bonne question en tous cas, j’en ai donc profité pour ajouter un petit exemple dans ce cours. Et avec l’arrivée de WP 5.7, la partie sur jQuery a légèrement évolué. J’en ai également profité pour mettre à jour.

      Du coup, merci !

      1. JONATHAN S

        Le 5 mars 2021

        Merci pour l’info.
        C’est pile ce qu’il me fallait, je savais le faire sur du site from scratch, mais pas encore sous WordPress. C’est un belle outils mais il est gros et nécessite du temps a maitriser.

        En tous cas merci, fini la feuille de style a rallonge ^^.

  4. Margaux S.

    Le 25 février 2021

    Bonjour et merci pour toutes ces explications.
    Je bloque juste au niveau du chargement de mes styles pour les noms des fichiers.
    Est-ce que au lieu de « capitaine-theme » j’écris « oceanwp » ou « oceanwp-theme »? Je dois écrire exactement le même nom que mon dossier ?
    Ma question peut paraître bête mais j’ai effectuer de base mon thème enfant via le générateur de WP marmite et pour récupérer la feuille de style, ça n’a rien à voir :
    « <?php add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
    function wpchild_enqueue_styles(){
    wp_enqueue_style( 'wpm-oceanwp-style', get_template_directory_uri() . '/style.css' );
    } "
    Du coup je suis un peu perdue sur ce que je dois réellement écrire pour bien prendre en charge mon CSS.
    Merci pour ton aide et ton temps.

    1. Maxime BJ

      Le 25 février 2021

      Tu utilises bien get_stylesheet_directory_uri() à la place de get_template_directory_uri() ? Sinon le principe est le même !

  5. Pierre D.

    Le 21 janvier 2021

    Bonjour,
    Explication très structurée pour un sujet assez pointu (je trouve). Bravo !
    Un question : le chargement des scripts pour les pages d’administration (backend) fonctionnent-ils de la même manière ?
    Cordialement,

    1. Maxime BJ

      Le 21 janvier 2021

      Ce sera exactement le même principe, mais avec le hook admin_enqueue_scripts !

      1. Pierre D.

        Le 22 janvier 2021

        Vrai !
        Quand les choses sont bien expliquées, l’intelligence vient toute seule 🙂
        Encore merci.

  6. Nicolas

    Le 23 octobre 2020

    Bonjour,
    J’ai un soucis de style il me semble. J’ai récupéré un site pour l’hébergé sur mon serveur. J’ai réussi l’installation par copie de fichier, charger la DB sur phpmyadmin, changé les URL, réparé les permalink. Mais mon style n’a rien a voir avec le style de base, on dirait que les feuilles de style ne sont pas chargé. Le dev avait utilisé le thème builder EZY et crée un thème enfant. Je seche carrément

    1. Maxime BJ

      Le 23 octobre 2020

      Désolé, ça va être compliqué pour t’aider. Je ne peux pas vraiment vous dépanner sur vos projets perso. Vérifie que c’est le thème enfant qui est activé, et pas le parent. Et contrôle si le code du thème enfant correspond bien à ce que je dis dans ce cours.

  7. Yohann

    Le 14 juillet 2020

    Bonjour et merci pour la formation qui est très intéressante et très complète.

    Concernant la différence de chargement des fichiers entre un thème et un thème enfant, si l’objectif est de créer un thème pour ensuite le distribuer, doit-on prévoir des choses pour que l’utilisateur puisse faire un thème enfant ?

    1. Maxime BJ

      Le 15 juillet 2020

      Normalement non, le système du thème enfant est très bien fait par nature, et du coup il ne sert qu’à surcharger les fichiers du thème parent. Tu peux par contre prévoir des hooks pour que les utilisateurs puissent venir modifier un comportement dans leur functions.php

  8. Vanessa

    Le 13 avril 2020

    Bonjour,

    Lorsque je change la version de jQuery, mon site ne s’affiche plus et j’ai ce message d’erreur qui apparait :

    Parse error: syntax error, unexpected ‘}’, expecting end of file in wp-content/themes/ideclap/functions.php on line 42

    Une idée de ce qui cloche ?

    Merci d’avance 😉

    1. Maxime BJ

      Le 13 avril 2020

      C’est une erreur PHP car tu as mis un } en trop quelque part dans ton code, d’après ce que dit l’erreur. Je pense qu’il faut se focaliser là dessus. Je vais regarder si je n’ai pas fait une erreur dans le code affiché sur le cours.

  9. Sam

    Le 28 mars 2020

    Salut.

    Comment intégrer le champ Crossorigin et Integrity de la balise link rel= »stylesheet » ?

    Merci 🙂

    1. Maxime BJ

      Le 28 mars 2020

      A l’heure actuelle la fonction ne permet pas d’ajouter d’attributs supplémentaires. donc il faudrait l’écrire à la main. C’est cependant une suggestion que tu peux faire aux équipes de dev de WordPress.

  10. Denis

    Le 27 mars 2020

    Jusqu’à cette page, j’ai suivi sans trop de problèmes si on peut dire. Mais, sur cette page dès le haut, j’avoue, j’ai littéralement décroché ! Javascript et moi 🙁

    En attendant, félicitations pour cette formation. C’est tout simplement GENIAL et de plus en français… Vivement la sortie premium 😉

  11. bd

    Le 8 mars 2019

    j’avoue que je suis jalouse votre dom se charge en qq ms et le load entier en 2 s .
    bon j’ai un pb si vs pouvez m’aider svp ,
    1-jen’ai que le stylecss principal de la page qui se charge et non ses dependances pourtant @importé dans ce fichiers css de base du dossier enfant.
    2- sur la page principale »template par defaut » de twentyseventeen qui contient plusieurs section dans lequels on peut inclure des pages et des postes : elle est organisée en section ,
    or mon site html de base a une page d’accueil qui ne contient pas de container à part le body et puis est partagée en section ,je suis paumée est ce que je dois modifier les balises de content-front-page ,ou comment svp guidez moi

    1. Maxime BJ

      Le 8 mars 2019

      Il ne faut pas utiliser @import dans les fichiers CSS de préférence ! Le plus simple c’est de tout mettre dans un seul fichier CSS. Ou alors utiliser des préprocesseurs comme Sass
      Pour ta deuxième question si tu as bien lu les autres cours je conseille de construire son thème à partir de 0, et jamais de repartir depuis un thème par défaut fourni par WordPress. Sinon tu t’y perds vite

  12. 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

      1. Maxime BJ

        Le 23 mars 2021

        Je montrais différents exemples du même fichier. De plus, on peut donner le même nom à des fichiers s’ils sont de types différents (script et style). Mais pour tout fichier supplémentaire, il faut un nom différent en effet.

Laisser un commentaire