O Bootstrap é uma ferramenta gratuita que facilita a vida de quem quer criar sites responsivos. É possível inclui-lo em seu tema WordPress de forma simples. Isso fará com que sua página carregue perfeitamente em diversos tipos de dispositivos e em tamanhos de telas diferentes.

É importante que você já esteja familiarizado com o WordPress e com a criação de temas para ele, tem umas dicas aqui. Além disso, primeiro você deve elaborar um modelo do tema, já com os elementos do Bootstrap. Depois de criar o modelo, aí sim será possível aplicar o Bootstrap a um tema.

A inclusão é feita no arquivo functions.php, localizado na pasta do seu tema. Basta criar algumas funções que servirão para registrar os arquivos do Bootstrap no tema. Veja o código a seguir:

function tema_scripts_function() {
   wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.bundle.min.js');
}  
add_action('wp_enqueue_scripts','tema_scripts_function');

function tema_enqueue_styles(){
	wp_enqueue_style('bootstrap',
	get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
}

Perceba que os arquivos devem ser inseridos na pasta do tema. Você define qual será o diretório, mas lembre de inserir o caminho correto nas funções. 😉

Para que a barra de navegação do Bootstrap funcione corretamente no WordPress, também é preciso inserir o arquivo do bs4navwalker em seu diretório do tema e no mesmo arquivo functions.php. Use o seguinte código:

require_once('bs4navwalker.php');

//Se for preciso registrar a barra de navegação:
register_nav_menu('top', 'Top menu');

No arquivo header.php ou onde você estiver usando a navegação, insira o código:

<nav class="navbar navbar-expand-md navbar-light bg-faded">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <?php
   wp_nav_menu([
     'menu'            => 'top',
     'theme_location'  => 'top',
     'container'       => 'div',
     'container_id'    => 'bs4navbar',
     'container_class' => 'collapse navbar-collapse',
     'menu_id'         => false,
     'menu_class'      => 'navbar-nav mr-auto',
     'depth'           => 2,
     'fallback_cb'     => 'bs4navwalker::fallback',
     'walker'          => new bs4navwalker()
   ]);
   ?>
</nav>

Veja os materiais no final do post para obter mais detalhes sobre esse processo.

Materiais:
– https://vinyanalista.github.io/blog/2015/08/06/wordpress-bootstrap/
– https://www.codigowp.net/como-adicionar-um-menu-bootstrap-a-um-tema-wordpress/
– https://decodecms.com/incluir-bootstrap-en-wordpress/
– https://www.sitepoint.com/bootstrap-wordpress-theme-integration/