Mettre à jour la version de jquery

Question

Mettre à jour la version de jquery

- 32
- 51026 2017-02-21
Je lance la version 4.7.2 de WordPress.etil utilisejQuery version 1.12.J'aibesoin demettre àjour cette version vers une version supérieure.Je l'ai remplacépar unenouvelle version avant,mais lorsqueje mets àniveau le cœur de WordPress,ilest ànouveau remplacépar 1.12. Commentpuis-je changer la version dejQuery que WordPress utiliseen permanence?

I run WordPress version 4.7.2. and it uses jQuery version 1.12. I need to update this version to a higher one. I replaced it with a new version before, but when I upgrade WordPress core it is replaced with 1.12 again. How can I change the version of jQuery that WordPress uses permanently?

jquery

2 réponses

votes

12

2019-07-01

J'ai développé unpluginpour ceproblème spécifique. Lepluginne jouepas avec WordPressjQuery cariln'est chargé que dans lefront-end. Voir: jQuery Managerpour WordPress

Pourquoi un autre outiljQuery Updater/Manager/Developer/Debugging?

Parce qu'aucun des outils de développementne vouspermet de sélectionner un version dejQueryet/oujQuery Migrate. Fournir à lafois laproduction et la versionminifiée. Voir lesfonctionnalités ci-dessous!

✅ Uniquementexécuté dans lefront-end,n'interfèrepas avec WordPress admin/backendet 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 jQueryet/oujQuery Migrate

✅ Activez une version spécifique dejQueryet/oujQuery Migrate

Etbien plusencore! Le codeest open source,vouspouvez donc étudier ,apprenez-enet contribuez.

Presquetout lemonde utilise unepoignéeincorrecte

WordPress utiliseen fait le handlejquery-core,pasjquery:

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 descripteur jquery estjuste un aliaspour charger jquery-core avec jquery-migrate

En savoirplus sur alias: wp_register_scriptplusieursidentificateurs?

Labonnefaçon deprocéder

Dansmonexemple ci-dessous,j'utilise le CDNjQuery officiel à https://code.jquery.com Je utilisez script_loader_tag pour queje puisse ajouter des attributs CDN.
Vouspouvez 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 );

I have developed a plugin for this specific problem. The plugin doesn't mess with WordPress jQuery as it is only loaded in the front-end. See: jQuery Manager for WordPress

Why yet another jQuery Updater / Manager / Developer / Debugging tool?

Because none of the developer tools lets you select a specific version of jQuery and/or jQuery Migrate. Providing both the production and the minified version. See features below!

✅ Only executed in the front-end, doesn't interfere with WordPress admin/backend and WP customizer (for compatibility reasons) See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110

✅ Turn on/off jQuery and/or jQuery Migrate

✅ Activate a specific version of jQuery and/or jQuery Migrate

And much more! The code is open source, so you could study it, learn from it and contribute.

Almost everybody uses the incorrect handle

WordPress actually uses the jquery-core handle, not 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' );
The jquery handle is just an alias to load jquery-core with jquery-migrate

See more info about aliases: wp_register_script multiple identifiers?

The correct way to do it

In my example below I use the official jQuery CDN at https://code.jquery.com I also use script_loader_tag so that I could add some CDN attributes.
You could use the following code:

// 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 );

Fayaz · Accepted Answer · 2017-02-21

38

2017-02-21

<₹Avertissement : Vousne devezpas remplacer la versionprincipale dejQuery,en particulier dans lepanneau d'administration . Étant donné que denombreusesfonctionnalités debase de WordPresspeuvent dépendre de la version. Deplus,d'autrespluginspeuvent dépendre de la version jQuery ajoutée dans lenoyau.

Si vous êtes sûr de vouloir changer la versionprincipale de jQuery,dans ce cas,vouspouvez ajouter le CODE suivant dans lefichier functions.php de votrethème actif (mêmemieux si vous créez unpluginpour cela):

 function replace_core_jquery_version() {
    wp_deregister_script( 'jquery' );
    // Change the URL if you want to load a local copy of jQuery from your own server.
    wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
}
add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

Cela remplacera la versionprincipale de jQueryet chargera à laplace la version 3.1.1 depuis le serveur de Google.

Deplus,bien que ne soitpas recommandé ,vouspouvez également utiliser la ligne supplémentaire suivante de CODEpour remplacer la versionjQuery dans wp-admin également :

 add_action( 'admin_enqueue_scripts', 'replace_core_jquery_version' );

De cettefaçon,même après lamise àjour de WordPress,vous aurez la version de jQuery comme vous le souhaitez.

Unefonction légèrementmeilleure:

Lafonction replace_core_jquery_version ci-dessus supprime également le script jquery-migrate ajoutépar lenoyau WordPress. Ceciest raisonnable,car la dernière version dejQueryne fonctionnerapas correctement avec une ancienne version de jquery-migrate. Cependant,vouspouvez égalementinclure une versionplus récente de jquery-migrate. Dans ce cas,utilisezplutôt lafonction suivante:

 function replace_core_jquery_version() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
    wp_deregister_script( 'jquery-migrate' );
    wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
}

Warning: You shouldn't replace core jQuery version, especially in the admin panel. Since many WordPress core functionality may depend on the version. Also, other plugin may depend on the jQuery version added in the core.

If you are sure that you want to change the core jQuery version, in that case you may add the following CODE in your active theme's functions.php file (even better if you create a plugin for this):

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery' );
    // Change the URL if you want to load a local copy of jQuery from your own server.
    wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
}
add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

This will replace core jQuery version and instead load version 3.1.1 from Google's server.

Also, although not recommended, you may use the following additional line of CODE to replace the jQuery version in wp-admin as well:

add_action( 'admin_enqueue_scripts', 'replace_core_jquery_version' );

This way, even after updating WordPress, you'll have the version of jQuery as you want.

A slightly better function:

The replace_core_jquery_version function above also removes jquery-migrate script added by WordPress core. This is reasonable, because the newest version of jQuery will not work properly with an older version of jquery-migrate. However, you can include a newer version of jquery-migrate as well. In that case, use the following function instead:

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
    wp_deregister_script( 'jquery-migrate' );
    wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
}

Pouvez-vous simplement supprimer l'action defunctions.php si voustrouvez qu'elle casse votrethème?Va-t-il revenir à la version originale dejQuery ou s'agit-il d'un changementpermanent?

Can you just remove the action from functions.php if you find that it breaks your theme? Will it revert back to the original jQuery version or is this a permanent change?
- 0
- 2018-08-23
- Nick
Si lafonction de rappel de l'action `wp_enqueue_scripts`ne met àjour quejQueryet quejQueryestmisen file d'attente ailleurs,la suppression de l'action restaurerajQuery d'origine.Cependant,parfois,lesnavigateursmettent en cache l'ancien CODE,en fonction desparamètres de cache du serveur.Vous devrez donc vider le cache dunavigateur après avoirfait celapour voir le changement.

If the callback function of the `wp_enqueue_scripts` action only updates jQuery and jQuery is being enqueued from somewhere else, then removing the action will restore original jQuery. However, sometimes browsers cache old CODE, depending on server cache settings, So, you'll need to clear browser cache after you do that to see the change.
- 1
- 2018-08-23
- Fayaz
okmerci,je voulaisjustem'assurer dene pas avoirbousillémon site avant d'ajouter cette action.J'avais le sentiment que ce que vous avez ditestexact,maisje voulaisjouer la sécurité.

ok thanks i just wanted to make sure i didn't screw up my site before adding this action. I had a feeling what you said is accurate but I wanted to play it safe.
- 0
- 2018-08-23
- Nick
Cen'est évidemment **paspermanent **,car ce changement dépend du CODE lui-même,rienn'estenregistré sur labase de données.Ainsi,la suppression du CODE associé reviendra à l'ancien état.

This is obviously **not permanent**, as this change depends on the CODE itself, nothing is saved on the database. So removing the related CODE will revert back to old the state.
- 1
- 2018-08-23
- Fayaz
Le script demigrationpour les versions 3.xne fonctionnepas lorsque lesplugins/thèmes attendent une versioninférieure à 1.12.Plus à ce sujetici: https://wordpress.stackexchange.com/a/244543/75495

The migrate script for 3.x versions does not work when plugins/themes expect a version below 1.12. More about that here: https://wordpress.stackexchange.com/a/244543/75495
- 0
- 2018-10-24
- cjbj
@cjbjbien sûr,c'est le cas.Cependant,la questionportait sur l'abandon de "1.12",donc évidemment la réponsene couvrepas cela.

@cjbj of course that's the case. However, the question was about ditching `1.12`, so obviously the answer doesn't cover that.
- 0
- 2018-10-24
- Fayaz
Malheureusement,ne semblepasfonctionner dans WordPress 5. L'ancien Jqueryest déchargé,mais lenouveaun'estpas chargé.

Sadly, does not appear to work in WordPress 5. The old Jquery is unloaded, but the new is not loaded.
- 0
- 2020-03-05
- TelFiRE