Como criar um tema responsivo para WordPress com base no bootstrap

Com tantos dispositivos com diferentes resoluções, tamanhos de tela e sistemas operacionais, sites e aplicativos responsivos se tornaram um requisito essencial para a presença online de uma marca.

Mais de 52% de todo o tráfego da web vem de dispositivos móveis e esse número está aumentando. Desenvolvedores da Web, profissionais de marketing e designers entendem o enorme potencial se o site for responsivo e puder ser visualizado, navegado e navegado facilmente em qualquer dispositivo, independentemente de qualquer resolução e proporção de aspecto.

Temas responsivos são uma abordagem ao design da web em que os elementos de um site se ajustam automaticamente de acordo com os tamanhos de tela e navegadores para melhor legibilidade, experiência do usuário e tempo de carregamento. Os desenvolvedores e designers de temas estão lucrando com o conceito de sites responsivos. Muitas marcas estão contratando cada vez mais o desenvolvedor WordPress para tornar seus sites responsivos e compatíveis com dispositivos móveis.

Em novembro de 2013, Matt Cutts, chefe da equipe de spam na Web do Google, lançou um vídeo explicando que o design responsivo não afetará você negativamente nas SERPs. Além disso, o Google também publicou suas diretrizes em sites compatíveis com dispositivos móveis que contêm detalhes sobre como o Google trata os sites responsivos.

Com o surgimento de smartphones e outros dispositivos semelhantes, o uso de desktops e laptops está em declínio (lento). Isso significa que as pessoas estão usando seus smartphones para pesquisar praticamente qualquer coisa: de notícias a lojas locais, de consultas de voos aos filmes mais recentes. Essa tendência crescente apresenta uma grande oportunidade de negócios para a comunidade online.

WordPress e Web responsiva

WordPress é o CMS mais popular que capacita uma parte significativa da Internet. Ele conta com o suporte de uma forte comunidade de desenvolvedores e designers de código aberto. Com o surgimento do web design responsivo, muitos desenvolvedores de tema renomados mudaram para o design responsivo e introduziram estruturas fáceis de entender, como Redux Framework, Carrington Core e Bootstrap , que é ideal para criar um tema WordPress responsivo do zero.

O que é Bootstrap?

Bootstrap é uma estrutura de código aberto usada para desenvolvimento web front-end amigável para dispositivos móveis. Isso significa que ele pode ser usado para criar temas WordPress responsivos por meio de seus modelos de design baseados em CSS e Java Script.

Bootstrap é um kit de ferramentas que simplifica o processo de desenvolvimento para aplicativos da web complexos. É uma ideia da equipe de desenvolvimento do Twitter e foi disponibilizado para a comunidade de código aberto. A estrutura se tornou popular por causa de sua estrutura leve, pois é codificada em LessCSS.

Ao adicionar Bootstrap ao seu site, você pode chamar suas classes para adicionar elementos pré-construídos como botões, grades, tabelas, menu, etc. Da mesma forma, você pode tornar os elementos existentes responsivos, sem adicionar consultas de mídia complexas.

Crie um tema de bootstrap para WordPress

A criação de um tema de bootstrap do WordPress é, na verdade, um processo de 8 etapas. A boa notícia - é fácil construir um tema baseado no Bootstrap.

Etapa 1: Descompacte o Bootstrap

1. Em primeiro lugar, instale o WordPress no seu domínio.
2. Baixe e descompacte o Bootstrap.
3. Uma vez feito isso, conecte-se usando um cliente FTP como o FileZilla.
4. Navegue até wp-content > themes .
5. Crie uma nova pasta na pasta Themes e nomeie-a BootSTheme . Carregue o conteúdo do Bootstrap descompactado para esta pasta.
6. Quase toda instalação do WordPress contém os seguintes arquivos:

• footer.php
• header.php
• index.php
• style.css

Agora, crie quatro arquivos vazios com os nomes acima na pasta BootSTheme .

Etapa 2: Configurando Bootstrap

Na pasta BootSTheme, abra o style.css e cole o código a seguir.

 / *
Nome do tema: MyTheme
URI do tema: https://cloudways.com
Descrição: Mytheme construído no bootstrap
Versão: 1.1
Autor: Ahsan Parwez
URI do autor: https://cloudways.com
* /

São basicamente comentários que fornecem descrições e detalhes sobre o tema. Eu recomendo fortemente que você altere esses comentários para refletir os detalhes do seu tema.

Etapa 3: Copiar o código

Para este tutorial, não usarei todos os arquivos CSS e JS fornecidos no pacote Bootstrap. Para iniciar o processo de desenvolvimento, copie o código do arquivo bootstrap.min.css e cole no arquivo style.css . Neste ponto, o arquivo style.css deve ter a seguinte aparência.

Nota: Você pode obter o código CSS minimizado completo no site Bootstrap.

Etapa 4: Configurando o modelo HTML

Preciso de um modelo HTML básico para trabalhar. Para facilitar as coisas, usarei este tema HTML . Eu recomendo que você baixe para continuar com o tutorial.

O WordPress possui as funções get_header () e get_footer () que, por padrão, chamam os arquivos header.php e footer.php respectivamente.

Comece cortando o código HTML do topo até o primeiro div do contêiner e cole-o no arquivo header.php . O arquivo ficaria assim:

O arquivo footer.php conterá o resto do código:

Neste ponto, se você carregar o tema Bootstrap WordPress e ativá-lo, não verá nada porque o index.php não contém nada.

Para carregar o cabeçalho e o rodapé, usarei a função interna do WordPress para chamar esses elementos. Para isso, cole o seguinte código no index.php :

 <? php get_header (); ?>

<? php get_footer (); ?>

Agora, os elementos de cabeçalho e rodapé serão carregados em nosso site, mas obteremos uma página básica sem nenhum tipo de estilo.

Etapa 5: definir o cabeçalho e o rodapé

No arquivo header.php , irei importar a folha de estilo do Bootstrap usando a função echo get_stylesheet_uri () do WordPress (leia mais a função no Codex do WordPress ). Isso importará o style.css para o site e você verá uma barra de menu superior agora.

Você também pode adicionar o style.css adicionando o seguinte código no topo do arquivo header.php .

 <link rel = "stylesheet" type = "text / css" href = "<? php echo get_stylesheet_directory_uri (). '/style.css'?>"> 

Mas isso não é tudo, os recursos de JavaScript em nossa página ainda não funcionarão e não veremos nenhum menu suspenso. Para habilitar isso, vamos importar nossos arquivos js importando diretamente o arquivo por URL no footer.php . Cole o código a seguir antes da tag de fechamento do corpo .

 <script src = "../ wp-content / themes / MyBSTheme / js / bootstrap.min.js"> </script>

WordPress é conhecido por sua personalização e plug-ins. Para informar ao WordPress onde colocar os ganchos de plug-ins, vamos colar <? Php wp_head (); ?> e <? php wp_footer (); ?> nos arquivos header.php e footer.php . Além disso, para definir títulos dinâmicos do site, vamos usar wp_title (); função no arquivo header.php entre as tags <title> .

 <title> <? php wp_title ('|', verdadeiro, 'certo'); > </title>

O código acima chamará o título do post separado por '|' do que o nome do site. O verdadeiro booleano exibirá o título. Se você definir como false , ele apenas retornará o valor e não o exibirá. 'right' define a localização do título da postagem à direita do separador.

Etapa 6: Exibindo as postagens em destaque

Em seguida, chamarei as postagens dinamicamente na página inicial (conforme exibido pelo ) e as exibirei no topo (semelhante às postagens em destaque que vemos em muitos sites baseados em WordPress).

Escreva o seguinte código em seu index.php :

 <? php

query_posts ('posts_per_page = 1');

while (have_posts ()): the_post (); ?>
<div>
<h2> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h2>
<p> <? php the_excerpt (); ?> & lt; / p>
</div>

<? php endwhile; wp_reset_query (); ?>

Como você pode ver, eu estou usando um loop while e definir o número de mensagens para um usando post_per_page. Esta linha exibirá apenas a última postagem do blog na parte superior da página e, após o fechamento do loop, o query_posts é redefinido.

A classe jumbotron é definida no arquivo bootstrap.min.css . Vou usá-lo para estilizar as postagens em destaque usando tags <h2> e the_permalink (); função. O hiperlink é criado no título do post, e the_permalink (); links de função para a URL de toda a postagem. Para mostrar um trecho da postagem, usei outra função embutida do WordPress, the_excerpt () ;.

Etapa 7: listando suas categorias

Vou agora listar as categorias à esquerda da página inicial. Vou criar várias instâncias de um div estilizado com as classes Bootstrap e a função WordPress wp_list_categories (); .

Cole o seguinte código no index.php :

 <div class = "panel panel-default panel-body">
<div>
<div>

<ul>
<? php wp_list_categories ('orderby = name & title_li ='); ?>
</ul>

</div>
</div>
</div>

Isso irá listar as categorias por nome com um bom efeito de foco.

Etapa 8: exibir as últimas postagens e autores

Por fim, mostraremos as últimas postagens do blog na página inicial. Vamos iniciar outra tag div e, sob esta div , usaremos uma técnica de loop while semelhante à que usamos na postagem em destaque, mas não vamos limitá-la com query_posts (); .

 <div>

<? php while (have_posts ()): the_post (); ?>

<h3> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h3>
<p> <? php the_excerpt (); ?> </p>
<p> postado por <? php the_author (); ?>

<? php endwhile; wp_reset_query (); ?>

</div>

Funções do WordPress the_author () ; e busque o nome de usuário do autor da postagem. Podemos usá-lo para exibir dinamicamente o nome do autor em cada postagem.

Depois de ter concluído tudo com sucesso, você terá uma página como a que você vê na imagem mostrada acima.

Adicionando Bootstrap em um tema WordPress existente

Se estiver usando um tema WordPress que não responde, você pode adicionar Bootstrap para torná-lo compatível com dispositivos móveis. Você pode usar o WordPress e o Bootstrap de duas maneiras diferentes.

Adicionando Bootstrap usando um CDN

Você pode começar a usar os elementos do Bootstrap simplesmente adicionando seu CDN ao seu arquivo header.php.

Nota: Este método pode causar problemas de compatibilidade, portanto, certifique-se de fazer um backup completo antes de adicionar o código a seguir.

 <! - Último CSS compilado e reduzido ->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<! - Último JavaScript compilado e reduzido ->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script>

Você pode acessar o arquivo header.php usando FTP ou um plugin. O código acima contém as versões reduzidas de arquivos CSS e JS que oferecem melhor desempenho.

Adicionando Bootstrap dentro de functions.php

Neste método, você precisa baixar a biblioteca Bootstrap. Carregue o arquivo Bootstrap.min.css e o arquivo Bootstrap-theme.min.css para a pasta CSS do seu tema e carregue o arquivo Bootstrap.js para a pasta do tema chamada “js” do seu tema WordPress.

Agora, acesse seu arquivo functions.php para enfileirar esses scripts.

Adicione o seguinte código dentro do seu arquivo functions.php.

 function reg_scripts () {
    wp_enqueue_style ('bootstrapstyle', get_template_directory_uri (). '/css/bootstrap.min.css');
    wp_enqueue_style ('bootstrapthemestyle', get_template_directory_uri (). '/css/bootstrap-theme.min.css');
    wp_enqueue_script ('bootstrap-script', get_template_directory_uri (). '/js/bootstrap.min.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'reg_scripts');

Você também pode pular a parte de upload e enfileirar diretamente o CDN de bootstrap assim.

 function my_scripts_enqueue () {
    wp_register_script ('bootstrap-js', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array ('jquery'), NULL, true);
    wp_register_style ('bootstrap-css', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all');

    wp_enqueue_script ('bootstrap-js');
    wp_enqueue_style ('bootstrap-css');
}
add_action ('wp_enqueue_scripts', 'my_scripts_enqueue');

Salve o arquivo e carregue-o de volta no servidor.

Qual é o próximo?

Este tutorial é focado principalmente na criação de um tema WordPress básico a partir de um modelo HTML e torná-lo responsivo usando o Bootstrap 3.x. Em postagens futuras, farei mais páginas como single.php, front-page.php e functions.php. Também explicarei como importar folhas de estilo e JavaScripts do arquivo functions.php.

Caso necessite de alguma ajuda, basta postar um comentário abaixo e entrarei em contato com você.