WordPress Ja­vaS­cript: como inserir no site

Por motivo de segurança, usuários comuns nor­mal­mente não podem inserir Ja­vaS­cript no WordPress. Mas se você quer deixar seu site mais in­te­ra­tivo, os scripts são uma solução con­ve­ni­ente e rápida. Mos­tra­re­mos agora os métodos que podem ser usados para inserir Ja­vaS­cript no WordPress.

Quando devo inserir Ja­vaS­cript no WordPress?

O WordPress é um sistema de gestão de conteúdo (CMS) clássico, que separa o conteúdo e o design. Essa separação rigorosa ge­ral­mente faz sentido e gera pra­ti­ci­dade: assim os ad­mi­nis­tra­do­res podem cuidar dos aspectos técnicos e visuais, enquanto os autores focam to­tal­mente na criação de conteúdo. A princípio, bloquear Ja­vaS­cript e outros scripts para usuários normais do back-end do WordPress é uma boa abordagem, prin­ci­pal­mente porque minimiza o risco de problemas no código.

Se o conteúdo in­te­ra­tivo for parte in­te­grante da criação de conteúdo, é quase im­pos­sí­vel fugir do Ja­vaS­cript: diversos re­pro­du­to­res de áudio e vídeo só funcionam com o script adequado, assim como vários for­mu­lá­rios de terceiros que são usados, por exemplo, para gerar leads. Portanto, quem deseja in­cre­men­tar seu site com elementos in­te­ra­ti­vos, como chats, pesquisas e testes, deve habilitar a inserção de Ja­vaS­cript no WordPress.

Métodos para inserir Ja­vaS­cript no WordPress

Existem diversas maneiras de inserir Ja­vaS­cript no WordPress ou permitir que outros usuários insiram scripts. Algumas das soluções mais simples e eficazes são:

1. Desativar o filtro de script tags
2. Inserir Ja­vaS­cript no header (cabeçalho) de páginas
3. Inserir Ja­vaS­cript no footer (rodapé) de páginas
4. Habilitar Ja­vaS­cript usando plugins do WordPress

Método 1: Desativar o filtro de script tags

Você pode desativar o bloqueio padrão de script tags para todas as funções de usuário e para todo o projeto WordPress. No entanto, você só deve desativar esse recurso de segurança se todos os usuários com direito de acesso tiverem ex­pe­ri­ên­cia com scripts. Caso contrário, você corre o risco des­ne­ces­sá­rio de se deparar com códigos ma­li­ci­o­sos no seu site, vindos de scripts não con­fiá­veis.

Para desativar o filtro de script tags, o primeiro passo é inserir a seguinte linha no arquivo de con­fi­gu­ra­ção wp-config.php: <?php define( 'CUSTOM_TAGS', true );>

Em seguida, com­ple­mente o arquivo de tema functions.php inserindo o seguinte código:

function add_scriptfilter( $string ) {global $allowedtags;$allowedtags['script'] = array( 'src' => array () );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );

Então todos os usuários poderão inserir Ja­vaS­cript no WordPress adi­ci­o­nando script tags cor­res­pon­den­tes no local desejado de uma página.

Método 2: Inserir Ja­vaS­cript no header do WordPress

Se você não deseja liberar a opção de inserir Ja­vaS­cript no WordPress de forma in­dis­cri­mi­nada para todos os usuários com direito de acesso, você pode optar pela inserção manual de scripts, por meio do header (cabeçalho). Nesse método, você deve inserir o código ma­nu­al­mente no arquivo functions.php para que a au­to­ri­za­ção possa ser dada caso a caso.

Se você deseja inserir no header um script para o site inteiro (por exemplo, o código de uma fer­ra­menta de ras­tre­a­mento), adicione as seguintes linhas no arquivo de con­fi­gu­ra­ções do tema:

function wpb_hook_javascript() {
    ?>
        <script>
            // código de JavaScript
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

É claro que você também pode inserir código de Ja­vaS­cript em uma única página. Para isso, você só precisa saber o número de ID da página desejada e indicar esse número dentro de uma instrução “if” simples. Por exemplo, para a página de WordPress com o ID “10”, as linhas a acres­cen­tar no functions.php são as seguintes:

function wpb_hook_javascript() {
    if (is_page ('10')) { 
        ?>
            <script type="text/javascript">
                // código de JavaScript
            </script>
        <?php
    }
}
add_action('wp_head', 'wpb_hook_javascript');

Método 3: Inserir Ja­vaS­cript no footer do WordPress

Em vez de inserir Ja­vaS­cript no header do seu site, você também pode adicionar os scripts no footer (rodapé). Nesse caso, substitua o parâmetro “wp_head” por “wp_footer”:

function wpb_hook_javascript() {
    ?>
        <script>
              // código de JavaScript
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript');

Esse método também permite inserir scripts apenas em páginas in­di­vi­du­ais, com­ple­men­tando uma instrução “if” e indicando o ID da página:

function wpb_hook_javascript() {
    if (is_page ('10')) { 
        ?>
            <script type="text/javascript">
                // código de JavaScript
            </script>
        <?php
    }
}
add_action('wp_footer', 'wpb_hook_javascript');

Método 4: Inserir Ja­vaS­cript com plugin do WordPress

Se você achar im­pos­sí­vel ou com­pli­cado demais modificar ma­nu­al­mente o arquivo de tema, também pode utilizar plugins do WordPress para inserir Ja­vaS­cript no seu projeto. Uma das extensões mais populares para isso é a Scripts n Styles. Para instalá-la, basta:

1. Fazer login no back-end do WordPress.
2. No menu esquerdo da página, se­le­ci­o­nar “Plugins” e então “Instalar”.
3. Buscar por “Scripts n Styles” e clicar em “Instalar agora” ao lado do resultado de busca cor­res­pon­dente.
4. Após a ins­ta­la­ção, clicar em “Ativar”.

Close

Depois da ins­ta­la­ção, você en­con­trará o plugin de WordPress Ja­vaS­cript na seção “Fer­ra­men­tas”, no menu esquerdo da página. Abrindo o menu da extensão, você pode escolher se deseja inserir snippets em HTML, CSS ou Ja­vaS­cript no seu projeto WordPress. Para Ja­vaS­cript, você tem estas três opções:

• Cof­fe­eS­cript
• scripts no header (“for the head element”)
• scripts no footer (“end of the body element”)

Close