Avançar para conteúdo

Tudo para WordPress

Plugins, Temas, dicas de WordPress e muito mais para você que busca informação sobre este excelente CMS!

  • Twitter
  • Facebook
  • Google+
  • RSS
Entenda com funciona Assine nosso RSS

Como utilizar javascript no WordPress de forma correta?

Publicado em 14/11/2013 às 10h00 por Guga Alves

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

javascript

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():

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.

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():

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

8 pessoas comentaram o artigo

  • Thiago Miro comentou em 14 de novembro de 2013.

    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?

    Responder esse usuário
  • Lucas Tavares comentou em 30 de dezembro de 2013.

    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.

    Responder esse usuário
  • Junior Cesar comentou em 8 de abril de 2014.

    Boa dica Guga, vou revisar meu site e ver se não esta acontecendo alguma das situações que você destacou.

    Responder esse usuário
  • Carol comentou em 30 de julho de 2014.

    Muito boas suas dicas Guga, estou criando meu novo site e vou ficar atenta para evitar futuros problemas.

    Responder esse usuário
  • Junio comentou em 5 de outubro de 2014.

    Podem usar este plugin HTML Snippets.
    Eu suso e me atende muito bem com java script também

    Responder esse usuário
  • Leonardo comentou em 27 de novembro de 2015.

    Bom dia, estou criando um blog pessoal que possui páginas divididas por “tabs” JQuery. Gostaria de ativar estas através de links. Tenho o código que se aproxima do que desejo, gostaria de uma ajuda. Quanto você cobraria para implementar isso para mim?

    Responder esse usuário
    • Guga Alves comentou em 4 de dezembro de 2015.

      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.

      Responder esse usuário

Participe e deixe o seu comentário!

Procurando Temas?

Acesse o arquivo de Temas WordPress