Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos 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 :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
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' );
[/pastacode]
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 !
Article écrit par Julio P.
Youtube
Twitter
Facebook
26 Commentaires
Est-ce que c’est encouragé de le faire ? Là est la vraie question :-)
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…
@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.
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 !
Bonne idée.
Cependant il faut prévoir un fallback vers la librairie en local au cas ou le CDN de Google ne serait pas ou plus disponible.
En effet ! J’attends le code remanié avant de le tester :-)
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 ….
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.
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 ?
;)
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 …
EDIT : code mis à jour !
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.
Pas bête, allez je valide ^^ Merci
@Julio : C’est nous qui te remercions :)
Merci beaucoup. C’est vrai que c’est agaçant de rajouter une requête mais à mon avis c’est indispensable…
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 !
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é.
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…
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 ;)
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
Merci, j’ai gagné quelque milliseconde de chargement :)
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 !
Il fonctionne très bien. Merci pour cette bonne info.
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).
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 ;)
@WebMat: C’est avec plaisir :)