👉 Comment corriger '$ is not a function' dans WordPress : 4 méthodes
Vous modifiez functions.php, vous ajoutez quelques lignes de jQuery, et le site plante avec un écran blanc. La console affiche: Uncaught TypeError: $ is not a function. Cela vous semble familier?
Chaque développeur WordPress rencontre cette erreur au moins une fois. Vous copiez un code jQuery fonctionnel depuis CodePen ou un extrait, vous le collez sur votre site, et WordPress ne le comprend pas. La raison n'est ni un code défectueux ni un conflit de plugin. La raison est la manière dont WordPress gère jQuery.
Nous allons voir quatre méthodes éprouvées pour corriger l'erreur «$ is not a function», de l'enveloppe IIFE sécurisée à la désactivation complète du mode noConflict. Chaque méthode est accompagnée d'un code prêt à l'emploi que vous pouvez copier et coller.
💡 Aperçu rapide:
- Envelopper le code jQuery dans une fonction anonyme IIFE, la méthode la plus sûre et la plus universelle
- Utiliser jQuery document ready avec un paramètre dollar pour les scripts dans l'en-tête
- Assigner votre propre alias via noConflict, pratique quand le signe dollar est pris par une autre bibliothèque
- Désactiver globalement noConflict, uniquement quand il n'y a pas d'autres bibliothèques sur le site
Pourquoi l'erreur «$ is not a function» se produit dans WordPress
WordPress charge jQuery en mode noConflict. Cela signifie que la variable $, l'alias court de jQuery, n'est pas disponible globalement. Les développeurs du cœur de WordPress l'ont fait intentionnellement pour éviter les conflits: de nombreuses bibliothèques JavaScript (Prototype, MooTools, les anciennes versions de Bootstrap) utilisent également $ comme raccourci principal.
Quand vous écrivez dans votre script:
1 $("#element").hide();
WordPress ne sait pas que $ est jQuery. Il voit un appel à une fonction inconnue et lève TypeError: $ is not a function. En dehors de WordPress, sur une page HTML «nue», ce même code fonctionnerait sans problème, car jQuery y enregistre $ globalement.
Techniquement, WordPress ne comprend que le nom complet: jQuery("#element").hide(). Mais écrire jQuery au lieu de $ dans chaque ligne d'un script de plusieurs lignes n'est pas pratique, le code s'alourdit et perd en lisibilité. Heureusement, il existe quatre façons de contourner cette limitation.
Avant de modifier un fichier de thème, faites une sauvegarde de votre site. Un point-virgule manquant dans functions.php, et le site tombe. Avec une sauvegarde, vous pouvez annuler les modifications en une minute.
Méthode 1: l'enveloppe IIFE, sûre et universelle
La manière la plus fiable de retrouver $ dans les scripts WordPress est une expression de fonction immédiatement invoquée (IIFE). Vous passez jQuery comme argument, et à l'intérieur de la fonction vous y faites référence via le familier $.
Code pour footer.php ou une insertion en bas de page (pied de page):
1 (function($) { 2 // Your jQuery code here 3 $("#element").hide(); 4 })(jQuery);
Ce qui se passe ici: une fonction anonyme accepte le paramètre $ et est immédiatement invoquée avec l'argument jQuery. À l'intérieur de cette fonction $ === jQuery, tandis qu'à l'extérieur $ reste indéfini. Le conflit avec d'autres bibliothèques est éliminé.
Cette méthode fonctionne pour les scripts dans le pied de page. Si le script doit s'exécuter dans <head>, utilisez la méthode 2.
Méthode 2: jQuery(document).ready avec le paramètre $
Quand un script doit s'exécuter dans l'en-tête de la page (avant le chargement du DOM), enveloppez-le dans jQuery(document).ready. Notez: le $ est passé au paramètre du callback, ce n'est pas une faute de frappe mais un point clé.
Code pour header.php ou functions.php via wp_enqueue_script:
1 jQuery(document).ready(function($) { 2 // Your jQuery code here 3 console.log($); 4 });
La méthode .ready() attend le chargement complet du DOM, et jQuery se passe lui-même au callback en tant que $. À l'intérieur de ce callback, $ fonctionne à nouveau comme dans un environnement JavaScript normal. Et, contrairement à la méthode 1, le script démarre depuis <head>, ce qui est utile pour les opérations d'initialisation critiques.
La plupart des développeurs de thèmes et de plugins connaissent cette particularité de WordPress, donc dans les produits de qualité vous verrez presque toujours jQuery au lieu de $, ou l'une des enveloppes ci-dessus.
Méthode 3: créez votre propre alias via noConflict
jQuery vous permet non seulement de retrouver $, mais aussi d'assigner n'importe quel autre alias court, par exemple les variables $j ou jq, ou toute variable que vous préférez. C'est pratique quand le site utilise déjà une autre bibliothèque qui a pris $.
1 var jq = jQuery.noConflict(); 2 jq("div p").hide(); 3 4 // Another library continues using its own $ 5 $("content").style.display = "none";
La méthode jQuery.noConflict() libère $ pour d'autres bibliothèques et retourne jQuery dans votre variable (jq dans l'exemple). Après cela, les appels se font via jq(...), tandis que $ fonctionne pour la bibliothèque voisine, le conflit disparaît complètement.
Cette approche est particulièrement utile sur les sites où un thème WordPress coexiste avec un framework JavaScript tiers qui utilise $ pour ses propres besoins.
Méthode 4: désactiver complètement noConflict (à utiliser avec prudence)
Si vous savez avec certitude que le site n'a pas d'autres bibliothèques revendiquant $, vous pouvez désactiver le mode noConflict globalement:
1 $ = jQuery.noConflict(true);
Après cette ligne, $ fonctionne à nouveau comme un alias jQuery global partout, dans n'importe quel script, n'importe où sur la page. Cependant, cette méthode est la plus risquée. Si vous installez plus tard un plugin qui utilise aussi $, le site cassera avec un bug difficile à reproduire.
Nous recommandons les méthodes 1 et 2 comme principales, elles sont sûres, isolées et couvrent la grande majorité des scénarios réels. La méthode 4 est pour les situations où vous maintenez un grand script legacy et ne pouvez pas envelopper chaque fonction séparément.
Dans la vidéo ci-dessus, une démonstration visuelle des quatre méthodes en action. Regardez-la si vous préférez une explication visuelle au texte.
⁉️🤔 Foire aux questions
Pourquoi WordPress a-t-il désactivé $ pour jQuery à l'origine?
Les développeurs du cœur de WordPress ont activé
jQuery.noConflict()par défaut pour protéger les sites des conflits avec d'autres bibliothèques JavaScript. Prototype.js, MooTools et certains anciens frameworks enregistrent également une variable globale$. Si WordPress donnait$à jQuery, tout thème ou plugin avec une telle bibliothèque casserait le panneau d'administration ou le frontend. WordPress exécute jQuery en mode noConflict depuis la version 3.6, ce n'est pas un bug mais une décision architecturale. La variable$dans la portée globale reste libre pour les bibliothèques tierces. C'est exactement pourquoi$("#id")en dehors d'une enveloppe lèvera toujoursTypeError.
Puis-je simplement inclure jQuery une seconde fois, en dehors de WordPress?
Techniquement, oui, vous pouvez inclure jQuery via un lien CDN une seconde fois, et il enregistrera
$globalement. Mais c'est une mauvaise pratique: deux versions de jQuery sur une même page entrent en conflit, le poids de la page augmente, et les plugins WordPress s'attendent exactement à la version de jQuery enregistrée viawp_enqueue_script. Travaillez toujours avec la version de jQuery fournie par WordPress, elle est testée pour la compatibilité avec le cœur et le panneau d'administration. Inclure jQuery à nouveau signifie créer de nouveaux problèmes au lieu de résoudre celui d'origine.
Que faire si l'erreur apparaît seulement sur des pages spécifiques?
Vérifiez si la page spécifique charge un script tiers via un plugin ou un widget. Certains plugins de cache et de minification réorganisent agressivement les scripts, et jQuery peut se charger après votre code. Désactivez les plugins d'optimisation un par un pour trouver le coupable. Dans la plupart des cas, le problème «$ is not a function sur une seule page» est causé par l'ordre de chargement des scripts. Un plugin de minification ou de cache place votre script avant jQuery, et
$n'existe pas encore au moment de l'appel. Solution: soit exclure le script de la minification, soit l'envelopper dans l'IIFE de la méthode 1, qui ne dépend pas du$global.
Existe-t-il un plugin prêt à l'emploi qui corrige cette erreur?
Il n'y a pas de plugin dédié «pour corriger $ is not a function», et ce n'est pas nécessaire. Le problème se résout avec une enveloppe d'une ligne, et installer un plugin séparé pour cela est excessif. Cependant, il existe des plugins comme Code Snippets qui vous permettent d'ajouter du code JavaScript et PHP sans modifier les fichiers du thème, ce qui est plus sûr pour les débutants. Code Snippets stocke votre code dans la base de données, pas dans
functions.php. Si vous faites une erreur de syntaxe, le plugin annule automatiquement les modifications, et le site ne plante pas. Nous recommandons aux débutants d'ajouter tout code JS via celui-ci, plutôt qu'en modifiant les fichiers du thème.
L'erreur «$ is not a function» est corrigée, quelle est la suite?
Principal point à retenir: le problème n'est ni dans votre code ni dans WordPress. C'est un comportement standard du CMS, et il se corrige avec une enveloppe. Dans la grande majorité des cas, la méthode 1 (IIFE) ou la méthode 2 (.ready() avec $) est suffisante. Elles ne cassent pas les autres scripts et fonctionnent dans n'importe quelle version de WordPress, de la 4.0 à la plus récente.
Si vous travaillez souvent avec jQuery dans WordPress, prenez l'habitude de commencer chaque script par (function($) { et de le terminer par })(jQuery);, cela deviendra une mémoire musculaire en une semaine et éliminera définitivement l'erreur.
Partagez l'article avec vos collègues qui modifient encore functions.php par tâtonnements, une enveloppe prête à l'emploi leur fera gagner une heure de débogage.
Une équipe professionnelle de rédacteurs et d'éditeurs spécialisés dans la création de contenu de qualité.