Como adicionar os arquivos do Bootstrap no seu tema WordPress?

Turbine seu tema. Descubra como adicionar os arquivos de estilo e javascript do Bootstrap no seu tema WordPress.

Quem nunca perdeu horas brigando com o CSS de uma página?

Eu já perdi as contas de quantas vezes sofri e quanto tempo perdi tentando centralizar imagens, textos e criar páginas responsivas e apesar de já estar um bom tempo trabalhando com desenvolvimento, volta e meio as folhas de estilo surgem para me atormentar e às vezes arrancar algumas lágrimas (de desespero).

Mas para minha sorte e a de outras pessoas, que ainda sentem um pouco de dificuldade com CSS, podemos contar com a ajuda do framework Bootstrap.

O que é Bootstrap?

Bootstrap é um framework front-end, formado por arquivos Javascript e folhas de estilos.

Ele torna o processo de desenvolvimento de designs responsivos rápido e descomplicado, além de trazer uma biblioteca de componentes como carrosséis, tooltips e janelas modais prontos para o uso e que seriam bem trabalhosos se tivéssemos que desenvolver partindo do zero.

E o melhor é que boa parte de toda essa facilidade é obtida usando apenas classes CSS que já estão prontas dentro do framework.

Adicionando os arquivos no seu Tema

Antes de começarmos, certifique-se que seu tema já tem as instruções wp_head() e wp_footer() declaradas, especialmente se você estiver começando a construção do seu próprio tema.

Declaração do wp_head no arquivo header.php
wp_head
Declaração do wp_footer no arquivo footer.php
wp_footer

Dentro do arquivo functions.php iremos criar uma função chamada load_scripts(), que por sua vez chamará outras duas funções nativas do WordPress: wp_enqueue_script e wp_enqueue_style.

function load_scripts() {     
    wp_enqueue_script('bootstrap-js',   'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', array( 'jquery' ), '4.5.0', true);
    wp_enqueue_style('bootstrap-css',   'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css', array(  ), '4.5.0', 'all');    
}

No segundo parâmetro, tanto da instrução wp_enqueue_script quanto da instrução wp_enqueue_style temos que informar o caminho dos arquivos bootstrap.min.css e bootstrap.min.js que você pode encontrar na página https://getbootstrap.com/docs/4.5/getting-started/introduction/ do Bootstrap.

Página do Bootstrap com os endereços dos arquivos .css e .js

Algo bem interessante é o uso do terceiro argumento que incluímos na função wp_enqueue_script. Neste argumento é possível usar um array informando as dependências do arquivo que estamos pedindo para incluir.

O arquivo .js do BootStrap requer o uso do JQuery, desta forma dizemos que o arquivo bootstrap.min.js possui esta dependência, informando ela dentro do array. O WordPress então também irá carregar o arquivo JQuery que faz parte da sua própria biblioteca, sem a necessidade de adicionarmos uma nova nova instrução wp_enqueue_script.

Após o fechamento da função load_scripts(), vamos executar uma action passando como parâmetro o gancho wp_enqueue_scripts e o nome da função que acabamos de criar.

add_action('wp_enqueue_scripts', 'load_scripts');

Para verificar se os arquivos foram adicionados com sucesso, abra a página inicial do seu site no navegador e aperte a tela F12 para inspecionar a página.

Identificando o arquivo CSS do Bootstrap dentro página do site
Identificando os arquivos JS do Bootstrap e JQuery dentro página do site

Tudo pronto, os arquivos do Bootstrap foram adicionados com sucesso ao seu tema.

Sê o primeiro

Deixe uma resposta

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