web-dev-qa-db-fra.com

Comment contrôler la version de jQuery à inclure, avec wp_enqueue_script

J'utilise un script basé sur jQuery. Je ne mets donc pas directement en file d'attente jQuery, mais en le passant dans le tableau des scripts dépendants:

 wp_enqueue_script("jquery-plugin-name",'http://hostname.il/blogname/wp-content/themes/twentyten/js/jquery-plugin-name.js', array('jquery'), '1');

Cela charge jQuery v1.4.4, et pèse 76 Ko, ce qui semble très lourd, bien que le fichier ait l'air compressé.

J'ai 2 questions:

  1. Existe-t-il un moyen de charger la dernière version de jQuery?
  2. Comment puis-je m'assurer que le fichier chargé est minifié?
jquerywp-enqueue-script
3
Lea Cohen

C'est la taille du jQuery minified de nos jours :)

Vous pouvez charger la dernière version de Google:

wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"), false, '1.8.2');

N'oubliez pas que cela peut entraîner des problèmes, car vous forcez WordPress à charger une certaine version de jQuery au lieu de la version fournie. Il existe des plugins adaptés à vos besoins, tels que WP JQuery Plus , qui vous permettent de charger le même numéro de version que WordPress, mais avec l’avantage de le charger à partir de Google.

1
onetrickpony

Ne modifie pas la version de jQuery mise en file d'attente par WordPress.

Juste ne le fais pas. Le noyau dépend d'une version spécifique. Les thèmes et les plugins dépendent d'une certaine version. Cette certaine version est la version fournie avec une version donnée de WordPress}.

Si vous devez effectuer une minification, une compression ou une concaténation de script, vous pouvez certainement le faire (vous pouvez lancer le vôtre, ou utiliser un plugin, tel que W3 Total Cache , pour le faire à votre place.)

Mais comme vous pouvez le constater: si vous avez un fichier de 46 ko, vous avez déjà affaire à une combinaison de minification et de compression .

2
Chip Bennett

J'ai développé un plugin pour ce problème spécifique. Ce plugin ne plaisante pas avec WordPress jQuery car il est uniquement chargé dans le front-end. Voir: jQuery Manager pour WordPress

Pourquoi encore un autre outil Updater/Manager/Developer/Debugging de jQuery?

Parce qu'aucun des outils de développement ne vous permet de sélectionner une version spécifique de jQuery et/ou de jQuery Migrate. Fournir à la fois la version de production et la version simplifiée. Voir les caractéristiques ci-dessous!

Uniquement exécuté dans le frontal, n'interfère pas avec l'admin/backend de WordPress ni WP customizer (pour des raisons de compatibilité) Voir: https: //core.trac. wordpress.org/ticket/45130 et https://core.trac.wordpress.org/ticket/37110

✅ Activer/désactiver jQuery et/ou jQuery Migrate

Activer une version spécifique de jQuery et/ou jQuery Migrate

Et beaucoup plus! Le code est open source, vous pouvez donc l'étudier, en tirer des leçons et contribuer.


Presque tout le monde utilise la mauvaise poignée

WordPress utilise en réalité le handle jquery-core, pas jquery:

https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

Le jquery handle est juste un alias à charger jquery-core avec jquery-migrate

Plus d’informations sur les alias: wp_register_script identificateurs multiples?

La bonne façon de le faire

Dans l'exemple ci-dessous, j'utilise le CDN officiel de jQuery sur https://code.jquery.com J'utilise également script_loader_tag pour pouvoir ajouter des attributs CDN.
Vous pouvez utiliser le code suivant:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    // jQuery
    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see https://wordpress.stackexchange.com/questions/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * https://wordpress.stackexchange.com/questions/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * https://stackoverflow.com/questions/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
         */
        wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );


function add_jquery_attributes( $tag, $handle ) {
    if ( 'jquery-core' === $handle ) {
        return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );
2
Remzi Cavdar