Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment remplacer le script jQuery par défaut de WordPress par la Bibliothèque Google

Récemment, un utilisateur nous a demandé des conseils pour optimiser les performances de son site WordPress. L’une de nos suggestions consistait à remplacer le script jQuery par défaut de WordPress par jQuery provenant des bibliothèques hébergées par Google.

WordPress inclut par défaut jQuery dans le logiciel de base. Cependant, nous avons constaté que le fait de le remplacer par la dernière version de jQuery issue de la bibliothèque de Google permet d’améliorer les performances.

Dans cet article, nous allons vous montrer comment remplacer facilement le script jQuery par défaut de WordPress par la bibliothèque Google afin d’améliorer les performances et la vitesse.

Replacing the WordPress jQuery with Google library

Pourquoi et quand remplacer la version par défaut de WordPress par jQuery ?

jQuery est une bibliothèque JavaScript populaire utilisée par les développeurs/développeuses pour créer de belles applications web. Elle est utilisée assez souvent dans WordPress pour ajouter des mis en avant comme les Diaporamas, les fenêtres surgissantes, et bien d’autres choses encore.

WordPress inclut une bibliothèque jQuery dans le logiciel de base de WordPress. La plupart des extensions WordPress et des thèmes WordPress les plus populaires s’appuient sur cette bibliothèque pour leurs fonctionnalités et leurs avant-postes.

JQuery and other third-party scripts packaged in WordPress

Cependant, le chargement de jQuery sur un serveur d ‘hébergement mutualisé peut être gourmand en ressources et ralentir votre site, surtout si vous utilisez des thèmes WordPress mal codés ou des extensions qui ne respectent pas les meilleures pratiques de WordPress.

Un autre problème lié à l’utilisation de la version de jQuery incluse dans WordPress est qu’elle ne sera pas mise à jour tant que WordPress ne l’aura pas mise à jour. Il peut y avoir de nouvelles versions de jQuery avec des corrections de performance ou de sécurité, mais vous n’y aurez pas accès jusqu’à ce qu’elles soient incluses dans une mise à jour de WordPress.

Il existe quelques solutions pour corriger ce problème. Par exemple, vous pouvez charger jQuery via les serveurs de Google ou le CDN officiel de jQuery.

Google Hosted Libraries est un bon choix car leurs serveurs sont stables, mis à jour et hautement optimisés pour la vitesse, ce qui permet à jQuery de se charger beaucoup plus rapidement sur votre site WordPress.

Ceci étant dit, voyons comment remplacer facilement le jQuery par défaut de WordPress par la bibliothèque de Google.

Remplacer le jQuery par défaut de WordPress par la Bibliothèque Google

WordPress dispose d’une méthode intégrée permettant d’ajouter facilement des scripts et des feuilles de style. Cela vous permet également de retirer en toute sécurité les scripts et feuilles de style chargés à l’aide de la méthode intégrée.

Nous allons utiliser cette méthode pour d’abord désactiver le jQuery par défaut de WordPress. Ensuite, nous dirons à WordPress de charger jQuery via la bibliothèque Google.

Vous devrez ajouter le code suivant au fichier functions.php de votre thème, à un plugin spécifique au site ou à un plugin d’extraits de code.

function wpb_modify_jquery() {
    //check if front-end is being viewed
    if (!is_admin()) {
        // Remove default WordPress jQuery
        wp_deregister_script('jquery');
        // Register new jQuery script via Google Library    
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
        // Enqueue the script   
        wp_enqueue_script('jquery');
    }
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');

Nous vous recommandons d’utiliser l’extension d’extraits de code WPCode pour ajouter ce code dans WordPress. Il est gratuit, facile à utiliser et ne cassera pas votre site en cas de problème.

Note : Il existe également une version premium de WPCode qui offre des fonctionnalités avant comme les révisions de code, les pixels de conversion automatique, les extraits planifiés, une bibliothèque dans le cloud privé, et plus encore.

Pour Premiers pas, vous devrez installer et activer WPCode. Si vous avez besoin d’aide, consultez notre guide sur l’installation d’une extension WordPress.

Une fois l’extension activée, accédez à Code Snippets «  Add Snippet depuis votre tableau de bord WordPress. De là, trouvez l’option  » Add Your Custom Code (New Snippet)  » et cliquez sur le bouton  » Use snippet  » situé en dessous.

Add a new custom code snippet in WPCode

À partir de là, vous devez sélectionner « Extrait de code PHP » dans la liste des types de code qui s’affiche à l’écran.

Select PHP Snippet as the code type

Ensuite, vous pouvez ajouter un titre à votre extrait de code. Il peut s’agir de n’importe quoi pour vous aider à vous souvenir de l’objet du code.

Ensuite, il suffit de coller le code ci-dessus dans la case « Aperçu du code ».

Paste code snippet into WPCode

Dernier point, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».

Activate and save your custom code snippet

C’est tout ! WordPress va maintenant remplacer le jQuery par défaut et le charger via la bibliothèque Google à la place.

Note: Cette méthode continue de charger la version de jQuery mentionnée dans l’URL. À l’avenir, vous devrez peut-être modifier l’URL de la bibliothèque Google pour utiliser une version plus récente de jQuery.

Google ne mettra pas automatiquement à jour le numéro de version pour vous, car cela pourrait entraîner des problèmes de compatibilité si votre thème ou vos extensions s’appuient sur une version différente.

Vous trouverez la dernière URL en visitant le site des bibliothèques hébergées par Google.

Google hosted libraries - jQuery

Vous y trouverez également les URL des anciennes versions de jQuery que vous pourrez utiliser pour le dépannage si nécessaire.

Remplacement d’autres bibliothèques jQuery par défaut

En plus de la bibliothèque centrale jQuery, WordPress inclut également un certain nombre d’autres scripts jQuery. Certains de ces scripts, comme jQuery Mobile et jQuery UI, sont hébergés dans la bibliothèque de Google.

Pour les autres bibliothèques, vous pouvez utiliser les propres serveurs CDN de jQuery pour les charger beaucoup plus rapidement. Dans l’exemple abonné, nous avons remplacé le script WordPress jquery-ui-core par la version officielle de jquery-ui.

function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
    }
}
add_action('init', 'wpb_modify_jquery_ui');

Tout comme les bibliothèques Google, vous devrez remplacer l’URL au bout d’un certain temps pour utiliser la dernière version du script.

Désactiver complètement jQuery dans WordPress

En raison de sa large utilisation, nous ne recommandons pas de désactiver complètement jQuery sur votre site WordPress. Même si votre thème WordPress n’utilise pas jQuery, de nombreuses extensions WordPress populaires en ont encore besoin.

Toutefois, si vous êtes certain que votre site web n’a pas besoin de jQuery, vous pouvez le désactiver en toute sécurité.

Il suffit d’ajouter le code suivant au fichier de fonctions de votre thème, à une extension spécifique au site ou à une extension d’extraits de code comme WPCode.

if ( !is_admin() ) wp_deregister_script('jquery');

C’est tout. Ce code empêche simplement le script jQuery de se charger sur l’interface publique de votre site WordPress.

Dépannage des problèmes liés à jQuery dans WordPress

Les nouvelles versions de jQuery peuvent parfois obsolète, ou retirer, d’anciennes méthodes et fonctions. Si une extension WordPress de votre site utilise une ancienne méthode, cela peut potentiellement entraîner des problèmes.

Il se peut que vous remarquiez des avertissements dans la zone Console de l’outil Inspecter, ou que certaines fonctionnalités aient avant tout cessé de fonctionner.

WordPress utilisait un script appelé jQuery-migrate pour assurer la compatibilité avec les anciennes versions de jQuery. Cependant, depuis WordPress 5.5, ce script a été retiré de WordPress.

Si vous souhaitez réintégrer le script jQuery-migrate ou dépanner entre différentes versions de jQuery, vous pouvez essayer la méthode suivante.

Il suffit d’installer et d’activer l’extension Contrôle de version pour jQuery. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » jQuery Version Control. À partir de là, vous pouvez choisir la version de jQuery que vous souhaitez utiliser.

L’extension chargera automatiquement cette version depuis le CDN officiel de jQuery.

jQuery version control

L’extension chargera également le script jQuery migrate. Si vous le souhaitez, vous pouvez le désactiver lors du dépannage.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos modifications.

Nous espérons que cet article vous a aidé à apprendre comment remplacer le jQuery par défaut de WordPress par la bibliothèque Google. Vous pouvez également consulter ces tutoriels jQuery utiles pour les utilisateurs/utilisatrices de WordPress ou voir notre guide complet d’optimisation des performances de WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

27 commentairesLaisser une réponse

  1. ALEX

    Hello,

    We have a server in China, and all of resource from Google are blocked by Chinese government firewall.

    But, the Jquery and Fonts resources are loaded from Google on Wordpress by default now, and the site is caused seriously delay.

    So, is there anyway to force Js or CSS resources to be loaded from local server please?

    Thanks

    • WPBeginner Support

      If you have a web address for the jquery files on a local server then you would change the url in the snippet to point toward where the jquery is located.

      Administrateur

  2. Wilbur

    Hey, sorry for haling this post out of the grave… :) How relevant is this still? In Terms of the latest P Core versions?

    Thanks

  3. Jorge

    Hi,

    Here is a more advanced implementation:

    add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
    function register_jquery() {
    if (!is_admin()) {
    wp_deregister_script(‘jquery-core’);
    wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
    wp_enqueue_script(‘jquery-core’);
    wp_deregister_script(‘jquery-migrate’);
    wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
    wp_enqueue_script(‘jquery-migrate’);
    }
    }

    Where « cdn.yourdomain.com » it should be replaced by the file path, using a CDN for a better result.

    Best Regards,

    Jorge Ortiz

    • Simon

      Both the post’s solution and this one break my site

      • Plato39

        Jorge’s code worked for me – but the quotation marks must be replaced. Try this:

        add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
        function register_jquery() {
        if (!is_admin()) {
        wp_deregister_script(‘jquery-core’);
        wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
        wp_enqueue_script(‘jquery-core’);
        wp_deregister_script(‘jquery-migrate’);
        wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
        wp_enqueue_script(‘jquery-migrate’);
        }
        }

        • Plato39

          OK – it’s this webpage that is adding the fancy quotes. Just do a ‘find and replace’ in your text editor (or manually replace the quotes with plain ones) and the code will work in your theme’s functions.php file.

        • Shaurya

          what do i put in the url if I dont have a cdn ?

  4. will

    hi
    thank you very much for your post, I tried to change it and do not know if I did well because my web now is 2 seconds slower
    How do I check if I did well and I’m using the google libraries?

  5. Ihsan

    I tested code above and i replace the last line with this to make it work and better

    add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );

  6. Alejandro

    Hi, Thank you for your tips. I do not know Why when using this function, the jquery from Google is loading twice, I mean, I have two HTTP request instead of one, Here is the test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.

    With jquery.easing the same happends, but this time with 3 HTTP request for the same file.

    Any ideas? I’ve been looking into the code but didn’t find duplication of wp_enqueue_script( »);

    Thank you in advance

    • Alejandro

      Just notice that when I am logged in, jquery from google is only loaded once.

  7. Mathieu

    Thanx! The jQuery used to break up my admin functionality now that’s solved.

  8. Joseph Chambers

    What if I want to load either HTTP or HTTPS based on whatever the visitor is visiting our page on.

    for most things we can change: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js and it works. However; something in the wp_register_script() is throwing a error ( White page with the word: Error ) when I change that. thoughts, solutions?

  9. Sajid Iqbal

    Thanks Syed for this great post. Saved me a lot of time.

  10. Matt Ogborne

    Very helpful, Thank you!

    Matt

  11. Riversatile

    Hi,

    Here is the latest version of the googleapi jquery file.

    When you copy/paste the code above, don’t forget to replace the jquery URl by this one :

    http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

    Then replace « 1.4.4 » by « 1.6.2 »

    Like that :

    //Making jQuery Google APIfunction modify_jquery() { if (!is_admin()) { // comment out the next two lines to load the local copy of jQuery wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);

    • vnu

      Could anyone tell me if I need to modify (!is_admin) to « minimum » capability if I use a plugin plugin like thethefly ‘s tabs and accordions . So the tabs created on pages are view-able by everyone?

      Thanks !

  12. Melissa Cleaver

    Thanks so much for the code, but when I tried to use it in my functions.php file, I got a fatal error, no matter where in the code I put it. Am I doing something wrong here?

  13. swanie

    Question: does Google Library do a good job at pulling in the alt tag info from the media library? … I have several professional themes that use a main page jQuery slider, but they don’t pull in the alt tag … thus, the source code look like: alt= » » … which of course, is an seo no-no. I’ve never used the Google Library script … I’d be curious how that works. What’s your experience?

      • swanie

        OK … I guess I’m specifically talking about jQuery sliders … I have purchased several professional themes with a main page jQuery slider … here’s one of them: http://coloradospringsautomechanics.com … if you view source, it pulls in the images, but not the alt tags … the alt tag is empty.

        I guess by reading this post, this Google Library approach could possibly resolve that.

        Another solution could be to break open the plugin files and add to the alt tag so I should have:

        img src= »file.jpg » alt= » » title= » »

        Just wondering why these jQuery sliders don’t pull in the alt tags. That make sense? Am I off-subject?

        You guys rock, by the way.

        • Aamir Rizwan

          Your website is flagged « malware » by Google.

        • WPBeginner Support

          @Geraldo : you can resolve dependensies. For example if you are loading a jQuery script it would obviously need jQuery so you add that as dependency and WordPress would enqueue it for you.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.