Criação de temas Wordpress usando Bootstrap passo a passo

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
 */

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;
  }

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>

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>

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>

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(); ?> 

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>

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

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.

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'); 

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.

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!