Como adicionar JavaScript personalizado ao WordPress (3 métodos)

Uma das melhores maneiras de aprimorar a funcionalidade de front-end do seu site é adicionando JavaScript personalizado do WordPress. No entanto, descobrir como fazer isso pode ser complicado, especialmente se você estiver acostumado a trabalhar com o Customizador para inserir CSS personalizado.

Felizmente, você pode usar algumas estratégias diferentes, dependendo do seu nível de experiência e do que está tentando alcançar. Depois de aprender quais são suas opções, você poderá escolher a solução JavaScript personalizada que faz mais sentido para você.

Nesta postagem, mostraremos três métodos que você pode usar para adicionar JavaScript personalizado ao seu site WordPress, além de discutir os prós e os contras de cada opção. Aqui estão os três métodos que abordaremos – você pode clicar para ir direto para um método específico:

1. Use o plug-in de código de cabeçalho e rodapé (a opção mais simples para usuários não técnicos)
2. Adicionar código ao arquivo functions.php
3. Adicionar código ao cabeçalho (usando a função wp_enqueue_script ou o gancho wp_head)

Vamos entrar!

1. Instale um plugin como Head & Footer Code

Usar um plug-in é uma das maneiras mais fáceis de adicionar JavaScript personalizado do WordPress ao seu site. Por exemplo, Head & Footer Code é uma boa ferramenta:

Este plug-in gratuito permite inserir código de várias maneiras. Você pode usá-lo para Facebook Pixel, Google Analytics, CSS personalizado e muito mais.

Para começar, adicione o plug-in ao seu site navegando até Plugins → Adicionar Novo no painel de administração e, em seguida, pesquisando por “Código de Cabeçalho e Rodapé”.

Assim que você clicar no instale agora e Ativar botões, você pode localizar as configurações do plug-in indo para Ferramentas → Cabeçalho e Rodapé Código. Nesta tela, existem três caixas para as seções de cabeçalho, rodapé e corpo:

Você pode inserir seu JavaScript personalizado do WordPress em qualquer uma dessas caixas. Quando terminar, selecione o Salvar alterações botão na parte inferior da tela. O código será carregado em todas as páginas do seu site.

Prós e contras de usar um plugin

A principal vantagem de usar um plug-in é que ele é uma opção amigável para iniciantes. Você não precisa se preocupar em editar os arquivos do seu tema. O plug-in Head & Footer Code também pode ser útil se você estiver procurando uma maneira perfeita de adicionar outros tipos de código e CSS personalizado.

No entanto, a desvantagem desse método é que envolve a instalação de um plug-in de terceiros, que alguns proprietários de sites tentam evitar. Se você deseja manter suas extensões no mínimo, talvez seja melhor usar um dos outros métodos. Além disso, o plug-in foi projetado para alterações de JavaScript em todo o site, em vez de páginas ou postagens específicas.

2. Use seu arquivo functions.php

Outro método para adicionar JavaScript personalizado do WordPress ao seu site é aproveitar as funções integradas e os ganchos para editar o funções.php Arquivo. Essa abordagem envolve o upload manual dos scripts para o seu servidor.

Antes de começar, recomendamos criar um tema filho. Esta etapa ajuda a garantir que você ainda será capaz de atualizar o tema pai com segurança. Você também deve fazer um backup do seu site para o caso de algo dar errado.

Este método envolve o uso do IS_PAGE função. Você pode adicionar lógica condicional para aplicar seu JavaScript personalizado a uma única postagem ou página.

Para começar, localize e abra seu funções.php arquivo, copie e cole o seguinte trecho de código:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Este código adicionará JavaScript ao seu cabeçalho. Para aplicá-lo a uma única postagem, você pode usar o seguinte:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Observe que você precisará substituir o 3 no exemplo acima com o número de ID do post ao qual você deseja adicionar o código. Para localizar esse número, navegue até a postagem no painel do administrador e clique em Editar. Na URL da barra do navegador, o número de ID é o número ao lado de “post=”:

Salve seu arquivo depois de substituir o número de ID e adicione seu JavaScript personalizado à área designada. Você também pode repetir esse mesmo processo para uma única página do WordPress.

Prós e contras de editar seu arquivo functions.php

Uma vantagem de editar o seu funções.php arquivo é que você não precisa instalar outro plugin. Você também pode usar essa técnica para adicionar recursos e funcionalidades ao seu tema e ao próprio WordPress. Por exemplo, este método pode inserir JavaScript em um único post ou página ou em todas as páginas.

A única desvantagem desse método é que ele envolve trabalhar com código e editar os arquivos do seu site. Portanto, pode não ser a melhor opção se você não tiver experiência nesse departamento.

Existe uma maneira de adicionar JavaScript WordPress personalizado inserindo o <script> marque diretamente no seu header.php Arquivo. No entanto, este método não é recomendado. Ele pode interferir na sequência de carregamento do WordPress e causar conflito com outros temas e plugins.

Se você deseja adicionar JavaScript personalizado a todas as suas páginas por meio do cabeçalho do seu site, há duas maneiras de fazer isso. Você pode editar o funções.php arquivo e use o wp_enqueue_script função, que cria uma função genérica. Alternativamente, você pode usar o wp_head gancho de ação.

Vamos ver as duas opções…

Adicione JavaScript ao seu cabeçalho usando a função wp_enqueue_script

Primeiro, você vai querer carregar seu arquivo JavaScript personalizado para o diretório do seu modelo. Você pode fazer isso por meio de um cliente FTP (File Transfer Protocol) ou Gerenciador de arquivos.

Navegue até a pasta de modelo do seu site (wp_content → temas → [yourtheme]). Em seguida, selecione Carregar:

Observe o caminho de arquivo exato deste arquivo. Por exemplo, deve ser algo como “

Em seguida, localize e abra seu funções.php arquivo, copie e cole o seguinte trecho de código:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Certifique-se de substituir o URL do modelo pelo seu. Por fim, salve seu arquivo.

Adicionar JavaScript personalizado usando o gancho wp_head

Você também pode usar o wp_head gancho de ação para adicionar JavaScript personalizado ao seu cabeçalho por meio de script embutido. Novamente, esse método não é preferível porque pode criar muitos scripts. No entanto, é melhor do que inserir os scripts diretamente em seu header.php Arquivo.

Este método, que você também pode usar para o rodapé, usa o(s) gancho(s) de ação para adicionar scripts embutidos ao seu site. Enquanto o wp_enqueue_script função enfileira scripts personalizados, o wp_head abordagem imprime os scripts em seu modelo de cabeçalho (e rodapé, se você usar o wp_footer gancho).

Para começar, navegue até o seu funções.php arquivo, copie e cole o seguinte:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

Observe que o wp_head hook só é acionado no front-end do seu site. Isso significa que qualquer JavaScript personalizado que você adicionar usando esse método não aparecerá nas áreas de administração ou login. No entanto, se você quiser adicionar JavaScript a essas áreas, poderá usar o admin_head e login_head ganchos de ação, respectivamente.

Prós e contras de adicionar JavaScript ao seu cabeçalho

o wp_enqueue_script A função é preferida entre os desenvolvedores porque evita conflitos que podem surgir com outras opções, como adicionar scripts diretamente ao seu header.php Arquivo. Além disso, o uso desse método não cria nenhum script dependente.

O principal problema de adicionar JavaScript personalizado do WordPress ao cabeçalho do seu site é que ele pode causar problemas com outros plug-ins que carregam seus próprios scripts. Essa configuração também pode fazer com que vários scripts sejam carregados mais de uma vez, o que pode prejudicar a velocidade e o desempenho geral do seu site.

Comece com o JavaScript personalizado do WordPress

Conforme discutimos neste post, existem três maneiras de adicionar JavaScript personalizado do WordPress ao seu site:

1. Instale um plugin como Head & Footer Code.
2. Use o seu funções.php arquivo para adicionar JavaScript personalizado a uma única página ou postagem.
3. Adicione JavaScript ao seu cabeçalho usando o wp_enqueue_script função ou wp_head gancho.

Agora que você sabe como adicionar JavaScript personalizado ao WordPress, talvez esteja interessado em nosso outro guia sobre como adicionar CSS personalizado ao WordPress.