Carregar o bootstrap 4 no wordpress

Olá, pode parecer relativamente simples, mas ja respondi em várias ocasioes questões como, meus scripts não carregam, ou como faço para colocar o bootstrap no wordpress.

Como eu comentei, é relativamente simples, irei postar aqui carregando eles direto do servidor do boostrap mas nada impede dos mesmos arquivos estarem em uma pasta local. 
A ideia é ao usar esse snippet seu wordpress já esteja com o bootstrap funcionando.

Também estamos partindo do principio que você seja um desenvolvedor iniciante e separamos o passo a passo para você.

1- A estrutura de pastas do wordpress para criação de um tema consite em -> pasta da instalação wordpress / wp-content / wp-theme / sua pasta do tema. 

2- Ao ja ter criado os arquivos básicos necessários para que o wordpress identifique seu tema (style.css, index.php) você irá criar uma pasta com nome de assets.

3- Essa pasta assets será usada para separar seus arquivos de estilo com seus javascript, você pode usar da maneira que mais achar agradável esse formato é como usamos na Oxy Hospedagem. 

4- Dentro da pasta assets irão criar uma nova pasta chamada css e dentro dela um arquivo style.css ( nome ao seu critério ), também dentro da pasta assets irão criar mais uma pasta chamada js e dentro da js um arquivo chamado main.js.

5- Então temos a seguinte estrutura

sua pasta do tema / assets / css / style.css
sua pasta do tema / assets / js / main.js

Com essa estrutura você terá um arquivo style para customizar seu tema e o main.js para carregar seus scripts em javascript, claro que você pode e deve ir a mais que essas duas básicas,
essas são meras boas praticas de organizações, para você iniciante é bem interessante já começar com elas.

6 - Então vamos ao que interessa. dentro da sua pasta do tema, precisaremos criar 3 arquivos novos, functions.php, header.php, footer.php

7 - No arquivo functions.php iremos usar o seguinte snippet.

function carrega_scripts(){
    wp_enqueue_style('style', get_template_directory_uri().'/assets/css/style.css', array(),'1.0','all');
    wp_enqueue_style('boostrap','https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', array(),'','all');
    wp_enqueue_script('main', get_template_directory_uri().'/assets/js/main.js', array(),null,true);
    wp_enqueue_script('jquery','https://code.jquery.com/jquery-3.3.1.slim.min.js', array(),null,true);
    wp_enqueue_script('popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js', array(),null,true);
    wp_enqueue_script('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery'),null,true);}

add_action('wp_enqueue_scripts','carrega_scripts');


Explicando o codigo -> o functions.php será responsável por carregar algumas funções criadas, então declaramos uma nova função usando function carrega_scripts(){
essa função recebe algumas coisas que já são nativas do wordpress, são elas 

 wp_enqueue_style()
 wp_enqueue_script()
ao carregamos criarmos nossa estrutura precisamos declarar em que momento a ação será realizada. 

add_action('wp_enqueue_scripts','carrega_scripts');

8- Para finalizar precisamos chamar esses scripts e style dentro dos arquivos footer.php e header.php

na header.php (não entrarei no merito da estrutura básica, estaremos criando um tutorial somente para isso), antes de fechar sua tag </head>

usará o comando,

<?php wp_head();?>
e no footer.php

<?php wp_footer();?>
 
Pronto, agora seu wordpress já está funcionando com a versão do boostrap 4.

Em Breve estaremos diponibilizando os arquivos no github da Oxy Hospedagem, para facilitar ainda mais a criação do seu tema,

Não esqueça de conferir nossos servidores VPS para wordpress, usando eles você garante mais velocidade e flexibilidade no seu desenvolvimento.


CLIQUE AQUI E CONFIRA NOSSOS PLANOS PARA WORDPRESS
  • wordpress, bootstrap, script, functions, snippets
  • 2 Usuários acharam útil
Esta resposta lhe foi útil?

Related Articles

Criando um Sticky menu somente com jquery e bootstrap

Algo bacana e que lhe da uma dinâmica legam em seu site é o sticky menu, aquele que ao rolar o...

Como adicionar um shortcut no WordPress usando php

Olá, sempre estamos procurando maneiras de inovar no WordPress, muitos Plugins geram um shortcut...

Powered by WHMCompleteSolution