Bootstrap: Inclua este framework em seu WordPress

Bootstrap é um toolkit open source para auxiliar em projetos HTML+CSS+JS que adiciona componentes pré construídos que tornam o desenvolvimento mais rápido. Destaca-se o grid system, um grande facilitador na criação de sites responsivos.

Como incluir o Bootstrap

Para adicionar em seu projeto existem duas maneiras, incluir os arquivos em seu servidor ou utilizar CDN.

Verifique sempre a versão mais recente no site oficial. Baixe os arquivos faça o upload para seu servidor e então no <head> insira a chamada <link> para o .css, no arquivo header.php e no footer.php insira a chamada dos <script>.

CSS Local

<link rel="stylesheet" href="<?php echo get_template_directory(); ?>/css/bootstrap.min.css>

CSS Remoto com CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Scrips Local

<script src="<?php echo get_template_directory(); ?>/jquery-3.3.1.slim.min.js"></script>
<script src="<?php echo get_template_directory(); ?>/js/popper.min.js"></script>
<script src="<?php echo get_template_directory(); ?>/js/bootstrap.min.js"></script>

Scripts Remoto com CDN

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Enfileirado CSS e JS no functions

Uma maneira adicional de incluir o Bootstrap em seu projeto é enfileirando a chamada no functions.php do seu template. A sugestão é que crie um filho para não perder essa chamada em caso de atualização do template.

Vamos utilizar wp_enqueue_script() or wp_enqueue_style() para enfileirar as chamadas dos scripts e do css. Inclua este trecho no seu functions.php.

function add_theme_scripts() {
    wp_enqueue_style(  'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' );
 
    wp_enqueue_style( 'jqueryslim', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
 
    wp_enqueue_script( 'popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js');

     wp_enqueue_script( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'); 
 }
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Evite chamadas duplicadas, escolha se irá incluir remotamente ou localmente, recomendo que faça a inclusão enfileirando pelo functions.php de seu template filho.

Por fim agora que já tem o Bootstrap integrado em seu site comece a explorar suas vantagem, veja alguns templates e exemplos.

Ficou com alguma dúvida ou quer sugerir algo? Comenta ai que respondo para você.

Deixe um comentário