Lorsque nous avons commencé à travailler avec WordPress, l'ajout de JavaScript et de CSS semblait assez simple. Il suffisait de déposer le code directement dans votre thème ou plugin et de passer à autre chose.
Mais au fil des ans, nous (et bon nombre de nos lecteurs) avons appris à nos dépens que ce raccourci peut créer de sérieux problèmes. Des scripts qui entrent en conflit les uns avec les autres à des sites entiers qui plantent après une mise à jour, nous avons tout vu.
La bonne nouvelle, c'est que WordPress a en fait une manière appropriée de charger vos scripts et styles - et une fois que vous la connaissez, vous vous épargnerez bien des maux de tête à l'avenir.
Dans ce guide, nous vous montrerons comment ajouter correctement JavaScript et CSS dans WordPress. Que vous construisiez un thème personnalisé ou que vous créiez votre premier plugin, ces étapes vous aideront à le faire de manière sûre et fiable.
Erreur courante lors de l'ajout de scripts et de feuilles de style dans WordPress
De nombreux nouveaux développeurs de plugins WordPress et de thèmes font l'erreur d'ajouter directement leurs scripts ou du CSS en ligne dans leurs plugins et thèmes.
Certains utilisent à tort la fonction wp_head pour charger leurs scripts et feuilles de style.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Bien que le code ci-dessus puisse sembler plus facile, c'est la mauvaise façon d'ajouter des scripts dans WordPress, et cela entraîne plus de conflits à l'avenir.
Par exemple, si vous chargez jQuery manuellement et qu'un autre plugin charge jQuery par la méthode appropriée, alors jQuery sera chargé deux fois. S'il est chargé sur chaque page, cela affectera négativement la vitesse et les performances de WordPress.
Il est également possible que les deux soient des versions différentes, ce qui peut également causer des conflits.
Cela étant dit, jetons un coup d'œil à la bonne façon d'ajouter des scripts et des feuilles de style.
Pourquoi mettre en file d'attente les scripts et les styles dans WordPress ?
WordPress possède une solide communauté de développeurs. Des milliers de personnes du monde entier développent des thèmes et des plugins pour WordPress.
Pour s'assurer que tout fonctionne correctement et que personne n'empiète sur le travail des autres, WordPress dispose d'un système de mise en file d'attente (enqueuing). Ce système fournit une manière programmable de charger les feuilles de style JavaScript et CSS.
En utilisant les fonctions wp_enqueue_script et wp_enqueue_style, vous indiquez à WordPress quand charger un fichier, où le charger et quelles sont ses dépendances.
Ce système permet également aux développeurs d'utiliser les bibliothèques JavaScript intégrées qui sont fournies avec WordPress, plutôt que de charger plusieurs fois le même script tiers. Cela réduit le temps de chargement des pages et aide à éviter les conflits avec d'autres plugins et thèmes.
Comment mettre en file d'attente correctement les scripts dans WordPress ?
Charger correctement les scripts dans WordPress est très facile. Ci-dessous un exemple de code que vous colleriez dans le fichier de votre plugin, dans le fichier functions.php de votre thème, ou dans un plugin d'extraits de code pour charger correctement les scripts dans WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Explication :
Nous avons commencé par enregistrer notre script via la fonction wp_register_script(). Cette fonction accepte 5 paramètres :
- $handle – Le handle est le nom unique de votre script. Le nôtre s'appelle « my_amazing_script »
- $src – src est l'emplacement de votre script. Nous utilisons la fonction plugins_url pour obtenir l'URL correcte de notre dossier de plugins. Une fois que WordPress l'aura trouvé, il recherchera notre nom de fichier amazing_script.js dans ce dossier.
- $deps – deps est pour les dépendances. Comme notre script utilise jQuery, nous avons ajouté jQuery dans la zone des dépendances. WordPress chargera automatiquement jQuery s'il n'est pas déjà chargé sur le site.
- $ver – C'est le numéro de version de notre script. Ce paramètre n'est pas obligatoire.
- $in_footer – Nous voulons charger notre script dans le pied de page, nous avons donc défini la valeur sur true. Si vous souhaitez charger le script dans l'en-tête, vous le définiriez sur false.
Après avoir fourni tous les paramètres dans wp_register_script, nous pouvons simplement appeler le script dans wp_enqueue_script(), ce qui fait que tout se produit.
La dernière étape consiste à utiliser le hook d'action wp_enqueue_scripts hook d'action pour charger réellement le script. Comme il s'agit d'un exemple de code, nous l'avons ajouté juste en dessous de tout le reste.
Si vous ajoutiez ceci à votre thème ou plugin, vous pouvez placer ce hook d'action là où le script est réellement requis. Cela vous permet de réduire l'empreinte mémoire de votre plugin.
Maintenant, certains pourraient se demander pourquoi nous faisons l'effort supplémentaire d'enregistrer d'abord le script, puis de l'ajouter ? Eh bien, cela permet à d'autres propriétaires de sites de désenregistrer votre script sans modifier le code source de votre plugin.
Ajouter correctement les styles dans WordPress
Tout comme les scripts, vous pouvez également ajouter vos feuilles de style. Regardez l'exemple ci-dessous :
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Au lieu d'utiliser wp_enqueue_script, nous utilisons maintenant wp_enqueue_style pour ajouter notre feuille de style.
Notez que nous avons utilisé le hook d'action wp_enqueue_scripts pour les styles et les scripts. Malgré son nom, cette fonction fonctionne pour les deux.
Dans les exemples ci-dessus, nous avons utilisé la fonction plugins_url pour indiquer l'emplacement du script ou du style que nous voulions ajouter.
Cependant, si vous utilisez la fonction d'ajout de scripts dans votre thème, utilisez simplement get_template_directory_uri() à la place. Si vous travaillez avec un thème enfant, utilisez get_stylesheet_directory_uri().
Voici un exemple de code :
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Nous espérons que cet article vous a aidé à apprendre comment ajouter correctement du JavaScript et des styles dans WordPress. Vous pourriez également vouloir étudier le code source des meilleurs plugins WordPress pour des exemples de code réels, ou consulter notre guide sur comment ajouter facilement du JavaScript dans les articles ou les pages WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Mrteesurez
Ce post est un peu technique mais je l'adore car je suis dans le développement WordPress, cela m'a permis d'apprendre à utiliser PHP et à ajouter des feuilles de style et des scripts de manière appropriée. Les meilleures pratiques sont données dans cet article afin qu'il n'y ait pas de conflit entre les codes à l'avenir.
Schroedingers Katze
Santé, merci pour le partage ! Excellente explication.
Support WPBeginner
You’re welcome
Admin
Jean-Michel
Bonjour,
J'ai suivi ce qui est dit ici mais maintenant j'ai une page blanche vide sur mon site web. Quelqu'un pourrait-il me donner un indice ?
Merci
Support WPBeginner
Il semble que vous ayez mal copié le code ou qu'il y ait eu un problème avec quelque chose sur votre site. Vous pouvez supprimer le code en utilisant : https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Si vous l'avez ajouté manuellement, sinon vous pourriez utiliser :
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Cet article m'a été très utile. Merci.
Mark
Article typique qui vous rend encore plus confus après qu'avant…
Zaved Hossain
C'est bien, bien que ma pratique habituelle soit d'ajouter wp_enqueue_script/style sur une seule ligne sans enregistrement. Les codeurs doivent faire attention aux paramètres, peut-être qu'une petite explication à ce sujet serait utile. Par exemple, les différentes versions de jquery (votre script jquery peut nécessiter une version différente de celle de wordpress) et où l'ajouter (en-tête ou pied de page, ce qui est déterminé par le paramètre vrai/faux). Le script jquery doit être ajouté dans l'en-tête (d'où un 'faux' doit être passé comme valeur du paramètre), sinon il pourrait ne pas fonctionner.
Hansjörg Leichsenring
Il y a souvent beaucoup de style.css.
Comment puis-je assurer le bon ordre de chargement avec enque et m'assurer que le CSS enfant est chargé en dernier ?
Salutations d'Allemagne
Hansjörg
Carlos Araya
Comment puis-je passer un paramètre vide à register_script ? Je veux m'assurer que le script est chargé en bas de la page, mais je ne trouve pas d'informations sur le fait que ce soit le comportement par défaut ou non.
Kerry Beeher
Bonjour,
Merci pour votre excellente ressource. Merci !!!
Je suis un peu novice et je commence mon parcours pour apprendre le PHP et comment WordPress utilise wp_enqueue_script et wp_register_script pour ajouter du JavaScript et du CSS.
J'utilise ce plugin gratuit appelé Easy Code Manager pour m'aider à parcourir vos exemples :
Cependant, je ne suis pas sûr si c'est le bon plugin à utiliser.
J'ai lu auparavant qu'il n'était pas conseillé de modifier le code dans functions.php, alors je me demande si c'est correct de le faire ?
Cela ne changera-t-il pas lors d'une mise à jour du thème ?
Désolé pour la question, j'apprends encore WordPress.
Merci,
Kerry
Vaibhav Bansal
Je veux ajouter une publicité Amazon
J'ai essayé de l'ajouter dans un widget de texte, mais il s'affiche vide.
Ci-dessous se trouve le code-
C'est mon site-
Aidez-moi. Comment ajouter du JS sur mon site ?
Support WPBeginner
Salut Vaibhav,
Veuillez consulter notre liste de plugins de gestion de publicité pour WordPress. Vous pouvez utiliser ces plugins pour afficher des publicités sur votre site WordPress sans modifier les fichiers de votre thème.
Admin
pradyumna
j'ai inséré un javascript en utilisant ce plugin mais maintenant je dois le supprimer, j'ai essayé de désinstaller et de désactiver le plugin mais le javascript s'exécute toujours
Vijay.Rajpal
Bonjour Monsieur,
J'utilise le thème esteem et je voulais ajouter des fonctionnalités javascript à mon site web comme la lightbox. J'ai créé un thème enfant et le code est le suivant. dans le functions.php.
et je reçois une erreur : - Erreur d'analyse : erreur de syntaxe, '{' inattendue dans E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php à la ligne 18
S'il vous plaît, aidez-moi, j'utilise Sublime comme éditeur de texte.
S'il vous plaît, aidez-moi !!!!!
Support WPBeginner
Il y a un { inattendu dans le code. Allez à la ligne 18 de votre fichier functions et étudiez attentivement le code. Vous avez peut-être oublié un petit bout de code comme un ; manquant
Admin
Pramod
bonjour.....
j'ajoute un fichier .js dans le répertoire js de wordpress et j'en donne la référence dans funcation.php
mais ça ne marche pas
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Merci beaucoup ! J'essayais d'ajouter un fichier .js personnalisé mais c'est la première explication qui indique que register_script était nécessaire.
colkav
Salut, super tutoriel. J'ai un problème pour ajouter un javascript lié à Google Analytics, comme décrit ici :
J'ai placé le script dans le dossier 'js' de mon thème enfant (après avoir retiré le html du code).
Lorsque je charge la page, j'obtiens continuellement l'erreur :
ReferenceError: Impossible de trouver la variable : ga
(fonction anonyme)myscript.js:6
...et je viens de réaliser que j'avais peut-être besoin d'ajouter 'analytics.js' comme dépendance !
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Existe-t-il un plugin pour cela... Je suis un débutant et je ne peux pas jouer avec le code... S'il vous plaît, aidez-moi Monsieur
xavi
Salut.
merci pour ce post tutoriel incroyable ! Mais quand vous dites « où télécharger le script », vous pouvez simplement définir l'en-tête ou le pied de page (sur toutes les pages web !)? Pourriez-vous définir une page spécifique pour le charger ? J'en ai juste besoin d'une. Merci d'avance et continuez votre travail ! Santé.
technofranchise
Je veux utiliser JavaScript ou JQuery sur mon site WordPress. Des idées ?
Skye Barcus
Je suis un novice complet en js mais je connais le html. Je veux mettre ceci sur une page wordpress :
En gros, c'est un widget pour rejoindre une GoToMeeting. Cela fonctionne si vous le placez simplement dans le corps d'une page html, mais dans Wordpress, il est supprimé.
Pouvez-vous me donner une version "pour les nuls" pour faire fonctionner cela ?
Tyler Longren
Concernant le chargement du style, à la ligne 6, wp_register_script, devrait être wp_register_style je crois.
Support WPBeginner
Tyler, no this will work too.
Admin
Pedro de Carvalho
pourquoi avez-vous choisi d'utiliser _script à la place ?
Pali Madra
Je voudrais aussi savoir pourquoi utiliser _script et pas _style ? Y a-t-il des avantages ou les deux fonctionneront, donc l'un ou l'autre peut être utilisé ?
Dejan
J'aime beaucoup votre site, il est plein de conseils utiles, cependant, il semble que vous ne le fassiez pas "correctement" pour l'enqueue CSS, même si votre titre dit le contraire :=) La bonne façon serait :
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Continuez votre bon travail… Cordialement !
Adrian Zumbrunnen
Merci pour l'effort que vous avez investi. Cela semble juste faux d'avoir wp_enque_script pour charger des feuilles de style. WordPress pourrait éventuellement générer du script au lieu de la syntaxe de la feuille de style pour cela.
L'intégrez-vous vraiment de cette façon ?
Support WPBeginner
Ce tutoriel montre comment charger des fichiers JavaScript et des feuilles de style pour vos thèmes ou plugins dans WordPress. Si par intégrer vous entendiez comment nous affichons le code dans les articles, alors nous utilisons le plugin Syntax Highlighter pour cela.
Admin
oiveros
salut, je suis un peu nouveau dans le développement de thèmes WordPress, et en lisant à ce sujet, je voulais vous demander quelque chose en rapport. Si je veux mettre à jour le lien de la bibliothèque jQuery, comment faire ou où trouver le lien, j'ai essayé de le faire mais je ne le trouve pas. Merci d'avance pour votre aide.
Support WPBeginner
Si par mettre à jour le lien de la bibliothèque jQuery, vous entendez ajouter jQuery depuis la bibliothèque de Google. WordPress est livré avec jQuery et pour le charger dans votre thème, utilisez cette ligne dans votre thème :
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
d'accord, donc si je veux avoir la dernière version de jQuery, j'utilise juste cette ligne ?, parce que quelqu'un m'a dit d'utiliser un plugin juste pour ça, mais je voulais apprendre à le faire sans plugin
oliveros
Merci pour votre réponse, j'ai trouvé l'article lié à ce problème ici sur votre site.
Mark
Merci beaucoup pour ce tutoriel.
Elliott Richmond
Syed utile, merci.
J'ai récemment eu un problème pour charger un fichier css en utilisant _underscore comme framework, bien que la feuille de style s'appelait mycustomstyles.css, le thème appelait mycustomstyles.css?ver=xx et le thème ne chargeait pas le fichier à cause du nom du fichier en ajoutant ?ver=xx à la fin du nom.
Est-ce que cela a quelque chose à voir avec le $ver par défaut ?