Cria��o de temas Wordpress usando Bootstrap passo a passo

Fique por dentro

Graças aos temas do WordPress, os webmasters com pouca ou nenhuma experi�ncia em codificaç�o podem impulsionar seus sites com uma apar�ncia profissional e funcionalidade personalizada. Nesse artigo veremos como criar um tema com o Bootstrap.

Tanto o Bootstrap quanto o WordPress s�o muito populares: 29% da Web usa o WordPress. Claramente, saber como criar sites e aplicativos usando essas duas tecnologias de c�digo aberto robustas e maduras pode ser uma habilidade valiosa para desenvolvedores no local de trabalho.

H� muito o que cobrir, ent�o vamos mergulhar!

Por que WordPress?

O WordPress � um software de c�digo aberto que voc� pode usar na criaç�o de sites, blog ou aplicativo bonito.

A popularidade do WordPress se deve principalmente � sua facilidade de uso e �s poderosas opç�es de apar�ncia, personalizaç�o e extensibilidade (por meio de temas e plugins).

Graças aos temas do WordPress, os webmasters com pouca ou nenhuma experi�ncia em codificaç�o podem impulsionar seus sites com uma apar�ncia profissional e funcionalidade personalizada.

Empresas especializadas em desenvolvimento de sites como a Webtrends adotam o Wordpress como sendo a principal ferramenta de desenvolvimento.

Os usu�rios podem facilmente selecionar temas diferentes com apenas alguns cliques, usando o menu Apar�ncia no painel de administraç�o ou copiar arquivos de temas diretamente para a pasta wp-content> themes.

Os temas podem ser adquiridos em mercados dedicados, desenvolvedores individuais ou tamb�m podem ser instalados livremente no diret�rio de temas.

Como desenvolvedores, podemos criar nosso pr�prio tema, que � o que faremos neste tutorial.

Mais especificamente, executaremos as principais etapas para a criaç�o de um tema WordPress simples que integre a vers�o mais recente da biblioteca Bootstrap.

Por que Bootstrap?

O Bootstrap � uma biblioteca de interface do usu�rio robusta e abrangente para o desenvolvimento de sites e aplicativos responsivos e para dispositivos m�veis.

Aqui est�o algumas vantagens do uso do Bootstrap como estrutura de estilo para um tema WordPress.

Vantagens de usar os temas Bootstrap e WordPress juntos

Na minha opini�o, h� muitas vantagens em usar o Bootstrap para estilizar um tema WordPress:

O Bootstrap � um projeto popular de c�digo aberto, com amplo desenvolvimento e manutenç�o cont�nua, que com o tempo resultou em menos bugs.
� uma estrutura entre navegadores que suporta os principais navegadores com uma boa linha de base CSS chamada [Reboot].
Possui uma documentaç�o extensa e completa.
Ele lida com consultas de redefiniç�o, grades, tipografia, utilit�rios e m�dia, liberando assim o tempo de desenvolvimento.
Ele � amplamente usado pelos desenvolvedores para criar sites, por isso � f�cil encontrar tutoriais, demos e projetos de c�digo aberto para aprender ou ampliar.
O Bootstrap pode ser usado para criar rapidamente um tema WordPress otimizado para dispositivos m�veis sem reinventar a roda.
Existem v�rios temas iniciais disponibilizados pela comunidade, como Understrap, que visam fornecer um ponto de partida r�pido para os desenvolvedores criarem temas WordPress com o Bootstrap.
Embora n�o tenha sido criado com o WordPress em mente, o Bootstrap pode ser facilmente integrado a ele.
Podemos personalizar facilmente o Bootstrap para atender aos requisitos espec�ficos do projeto, uma vez que tenhamos conhecimento suficiente das classes dispon�veis.
Podemos tirar proveito de centenas de plugins JavaScript / jQuery j� integrados ao Bootstrap.
A partir do Bootstrap 4, os plugins usam o ES6 moderno.
� leve e voc� pode usar qualquer hospedagem de sites para suportar seu projeto.
Com o lançamento do Bootstrap 4, a biblioteca agora usa Sass em vez de Less como o pr�-processador de escolha, o que o torna mais amplamente compat�vel com um grande n�mero de fluxos de trabalho de desenvolvedores.
O Bootstrap 4 apresenta novos componentes, como o do cart�o. Os cart�es de inicializaç�o facilitam a criaç�o de um layout moderno baseado em cart�es, como a interface no estilo de alvenaria.
O sistema de grade Bootstrap 4 � constru�do sobre o flexbox, o que torna a grade ainda mais flex�vel, amig�vel ao desenvolvedor e limpa.

Existem desvantagens de usar o Bootstrap e o WordPress juntos?

Quanto �s desvantagens, a comunidade de desenvolvedores levantou algumas preocupaç�es, incluindo as seguintes:

O Bootstrap n�o foi projetado para integraç�o direta com o WordPress, mas isso n�o deve ser um grande obst�culo para a maioria dos desenvolvedores.
Se precisarmos substituir muitos estilos predefinidos de Bootstrap para atender aos requisitos de design, pode n�o valer a pena usar uma estrutura CSS.
� verdade que o Bootstrap facilita a adiç�o r�pida de estilo responsivo ao nosso tema. No entanto, tamb�m precisamos investir tempo aprendendo sobre o Bootstrap para poder adicionar nossas personalizaç�es para que nossos temas pareçam diferentes dos in�meros sites baseados no Bootstrap na Internet.
O Bootstrap depende do jQuery, portanto, em algumas situaç�es, talvez tenhamos que lidar com problemas relacionados ao jQuery - como plugins desatualizados ou ter que incluir toda a biblioteca do jQuery, mesmo que nosso projeto precise apenas de um pequeno recurso$.ajax().

Pr�-requisitos para seguir adiante

Neste tutorial, presumo que voc� tenha um ambiente de desenvolvimento com PHP, MySQL e WordPress instalados.

Voc� tamb�m precisa estar familiarizado com o WordPress - particularmente como instalar e ativar temas, adicionar menus do WordPress, criar postagens e p�ginas etc.

Finalmente, voc� precisa ter algum conhecimento de como criar um tema para WordPress.

Na verdade, este � um tutorial sobre a integraç�o do Bootstrap em um tema WordPress, n�o um tutorial sobre como criar um tema totalmente funcional para WordPress, que teria um escopo muito mais amplo do que o que temos dispon�vel neste artigo.

Etapas principais para integrar o Bootstrap e o WordPress

Nesta seç�o, vamos aprender sobre as principais etapas que precisamos executar para integrar o Bootstrap em um projeto de tema WordPress simples.

Primeiro, vamos revisar quais arquivos vamos criar.

A estrutura de um tema WordPress

Um tema WordPress tem uma estrutura de arquivos predeterminada. Alguns arquivos s�o necess�rios para que o tema seja reconhecido pelo WordPress.

O primeiro arquivo necess�rio � style.css. Este CSS cont�m estilos para o tema.

Mais importante ainda, ele tamb�m possui uma tarefa especial: fornece meta informaç�es sobre o tema, como nome, descriç�o, autor e outros detalhes extras.

As meta informaç�es precisam estar presentes no cabeçalho do arquivo na forma de coment�rios CSS.

O outro arquivo necess�rio � index.php, que � o principal arquivo de tema do WordPress, e o �ltimo arquivo de modelo de fallback do qual o WordPress se baseia, caso n�o encontre nenhum outro arquivo de modelo para exibir seu conte�do.

Existem muitos arquivos opcionais, mas para nosso simples tema baseado em Bootstrap, adicionaremos apenas os seguintes arquivos:

header.php e footer.php, para organizar as seç�es de cabeçalho e rodap� do nosso tema WordPress, respectivamente, que s�o exibidas em todas as p�ginas do nosso tema.
functions.php, onde escreveremos o c�digo para carregar a folha de estilo personalizada do tema, estilos e scripts de Bootstrap e muito mais.

Se voc� estiver curioso, confira os outros modelos que voc� pode personalizar nos documentos do WordPress.

Vamos ao que interessa!

Etapa 1: Criando a pasta do tema

Primeiro, vamos para a pasta de instalaç�o do WordPress e navegamos at� wp-content -> themes. Aqui, criamos uma pasta para o nosso tema. Vamos cham�-lo bs-theme.

Etapa 2: Adicionando style.css

Vamos criar nosso primeiro arquivo necess�rio style.css, onde colocaremos nosso c�digo CSS personalizado.

No topo deste documento estilo (certifique-se de n�o deixar nenhum espaço em branco na parte superior), podemos adicionar a informaç�o meta sobre o nosso tema entre os coment�rios de CSS (lembre-se de substituir os <THEME_URI>, <AUTHOR_NAME>, e <AUTHOR_URI>, que s�o espaços reservados com valores relativos a seu pr�prio projeto), como mostra a Listagem 1.


  /*   
 Nome do tema: Test Theme
 URI do tema: <THEME_URI>
 Descriç�o: Testando integraç�o.
 Autor: <AUTHOR_NAME>
 Autor URI: <AUTHOR_URI>
 Vers�o: 1.0
 */

Listagem 1. Arquivo style.css

Agora o WordPress pode exibir as informaç�es do nosso tema na �rea de administraç�o. Podemos adicionar nossos estilos personalizados abaixo dos coment�rios das meta informaç�es.

Por exemplo, vamos adicionar algumas regras CSS para estilizar o <body>, como mostra a Listagem 2.


  @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
  body {
    padding-top: 4.5rem;
    font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif;
    color: #001A33;
  }

Listagem 2. Regras CSS

Etapa 3: Criando a seç�o de cabeçalho

Vamos começar criando header.php na pasta themes. Em seguida, adicionamos o seguinte conte�do da Listagem 3.


  <!DOCTYPE html>
  <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title><?php wp_title('�', true, 'right'); ?> <?php bloginfo('name'); ?></title>
      <meta name="description" content="">
      <meta name="author" content="">
      <meta name="viewport" content="width=device-width">
      <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
      <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">
        <?php bloginfo('name'); ?>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" 
      data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" 
      aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">
              Home <span class="sr-only">(current)</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

Listagem 3. Arquivo header.php

Na Listagem 3, a maioria das meta informaç�es da seç�o head do HTML � adicionada usando v�rias tags do WordPress, como bloginfo('name') para obter o nome do site, obter o t�tulo da p�gina e acionar o gatilho de aç�o wp_head, usado pelo WordPress para adicionar links e outras funcionalidades para a seç�o .wp_title() wp_head() head.

Tamb�m usamos diferentes classes de Bootstrap para criar uma barra de navegaç�o responsiva. No entanto, a barra de navegaç�o n�o � din�mica, ou seja, n�o est� integrada � funcionalidade do menu WordPress.

Isso significa que n�o podemos criar um menu do WordPress na �rea de administraç�o e v�-lo exibido no front-end do nosso site.

Dar � barra de navegaç�o est�tica do Bootstrap o poder do WordPress ser� o pr�ximo passo.

Etapa 4: Integrando a Navegaç�o Bootstrap ao Menu WordPress

Para realizar nossa tarefa, precisamos de uma classe WordPress walker, que permita aos desenvolvedores atravessar estruturas de dados semelhantes a �rvores, com o objetivo de renderizar a marcaç�o HTML.

Existem algumas classes walker de navegaç�o do Bootstrap dispon�veis na Internet. Para este tutorial, usaremos o BS4nav walker de Dominic Businaro, dispon�vel gratuitamente no GitHub.

Pegamos bs4navwalker.php e salvamos no diret�rio raiz do nosso tema (que chamamos bs-theme anteriormente neste tutorial).

Em seguida, criaremos um arquivo functions.php (esse nome � exigido pelo WordPress) na pasta raiz do tema e escreveremos esta linha de c�digo:


  require_once('bs4navwalker.php');

Agora podemos usar a classe walker de navegaç�o Bootstrap em nossos arquivos de tema.

Localizamos a marcaç�o para o elemento nav que acabamos de escrever e a modificamos conforme a Listagem 4.


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

Listagem 4. Modificaç�es no elemento nav

O c�digo da Listagem 4 pressup�e que j� criamos um menu na �rea de administraç�o do WordPress e temos algumas p�ginas armazenadas no banco de dados do WordPress.

Para exibir nossa barra de navegaç�o, estamos usando a funç�o wp_nav_menu().

Os valores para os par�metros menu e para os theme_location quais estamos passando wp_nav_menu() s�o retirados das configuraç�es do nosso menu WordPress, que j� dever�amos ter criado na �rea de administraç�o.

Os valores para a container, container_id e container_class s�o retirados das classes do Bootstrap e atributo CSS id no elemento div que envolve o elemento ul e que cont�m os itens da lista para os nossos links de navegaç�o.

O valor do par�metro menu_class vem da classe Bootstrap no elemento ul.

O valor do par�metro depth indica quantos n�veis hier�rquicos nosso menu de navegaç�o ter�. Definimos isso como 0, que � o valor padr�o e representa todos.

O par�metro walker aqui � muito importante e o definimos como uma nova inst�ncia da classe bs4navwalker, respons�vel pela renderizaç�o da marcaç�o de navegaç�o do Bootstrap.

E n�s terminamos!

Voc� encontrar� uma explicaç�o detalhada com a lista completa de par�metros para a funç�o wp_nav_menu() na p�gina de documentaç�o do WordPress.org.

Etapa 5: Criando a seç�o de rodap�

A pr�xima etapa � criar o arquivo footer.php e adicionar o seguinte conte�do da Listagem 5.


      <footer>  
      </footer>
      < ?php wp_footer(); ?>
    </body>
  </html>

Listagem 5. Arquivo footer.php

wp_footer() � usado pelo WordPress para colocar dinamicamente diferentes elementos de marcaç�o, como links para folhas de estilo e arquivos JavaScript, na parte inferior da p�gina.

� importante observar que muitos plugins usam os gatilhos wp_head() e wp_footer() para colocar os elementos necess�rios no cabeçalho e no rodap� da p�gina.

Portanto, voc� precisar� adicionar os dois gatilhos, conforme mostrado neste tutorial. Fazer isso evitar� interromper a funcionalidade desses plugins quando nosso tema for ativado.

Etapa 6: Adicionando o arquivo de modelo index.php

index.php � o segundo arquivo necess�rio para cada tema do WordPress, ent�o vamos em frente e cri�-lo. Em seguida, adicionamos o conte�do da Listagem 6.


  <?php get_header(); ?>
    <!-- Other Content here -->
  <?php get_footer(); ?>

Listagem 6. Arquivo index.php

Usando get_header() e get_footer() instru�mos o WordPress a incluir os modelos criados anteriormente header.php e footer.php dentro de index.php.

Etapa 7: Adicionando o loop do WordPress

Para mostrar nossas postagens, usaremos o famoso loop do WordPress.

Dentro de index.php, entre as tags de cabeçalho e rodap�, vamos adicionar o seguinte c�digo da Listagem 7.


  <div>
    <?php if ( have_posts() ) : while ( have_posts() ) :   the_post(); ?>
      <h2>
        <a href="<?php the_permalink() ?>">
          <?php the_title(); ?>
        </a>
      </h2>
      <?php the_content(); ?>
    <?php endwhile; else: ?>
      <p>There no posts to show</p>
    <?php endif; ?>
  </div>

Listagem 7. C�digo do loop

� o que acontece na Listagem 7:

Verificamos se h� postagens ligando have_posts().
Usando um loop while, passamos por todos os posts existentes.
Por fim, mostramos o t�tulo e o conte�do de cada uma. Tamb�m podemos obter informaç�es extras, como a data de publicaç�o da postagem, o autor da postagem, os coment�rios associados a cada postagem e assim por diante.

Etapa 8: Adicionando o Bootstrap

Ap�s adicionar nossos arquivos de modelo, agora temos um bom tema inicial que podemos ativar atrav�s do menu Apar�ncia no painel de administraç�o.

Se visualizarmos nosso tema, obteremos um site sem estilo, que se parece com a seguinte captura de tela da Figura 1.

Figura 1. Site sem estilo

Para dar ao nosso tema uma apar�ncia de Bootstrap, precisamos incluir os arquivos dele em nosso projeto.

Vamos pegar o arquivo ZIP do Bootstrap em getbootstrap.com e copiar os arquivos para o nosso tema.

Para fins organizacionais, podemos adicionar CSS e JSP ao nosso projeto e colocar os arquivos correspondentes dentro da pasta apropriada.

Nossa estrutura de pastas deve ficar assim:

- bs-theme
- style.css
- footer.php
functions.php
- header.php
- index.php
single.php
- css
bootstrap.min.css
- js
- vendor
bootstrap.bundle.min.css

Em seguida, faremos o seguinte:

Enfileirar a folha de estilo do Bootstrap e os arquivos JavaScript;
use ganchos do WordPress para inserir os arquivos de inicializaç�o na p�gina da web.

Vamos começar abrindo functions.php e adicionando o seguinte c�digo da Listagem 8.


  <?php
   
  function themebs_enqueue_styles() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );
  }
  add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles');
  function themebs_enqueue_scripts() {
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.bundle.min.js', 
    array( 'jquery' ) );
  }
  add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');

Listagem 8. C�digo do functions.php

Usamos v�rios m�todos do WordPress aqui, ent�o vamos olhar brevemente para cada um deles:

wp_enqueue_style(): esse m�todo enfileira e carrega a folha de estilo passada como um par�metro. Na Listagem 8, usamos para carregar a folha de estilo Bootstrap e nosso arquivo CSS personalizado.
wp_enqueue_script(): esse m�todo enfileira e carrega um arquivo de script. N�s o usamos para carregar o pacote JavaScript do Bootstrap, indicando a biblioteca jQuery como uma depend�ncia. O jQuery j� vem com o WordPress, portanto n�o precisamos carreg�-lo usando uma URL (o WordPress sabe exatamente onde obt�-lo).
get_template_directory_uri(): esse m�todo obt�m o URI do diret�rio de temas atualmente ativado.
add_action('wp_enqueue_scripts', '...'): esse m�todo conecta nossas funç�es � aç�o wp_enqueue_scripts (usada ao enfileirar estilos e scripts que precisam aparecer no front-end do site).

Voc� pode encontrar mais informaç�es sobre como incluir arquivos CSS e JavaScript nos documentos do tema WordPress.

Na Figura 2 temos o nosso tema com sua apar�ncia brilhante do Bootstrap.

Figura 2. Tema do Bootstrap

Conclus�o

Neste tutorial, vimos como criar um tema simples do WordPress que integra ao Bootstrap.

Com essa nova habilidade, voc� est� pronto para criar seu pr�prio tema WordPress incr�vel baseado em Bootstrap e compartilh�-lo com o mundo!