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

Charger les scripts et les styles

Lecture : 7 minutes • Pratique : 10 minutes • 54

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. En général, on place les CSS dans un dossier /css et les scripts dans un dossier /js.

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 toujours obligatoire car c’est lui qui contient la définition du thème, même si vous ne l’utilisez pas pour écrire vos styles.

Conseil

En général, on utilise un fichier autre que style.css, surtout si on utilise des préprocesseurs car les commentaires qui servent à la définition du thème seraient écrasés à la compilation.

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 !

Conseil

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.

54

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

      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.

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

  3. 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 😉

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

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

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

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

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

  9. 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 !

  10. 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 ^^.

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

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

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

  13. Alexandre

    Le 29 juillet 2021

    Bonjour Maxime,
    Lorsque tu réalises un thème pour un site client et que tu utilises Jquery…
    Fais-tu appel dans functions.php le fichier Jquery qui est déjà pré-installé de base dans les dossiers de WordPress ou retélécharges tu un autre fichier Jquery pour l’inclure dans les dossiers de ton thème ?
    Je me pose cette question: lorsque l’on met à jour WordPress, j’imagine que nous récupérerons une nouvelle version de Jquery aussi.
    Nos parties de code écrites en Jquery fonctionneront-elles toujours à la longue des mises à jour ?
    Ou, utilises tu pour ton thème une version de Jquery fixe (retéléchargée en plus de la version WordPress) qui ne bougera pas dans le temps vis-à-vis des mises à jour WordPress ?
    Un avis ?
    Merci.

    1. Maxime BJ

      Le 29 juillet 2021

      Il faut utiliser le fichier jQuery appelé par WordPress d’après la doc, mais j’outrepassais ça pour avoir une version plus récente, sans jQuery migrate (un second script destiné à la retrocompatibilité). Mais aujourd’hui ce n’est plus le cas, tu pourrais donc rester avec le jQuery fourni par WP.
      WordPress a seulement mis à jour jQuery 2 fois récemment, pour justement virer les très vieilles rétrocompatibilités (je parle de IE11 par exemple). Donc ne t’inquiète pas, ça ne risque pas de péter, à part si tes sites doivent être compatibles jusqu’à la préhistoire.

      1. Alexandre

        Le 29 juillet 2021

        Ok, Merci Maxime pour ton retour !

  14. chafikart

    Le 9 octobre 2021

    Bonjour Maxime,
    ça sera trés gentil de ta part si tu publie un tuto complet pour le plugin “jQuery Plugin For Animated Vertical Ticker – totem”.
    Je n’arrives à l’installer.
    Merci cordialement

    1. Maxime BJ

      Le 11 octobre 2021

      Ma formation est dédiée à WordPress, cela n’a donc pas sa place ici. Ce cours suffit à expliquer comment charger des scripts et des styles correctement dans WordPress. Ensuite, en suivant la documentation de n’importe quel plugin jQuery, tu devrais réussir à les mettre en place sans trop de difficulté.

  15. Hedoweb

    Le 16 février 2022

    Bonjour Maxime,

    Bravo pour l’ensemble de ton travail, dont je m’inspire souvent.
    Petite question : Peut-on appelé une fonction js d’un fichier dans un autre fichier js ? Je pensais mettre le handle du premier fichier dans le array du 2eme mais ça ne fonctionne pas.
    Mon premier fichier est bien chargé avant le second mais la fonction n’est pas reconnu dans ce 2eme fichier.
    D’avance merci

    1. Maxime BJ

      Le 17 février 2022

      En général tes fichiers JS sont isolés afin d’éviter les conflits de code justement. Il faudrait mieux regrouper tes scripts au même endroit (ne serait-ce pour avoir moins de fichiers à charger).

  16. Mary

    Le 18 mars 2022

    Bonjour, j’ai une question bête, mais est ce qu’ici :
    // Déclarer style.css à la racine du thème
    // Déclarer un autre fichier CSS

    on pourrait mettre :
    get_template_directory_uri() pour le style css à la racine du thème et
    get_stylesheet_uri() pour déclarer un autre fichier css ?

    En effet, dans le sens que vous indiquez, c’est le fichier css secondaire qui prend la main sur le fichier principal…, du coup ça ne me semble pas logique, pour moi le fichier css à la racine devrait être “maître” sur le secondaire ou je me trompe ? Merci d’avance pour la réponse.

    1. Maxime BJ

      Le 18 mars 2022

      get_stylesheet_uri va chercher le fichier qui s’appelle obligatoirement style.css à la racine du thème. Il n’y a pas de notion de dépendance entre les fichiers dans mon exemple puisque je n’ai rien mis dans le 3è paramètre. Ici j’explique simplement comment charger le fichier CSS de 2 manières différentes. En terme de performances, on evrait éviter de charger différents fichiers CSS d’ailleurs. Je vais mettre à jour l’exemple pour que ce soit plus clair.

      1. Mary

        Le 18 mars 2022

        Très bien, merci beaucoup pour la réponse.

  17. Mary

    Le 3 avril 2022

    Bonjour, une petite question pour les fonts, est ce qu’il est mieux de les auto-héberger ou mieux vaut privilégier l’appel à un service tiers ? Pour les performances certains sites préconisent d’auto-héberger, d’autres de faire appel au service tiers, du coup je suis un peu perdue…
    Merci beaucoup pour la réponse.

    1. Maxime BJ

      Le 3 avril 2022

      C’est une très bonne question ! Les avis changent souvent. D’ailleurs, il y a aussi le problème de la confidentialité quand ça concerne les polices Google. En ce moment, la tendance serait plutôt de charger la police depuis son site directement et ne pas dépendre d’un service externe ! Ça ne change pas grand chose en réalité, donc il ne faut pas trop non plus s’embêter avec ça.

      1. Mary

        Le 5 avril 2022

        D’accord, merci beaucoup 😉

  18. Loïc

    Le 5 mai 2022

    Bonjour Maxime et mille mercis pour les ressources très agréables à lire que tu proposes gratuitement !

    Dans le cas de l’utilisation de SASS, faut il faire en sorte, dans le functions.php de ne charger que le fichier style final minifié ?

    Je déborde peut-être du sujet mais est-ce possible dans le cas de SASS de ne compiler seulement qu’un fichier final contenant uniquement les fichiers scss nécessaires à la page consultée ? (et ainsi par exemple éviter de compiler et charger ce que j’ai dans home.scss sur une page blog)

    J’essaie actuellement de moderniser mon starter thème mais j’ai du mal à configurer webpack, comment bien gérer la compilation, quels fichiers charger dans mes hooks wp_enqueue_scripts… alors j’espère y voir plus clair au cours des prochains jours après avoir mangé de la doc !

    Prochaine étape adapter le tout sur une approche MVC avec Timber, j’ai encore du boulot… hâte de vous lire au sujet du chapitre d’industrialisation de sites !

    1. Maxime BJ

      Le 5 mai 2022

      Tu vas pouvoir compiler un fichier CSS global contenant tous les styles de tes fichiers sass. Mais pour faire la distinction entre les styles utiles dans une page mais pas dans une autre, ça va être compliqué. Si tu utilises Gutenberg, chaque bloc possède sa propre feuille de style, et du coup ils ne sont chargés que si le bloc est présent dans la page.

      L’autre solution consiste à utiliser WP Rocket, qui permet d’analyser les styles utilisés sur chaque page, et générer un fichier pour chacune d’entre-elles automatiquement. De cette manière, ça fait exactement ce que tu souhaites, et en plus de manière automatisée !

      1. Loïc

        Le 5 mai 2022

        Merci beaucoup pour ton rapide retour Maxime

  19. Francois

    Le 23 avril 2023

    Bonjour,

    tout d’abord super cours. J’ai 2 questions:
    – J’ai vu que WP intégrais le Jquery nativement. Ai je dont besoin de mettre la ligne:
    // Déclarer jQuery
    wp_enqueue_script(‘jquery’ );

    – D’autre part, lorsque j’intègre mon fichier style.css contenant ma déclaration avec un autre fichier css pour le style de ma page, j’ai besoin de mettre un @import “main.css”; afin que mes styles soit pris en charge ou autre possibilité ne pas déclarer mon fichier style.css dans functions.php. Si je suis bien votre résonnement, wordpress devrait charger mes css dans un ordre logique et donc rajouter mes règles CSS optionnelles et non les ignorer? A croire que le fichier style.css de déclaration outrepasse tous les autres fichiers CSS.

    1. Maxime BJ

      Le 23 avril 2023

      WordPress charge jQuery lorsque tu es connecté, mais ce n’est pas forcément le cas pour un visiteur. Il y a de fortes chances qu’une extension le charge, mais ce n’est pas garanti, c’est pour cela qu’il faut que ton thème déclare qu’il aura besoin de jQuery. Dans tous les cas, ça ne chargera jQuery qu’une seule fois, bien entendu.

      Je te déconseille d’utiliser @import en CSS. À la place, déclare tous tes styles dans ce hook et utilise le paramètre des dépendances si tu as besoin de les charger dans un ordre précis. Si tu peux d’ailleurs n’avoir qu’un seul fichier de styles, c’est mieux. Personnellement, je n’utilise plus style.css (qui sert simplement à la déclaration du thème) et j’utilise uniquement css/main.css.

  20. Adam Refined

    Le 2 juin 2023

    Hello, Bon, j’écris un message ici, mais j’aurais pu l’écrire dans un autre cours (j’ai fait tous les cours jusqu’à ici pour le moment).

    En fait, j’avais déjà appris à faire des thèmes WP, mais ça fait vachement du bien d’avoir des cours détaillés ET en français. Perso, j’avais appris sur le site officiel de WP. Je ne maitrise pas 100% l’anglais et de plus, c’était moins agréable qu’un vrai cours.

    Merci pour cette formation gratuite. J’avoue que je serai intéressé par une version payante… qui n’existe pas pour le moment :).

    1. Maxime BJ

      Le 2 juin 2023

      Merci beaucoup pour les compliments ! Pour une version premium, j’y réfléchis, surtout pour l’approche dev de thèmes modernes avec le FSE et Gutenberg.

Laisser un commentaire