Comment ajouter JavaScript à une page WordPress (+ Conseils de débogage)

Voulez-vous ajouter JavaScript à une page WordPress, mais vous pensez que vous le faites mal ou que vous ne savez même pas par où commencer? Ou l'avez-vous déjà fait et voyez des messages d'erreur et / ou des problèmes de performances que vous ne savez pas comment dépanner?

Quoi qu'il en soit, vous êtes au bon endroit.

Ce message va être une éducation de première rangée sur tout ce qui concerne JavaScript et WordPress. À la fin de celui-ci, vous saurez tout ce dont vous avez besoin sur les raisons pour lesquelles l'utilisation de JavaScript dans WordPress est une bonne idée, comment l'ajouter à vos pages, et que faire lorsqu'il ne fonctionne pas correctement ou ralentit votre site.

Pourquoi ajouter JavaScript à vos pages WordPress?

JavaScript, souvent abrégé en JS, est un langage de programmation populaire. C'est l'une des trois principales technologies utilisées pour créer des pages Web. Les deux autres sont HTML, qui définissent la structure et le contenu des pages, ainsi que CSS, qui est responsable du style.

JavaScript est un langage côté client, ce qui signifie qu'il s'exécute dans le navigateur, pas sur le serveur. Pour cette raison, vous pouvez l'utiliser pour modifier et mettre à jour CSS et HTML existants même après le chargement d'une page.

C'est pourquoi l'une de ses principales utilisations est de rendre les pages Web plus interactives. Par exemple, JavaScript alimente souvent les éléments de page comme:

• Menus glissants

• Popups

• Animations

L'éditeur de blocs WordPress est également écrit principalement en JavaScript.

En plus de l'interactivité, JavaScript est également un moyen courant d'intégrer des services tiers dans votre site, tels que le suivi des scripts pour l'analyse Web. D'autres exemples incluent:

• Chat en direct

• Formulaires d'opt-in et de contact par e-mail

• Vidéos intégrées

• Cartes interactives

• Flux de médias sociaux

Considérations importantes

Si cela est mal fait, l'ajout de JavaScript à vos pages WordPress peut entraîner des erreurs et des problèmes. Prendre des précautions dès le départ peut vous faire gagner du temps et de la frustration plus tard:

• Utilisez uniquement JavaScript à partir de sources de confiance pour garder votre site en sécurité et stable.

• Prenez une sauvegarde complète des fichiers et de la base de données de votre site Web avant d'apporter des modifications au cas où quelque chose ne va pas.

• Lorsque vous ajoutez JavaScript directement aux fichiers de thème, utilisez toujours un thème enfant. Si vous modifiez le thème principal, vous perdrez vos modifications lorsque vous la mettez à jour.

• Test des changements dans un environnement de mise en scène ou de développement avant de les appliquer sur votre site en direct.

• JavaScript ajoute du code supplémentaire à vos pages WordPress, ce qui peut les ralentir. Gardez une trace des performances lors de l'introduction de nouvelles fonctionnalités sur votre site.

6 façons d'ajouter JavaScript à une page dans WordPress

Assez avec la théorie. Ci-dessous, nous vous montrons six façons d'ajouter JavaScript à WordPress, de la plupart au moins technique.

1. Utilisez des crochets et des fonctions WordPress

Les crochets sont des éléments de code placés dans le processus de chargement WordPress où vous pouvez attacher du code personnalisé (soi-disant «fonctions») afin qu'il s'exécute à un moment ou à un emplacement particulier.

Par exemple, WP_head () s'exécute dans la section <A-Head> en haut de votre site. Si vous souhaitez l'utiliser pour ajouter JavaScript à une page WordPress, vous devez le faire dans le fichier Functions.Php de votre thème (enfant), par exemple:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Entrez votre code JavaScript où il dit: «Placez votre code JavaScript ici.» Vous pouvez également modifier le nom de la fonction de "add_custom_script" en quelque chose de plus descriptif.

Cette méthode est idéale pour des scripts plus petits à des fins très clairement définies, telles que le code de suivi d'analyse simple ou les éléments interactifs de base. Il fonctionne également pour le chargement de JavaScript dans le pied de page, qui est une solution populaire pour améliorer les performances de la page. Utilisez simplement wp_footer () au lieu de wp_head ().

La tête et le pied de page sont des emplacements populaires pour charger des scripts car ils apparaissent généralement partout sur un site Web. Cela en fait un excellent moyen d'ajouter JavaScript à toutes les pages d'un site WordPress.

Si vous souhaitez seulement charger JavaScript sur des pages spécifiques, vous pouvez combiner cette méthode avec une instruction conditionnelle:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

La pièce qui limite cela à une seule page est_page (123). Le «123» est l'ID de page, que vous devez mettre à jour vers l'ID de votre page si vous souhaitez utiliser ce code. Il apparaît dans la barre du navigateur lorsque vous ouvrez votre page dans l'éditeur WordPress. Vous pouvez également utiliser IS_PAGE () pour cibler les pages par nom ou limace URL.

2. Chargez JavaScript dans un fichier séparé

Une autre option consiste à mettre votre javascript dans son propre fichier. C'est une bonne idée, en particulier pour les grands scripts, mais il est également logique généralement car il vous permet de charger vos fichiers avec les fonctions WP_register_Script () et WP_ENQUEUE_Script ().

C'est la méthode préférée car elle aide à éviter les conflits, à charger les scripts dans le bon ordre et à gérer les dépendances. Voici à quoi il ressemble:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Dans cet exemple, le script est placé dans le répertoire de thème, que nous ciblons avec get_template_directory_uri () (pour les thèmes enfants, utilisez à la place get_stylesheet_directory_uri ()). Le tableau ('jQuery') indique que ce script dépend de jQuery et doit être chargé après. Le «1.0.0» est le numéro de version, et «vrai» signifie que WordPress devrait charger le script dans le pied de page.

Cela fonctionne également et est la bonne façon de charger JavaScript tiers, comme les codes de suivi. Assurez-vous de mettre à jour le code de votre cas d'utilisation avant de le mettre sur votre site.

3. Inclure le code dans les fichiers de thème

Les crochets sont un excellent moyen d'obtenir tous vos scripts JS d'un seul endroit, mais ce n'est pas le seul moyen de les charger dans votre thème.

Au lieu d'utiliser wp_head () pour charger quelque chose dans la section Head, vous pouvez réaliser la même chose en publiant votre script ou un lien directement vers le fichier de thème dans votre fichier de thème d'en-tête.

Dans des thèmes classiques, c'est généralement en tête.php . Trouvez-le dans votre thème, faites une copie et placez-la dans le thème de votre enfant, puis incluez le script directement quelque part dans la section <A-Head>.

Si vous souhaitez le charger uniquement sur une certaine page, vous pouvez utiliser une instruction conditionnelle comme auparavant. Alternativement, grâce à la hiérarchie des modèles, il est également possible de créer un fichier personnalisé pour cette page, par exemple Page-Contact.php .

4. Créer un plugin personnalisé

Le problème avec l'ajout de JavaScript aux pages WordPress à l'aide de fichiers de thème est qu'il rend le code dépendant du thème. Lorsque vous changez de thèmes, votre javascript disparaît également.

Vous pouvez éviter cela en utilisant un plugin personnalisé. Cela rend le code indépendant du thème et vous permet également de l'activer et de le désactiver dans le menu des plugins WordPress.

Voici le balisage pour un plugin simple pour ajouter JavaScript à vos pages WordPress:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Placez ce code dans un fichier PHP et assurez-vous d'ajuster le nom du plugin , le plugin URI , la description , l'auteur et l'URI de l'auteur à vos propres informations telles qu'elle apparaît dans le menu des plugins WordPress.

Nommez le fichier quelque chose de significatif, par exemple , personnalisé-tracking-code-plugin.php , puis téléchargez-le dans un répertoire du même nom à l'intérieur de WP-Content / Plugins dans votre installation WordPress. Après cela, il devrait apparaître dans le menu des plugins .

5. Ajouter JavaScript dans l'éditeur WordPress

Bien que ce ne soit pas la méthode la plus recommandée, il est également possible d'ajouter JavaScript directement à une page utilisant l'éditeur WordPress. Pour ce faire, ajoutez un nouveau bloc (cliquez sur le bouton Plus ou utilisez une barre oblique) et choisissez le bloc HTML personnalisé .

Insérez simplement votre code JavaScript afin qu'il se charge directement sur la page.

Assurez-vous simplement d'utiliser les balises d'ouverture <cript> et de fermeture </cript> et enregistrez vos modifications dans l'éditeur pour qu'ils prennent effet.

Vous pouvez également ajouter JavaScript à l'éditeur classique en utilisant l'onglet Code .

6. Utilisez un plugin d'extrait de code

Ce ne serait pas WordPress s'il n'y avait pas aussi une solution de plugin pour ajouter JavaScript à votre site. En fait, il y en a plusieurs, notamment:

• Wpcode

• Gestionnaire de code de page d'en-tête

• CSS et JS personnalisés simples

• Boîte à outils CSS & JavaScript

Les plugins vous permettent de mieux gérer votre javascript. Vous pouvez nommer vos extraits, les organiser en catégories, les activer et les éteindre sélectivement et mettre en place des règles conditionnelles. De plus, comme la solution de plugin personnalisée, il rend votre JavaScript indépendant du thème.

L'utilisation de ces plugins est également simple. Ils ajoutent généralement un nouveau menu à votre site où vous pouvez gérer vos extraits JavaScript.

Créez simplement un nouvel extrait, insérez votre code, puis configurez où vous voulez qu'il apparaisse.

C'est à peu près tout.

Dépannage des problèmes JavaScript dans WordPress

Vous savez maintenant comment ajouter JavaScript à votre site Web et pages WordPress. Mais que se passe-t-il si quelque chose ne fonctionne pas comme c'est censé faire? Nous passerons la dernière partie de cet article à parler de la façon d'identifier et de résoudre les problèmes JavaScript que vous pourriez rencontrer.

1. Vérifiez les outils du développeur du navigateur

Une façon de vérifier les erreurs JavaScript est d'utiliser les outils de développeur de votre navigateur. Ils vous permettent d'inspecter le code du site sous-jacent, y compris tous les scripts.

Vous pouvez les ouvrir en cliquant avec le bouton droit sur n'importe quelle page Web et en choisissant Inspecter .

Alternativement, accédez-y via le menu du navigateur, par exemple dans Chrome, ils sont situés sous plus d'outils> outils de développement .

Il y a aussi des raccourcis clavier pour les ouvrir, dans Chrome, Edge et Firefox, c'est CTRL / CMD + Shift + I , dans Safari CMD + Opt + C.

Ouvrez les outils de développement de votre site, puis accédez à l'onglet Console . Vous devriez voir des erreurs, y compris celles causées par JavaScript ici.

Notez que vous devrez peut-être recharger la page pour qu'ils s'affichent. Les erreurs JavaScript les plus courantes sont:

• ReferenceError: indique une variable ou une fonction manquante ou non définie.

• TypeError: suggère qu'il existe un problème avec une opération, par exemple, en essayant d'utiliser une valeur d'un type inapproprié.

• Syntaxerror: se produit souvent en raison d'une faute de frappe ou d'un formatage incorrect dans le code, comme des supports, des demi-colons ou des devis manquants.

Vous souhaitez savoir quel script, fichier ou fonction provoque l'erreur afin que vous puissiez le corriger. Il aide à utiliser des points d'arrêt dans l'onglet Sources , ce qui vous permet de suspendre l'exécution de JavaScript et d'inspecter ce qui se passe.

Utilisez votre moteur de recherche préféré ou votre IA pour en savoir plus sur tout message d'erreur que vous trouvez. De plus, vous pouvez également vérifier l'onglet réseau pour voir si vos scripts se chargent correctement.

2. Résoudre les conflits du thème et du plugin

Les erreurs JavaScript peuvent également se produire en raison des conflits de thème et de plugin, par exemple, lors de l'utilisation de bibliothèques incompatibles ou de fonctions en double.

Voici comment résoudre ces problèmes JavaScript:

• Mettre à jour les thèmes et les plugins: votre développeur de thème ou de plugin peut déjà connaître le problème et les a corrigés dans la dernière version.

• Passez temporairement à un thème par défaut: activez un thème par défaut WordPress comme vingt-vingt-cinq. Si le problème disparaît, votre thème est probablement en faute.

• Désactivez vos plugins: éteignez tous les plugins sur votre site et allumez-les un par un pour voir quand le problème réapparaît. Mettre à jour ou remplacer le plugin qui le provoque.

Le plugin Health Check vous permet de simuler tout ce qui est mentionné ci-dessus à partir du tableau de bord WordPress (accédez à l'onglet Dépannage ) et revoyez en un seul clic.

Il a également beaucoup plus d'informations supplémentaires sur l'état de votre site Web. Il est recommandé de faire ces tests sur un site Web de développement ou de mise en scène, pas votre site en direct.

3. Utilisez le mode de débogage

WordPress a un mode de débogage intégré pour vous aider à repérer et à résoudre les problèmes du site. Bien qu'il n'affiche pas directement des problèmes avec JavaScript, il facilite la recherche d'erreurs PHP, plugin et thème qui pourraient interférer avec les scripts de votre site.

Pour activer le mode de débogage, ouvrez votre fichier WP-Config.php (via FTP ou votre gestionnaire de fichiers d'hébergement) et ajoutez les lignes suivantes:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Vous trouverez peut-être déjà Define ('script_debug', false); dans le fichier. Si c'est le cas, changez-le simplement en «vrai». Enregistrer et re-télécharger le fichier.

Les paramètres ci-dessus permettent le mode de débogage, la journalisation des erreurs (les erreurs apparaîtront dans WP-CONTENT / DEBUG.log ) et chargent des versions non mandifiées des fichiers CSS CSS et JavaScript pour tracer les problèmes plus facilement.

Encore une fois, faites-le sur un site de développement, loin des yeux de vos visiteurs. De plus, n'oubliez pas de supprimer ce code pour revenir à la normale par la suite.

4. résoudre les problèmes de performance

Comme tout autre code, l'ajout de JavaScript à vos pages WordPress peut rendre votre site Web plus lent. Vous remarquerez souvent que lorsque vous accélérez votre site Web et recevez un avertissement qui dit «Réduisez JavaScript inutilisé».

Pour éviter les problèmes de performances causés par JavaScript, suivez ces meilleures pratiques:

• Supprimez les scripts dont vous n'avez pas besoin: Auditez régulièrement le chargement JavaScript sur votre site pour voir si vous avez réellement besoin de tout, en particulier des services tiers.

• Chargez les scripts dans le pied de page: placez uniquement les fichiers JavaScript dans la section Head lorsqu'il est nécessaire qu'ils se chargent tôt.

• Combinez des scripts: combinez plusieurs scripts en un seul fichier (c'est ce qu'on appelle la «concaténation»). Un seul grand fichier se charge souvent plus rapidement que plusieurs plus petits.

• Minify Fichiers JavaScript : Cela supprime le formatage inutile et l'espace blanc qui est idéal pour la lisibilité inutile pour exécuter du code.

• Chargez JavaScript de manière asynchrone: ce qui signifie que le navigateur n'arrête pas de traiter le site tout en chargeant des fichiers JavaScript mais les charge en arrière-plan et les exécute une fois téléchargés.

• Déférer de grands scripts: ici, vos fichiers sont également téléchargés en arrière-plan, mais ne s'exécutent que après la fin du reste du processus de chargement, donc il ne soit pas interrompu.

• Retarder l'exécution de JavaScript : cela repose le chargement de tous les fichiers JavaScript et les scripts en ligne jusqu'à ce qu'il y ait une interaction utilisateur. C'est comme un chargement paresseux pour les images mais pour les fichiers JavaScript.

Simplifier l'optimisation des performances JavaScript avec WP Rocket

Au lieu de le faire à la main, vous avez également la possibilité de l'implémenter beaucoup plus facilement à l'aide de WP Rocket. Lorsqu'il est actif sur votre site, le plugin diminue JavaScript par défaut et vous pouvez combiner, retarder, différer et charger de manière asynchrone tous les scripts sur votre site WordPress en vérifiant simplement quelques cases dans le menu d'optimisation des fichiers .

Si nécessaire, vous avez la possibilité d'exclure les scripts, les plugins et les fichiers individuels de l'optimisation, au cas où il interfère avec la réactivité des éléments de votre page.

En dehors de cela, WP Rocket implémente automatiquement un certain nombre d'améliorations de performances en arrière-plan, telles que:

• Mise en cache, y compris un cache mobile séparé

• Compression GZIP

• Préchargement de cache et de liens

• Optimisation critique de l'image (pour exclure les images au-dessus du pli du chargement paresseux) pour améliorer la plus grande peinture de contenu

• Rendu fascinant automatique pour charger des éléments en haut sur la page plus rapidement

En fait, l'installation et l'activation du plugin implémente 80% des meilleures pratiques de performances sur votre site et la rend plus rapide immédiatement. Et si cela ne suffit pas, il existe de nombreuses autres fonctionnalités que vous pouvez activer pour augmenter la vitesse de votre site, comme:

• Chargement paresseux pour les images, y compris les arrière-plans CSS, les vidéos et les iframes

• Préchargement des fichiers et polices externes

• Polices Google à l'auto-hébergement

• Optimisation de la base de données

• Options pour se connecter facilement à un CDN, y compris RocketCDN

Prêt à ajouter JavaScript à vos pages WordPress?

JavaScript offre de nombreuses possibilités passionnantes pour les sites Web WordPress, que ce soit pour ajouter de l'interactivité ou de l'intégration avec des logiciels tiers. Il existe de nombreuses façons de l'ajouter à vos pages, en fonction de votre niveau de compétence et de vos préférences.

Dans le même temps, JavaScript peut introduire des erreurs et être un facteur important dans les performances de la page. Pour cette raison, il est impératif que vous ajoutiez JavaScript à vos pages WordPress avec soin.

Si vous avez du mal aux problèmes de performances liés à JavaScript, WP Rocket vous aide à les résoudre facilement et efficacement. De plus, il offre beaucoup d'autres fonctionnalités pour accélérer votre site. Obtenez WP Rocket aujourd'hui et essayez-le sans risque pendant 14 jours!