Como utilizar javascript no WordPress de forma correta?
Muitos desenvolvedores, ao criar seus temas, fazem chamadas para arquivos javascript da forma errada, não seguindo o padrão que o WordPress recomenda. Vamos aprender esse padrão? Vem comigo 😉
Dois problemas enquanto estiver usando JavaScript em Projetos WordPress
Existem basicamente dois problemas importantes que você pode encontrar se você injetar arquivos JavaScript diretamente no WordPress com código HTML:
- Duplicação de códigos na mesma página: Digamos que você criou um plugin para o WordPress e você deseja inclui o jQuery. Você imprime a tag de script apropriada e funciona! Mas e se um outro plugin quer usar jQuery também – como é que ele saberia que o jQuery já está carregado na <head>? Não saberia, e mesmo se outro plugin jQuery inclui o caminho certo, a página ainda teria duas instâncias do jQuery, o que pode gerar conflitos.
- Problemas com tradução: Vamos dizer que você está criando uma galeria lightbox e você precisa passar strings como “Próximo”, “Anterior” e “Imagem X de Y”. Como você faz isso sem imprimir linhas de JavaScript na <head> ?
A maneira correta de usar Javascript no WordPress
A solução para o primeiro problema é simplesmente registrar os javascripts da maneira correta e pré-carregar todos os arquivos Js chamados de maneira certa também. com duas funções: wp_register_script() e wp_enqueue_script().
A solução para o segundo problema é simples: A função wp_localize_script() permitee passar dados traduzíveis em seu código JS.
Registrando arquivos JavaScript
Antes de pré-carregar the JavaScript files, você deve os registrar. E isso é simples usando a função wp_register_script():
<?php wp_register_script( $nome, $url, $dependencias, $versao, $carregar_no_rodape ); ?>
Alguns dos parâmetros:
- Nome (string, valor obrigatório): Nome do script. Você pode escolher o nome que quiser, se certificando que tal nome não está sendo usado por nenhum outro script.
- URL (string, valor obrigatório): A URL do script.
- Dependências (array, opcional): Nome de outros scripts que dependem deste. Por exemplo, se seu script depende do jQuery, ele precisará ser carregado após o jQuery. Neste caso, você deve usar array (‘jquery’) para este parâmetro.
- Versão (string, opcional): O número da versão para o seu script. Você pode escolher entre passar uma string, definindo o parâmetro como nulo ou deixá-lo vazio. Se você configurá-lo para string, que vai ser adicionado ao que vai ser impresso como my-script.js?ver = 1.2. Se você deixar o parâmetro vazio, a versão da sua instalação do WordPress será adicionado como o número da versão. Se você configurá-lo para null, nada será adicionado.
- Carregar no rodapé (booleano, opcional): Quando você pré-carregar este script registrado, ele será carregado na seção <head>. Mas se você definir esse parâmetro como true, ele será carregado logo antes do fechamento da tag <body>.
Voce também pode “desregistrar” scripts que já forem registrados pelo core do WordPress ou por outros plugins com a função wp_deregister_script(). Só é necessário o parâmetro ‘nome’, passando o nome do script registrado, claro.
Você pode checar o estado de um script com a função wp_script_is(). Por exemplo, se você quiser checar se ‘my-script‘ está pré-registrada, simplesmente use wp_script_is( ‘my-script’, ‘queue’ ) em um if.
Modos de pré-registrar seus scripts
A maneira certa de pré-registrar seus scripts, e estilos também, é usar os ‘hooks’ abaixo:
- wp_enqueue_scripts – para pré-registrar scripts no front-end do seu site.
- admin_enqueue_scripts – para pré-registrar scripts no back-end do seu site.
- login_enqueue_scripts – para pré-registrar scripts na tela de login.
<?php
function my_scripts_loader() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>
Por questões de compatibilidade, você não deve usar os hooks admin_print_scripts() e admin_print_styles().
Passando dados traduzíveis dentro do JavaScript
Quando pensamos na localização (localização pensando em língua usada), o JavaScript sempre tem um problema com o WordPress… porque muitas pessoas não conhecem a função wp_localize_script():
<?php
$l10n_data = array(
'nextItem' => __( 'Next', 'my-script' ),
'prevItem' => __( 'Previous', 'my-script' ),
'imageTitle' => __( 'Image %d of %d', 'my-script' )
);
wp_localize_script(
'name-of-the-script', // (requirido) o nome do script, 'my-script' pr exemplo
'nameOfTheObject', // (requirido) o nome do script
$l10n_data // (requirido) dados a serem passados, que podem ser passados por função __()
);
?>
Depois de registrar, enfileirar e localizar seu script, você pode passar variáveis localizáveis no script utilizando o nome do objeto e a string correta, como alert(nameOfTheObject.prevItem);
Conclusão
Há uma razão para o WordPress ser o maior sistema de gerenciamento de conteúdo em todo o mundo: O seu poder vem de sua flexibilidade. E este tutorial mostra (mais uma vez) o quão flexível é.
Este tutorial cobre muito bem o que o WordPress oferece sobre o uso do JavaScript para nossos projetos. Você tem alguma mais dicas e técnicas sobre JavaScript e WordPress? Conte-nos sobre isso!
Este post é uma tradução do post original publicado no WP Tuts por Barış Ünver
Guga, me tira uma dúvida, por favor.
Em meu site pessoal tenho meu próprio plugin (My Custom Functions) onde jogo as funções do site. Se eu levar em conta apenas o quesito desempenho (ignorando possíveis duplicações de plugins), qual a melhor opção: Uma função nesse plugin próprio para inserir o .js no footer ou o código escrito diretamente no footer.php?
Legal essa dica.
Vejo muito código por aí onde as pessoas carregam o JS e o CSS de forma incorreta.
Também publiquei um artigo falando sobre isso no meu site.
Abraços.
Boa dica Guga, vou revisar meu site e ver se não esta acontecendo alguma das situações que você destacou.
Muito boas suas dicas Guga, estou criando meu novo site e vou ficar atenta para evitar futuros problemas.
Podem usar este plugin HTML Snippets.
Eu suso e me atende muito bem com java script também
Jogo o código no funcoes ?
Oi Leonardo,
faço este site sem fins lucrativos e não pego projetos de terceiros, faço apenas os projetos da empresa que trabalho.