Enqueue core jQuery dans le pied de page?

22

J'ai ceci dans mon functions.phpfichier et je ne peux pas charger jQuery dans le pied de page. Les includescharges de fichiers dans le pied de page, bien cependant. Que dois-je faire d'autre?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
Desi
la source
Si vous faites cela pour des raisons de performances, vous pouvez deferplutôt ajouter à vos balises de script: matthewhorne.me/defer-async-wordpress-scripts
diachedelic
WP dev ici, j'ai fait un plugin pour gérer ça: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Réponses:

23

Pour ce faire, vous devrez d'abord annuler l'enregistrement de votre script jQuery, puis vous enregistrer à nouveau. Si vous utilisez jQuery fourni avec WordPress, voici la fonction que vous recherchez.

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

Si vous utilisez la version hébergée par Google CDN de jQuery, faites-moi savoir que je modifierai ce code pour l'URL de Google CDN.

Robert hue
la source
5
Que voulez-vous dire? La solution consiste à déplacer jQuery en pied de page.
Robert hue
2
Vous devrez peut-être également vérifier is_admin () pour éviter de modifier le backend jQuery, après tout, nous n'avons vraiment besoin d'optimiser le frontend de nos sites :)
Tim Malone
1
@TimMalone - en fait, vous ne le faites pas - wp_enqueue_scriptsest utilisé uniquement sur le front-end alors qu'il admin_enqueue_scriptsest utilisé pour le back-end
dev_masta
1
Je pense que cette solution est en fait horrible. Les balises de version sont supprimées avec cela. Qu'est-ce que ce style de démarrage et c'est-à-dire includes.min.js et qu'est-ce que cela a à voir avec jQuery.
NextGenThemes
2
@redanimalwar starter-style et comprend des fichiers proviennent directement de la question.
tehlivi
43

Voici une autre option qui évite d'avoir à se désinscrire et à se réinscrire:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );

Cette solution de base de mimiques en mettant l' groupà 1, ce qui est de savoir comment WordPress détermine si un script doit être dans le pied de page ou non (je ne suis pas au courant du raisonnement 1, comme @jgraup indiqué dans les commentaires il semble arbitraire bits).

Matthew Boynes
la source
1
Intéressant. Il ressemble à des wp_register_scriptutilisations add_data( $handle, 'group', 1 )pour déplacer des scripts dans le pied de page. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Pourriez-vous nous expliquer pourquoi? En regardant votre code, «groupe» semble un peu arbitraire. Mais je peux voir dans core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… comment il est utilisé dans WP_Scripts-> do_itemplus tard. Quoi qu'il en soit, cela semble être la réponse la moins destructrice.
jgraup
2
J'espère que quelqu'un pourra commenter davantage ces trois réponses positives. Tous sont différents et nécessitent une certaine connaissance de WP. Étant donné que Google exige que ces scripts soient en dessous de la ligne de flottaison, il s'agit d'un sujet important.
ssaltman
2
Meilleure réponse! Remarque : il fonctionne depuis WordPress 4.2.0 et l'utilise dans functions.php dans le rappel 'wp_enqueue_scripts' du crochet
realmag777
Salut, j'ai essayé l'approche ci-dessus, mais cela n'a pas fonctionné. Quelqu'un peut-il aider?
iSaumya
1
C'est tellement bon! Merci beaucoup. Mais, il convient de noter que, comme @tehlivi l'indique - WP utilise une ancienne version de jQuery - envisagez de désenregistrer et d'enregistrer une version plus récente.
skolind
18

Une meilleure solution:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

Pourquoi c'est mieux que la réponse acceptée OMI

  1. Le change au cœur même pas à un stade ultérieur où d'autres choses pourraient déjà être gâchées.
  2. La chaîne de version est restée en place et n'a pas été supprimée!
  3. Il ne désenregistre pas et ne réenregistre pas un script, mais il définit simplement la valeur de groupe qui est essentiellement la même que si le script était enregistré avec $footer = true.

À propos de ne pas faire cela à l'administrateur

Si les plugins ajoutent jquery en ligne à wp_head, il échouera lorsque jquery n'est pas chargé à ce stade, je vous suggère donc d'éviter cela jusqu'à ce que des millions de personnes modifient votre site et que vous essayez d'optimiser les performances de votre administrateur. Cela est également vrai pour le frontend, vous devez donc faire attention aux mauvais thèmes codés ou aux plugins qui supposent jquery dans la tête en utilisant du code jQuery en ligne. WP et les plugins enregistrent d'autres scripts dans la tête d'administration avec jquery en deps donc ça ne marcherait pas de toute façon je pense.

À ce sujet ne fonctionne pas

Vous devez être conscient que si un autre script est chargé dans la tête qui a jQuery dans ses dépendances, il fera également charger jQuery dans la tête juste avant lui-même. Et c'est bon et attendu, la raison pour laquelle le système wp_enqueue existe. Cela signifie que vous apprendrez bientôt si vous utilisez quelques plugins que l'un d'entre eux nécessitera une requête en tête. C'est la valeur par défaut pour les scripts mis en file d'attente, malheureusement.

Solution radicale

Je pense que cela freinera tout JS en ligne qui suppose jquery mais cela devrait être rare. Cela forcera tous les scripts au pied de page, quelle que soit la façon dont ils sont mis en file d'attente.

add_action( 'wp_enqueue_scripts', 'js_to_footer' );

function js_to_footer() {
  remove_action( 'wp_head', 'wp_print_scripts' );
  remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
  remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}
NextGenThemes
la source
2
Bien que cela puisse répondre à la question et avoir de bons points à mâcher, il y a trop de bruit (fluff?) Dans la réponse et est très similaire aux réponses précédemment publiées avec des améliorations de code mineures. Il pourrait être mieux accueilli s'il était édité et réduit en une version plus informative. Il n'est pas non plus vraiment nécessaire d'appeler des utilisateurs ou des réponses spécifiques (car ils pourraient ne pas exister pour une raison quelconque à l'avenir).
Howdy_McGee
Vous appelez un complètement non mentionné et probablement mieux que tout ce qui est mentionné dans les autres réponses "améliorations mineures du code". C'est tout simplement faux. De plus, je n'ai "appelé" personne, je viens de mentionner des faits que je connais pour améliorer le style de codage et éduquer les lecteurs à ce sujet afin de leur faire écrire un meilleur code. Sérieusement, j'ai pris un certain temps pour écrire la meilleure réponse jusqu'ici et c'est ce que j'obtiens.
NextGenThemes
4
Les autres réponses ne mentionnent rien sur les autres scripts forçant le jQuery à la tête, en fait ma réponse éloigne la confusion des gens qui ne savent pas pourquoi cela ne fonctionne pas. Aucune des autres réponses ne mentionne les risques potentiels ...
NextGenThemes
Ce code (comme le code de la réponse ci-dessus) m'a renvoyé une erreur de 500. J'ai WordPress 4.9.9
Marco Panichi
Difficile de croire que ce code provoque un 500, vous avez probablement fait une erreur en l'implémentant dans votre code. Ce n'est pas vraiment le bon endroit pour demander et votre version WP obsolète est à peine assez d'informations.
NextGenThemes
2

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

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

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

✅ Uniquement exécuté dans le front-end, n'interfère pas avec l'admin / backend WordPress et le personnalisateur WP (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 enseignements et y contribuer.


Presque tout le monde utilise la mauvaise poignée

WordPress utilise en fait le handle jquery-core, pas jquery:

https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

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

Le descripteur jquery est juste un alias pour charger jquery-core avec jquery-migrate

Voir plus d'informations sur les alias: wp_register_script identifiants multiples?

La bonne façon de le faire

Dans mon exemple ci-dessous, j'utilise le CDN jQuery officiel 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 /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/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 );
Remzi Cavdar
la source
0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}
samjco
la source
-3

Hé, changez seulement votre code pour aimer ça

function starter_scripts() {
        wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'starter_scripts' );

je pense que ça marche bien

ajoutez ces lignes dans votre fichier functions.php

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

puis il ajoute un script dans le pied de page

Amit Mishra
la source
Cela met jQuery dans la tête. J'en ai besoin dans le pied de page.
Desi
Hé Desi s'il vous plaît vérifier la réponse modifiée, je pense que cela vous aide
Amit Mishra
6
Je suis à peu près sûr que c'est une idée terrible - vous avez effectivement empêché quoi que ce soit de charger des scripts dans l'en-tête, pas seulement jQuery, et pourrait être des scripts à double mise en file d'attente (n'ont pas regardé aussi profondément). En fait, vous n'avez probablement besoin de la partie remove_action/ que add_actionsi vous voulez le faire de cette façon.
drzaus
1
En effet terrible idée, ne faites pas ça!
NextGenThemes