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...