Enfileirar o jQuery principal no rodapé?


22

Eu tenho isso no meu functions.phparquivo e não consigo carregar o jQuery no rodapé. O includesarquivo carrega no rodapé bem, no entanto. O que mais eu preciso fazer?

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

Se você está fazendo isso por razões de desempenho, você poderia considerar a adição deferde suas tags de script em vez disso: matthewhorne.me/defer-async-wordpress-scripts
diachedelic

WP dev aqui, eu fiz um plugin para lidar com isso: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Respostas:


23

Para fazer isso, você primeiro precisará cancelar o registro do seu script jQuery e depois se registrar novamente. Se você usa o jQuery vem com o WordPress, a seguir é a função que você está procurando.

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

Se você usa a versão hospedada em CDN do Google do jQuery, avise-me que modificarei este código para o URL da CDN do Google.


5
O que você quer dizer? A solução é mover o jQuery para o rodapé.
Robert hue

2
Você também pode precisar de verificar is_admin () para evitar fazer alterações no backend jQuery, afinal de contas nós só realmente precisa para otimizar a interface dos nossos sites :)
Tim Malone

1
@TimMalone - na verdade, você não - wp_enqueue_scriptsé usado apenas no final da frente, enquanto admin_enqueue_scriptsé usado para back-end
dev_masta

1
Eu acho que essa solução é realmente horrível. As tags de versão são removidas com isso. O que é esse estilo de iniciante e o que é isso inclui.min.js e o que isso tem a ver com jQuery.
NextGenThemes

2
@redanimalwar estilo inicial e inclui arquivos são diretamente da pergunta.
tehlivi

43

Aqui está outra opção que evita a necessidade de cancelar o registro e registrar novamente:

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

Esta solução imita o núcleo do WordPress , definindo groupcomo 1, que é como o WordPress determina se um script deve estar no rodapé ou não (não estou ciente do motivo 1, como @jgraup observou nos comentários, parece um pouco arbitrário).


1
Interessante. Parece wp_register_scriptusos add_data( $handle, 'group', 1 )para mover scripts para o rodapé. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Você poderia expandir o porquê disso? Olhando para o seu código, 'group' parece um pouco arbitrário. Mas eu posso ver em core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… como é usado em WP_Scripts-> do_itemmais tarde. De qualquer maneira, essa parece ser a resposta menos destrutiva.
precisa saber é

2
Espero que alguém possa comentar mais sobre essas três respostas votadas. Todos são diferentes e requerem algum conhecimento de WP. Como o Google exige que esses scripts estejam abaixo da dobra, este é um tópico importante.
Ssaltman

2
Melhor resposta! Nota : ele funciona desde WordPress 4.2.0 e usá-lo em functions.php no gancho 'wp_enqueue_scripts' callback
realmag777

Olá, tentei a abordagem acima, mas não funcionou. Alguém pode ajudar?
ISaumya

1
Isso é tão bom! Muito obrigado. Mas, vale a pena notar que, como declara @tehlivi - o WP usa uma versão antiga do jQuery - considere cancelar o registro e registrar uma versão mais recente.
skolind

18

Uma solução melhor:

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

Por que é melhor que a resposta aceita IMO

  1. Altera-o no centro, não em um estágio posterior, onde outras coisas já possam ter mexido com ele.
  2. A string de versão mantida no lugar e não removida!
  3. Ele não cancela o registro e registra novamente um script, mas apenas define o valor do grupo que é essencialmente o mesmo como se o script fosse registrado $footer = true.

Sobre não fazer isso com o administrador

Se os plug-ins adicionarem o jquery embutido ao wp_head, ele falhará quando o jquery não for carregado nesse momento. Portanto, sugiro que você evite isso até ter milhões editando o site e tentando otimizar o desempenho do administrador. Isso também é válido para o front-end, portanto, você deve ficar atento a temas ou plug-ins com códigos incorretos que assumem jquery na cabeça usando o código jQuery embutido. O WP e os plugins registram outros scripts na cabeça do administrador com o jquery in deps, para que não funcione de qualquer maneira, eu acho.

Sobre isso não está funcionando

Você precisa estar ciente de que, se qualquer outro script for carregado no cabeçalho que possui o jQuery em suas dependências, ele também fará o jQuery carregar no cabeçote antes de si. E isso é bom e esperado, o motivo pelo qual o sistema wp_enqueue existe. Isso significa que você aprenderá em breve se usar alguns plugins que um deles exigirá causar jquery na cabeça. É o padrão para scripts enfileirados, infelizmente.

Solução Radical

Eu acho que ele irá travar qualquer JS embutido que assume jquery, mas isso deve ser raro. Isso forçará todos os scripts para o rodapé, independentemente de como eles estão na fila.

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

2
Embora isso possa responder à pergunta e tenha alguns pontos positivos a serem discutidos, há muito ruído (fluff?) Na resposta e é muito semelhante às respostas postadas anteriormente com pequenas melhorias no código. Pode ser mais bem recebido se for editado e reduzido a uma versão mais informativa. Também não há necessidade real de chamar usuários ou respostas específicos (pois eles podem não existir por qualquer motivo no futuro).
Howdy_McGee

Você chama um completamente não mencionado e provavelmente melhor do que qualquer coisa mencionada em outras respostas "pequenas melhorias no código". Bem, isso é simplesmente falso. Também não "chamei" ninguém, apenas mencionei fatos que sei para melhorar o estilo de codificação e educar os leitores sobre isso para fazê-los escrever um código melhor. Sério, levei um tempo para escrever a melhor resposta aqui até agora e é isso que recebo.
NextGenThemes 21/10

4
As outras respostas não mencionam nada sobre outros scripts que forçam o jQuery na cabeça, na verdade, minha resposta tira a confusão das pessoas que não sabem por que não está funcionando. Nenhuma das outras respostas menciona os riscos em potencial ...
NextGenThemes

Este código (como o código da resposta acima) retornou um erro de 500. Eu tenho o WordPress 4.9.9
Marco Panichi

Difícil de acreditar que esse código esteja causando 500, você provavelmente cometeu um erro ao implementá-lo em seu código. Este não é realmente o lugar certo para perguntar e sua versão desatualizada do WP dificilmente fornece informações suficientes.
NextGenThemes

2

Eu desenvolvi um plugin para esse problema específico. Este plugin não mexe com o jQuery do WordPress, pois é carregado apenas no front-end. Veja: jQuery Manager para WordPress

Por que mais uma ferramenta do jQuery Updater / Manager / Developer / Debugging?

Como nenhuma das ferramentas do desenvolvedor permite selecionar uma versão específica do jQuery e / ou jQuery Migrate. Fornecendo a versão compactada minified / production e a descompactada / development. Veja os recursos abaixo!

Executed Executado apenas no front-end, não interfere no administrador / back-end do WordPress e no personalizador do WP (por motivos de compatibilidade) Consulte: https://core.trac.wordpress.org/ticket/45130 e https: // core. trac.wordpress.org/ticket/37110

Ligar / desligar jQuery e / ou o jQuery Migrate

✅ Ative uma versão específica do jQuery e / ou jQuery Migrate

E muito mais! O código é de código aberto, para que você possa estudá-lo, aprender com ele e contribuir.


Quase todo mundo usa o identificador incorreto

O WordPress realmente usa o identificador jquery-core, não o 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' );

O identificador jquery é apenas um alias para carregar o jquery-core com o jquery-migrate

Veja mais informações sobre aliases: wp_register_script multiple identifiers?

A maneira correta de fazer isso

No meu exemplo abaixo, uso a CDN oficial do jQuery em https://code.jquery.com . Também uso script_loader_tag para poder adicionar alguns atributos da CDN.
Você pode usar o seguinte código:

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

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

-3

Ei, apenas altere seu código para curtir isso

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

eu acho que funciona bem

adicione estas linhas ao seu arquivo functions.php

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

então ele adiciona script no rodapé


Isso coloca o jQuery na cabeça. Eu preciso disso no rodapé.
Desi

Hey Desi por favor, verifique a resposta editada Eu acho que ajudá-lo
Amit Mishra

6
Tenho certeza de que essa é uma péssima idéia - você impediu efetivamente qualquer coisa de carregar scripts no cabeçalho, não apenas o jQuery, e pode ser um script com enfileiramento duplo (não foi tão profundo). Na verdade, você provavelmente só precisará da parte remove_action/ add_actionse quiser fazer dessa maneira.
drzaus

1
Realmente péssima idéia, não faça isso!
NextGenThemes 26/09/16
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.