web-dev-qa-db-fra.com

Comment remplacer les appels jquery classiques par des appels CDN de Google?

J'aimerai implémenter quelques-unes des fonctionnalités du modèle standard dans l'une de mes instances WordPress.

J'essaie de comprendre comment échanger les appels réguliers jQuery ci-dessous

<script type='text/javascript' src='http:/.../wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://.../wp-includes/js/jquery/ui.core.js?ver=1.8.9'></script>

pour ça:

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
javascriptcdn
5
Geo

Vous devriez charger jQuery avec wp_enqueue_script('jquery') - de cette façon, vous ne vous retrouverez pas avec plusieurs instances si les plugins essaient de le charger aussi.

Pour utiliser Google CDN, placez-le dans votre functions.php;

wp_deregister_script( 'jquery' );
wp_register_script(
    'jquery',
    'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 
    null, // Dependencies - none
    null  // Version - use null to prevent WP adding version argument "?ver" in URL
);

Mise à jour: Personnellement, et je sais que cela ressemble à une échappatoire, mais je ne me soucierais pas de vérifier le CDN. Google est tellement fiable, et il est plus que probable qu'il soit déjà dans la mémoire cache du navigateur de l'utilisateur (de nombreux sites utilisent donc le CDN de Google).

Cependant , dans mon devoir de répondre, vous avez l'une des deux options;

  1. Vérifiez le côté serveur avec un get distant, et si cela échoue, servez la copie locale (coûteuse et non recommandée)
  2. Exécutez un script côté client qui vérifie jQuery et imprime le repli si nécessaire

Le problème avec 2) est que vous devez injecter ce script juste après jQuery, et avant tout autre plugin qui en dépend, lance ses scripts. Le seul moyen de le savoir, c’est d’écouter jQuery, puis de générer le code JavaScript lors du prochain appel.

La magie? Déposez ceci dans votre functions.php;

/**
 * Print fallback script right after jQuery is printed from queue.
 *
 * @param   string $src
 * @return  string
 */
function wpse_12448_fallback_jquery( $src, $handle = null ) {
    static $run_next = false;

    if ( $run_next ) {
        // Defaults to WP bundled jQuery, but you should use your own that
        // matches the version loaded via CDN.
        $local = includes_url( 'js/jquery/jquery.js' );

        echo <<<JS
<script>window.jQuery || document.write( '<script src="$local"></script>' );</script>

JS;
        $run_next = false;
    }

    if ( $handle === 'jquery' )
        $run_next = true;

    return $src;
}

add_action( 'wp_head', 'wpse_12448_fallback_jquery', 2 );
if ( ! is_admin() )
    add_filter( 'script_loader_src', 'wpse_12448_fallback_jquery', 10, 2 );

Pour ceux qui sont au courant, ceci est également lié à wp_head juste après que wp_print_scripts se soit déclenché, au cas où il n'y aurait plus de scripts à imprimer après jquery (la fonction fonctionne sur l'appel next plutôt que le par exemple, il est appelé avec jQuery).

15
TheDeadMedic

Pour Wordpress 4.5.0 + : wp_add_inline_script()#

function jquery_enqueue_with_fallback() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery' , '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1', true );
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.esc_url(get_template_directory_uri()).'/libs/js/jquery.js"><\/script>\')' );
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts' , 'jquery_enqueue_with_fallback' );

Remarque: _ Modifie la version et votre propre source jQuery locale.

2
l2aelba

Deux choses à garder à l'esprit à propos de cette réponse:

  • Ne faites jamais cela dans un plugin ou un thème pour la publication.
  • Les plugins WordPress reposent sur la bonne version de jQuery, c’est pourquoi je n’utilise pas jQuery 3 ni les numéros de version à codage en dur. Au lieu de cela, je laisse WordPress définir le numéro de version de la version chargée à partir du CDN.

`` `

add_action( 'init', function(){
    //Only act if in admin
    if (  ! is_admin()) {
        //set protocol dynamically
        if( is_ssl() ){
            $protocol = 'https';
        }else {
            $protocol = 'http';
        }

        /** @var WP_Scripts $wp_scripts */
        global  $wp_scripts;
        /** @var _WP_Dependency $core */
        $core = $wp_scripts->registered[ 'jquery-core' ];
        $core_version = $core->ver;
        $core->src = "$protocol://ajax.googleapis.com/ajax/libs/jquery/$core_version/jquery.min.js";

        ///Use jQuery migrate if WP_DEBUG
        if ( WP_DEBUG ) {
            /** @var _WP_Dependency $migrate */
            $migrate         = $wp_scripts->registered[ 'jquery-migrate' ];
            $migrate_version = $migrate->ver;
            $migrate->src    = "$protocol://cdn.jsdelivr.net/jquery.migrate/$migrate_version/jquery-migrate.min.js";
        }else{
            /** @var _WP_Dependency $jquery */
            $jquery = $wp_scripts->registered[ 'jquery' ];
            $jquery->deps = [ 'jquery-core' ];
        }

    }


}, 11 );

`` `

Notez que j'utilise toujours le système de gestion des dépendances de WordPress. En outre, définit HTTPS vs HTTP à l'aide de is_ssl() pour éviter les erreurs de contenu mixte et permet à WordPress de dicter le numéro de version.

2
JPollock