Publicado em por Paulo Künzel

Como adicionar arquivos JS e scripts no seu site WordPress


O WordPress é fácil de customizar e permite que você adicione facilmente novos recursos e funcionalidades ao seu site sem realmente ter que refazer todo o seu tema. Você pode adicionar a funcionalidade simplesmente adicionando plugins, mas se a funcionalidade que você gostaria de adicionar é muito pequena para criar um plugin (que compreende apenas algumas linhas de código), você pode usar o arquivo functions.php ao invés de criar um plugin separado.

Neste artigo, vamos fazer um passo a passo para adicionar JavaScript em temas WordPress. Como desenvolvedores do WordPress, essa é uma das coisas que teremos que fazer com muita frequência.

JavaScript no model do site

Para usar JavaScript repetidamente em seu site você pode uma chamada do script no arquivo header.php. Isso deve ser adicionado entre as meta tags e o link da folha de estilo. Isso é exatamente o mesmo que se você estivesse adicionando JavaScript em qualquer página HTML.

Para “adicionar” o arquivo JavaScript ao seu site, na cabeça, você pode usar o seguinte código:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">

    <?php wp_head(); ?>
    <script type="text/javascript" src="js/seuArquivo.js"></script>
</head>

Adicionando Javascript ao WordPress (recomendado)

O método recomendado para adicionar um arquivo javascript ao seu tema WordPress é usando o arquivo functions.php com wp_enqueue_script.

Basta abrir o arquivo functions.php e copiar o snippet de código abaixo para ele. Certifique-se de substituir o URL do modelo pelo seu antes de salvar.

function my_theme_scripts_function() {
  wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');

Se você estiver usando um tema, precisará usar get_stylesheet_directory_uri() em vez de get_template_directory_uri()

Plugin Headers and Footers

Este plugin é perfeito porque permite que você adicione qualquer script sem correr o risco de quebrar coisas, você não precisa alterar nenhum código. (Claro, você precisa ter certeza de que o script atual é válido).

Com ele você pode inserir:

a) Um arquivo JS

b) O script puro

Conclusão

Essa foram as formas mais simples que encontrei de inserir meus scripts customizados em arquivos WordPress. Espero que este artigo ajude a outros como me ajudou. Caso você queira contribuir ou melhor esse post, deixe seu comentário abaixo que farei os ajustes conforme necessário.

Deixe um comentário