Como vincular arquivos jQuery / Javascript externos ao WordPress

15

Portanto, estou usando o Starkers para basear meu próximo tema do WP e deparei-me com um pequeno problema. Incluí minha própria versão do jQuery no header.phparquivo, mas ao inspecionar meu site usando o Firebug, notei que o jquery estava sendo baixado duas vezes. Pesquisei um pouco e notei que não apenas eu estava incluindo o arquivo, mas também a wp_head()função.

Ao tentar corrigir o problema, notei um comentário no arquivo de cabeçalho, originário do tema dos vinte e dez:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Então, aqui está o meu problema: tenho a impressão de que o arquivo jQuery precisa ser definido antes de qualquer outro arquivo que queira usá-lo e que wp_head()deve ser a última coisa no <head>elemento. Estou um pouco confuso agora, como deveria estar pensando. Coloquei wp_head()na parte superior para que o arquivo jQuery incluído no WP seja usado para todos os meus plugins, mesmo que ele não o faça.

Eu comentei a linha jQuery na wp_head()função, mas é necessária para a página de administração, então tive que colocá-la de volta.

Também gostaria de usar (pelo menos experimentar) o uso da versão do Google CDN do jQuery, mas não quero incluí-la duas vezes!

Espero que você entenda o que estou tentando explicar, todas as sugestões sobre como resolver esse problema serão muito apreciadas. Também gostaria de receber algum conselho sobre como você lida com seus arquivos JavaScript com o arquivo de cabeçalho.

Obrigado!

themes customization theme-development jquery wp-head Ben Everard
fonte
Isso deve ser intitulado para algo como "Como vincular arquivos jQuery / Javascript externos ao WordPress".
MikeSchinkel
Eu concordo, eu não sabia o que chamá-lo como eu não estava muito familiarizado com o problema que tive :-)
Ben Everard

Respostas:

9

Na redação da sua pergunta, você deve adicionar scripts escrevendo <script>tags no seu modelo. Adicione seus próprios scripts wp_enqueue_script()nos moldes functions.php, configurando dependências apropriadamente no jQuery e wp_head()adicionará os scripts para você.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Veja a página do codex para mais informações.

Annika Backstrom
fonte
Você está certo ao pensar que estou adicionando scripts usando a <script>tag, esta é a alternativa que eu estava procurando, muito obrigado! :-)
Ben Everard
3
Se você deseja adicionar seu script apenas no front end, conecte-o ao 'template_redirect'invés de 'init'.
John P Bloch
Coisas boas, vou atualizar minha resposta. Eu quase sugeri envolver o enfileiramento is_admin().
Annika Backstrom
Geralmente, enfileiro os scripts no arquivo de modelo acima do get_header(), fazendo- functions.phpo enfileirá-lo em todas as páginas que podem não ser necessárias. Se eu tiver um global, enfileirá-lo header.phpantes de wp_head()ser chamado. Dessa forma, os enfileiramentos estão onde você esperaria que eles estivessem no<head>
Joe Hoyle
Às vezes, é melhor adicionar scripts na parte inferior da página. É o último parâmetro de codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), defina-o como true. Pouca informação para quem precisa de mais controle.
hakre 18/08/10
7

Sugiro dar uma olhada em 5 dicas para usar o jQuery com WordPress . Entre outras coisas, mostra o código necessário para carregar o jQuery da biblioteca do Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Você também pode conferir o plug-in Usar bibliotecas do Google .

Travis Northcutt
fonte
1
Essa é, na verdade, uma resposta melhor, pois mostra como enfileirar a versão do Google CDN do jQuery. Porém, como John sugeriu em outro lugar, se você quiser fazer isso apenas no front-end, ligue-o ao template_redirectinvés de init.
EAMann
Bom ponto sobre onde ele carrega. Embora realmente, a área administrativa também use o jQuery, certo? De qualquer forma, obrigado por mostrar como controlá-lo.
Travis Northcutt
Sim, acabei de encontrar as 5 dicas para o post jquery / wp, obrigado pela sua resposta :-) #
555 Ben Benard
5 dicas para usar o jQuery com WordPress - o link não está mais funcionando.
hakre
NOTA: O exemplo inclui uma versão "mais antiga" do jQuery, a versão atual do WP (3.0.1) está executando o jQuery 1.4.2 ...
t31os
1

Embora @tnorthcutt esteja certo de que você deve desenfileirar adequadamente o jquery nativo do WP, se desejar carregar o seu próprio, você certamente encontrará problemas ao carregar uma versão jquery diferente do núcleo do WP. Tanto o núcleo quanto os plugins dependem de ele estar lá. Portanto, se você não atualizar seu tema com o jquery mais novo toda vez que o WP for atualizado, seu site poderá ser interrompido.

O código a seguir garantirá que seu tema sempre carregue a versão correta do jquery, procurando primeiro qual versão o WP está usando e depois carregando a versão do Google:

$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