Como incluir arquivos jQuery e JavaScript corretamente?

16

Estou fazendo isso agora com o seguinte código:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Isso funciona, mas devo fazer isso para todos, assim ou para todos, exceto o administrador (para que o back-end use a versão do WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Esta versão não funciona, na verdade, recebo a versão jQuery do WordPress e não a do Google.

Portanto, devo cancelar o registro do jQuery que está incluído no WordPress?

Além disso, como adiciono meus próprios scripts (scripts slider, modernizr e meu próprio custom.js) da maneira correta? Acho que devo fazer isso através do functions.php também e não no cabeçalho como estou fazendo agora, mas não tenho certeza de como faria isso.

Johan Dahl
fonte

Respostas:

20

Primeira regra geral: não cancele o registro de scripts agrupados por núcleo e substitua-os por outras versões , a menos que você esteja absolutamente certo de que nenhum tema, plug-in ou núcleo em si será interrompido devido à alteração da versão. Realmente, a menos que você precise absolutamente de uma versão alternativa de um script com pacote principal, basta usar o que está incluído no núcleo.

Em segundo lugar, eu recomendo conectar-se ao wp_enqueue_scriptsregistro e enfileiramento de scripts, em vez de init. (Ele trabalha no init, mas a partir de um play-bem-com-os-outros perspectiva, é melhor usar o gancho mais semanticamente correto.)

Terceiro, para enfileirar seus próprios scripts personalizados, use os mesmos métodos acima:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Basta adicionar os scripts que você precisa enfileirar.

Chip Bennett
fonte
4
+1 na absolutamente necessária ! Muitos temas (geralmente 'premium') registram uma versão desatualizada do jQuery. Ele quebra plug-ins.
Stephen Harris
Adicionar este script ao meu arquivo de funções (sem as declarações php, pois elas já estão lá) me dá um 'Http-error 500 (Erro interno do servidor)'. Existe algum erro em algum lugar?
Johan Dahl
Sim; houve um erro de sintaxe nas wp_enqueue_script()chamadas.
Chip Bennett
Obrigado agora funciona! No entanto, ele ainda é emitido no cabeçalho. Não é melhor se ele estiver no rodapé? Em caso afirmativo, posso modificar o código?
Johan Dahl
Você certamente pode enfileirar no rodapé. Basta definir o $in_footerparâmetro como true na sua chamada para wp_enqueue_script().
Chip Bennett
4

Espero que isso ajude, procure o codex para wp_enqueue_scriptsobter mais informações.

  1. Não use initpara enfileirar . Use wp_enqueue_scriptspara coisas de front-end e admin_enqueue_scriptspara o lado do administrador. Você pode usar initpara registrar scripts.
  2. O gancho wp_enqueue_scripts é acionado apenas no front-end (e não na página de login) - para que você não precise verificar is_admin().
  3. A menos que você tenha uma razão específica para fazer o contrário, gostaria de sugerir registrar e filas de scripts usando functions.phppara temas ou em uma outra forma plug-in. Você simplesmente coloca:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Se o objetivo é enfileirar um script quando um código de acesso é usado, convém usar wp_enqueue_scripto retorno de chamada de código de acesso para enfileirá-lo somente quando necessário (isso será impresso no rodapé desde 3.3 ).

  5. Você não deve registrar novamente o jQuery existente no lado do administrador. Você pode quebrar algo: D.

  6. Os plug-ins não devem registrar novamente o jQuery existente.

  7. Você deve avaliar os prós e os contras de registrar novamente o jQuery. Por exemplo, pode quebrar alguns plug-ins se você registrar uma versão antiga (talvez não agora, mas no futuro ...)

Stephen Harris
fonte
1
Anúncio 5) registrar novamente não importa. É por isso que obtivemos as funções enfileirar e registrar. :)
kaiser
2

Aviso justo: cancelar o registro da versão empacotada do jQuery do WP em favor de sua preferência pode causar problemas, especialmente se você não tomar cuidado extra para garantir que altera a versão para a qual está apontando sempre que o WP atualiza sua versão. Isso vale duplamente para plug-ins, que geralmente (ou frequentemente devem, pelo menos) escrevem seus plugins para obter compatibilidade máxima com a versão WP do jQuery.

Dito isto, sua primeira versão está correta - está conectada a wp_enqueue_scripts . Sua segunda função está conectada ainit , e pode ser por isso que não está funcionando corretamente.

Adicione seus próprios scripts de maneira semelhante:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Estou assumindo aqui que você está carregando scripts de um jsdiretório em seu diretório de temas atual; altere o parâmetro URI se isso não for verdade. O terceiro parâmetro array( 'jquery' )diz que isso bbg-scriptsdepende jquerye, portanto, deve ser carregado posteriormente. Consulte https://codex.wordpress.org/Function_Reference/wp_enqueue_script para obter mais detalhes.

Boone Gorges
fonte
1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Isso não vai fazer nada ... Eu suspeito que você quer dizer

if (!function_exists('load_my_scripts')) {

Seu exemplo carregará a função load_my_scripts apenas se ela já existir (o que não existe, e se não existir, isso criaria um erro)

Adão
fonte
0

Se, por motivos de desempenho, você desejar carregar o jquery e outros arquivos js principais de uma CDN, verifique se está carregando a mesma versão para evitar que coisas desagradáveis ​​ocorram nas funções principais e do plug-in. Como isso:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
cjbj
fonte
-2

Depois de verificar todos os métodos diferentes para carregar o jquery (não apenas neste post), percebi que nenhum deles faz tudo isso:

  1. Registre (e talvez enfileire) o jquery usando uma função, para que possa ser usado por plugins.
  2. Carregue-o no Google CDN com o URL relativo do protocolo.
  3. Recuar para a cópia local se o Google estiver offline.

Existem muitas versões alternativas fazendo algumas delas na lista, mas não todas, então escrevi minha versão penteando e modificando alguns dos métodos já disponíveis. Aqui está:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Para economizar largura de banda e não executar ping no Google sempre que a página é recarregada, ele se lembra se o CDN do Google está on-line ou não por 5 minutos usando a API do Wordpress Transient.

nautilus7
fonte
Não recomendado. Agora você deve atualizar o script após cada atualização do WordPress para corresponder à versão exata do jQuery que o WordPress está usando. Além disso, o Google falha ao enviar a biblioteca compactada em alguns casos; portanto, sua página está carregando mais lentamente agora.
fuxia
Eu não estou usando o jquery do wordpress. Leia o código, por favor. Estou usando a versão do tema. E se você não gosta do google, pode usar outro cdn.
Nautilus7
Mas esse é o ponto: você deve usar o jQuery do WordPress para garantir que a versão esteja correta.
fuxia
Eu não sigo você. Pego a versão que preciso do google e empacoto a mesma versão com o meu tema. É assim que todo mundo está fazendo isso. O Wordpress pode usar (na seção de administração) qualquer versão que seja fornecida.
Nautilus7
1
Você pode usar a versão que você quiser do jQuery, mas se você o estiver empacotando com um tema, estará forçando isso em seus usuários. Daqui a alguns anos, quando todo mundo estiver usando o jQuery 1.8.2, seus usuários ficarão presos a uma versão desatualizada, a menos que mantenham o tema atualizado.
7892 Chris_O