Comment corriger l'erreur « jQuery is not defined » dans WordPress (6 méthodes)

Quand quelque chose se casse dans WordPress, cela peut donner l'impression de se heurter à un mur, surtout lorsque le message d'erreur n'a pas beaucoup de sens. L'un de ces problèmes cryptiques est la redoutée erreur « jQuery is not defined ».

Nous avons vu cela apparaître sur tout, des formulaires de contact aux curseurs d'images qui refusaient soudainement de fonctionner. Cela surprend généralement les utilisateurs, surtout si vous ne vérifiez pas activement la console du navigateur.

Nous avons aidé d'innombrables propriétaires de sites à résoudre ce problème exact. Et le meilleur dans tout ça ? Vous n'avez pas besoin d'être un développeur pour suivre.

Dans ce guide, nous expliquerons ce que signifie l'erreur, pourquoi elle se produit, et nous vous guiderons à travers les corrections étape par étape qui fonctionnent réellement, même si vous n'avez jamais touché une ligne de code auparavant.

Qu'est-ce qui cause l'erreur « jQuery is not defined » ?

jQuery est une bibliothèque JavaScript largement utilisée dans WordPress qui aide à exécuter de nombreuses fonctionnalités interactives. Cependant, parfois, elle peut ne pas se charger correctement, ce qui pourrait affecter la fonctionnalité de votre site Web.

L'erreur apparaît dans les outils de développement sous l'onglet Console, donc de nombreux utilisateurs peuvent ne pas la remarquer avant que quelque chose ne casse sur leur site.

Si vous voyez l'erreur « jQuery is not defined », cela signifie que WordPress a du mal à la charger correctement. Au fil des ans, nous avons aidé d'innombrables utilisateurs à résoudre ce problème, et nous avons appris qu'il provient généralement de quelques causes courantes :

1. Thèmes ou plugins obsolètes : De nombreux utilisateurs rencontrent cette erreur lorsque leurs thèmes ou plugins ne sont pas mis à jour pour correspondre à la dernière version de WordPress. Nous avons souvent constaté que cela se produisait après des mises à jour majeures de WordPress.
2. Chargement incorrect des scripts : jQuery doit être chargé avant les autres fichiers JavaScript. S'il ne l'est pas, les scripts qui dépendent de jQuery ne fonctionneront pas. Cela se produit souvent si les thèmes ou les plugins ne sont pas codés correctement pour mettre en file d'attente les scripts.
3. Conflits JavaScript : D'autres scripts exécutés sur votre site peuvent entrer en conflit avec jQuery, surtout s'ils ne sont pas chargés correctement. Ce conflit peut casser jQuery, provoquant l'erreur.
4. Échecs du CDN : Certains sites dépendent de jQuery hébergé sur un réseau de diffusion de contenu (CDN). Si le CDN est indisponible ou bloqué, le site ne pourra pas charger jQuery, ce qui entraînera l'erreur.

Tous ces problèmes peuvent empêcher jQuery de fonctionner correctement. Mais ne vous inquiétez pas – avec notre expérience, nous pouvons vous guider à travers les solutions pour résoudre le problème.

Comment corriger l'erreur « jQuery is not defined »

Il existe plusieurs façons de corriger cette erreur lorsque vous la rencontrez. Ci-dessous se trouvent les méthodes les plus efficaces que nous avons utilisées pour résoudre ce problème.

Nous vous recommandons d'essayer ces stratégies dans l'ordre, mais vous pouvez utiliser les liens de saut ci-dessous si vous souhaitez commencer par une méthode particulière :

• Mettre à jour WordPress, les thèmes et les plugins
• Vérifiez si jQuery est chargé correctement
• Ajoutez un fallback jQuery
• Corrigez l'ordre de chargement des scripts (avancé)
• Modifiez wp-config.php pour corriger les problèmes de chargement de jQuery
• FAQ sur l'erreur « jQuery is not defined »
• Ressources bonus : Dépannage des erreurs WordPress

Nous allons passer en revue chacune de ces méthodes, puis vous fournir quelques ressources supplémentaires pour le dépannage des erreurs WordPress. Allons-y !

1. Mettez à jour WordPress, les thèmes et les plugins

Un logiciel obsolète est l'une des causes les plus fréquentes de l'erreur « jQuery is not defined ». Des thèmes ou plugins obsolètes peuvent ne pas être compatibles avec la dernière version de WordPress, ce qui peut entraîner des conflits de scripts. Pour résoudre ce problème :

Tout d'abord, assurez-vous que le cœur de votre WordPress est à jour. Accédez à Tableau de bord » Mises à jour et cliquez sur « Mettre à jour vers la version X.X.X » si une mise à jour est disponible.

Consultez notre guide complet sur la mise à jour sécurisée de WordPress vers une nouvelle version pour plus de détails.

Vos mises à jour de plugins WordPress seront listées sous la mise à jour du cœur.

Vous pouvez tous les sélectionner et cliquer sur « Mettre à jour les plugins ».

Enfin, vous verrez les mises à jour de vos thèmes WordPress.

Sélectionnez simplement tous les thèmes et cliquez sur « Mettre à jour les thèmes ».

Si vous êtes préoccupé par les modifications que vous avez apportées à votre thème, suivez notre guide sur la façon de mettre à jour votre thème WordPress sans perdre les personnalisations.

2. Vérifiez si jQuery est chargé correctement

Avant d'explorer des solutions plus avancées, il est important de vérifier si jQuery est effectivement chargé sur votre site. Cette étape vous aide à confirmer si jQuery est disponible et fonctionne comme il se doit.

Faites un clic droit n'importe où sur votre site WordPress et sélectionnez « Afficher la source de la page ».

Cela vous montrera le code HTML et JavaScript brut de votre page.

Ensuite, appuyez sur Ctrl + F (ou Cmd + F sur Mac) pour ouvrir la barre de recherche, et tapez « jquery.min.js ».

Si jQuery est chargé correctement, vous devriez voir une référence à celui-ci dans le code.

Une autre façon de rechercher jQuery est d'utiliser l'outil Inspecter de votre navigateur. Allez simplement dans l'onglet « Network » et rechargez la page.

Filtrez l'activité réseau en tapant « jquery » dans la barre de recherche. Si jQuery est chargé, vous le verrez listé ici.

Si vous ne voyez pas jQuery chargé par l'une ou l'autre méthode, le problème peut venir de la façon dont il est mis en file d'attente dans WordPress. Dans les étapes suivantes, nous vous guiderons pour résoudre ce problème.

3. Ajouter un repli jQuery

Parfois, un script sur votre site peut charger jQuery en utilisant une CDN qui rencontre des problèmes de connectivité. Dans ce cas, il ne parviendrait pas à charger jQuery et provoquerait l'erreur.

Pour résoudre le problème, vous pouvez ajouter un repli jQuery à votre site WordPress. Cela garantit que jQuery est toujours chargé.

Vous devez l'ajouter à la section head de votre site pour vous assurer qu'il se charge en premier. Cependant, nous ne recommandons pas de modifier directement les fichiers de thème. Nous avons vu des personnes perdre leurs modifications lors de la mise à jour du thème et du code qu'elles avaient ajouté.

La meilleure façon d'ajouter du code personnalisé dans WordPress est d'utiliser le plugin WPCode. C'est un gestionnaire d'extraits de code qui vous permet d'ajouter du code personnalisé en toute sécurité sans casser votre site.

Tout d'abord, installez et activez le plugin WPCode. Pour plus de détails, consultez notre tutoriel sur l'installation d'un plugin WordPress.

Une fois activé, allez dans Extraits de code » + Ajouter un extrait. Ensuite, cliquez sur le bouton « Utiliser l'extrait » sous « Ajouter votre code personnalisé (Nouvel extrait) ».

Dans l'éditeur de code, donnez un nom à votre extrait, par exemple « jQuery Fallback ».

Après cela, sélectionnez « Extrait HTML » pour le « Type de code ».

Ensuite, collez le code suivant dans la zone « Aperçu du code » :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"><\/script>')
</script>

Faites ensuite défiler vers le bas jusqu'à la section « Insertion ».

Ici, vous pouvez indiquer à WPCode où charger ce code. Assurez-vous de sélectionner « En-tête de tout le site ».

Enfin, cliquez sur le bouton « Enregistrer le snippet » en haut pour sauvegarder votre code personnalisé.

Après cela, n'oubliez pas d'activer le snippet en basculant le commutateur sur « Actif ».

4. Corriger l'ordre de chargement des scripts (Avancé)

Une autre raison fréquente de l'erreur « jQuery is not defined » est que jQuery se charge après d'autres scripts qui en dépendent. Corriger l'ordre de chargement des scripts garantit que jQuery est toujours chargé en premier, évitant ainsi les conflits.

Si vous savez quel script dépend de jQuery, vous pouvez mettre en file d'attente ce script correctement en ajoutant jQuery comme dépendance.

Si l'erreur « jQuery is not defined » est causée par le chargement de jQuery après d'autres scripts qui en dépendent, vous pouvez corriger l'ordre de chargement des scripts en utilisant WPCode.

Tout d'abord, installez et activez le plugin WPCode, ou optez pour la version gratuite appelée WPCode Lite.

Une fois activé, allez dans Snippets de code » + Ajouter un snippet et cliquez sur le bouton « Utiliser le snippet » sous « Ajouter votre code personnalisé (Nouveau snippet) ».

Dans l'éditeur de code, donnez un nom à votre snippet, par exemple « Corriger l'ordre de chargement des scripts », et sélectionnez « Snippet PHP » comme type de code.

Ensuite, ajoutez le code suivant pour vous assurer que jQuery est mis en file d'attente comme dépendance pour tous les scripts personnalisés :

wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . '/js/your-script.js', array( 'jquery' ), null, true );

N'oubliez pas de remplacer « your-script-handle » par un nom significatif pour identifier le script. Et remplacez « /js/your-script.js » par le nom réel du fichier de script dans le dossier /js/ de votre thème.

La partie array('jquery') dans le code garantit que jQuery est chargé en premier.

Une fois que vous avez ajouté le code, faites défiler vers le bas jusqu'aux options « Insertion » et sélectionnez « En-tête de site entier » pour vous assurer que le script est chargé dans la bonne partie du HTML de votre site.

Enfin, cliquez sur le bouton « Enregistrer le snippet » en haut pour sauvegarder votre code personnalisé.

Après cela, n'oubliez pas d'activer le snippet en basculant le commutateur sur « Actif ».

L'utilisation de WPCode pour mettre en file d'attente correctement les scripts garantit que jQuery est chargé dans le bon ordre. Si c'était la cause du problème, cela devrait résoudre l'erreur.

5. Modifier wp-config.php pour corriger les problèmes de chargement de jQuery

Si les autres méthodes n'ont pas fonctionné, la modification du fichier wp-config.php peut aider en contrôlant la façon dont WordPress gère le chargement des scripts.

Cette méthode est utile si des problèmes de concaténation de scripts ou de chemins de fichiers causent l'erreur « jQuery is not defined ».

Voici comment appliquer cette méthode :

Tout d'abord, accédez à votre fichier wp-config.php. Vous pouvez le faire en utilisant un client FTP comme FileZilla ou en accédant au gestionnaire de fichiers de votre panneau de contrôle d'hébergement.

Le fichier wp-config.php est situé dans le répertoire racine de votre installation WordPress (généralement dans le dossier public_html).

Une fois que vous avez localisé le fichier, ouvrez-le pour le modifier et ajoutez le code suivant juste avant la ligne qui dit /* C'est tout, arrêtez d'éditer ! Bon blogging. */ :

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(FILE) . '/');
define('CONCATENATE_SCRIPTS', false);

Voici ce que fait ce code :

• La définition ABSPATH garantit que WordPress connaît le chemin correct vers ses fichiers principaux, ce qui peut empêcher les problèmes de chargement de jQuery.
• La ligne CONCATENATE_SCRIPTS désactive la concaténation des scripts. Cela force WordPress à charger chaque script séparément, empêchant les conflits qui surviennent lorsque les scripts sont fusionnés.

Après avoir ajouté ce code, enregistrez vos modifications et rechargez votre site pour voir si l'erreur a été résolue.

La désactivation de la concaténation de scripts peut être une solution simple mais efficace aux problèmes de jQuery, surtout lorsque d'autres méthodes ne fonctionnent pas.

FAQ sur l'erreur « jQuery is not defined »

Ressources bonus : Dépannage des erreurs WordPress

Si toutes les étapes ci-dessus ne vous aident pas ou si vous souhaitez en savoir plus, les ressources suivantes pourraient être de bons points de départ :

• Guide du débutant pour le dépannage des erreurs WordPress (étape par étape)
• Comment ajouter correctement des scripts et des styles dans WordPress
• Les erreurs WordPress les plus courantes et comment les corriger
• Comment corriger le JavaScript et le CSS bloquant le rendu dans WordPress

Nous espérons que cet article vous a aidé à résoudre l'erreur « jQuery is not defined » dans WordPress. Vous pourriez également consulter notre guide sur la mise à jour de jQuery vers la dernière version dans WordPress ou notre sélection des meilleurs tutoriels jQuery pour débutants 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.