Tout savoir sur WordPress
Tutoriel WordPress

Ajouter la version jQuery de WordPress depuis le CDN de Google

Cette astuce permet d’ajouter la version jQuery utilisé par WordPress à partir du CDN Google.

WordPress 3.3.2 intègre une version 1.7.1 de jQuery. Le core de WordPress a donc besoin de cette version pour fonctionner correctement et peut-être que votre thème aussi.

Si vous remplacez cette inclusion de jQuery par celle provenant de Google (un CDN), c’est très bien. Cependant, soyez vigilants ! Si WordPress se met à jour et requiert une nouvelle version de jQuery pour fonctionner et que vous ne mettez pas à jour votre code, vous allez embarquer une ancienne version de jQuery !

Avant de vous dévoiler le code, prenons quelques secondes de réflexion : comment intégrer non pas la dernière version disponible de jQuery mais la version dont le core de WordPress a besoin ?

En fait, c’est assez simple, nous allons lire la version du script que nous aurons « enqueue », puis créer une URL pointant chez Google et enfin remplacer l’url du core par la nouvelle !

Copiez le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :

function cdn_jquery_scripts() {
    
    global $wp_scripts;
    wp_enqueue_script( 'jquery' );
    
    // on lit la version
    $jq_version_from_wp = $wp_scripts->registered['jquery']->ver;
    
     // on vérifie si SSL est activé
    $https = is_ssl() ? 's' : '';

    // on crée l'url du CDN
    $jq_url_from_cdn = 'http'.$https.'://ajax.googleapis.com/ajax/libs/jquery/' . $jq_version_from_wp . '/jquery.min.js';
    
    // on fait une requête HTTP vers le fichier
    $response = wp_remote_get( $jq_url_from_cdn );
    
    // si il n'est ni en erreur ni une 404 ...
    if( !is_wp_error( $response ) && $response['response']['code'] != 404 ) {
        
        // on le "register" et on l'ajoute de nouveau (en footer grâce au "true")
        wp_register_script( 'jquery', $jq_url_from_cdn, '', $jq_version_from_wp, true );
        wp_deregister_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'cdn_jquery_scripts' );

A présent, vous savez ajouté la librairie jQuery depuis le CDN de Google sans vous tromper de version et sans avoir besoin de revenir retoucher le code pour les prochaines mises à jour !

Cet article a été mis à jour il y a 2094 jours - Il n'est peut être plus à jour !

Article écrit par Julio P.

Co-fondateur de WP Media, la startup Lyonnaise qui a créé WP Rocket et Imagify, Julio Potier est un Expert WordPress, un Formateur Expérimenté et un Consultant en Sécurité Web.

Il aime partager ses compétences et ses réflexions sur WordPress, donnant des conférences partout dans le monde.

26 Commentaires

  1. Bon, je vais tenter. J’ai déjà parlé d’un plugin qui gérait toute les biblio importantes de Javascript par les bibliothèques WP mais comme je n’en fais pas un grand usage…

  2. @Li-An : C’est même très vivement conseillé avec cette méthode qui permet de toujours être à jour en fonction de la version embarquée par WordPress.

    Cela permet de gagner en performance.

  3. L’avantage du CDN n’est plus à prouver, ici l’avantage premier est que la version reste celle que core de WP, le second avantage c’est qu’aucune mise à jour de code n’est à faire.
    Merci pour ton test et ton retour en tout cas !

  4. Ce n’est pas être Gaulois mais Normand que je suis ;)

    Bref on ne sait jamais de la part de GG. Me concernant je préfère « blinder » mon code que d’y revenir le jour où le(s) site(s) WP ne réponds plus car GG a modifié on ne sait quoi ….

  5. Tout à fait. On peut imaginer une attaque sur les serveurs Google, un problème quelconque qui fait que la bibliothèque ne puisse être dispo quelques heures et ce serait couillon d’avoir un site en rade en même temps.

  6. Au choix :
    1) Le jour où le CDN de Google est HS, le monde n’existera plus #troll
    2) Google ? HS ? #LOL
    3) Ce jour là, je mettrais à jour le script, mais j’y crois pas. #antitrust
    4) ON VA MOURIR !! #21122012

    Le code est donc bel et bien correct, si dire que Google sera HS et gérer une fallback c’est un peu être un gaulois et avoir peur que le ciel nous tombe sur la tête, non ?
    ;)

  7. Donc si j’ajoute une vérification que le fichier est joignable, à chaque chargement d’une de vos pages, je lance une requete HTTP de plus chez Google ? Ok …

  8. C’est vrai que c’est pas mal comme ça. Par exemple, si on code dans le train en local (oui ça m’arrive =D), on n’a pas forcément Internet et il nous faut bien une version en local de jQuery.

  9. Merci beaucoup. C’est vrai que c’est agaçant de rajouter une requête mais à mon avis c’est indispensable…

  10. Le fait de faire un appel avec PHP via la fonction wp_remote_get() est extrêmement coûteux en performances/charges serveur.

    Par ailleurs, si pour une raison ou une autre, Google met du temps à répondre, ce qui est parfois le cas, tout le site se prendra le lag, au lieu du seul fichier JS.

    Il existe certain réseau d’entreprise, où un appel au CDN de Google coûte 4-5 secondes, pour des raisons diverses comme la politique de sécurité…

    Par ailleurs, ça n’est pas parce que le serveur web arrive à récupérer le JS de Google que le client web y arrivera !

    C’est la raison pour laquelle le failback que propose HTML5Boilerplate par exemple est fait en full JS !

  11. La performance n’est qu’un aspect des choses.

    Le deuxième gros problème de cette logique, c’est plutôt l’assimilation du client et du serveur au sein d’une même entité.

  12. Bon, j’ai testé et j’obtiens +8(!) sur Page Speed Grade et +2 sur YSlow Grade. Sauf que je trouve que ça ralentit l’ouverture du site… Du coup, je yoyote…

  13. Je suis d’accord pour la perf du wp_remote_get à chaque page … AUssi, si on se dit que le CDN de google est lent, alors remettons en cause tous les CDN (amazon S3, google et autres gros monstres)
    Comme tu dis, c’est une politique perso.
    Merci de ton intervention sur les perfs ;)

  14. jQuery est une grosse librairie, mieux vaut l’utiliser avec parcimonie. Si vous n’avez besoin de jQuery que pour la page home par exemple, je vous conseille d’adjoindre à ce code une petite condition is_home(). Sinon super code :) super article

  15. Merci pour cette fonction que je n’aurais su écrire vu mon niveau de débutante.

    La fonction écrit-elle une ligne du genre :

    dans le footer de toutes les pages, j’ai ajouté la fonction à function.php mais je ne vois rien dans le code source ?

    Question subsidiaire comment faire si on a aussi besoin de jQuery UI ?

    Merci d’avance pour vos conseils.
    Ce site est une mine d’or pour moi, encore merci !

  16. Bonjour,
    merci pour cela.
    L’avantage du CDN, c’est surtout qu’un navigateur peut charger simultanément au moins 2 sources (serveurs) différentes.
    D’autre part, si le visiteur a déjà visité un site ayant la même librairie (Google CDN par exemple), elle est déjà dans le cache du navigateur…

    Concernant Google qui ne répond pas, c’est déjà arrivé durant plus de 6 heures (cf. histoire avec gouvernement chinois).

  17. Bravo, bravo et encore bravo. Tellement efficace que je me demande pourquoi wordpress n’inclut pas ce code dans le core. merci, merci et encore merci ;)

f91f7ec8a067b1590b22d2cb6987d5efKKKKKKKK