Incluindo scripts e estilos no WordPress do jeito certo

Incluindo scripts e estilos no WordPress do jeito certo

Escrito por: Leonardo
Postado em: Wordpress

Você não odeia quando tenta adicionar um arquivo de estilo no WordPress e ele simplesmente não carrega?

Não se preocupe, isso já aconteceu com a maioria esmagadora dos desenvolvedores WordPress.

Mas você sabe por que isso acontece?

Primeiro de tudo, se você fizer uma gambiarra no caminho do arquivo, vai conseguir adicionar estilos e scripts da maneira tradicional.

Mas não é isso que você quer, não é?

O WordPress tem uma maneira considerada a ideal para a inclusão de assets.

Mas como isso funciona exatamente?

Primeiro de tudo, você vai precisar utilizar o arquivo functions.php

Para manter uma organização, você vai criar uma função dentro do arquivo citado acima, mas primeiro vamos checar se ela já não existe.

Agora que você já tem a função, o que vai precisar fazer agora, é inicia-la.

Mas antes disso, você precisa saber onde iniciar.

O WordPress tem um hook para iniciar funções que carregam assets, esse hook se chama wp_enqueue_scripts e precisa ser chamado dentro de um add_action.

Agora o seu código vai ficar assim:

Vamos recapitular, você criou uma função, atribuiu essa função à um hook do WordPress para ser inicializada no momento certo, o que falta agora?

Se você respondeu que agora só falta incluir os assets, acertou!

Entendendo o wp_enqueue_style e o wp_enqueue_script

Agora para adicionar o estilo e o script, o WordPress disponibiliza um hook para cada uma dessas ações.

Agora você pode adicionar os dois hooks do WordPress em sua função para puxar os arquivos de estilo e script.

Apenas como exemplo, vou adicionar o CSS e JS do Bootstrap.

Resumidamente, essa é a maneira simples e segura de incluir novos aseets dentro do WordPress, você cria uma função, inicializa dentro do hook correto e adiciona um novo hook para cada estilo/script.

Qual o próximo conteúdo você quer ver por aqui?

Deixa seu comentário aqui abaixo.

Utilização de Cookies

Para criar uma melhor experiência de navegação utilizamos alguns cookies para entender como podemos criar a melhor experiência para você!.

Para mais informações visite nossa Política de Privacidade