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

Voulez-vous remplacer le script jQuery par défaut de WordPress par jQuery provenant des bibliothèques hébergées par Google ?

WordPress inclut jQuery avec le logiciel cœur par défaut. Toutefois, l’amélioration des performances passe par l’utilisation de la dernière version de jQuery issue de la bibliothèque de Google.

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.

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.

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 le plugin WPCode code snippets pour ajouter ce code dans WordPress. Il est gratuit, facile à utiliser et n’endommagera pas votre site web 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 le plugin activé, 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 » en dessous.

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 le champ « Prévisualisation du code » et de sélectionner « Extrait PHP » comme type de code dans le menu déroulant.

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

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.

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.

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.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.