Como adicionar JavaScript em páginas ou posts (2 métodos)

Você quer adicionar um código JavaScript nas suas páginas ou posts do WordPress?

Às vezes, você pode precisar adicionar um código JavaScript ao site inteiro ou em páginas específicas. Por padrão, o WordPress não permite que você adicione código diretamente em suas postagens.

Neste artigo, mostraremos como adicionar facilmente código JavaScript em páginas ou posts do WordPress.

O que é JavaScript?

JavaScript é uma linguagem de programação que é executada não no seu servidor, mas no navegador do usuário.

Essa programação do lado do cliente permite que os desenvolvedores façam um monte de coisas legais sem reduzir a velocidade de carga do seu site.

Se você quiser incorporar um player de vídeo, adicionar uma calculadora ou algum outro serviço de terceiros, muitas vezes será solicitado que você copie e cole um snippet de código JavaScript em seu site.

Um trecho de código JavaScript típico pode ter esta aparência:

<script type="text/javascript"> 
// Algum codigo JavaScript
</script>
<!-- Outro Exemplo: --!>  
<script type="text/javascript" src="/path/para/script.js"></script>

Agora, se você adicionar um snippet de código javascript a um post ou página do WordPress, ele será excluído pelo WordPress quando você tentar salvá-lo.

Dito isso, vamos ver como você pode adicionar facilmente o JavaScript em páginas ou posts do WordPress sem quebrar seu site.

Método 1. Adicionar JavaScript em todo o site usando cabeçalhos e rodapés de inserção

Às vezes, você será solicitado a copiar e colar um snippet de código JavaScript em seu site para adicionar uma ferramenta de terceiros.

Esses scripts geralmente ficam na seção HEAD ou na parte inferior antes da tag </body> do seu site. Desta forma, o código é carregado em todas as visualizações de páginas.

Por exemplo, o código de instalação do Google Analytics precisa estar presente em todas as páginas do seu site para que ele possa rastrear os visitantes do seu site.

Você pode adicionar esse código aos arquivos header.php ou footer.php do tema WordPress. No entanto, essas alterações serão substituídas quando você atualizar ou alterar seu tema.

É por isso que recomendamos o uso de um plug-in para carregar o JavaScript em seu site.

Primeiro, você precisa instalar e ativar o plug-in Insert Headers and Footers.

Após a ativação, você precisa visitar a página Configurações >> Inserir cabeçalhos e rodapés. Você verá duas caixas, uma para o cabeçalho e outra para a seção de rodapé.

Agora você pode colar o código JavaScript copiado em uma dessas caixas e, em seguida, clicar no botão Salvar.

O plug-in “Inserir Cabeçalhos e Rodapés” agora carregará automaticamente o código que você adicionou em todas as páginas do seu site.

Método 2. Adicionando JavaScript Manualmente Usando o Código

Este método requer que você adicione código aos seus arquivos do WordPress.

Primeiro, vamos dar uma olhada em como adicionar código ao cabeçalho do seu site WordPress. Você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plug-in específico do seu site.

function wpb_hook_javascript() {
    ?>
        <script>
          // cole seu codigo javscript aqio
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Adicionando JavaScript a uma postagem ou a uma página
específica do WordPress usando o código

Suponhamos que você queira apenas carregar o código Javascript em uma postagem específica do WordPress. Para fazer isso, você precisará adicionar uma condicional ao código. Dê uma olhada no seguinte exemplo:

function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // cole seu codigo javscript aqui
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Se você der uma olhada mais de perto no código acima, verá que agrupamos o código Javascript em torno da lógica condicional para corresponder a um código de postagem específica. Você pode usar isso substituindo 16 pelo seu próprio ID da postagem específica na qual deseja inserir o Javascript.

Mas, o código acima funcionaria para qualquer tipo de postagem, exceto páginas.

Então, agora, vamos dar uma olhada em outro exemplo, exceto que este verificará um ID de página específica antes de adicionar o código Javascript à seção principal.

function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // cole seu codigo Javscript aqui
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Em vez de is_single, agora estamos usando is_page para verificar o ID da página.

Alternativamente, podemos usar o mesmo código com pequenas modificações para adicionar código Javascript ao rodapé do seu site. Dê uma olhada no exemplo a seguir.

function wpb_hook_javascript_footer() {
    ?>
        <script>
          // cole seu codigo Javscript aqui
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Em vez de ligar nossa função ao wp_head, agora a conectamos ao wp_footer. Você também pode usá-lo com tags condicionais (como fizemos acima) para adicionar JavaScript a postagens ou páginas específicas.

Qualquer dúvida, entre em contato conosco.

Talvez você goste de

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *