Como incluir arquivos jQuery e JavaScript corretamente?

13

Estou fazendo 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, como este, 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, eu recebo o WordPress jQuery-version e não o Google.

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

Além disso, como adiciono meus próprios scripts (scripts de controle deslizante, modernizr e meu próprio custom.js) da maneira correta? Eu acho que eu deveria fazer isso via functions.php também e não no cabeçalho como estou fazendo agora, mas não tenho certeza de como eu faria isso.

    
por Johan Dahl 13.03.2012 / 15:28

6 respostas

18

Primeira regra prática: não cancele o registro dos scripts principais e substitua-os por outras versões , a menos que você esteja absolutamente certo de que nenhum tema, plug-in ou próprio núcleo falhará devido à mudança de versão. Realmente, a menos que você precise absolutamente de uma versão alternativa de um script principal, use apenas o que é fornecido com o núcleo.

Em segundo lugar, é altamente recomendável conectar-se a wp_enqueue_scripts para registrar e enfileirar scripts, em vez de init . (Ele funciona em init , mas a partir de uma perspectiva reproduzir-com-os-outros , é melhor usar o gancho mais semanticamente correto.)

Em terceiro lugar, 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 necessários para enfileirar.

    
por Chip Bennett 13.03.2012 / 15:46
4

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

  1. Não use init para enfileirar . Use wp_enqueue_scripts para material front-end e admin_enqueue_scripts para o lado do administrador. Você pode usar os scripts init para registrar .
  2. O gancho wp_enqueue_scripts só dispara no front-end (e não no log-in) - assim você não precisa verificar is_admin() .
  3. A menos que você tenha um motivo específico para fazer o contrário, sugiro registrar e enfileirar scripts usando functions.php para temas ou em um plug-in de outra forma. Você simplesmente coloca:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
    
  4. Se o objetivo for enfileirar um script quando um código de acesso for usado, talvez você queira usar wp_enqueue_script no retorno de chamada de código curto para enfileirá-lo somente quando necessário (isso imprimirá no rodapé 3.3 ).

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

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

  7. Você deve avaliar os prós e 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 ...)

por Stephen Harris 13.03.2012 / 15:47
2

Aviso justo: cancelar o registro da versão empacotada do WP em seu próprio site pode causar problemas, especialmente se você não for cuidadoso para mudar a versão para a qual você está apontando sempre que o WP atualizar sua versão. Isso vale duplamente para plugins, que frequentemente (ou frequentemente deveriam, pelo menos) escrever seus plugins para compatibilidade máxima com a versão WP do jQuery.

Dito isso, sua primeira versão está correta - ela está vinculada a wp_enqueue_scripts . Sua segunda função é conectada a init , o que pode ser o motivo pelo qual ela 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 diretório js 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 bbg-scripts depende de jquery e, portanto, deve ser carregado posteriormente. Veja enlace para mais detalhes.

    
por Boone Gorges 13.03.2012 / 15:42
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 só carregará a função load_my_scripts se ela já existir (o que não é o caso, e se isso ocorrer, criaria um erro)

    
por Adam 13.03.2012 / 16:46
0

Se, por motivos de desempenho, você quiser carregar o jquery e outros arquivos js principais de um CDN, verifique se está carregando a mesma versão para evitar que coisas desagradáveis aconteçam com as funções do núcleo e do plug-in. Assim:

$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');
    
por cjbj 31.10.2016 / 10:17
-2

Após verificar todos os diferentes métodos 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 a partir do CDN do Google com o URL relativo ao protocolo.
  3. Retornar à cópia local se o Google estiver off-line.

Existem muitas versões alternativas que fazem algumas delas na lista, mas não todas, então escrevi minha versão combinando 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 poupar largura de banda e não fazer ping no Google sempre que a página é recarregada, ela lembra se o Google CDN está on-line ou não por cinco minutos usando a API transitória do Wordpress.

    
por nautilus7 06.05.2012 / 17:03