De vez em quando, ao construir sites de clientes, preciso adicionar algum javascript. Por exemplo, para mostrar elementos em um clique de botão, executar cálculos em um formulário, e assim por diante.
Mas adicionar código javascript simples a uma página não é a melhor idéia. Mesmo que possa ser adicionado, não é o lugar certo para se adicionar scripts. Segundo – jquery requer chamar a funcionalidade jquery em seu site, e nem todos os temas a chamam de fora da caixa.
Aqui você encontrará um pequeno tutorial de como executar javascript e jquery scripts de uma maneira que realmente funcione.
Como adicionar o jquery script ao WordPress
Há muitos plugins que você poderia adicionar para adicionar scripts jquery ao WordPress. Mas como eu não gosto de adicionar plugins adicionais para um recurso tão pequeno, vou mostrar a você como fazê-lo sem plugins.
Aqui está o exemplo que usamos:
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Se você clicar no elemento com classe showit, então ele alterna (mostra ou esconde) elemento com classe my-elemento.
Se você adicionar este código a um bloco HTML ou à seção principal do site WordPress, você provavelmente ficará desapontado, pois não funcionará. Há uma coisa que falta – o jquery precisa ser carregado em primeiro lugar.
Só para um teste rápido, podemos chamar jquery a partir do CDN dessa forma:
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script>
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Agora, se você tiver o roteiro no lugar certo, e ambas as classes definidas na página, o roteiro deve funcionar muito bem. Mas ainda não terminamos.
Primeiro – rodar scripts de outro servidor (jquery CDN) vai levar algum tempo, por isso vai diminuir a velocidade do seu site. Isso não é bom, e precisaremos descobrir isso. Segundo – precisamos colocar estes scripts no lugar certo – na seção <head> de seu site WordPress. Terceiro – talvez não precisemos chamar estes scripts em cada página. Eu lhe mostrarei como chamar o script somente onde ele for necessário.
Vamos cobri-lo.
Como chamar o jquery a partir de sua pasta temática WordPress
Para carregar o jquery o mais rápido possível, faça o download do arquivo jquery para seu computador. Você pode usar este link a partir do CDN mencionado anteriormente – clique aqui.
Uma vez que o arquivo esteja em seu computador, carregue-o no servidor onde se encontram os arquivos de seu site WordPress. Especificamente – faça o upload deste arquivo para o diretório do seu tema ( wp-content/themes/[seu tema]/). Crie o diretório js, se ele ainda não existir, e coloque o arquivo lá.
Você pode usar o aplicativo Filezilla para fazer o upload, ou você pode ir ao Cpanel ou DirectAdmin, e fazer o upload do arquivo usando o Gerenciador de Arquivos no painel.
Como adicionar o jquery script à seção do cabeçalho do tema do WordPress
Isso é fácil. Para chamar qualquer script da seção <head> no WordPress, vá para Appearance >> Editor de arquivos temáticos ou Ferramentas >> Editor de arquivos temáticos. Abra o arquivo functions.php à direita, e adicione este código ao final do arquivo:
function rocksolid_script() {
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php
}
add_action('wp_head', 'rocksolid_script');Como você pode ver, estamos chamando a função chamada rocksolid_script na seção Cabeçalho do WordPress. Ela faz duas coisas:
- Ele carrega jquery do diretório js/ tema ativo atual, então não precisamos mais do link CDN. Você pode obter a url do tema ativo atual usando <?php echo get_template_directory_uri(); ?>.
- Ele executa o verdadeiro jquery script que precisávamos em primeiro lugar.
Agora, e se precisarmos carregá-lo apenas em uma página?
Como carregar o jquery script personalizado apenas em uma página específica
Se você quiser chamar a função apenas na página inicial ou em qualquer outra página específica no WordPress, precisamos adicionar uma verificação adicional no script.
Por exemplo, se você quiser carregar o script mencionado anteriormente apenas na homepage, você precisa adicionar if is_front_page() à função, como aqui:
function rocksolid_script() {
if (is_front_page()) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php }
}
add_action('wp_head', 'rocksolid_script');Para carregar o script apenas em um post específico, você precisará usar if (is_single(POST ID AQUI)).
Para carregar o script apenas em uma página específica, você precisará usar if (is_page(PAGE ID AQUI)).
Se você não tem idéia de onde encontrar o post ou o ID da página no WordPress, leia este artigo.
