WordPress: Como Criar um Tema Responsivo Usando HTML5

Os temas no WordPress são arquivos que definem a fachada de seu website. Um tema inclui HTML, PHP e CSS e, frequentemente, JavaScript/Query também.

Nesse tutorial de WordPress, você irá aprender como criar um tema WordPress usando HTML5, CSS3 e os princípios do design responsivo. Você também irá aprender como separar várias partes do tema em ‘Templates’.

Temas, como plugin, são separados do meio do código do WordPress. Temas permitem que seu site tenha um layout consistente para cada página e post, e pode rapidamente ser modificado para mudar completamente o visual dele e a sua experiência de uso.

Para exibir a informação do WordPress ou do conteúdo de um post, você deve utilizar as tags de template que são fornecidas pelo WordPress. E é isso que que será explicado nesse tutorial.

Após completar esse tutorial e criar um novo tema no WordPress, é uma boa ideia seguir ver como criar um tema filho no WordPress para aperfeiçoar o que você aprendeu aqui. O tema que você criou nesse tutorial te dará os fundamentos perfeitos para usar no tutorial do tema filho.

Baixe o Guia de Recursos HTML definitivo

O Que Você Vai Precisar

Para completar os passos nesse tutorial de desenvolvimento de Temas no WordPress, você irá precisar de um editor de texto, como Notepad++ ou NetBeans. Você também precisará de um acesso FTP para sua conta de hospedagem e a instalação do WordPress

Também é recomendado baixar o guia de códigos CSS e deixá-lo aberto enquanto você estará editando um arquivo WordPress Style.CSS.

O Que é HTML5 e Por Que Você Deve Usá-lo

HTML5 é a última versão de linguagem HTML e oferece um grande conjunto de características e faz mais fácil mostrar seu conteúdo consistentemente em qualquer computador, laptop, tablet ou smartphone.

A maior mudança é que um novo conjunto de elementos semânticos está disponível. Por exemplo, o rodapé de qualquer página HTML pode agora ser definida usando o elemento <footer></Footer>, e isso conta para o navegador web para o conteúdo contido nesta parte do rodapé. Na versão antiga do HTML, o conteúdo do rodapé será criado usando um elemento genérico, como <div></div>

O documento básico HTML5 vai se parecer com isso:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My HTML5 Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <section>
        <header>
          <h2>My Articles</h2>
        </header>
        <article>
          <header> 
            <h2>An Article</h2> 
          </header>
          <p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>
        </article>
      </section>
    </main>
    <footer>
        <p>Copyright &copy; 2017</p>
    </footer>
  </body>
</html>

O que É Design Responsivo?

Design Responsivo significa que seu site é automaticamente mostrado para o visitante no melhor formato se baseando no tamanho de sua tela. O layout da página responde literalmente ao espaço disponível na tela do visitante.

O conteúdo colocado perfeitamente para que nada seja cortado, nada transborde para fora da tela. Seu site parece tão limpo quanto o possível.

Você deve pensar no layout de seu site como uma série de grades, o conteúdo e a porcentagem da largura da grade. Por exemplo, a div pode tirar 50% do espaço disponível, em vez de ter 800px de largura. Uma largura de página total div consome 100% do espaço disponível. Se você quiser quatro divs dentro dele em linha, cada um recebe 25% do espaço.

Para Imagens, você pode configurá-las para ter a largura máxima de 100% do seu tamanho atual e ajustar a altura para o auto. Quando a imagem reduz de tamanho a imagem automaticamente reduz sua largura e altura.

Para imagens, usando a largura: 100% em vez da largura máxima: 100% causaria a imagem ocupar 100% do espaço disponível em vez de parar na largura atual em pixels. Se a imagem é de 200px de largura mas dentro na div que ocupa 100% da tela, largura máxima significa que a imagem nunca será maior que 200px de tamanho.

/* GOOD WIDTH */
.inline-text-box {
  width: 50%;
}
/* BAD WIDTH */
.inline-text-box {
  width: 800px;
}
/* GOOD IMAGE */
img {
  max-width: 100%;
  height: auto
}
/* BAD IMAGE */
img {
  width: 100%;
  height: auto;
}

Para fazer um tema WordPress totalmente responsivo, você pode também utilizar um recurso CSS3, chamado consulta de mídia. Na consulta de mídia você define opcionalmente um tipo de mídia para afetar (tela, impressão etc), pelo menos um recurso de mídia (largura máxima, orientação etc). Os recursos de mídia podem ser encadeado usando um ‘E’ Palavra-chave.

/* Media Type and Media Feature and Media Feature*/
@media only screen and (min-width: 400px) and (max-width: 800px) {
  .inline-text-box {
    width: 100%;
    display: block;
  }
}
/* Media Feature Only */
@media (max-width: 1200px) {
  .inline-text-box {
    width: 50%;
  }
}
  • No primeiro exemplo, o CSS será aplicado para qualquer tela (monitor, celular etc) que tenha a largura (a área dentro do navegador, não a janela toda) dentro de 400px e 800px.
  • O segundo exemplo será aplicado em qualquer mídia que o visualize.
  • O outro tipo de mídia é ‘impressão’, o que significa que  o CSS é somente aplicado se o usuário estiver olhando uma pré-visualização de sua página.

Uma lista completa de tipos de mídia e recursos de mídia está disponível no site Mozilla Developer Network Website

Em sua planilha de estilos CSS, você define regras que ditam quando o conteúdo é mudado, qual conteúdo é mudado e como o conteúdo é mudado. Você pode mudar qualquer atributo CSS. Dessa forma, como a largura de qualquer caixa de texto, ou a cor do plano de fundo de uma div. Alguns exemplos de regras de características de mídia que ditaram quando as regras são aplicadas:

  • Largura máxima – Largura máxima da área visível do navegador, mais ampla que isso é a regra não é aplicada.
  • Largura mínima – Largura mínima da área visível, menor que isso e a regra não é aplicada.
  • Orientação – se a tela está no modo retrato ou paisagem.

Um exemplo comum é quando você tem duas caixas de texto lado a lado e ambas ocupam 50% da tela. À medida que a janela do navegador fica menor, as caixas automaticamente se ajustam para continuar ocupando 50% da janela em vez de desaparecer ao lado. Se a janela do navegador fica muito pequena para mostrar uma em cima da outra. Você também pode esconder o conteúdo inteiramente se for mais apropriado.

Etapa 1 – Armazenando seu Tema e seus Arquivos

Mesmo fazendo mudanças mínimas em um tema pode causar erros e fazer seu site inutilizável. Um problema comum após fazer mudanças em seu código, se você tentar carregar seu site e em vez de abrir uma tela branca conhecida como ‘A tela branca da morte’. Depurar o erro que causou a tela branca pode ser difícil.

Para evitar qualquer interrupção para seu website, é importante testar todas as mudanças na versão offline. Uma vez que as mudanças estão completas, você pode atualizar a versão funcional para seu website.

Você pode aprender como criar um Servidor de desenvolvedor WordPress no windows aqui, tutorial de como rodar WordPress no Docker (qualquer OS) pode ser encontrado aqui.

Vamos começar o tutorial atual e aprender como criar um tema no WordPress! Os Temas WordPress são armazenados em sua própria pasta no content-wp/theme/Na pasta wp_content/themes/, crie uma nova pasta chamada meu-tema. A pasta criada precisa de um nome curto e único que seja fácil de ser identificado.

Importante! O nome das pastas não poderão conter números e espaços, seu tema não deve ter o mesmo nome que outro tema, se você planeja compartilhar seu tema, você deve checar se outro tema com o mesmo nome já não foi utilizado na pasta tema do wordpress.org.

Os temas no WordPress são criadas somente com dois arquivos – index.php e style.css – e o WordPress usará isso para mostrar cada página e post de seu site.

Obviamente, você quer postagens, páginas, e outras seções de seu site tenham seus próprios layouts. Cada seção de seu website é dado o seu próprio arquivo que contém o HTML e o PHP que somente se aplicam a essas seções – cada arquivo é chamado de “Modelo”.

Se você utiliza posts personalizados, você pode criar modelos que somente se aplicarão ao post deste tipo. Caso queira que um post de uma categoria específica seja personalizada diferente, você pode utilizar as afirmações dentro do loop.

Cada arquivo modelo deve utilizar o nome correto conforme definido pela documentação da WordPress.

Alguns arquivos modelos além do index.php:

  • Header.php  contém qualquer HTML que vai no topo de sua página, começando pelo <!DOCTYPEhtml>.
  • Single.php –  usado ao exibir somente uma página de seu Blog.
  • Comments.php – define como os comentários e a caixa de texto são exibidos.
  • Footer.php – contém qualquer HTML que vai no final de suas paginas, incluindo </html>.

Para uma lista completa de Modelos. Visite o Manual de desenvolvimento de temas WordPress.

Agora que você tem a pasta para armazenar seus temas, você precisará criar algum arquivo modelo básico.

Etapa 2 – Criando Arquivos Modelos e a Folha de Estilos CSS

Na pasta meu-tema crie os seguintes arquivos php:

  • Header.php
  • Index.php
  • Footer.php
  • Functions.php
  • Sidebar.php
  • Single.php
  • Page.php

Além dos arquivos PHP, crie um novo arquivo CSS nomeado slyle.css (a principal folha de estilos deve ser chamada style.css).

Como criar um tema responsivo usando HTML5

No primeiro passo, após todos os arquivos serem criados é adicionar alguma informação no topo do style.css que o WordPress irá ler e exibirá no painel de controle do administrador.

A informação deve ser escrita como comentário CSS de várias linhas, cada cabeçalho em sua própria linha começando com uma palavra chave de cabeçalho.

Há uma série de palavras-chave disponíveis para você definir as informações como Autor (seu nome), site do autor, descrição do tema, o nome do tema, a versão do tema etc. Para uma lista completa de palavras chave de cabeçalho, visite a página WordPress codex – título do arquivo.

O formato para escrever no cabeçalho é keyword: information.

/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.com/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Importante! Na sétima e oitava linhas só são necessárias se planeja compartilhar seu tema na WordPress.org. Se você estiver utilizando o tema em seu próprio website você pode pular essas duas linhas e fechar a seção de comentários.

Nesse ponto, seu tema já está visível na seção de temas do painel de controle do administrador. Você verá uma caixa branca e cinza com meu tema escrito abaixo. Após seu tema estiver completo você pode capturar sua tela para exibi-la aqui.

Como criar um tema responsivo usando HTML5

Se você ativar seu tema nesse ponto, você receberá uma página em branco  pois seu index.php está vazio e nenhum modelo existe.

Agora, vamos adicionar uma regra ao arquivo CSS que mudará a cor de fundo da página. Adicione uma linha em branco após fechar o comentário */ na linha 10.

Na linha abaixo da linha em branco (linha 11 do arquivo) escreva o seguinte:

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

A primeira entrada é uma parte importante do estilo responsivo. * é um coringa e encaixa em cada classe que se encontra no documento HTML. isso estabelece que a largura e altura final de cada página deve incluir conteúdo preenchimento e borda. Se você não ajustou isso e tem duas caixas de largura de 50% lado a lado com qualquer preenchimento e borda, eles não permaneceram lado a lado, pois seu tamanho real é maior que 100%. Uma caixa com 100% de largura e 1% de preenchimento é realmente de 102% de largura, uma vez que 1% do preenchimento é adicionado para esquerda e direita. Essa regra efetivamente adiciona o preenchimento dentro da caixa em vez de fora dela.

A segunda entrada apenas altera a cor do plano de fundo do branco para que possamos ver rapidamente se a folha de estilo está sendo usada, também definimos a fonte padrão que será usada em nosso tema

Etapa 3 – Antes de Começar o Desenvolvimento

Antes de realmente começar criando o layout do tema do WordPress. Você deve adicionar alguns pedaços de códigos a vários arquivos para se dar um bom ponto de partida para se construir. Esses passos não são requeridos mas são altamente recomendados.

Essas etapas terão uma explicações esclarecimentos para que você possa alcançar rapidamente para realmente criar um layout.

Primeiramente incluiremos um arquivo CSS chamado normalize.css. Diferentes navegadores terão diferentes configurações padrão para coisas como margens da página e preenchimento. Normalize.css define explicitamente uma série de números de atributos para assegurar que todos os navegadores exibem sua página exatamente como ela é. Se você não usar uma folha de estilos para definir padrões, um problema comum é quando você tenta fazer do seu cabeçalho principal no canto superior esquerdo de sua página, haverá espaço em branco acima do cabeçalho

Functions.php

Abra functions.php  e adicione os seguintes códigos:

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
view rawLoad normalize CSS hosted with ❤ by GitHub

Em seguida você precisa ativar os widgets da barra lateral. Se você não incluir esse codigo, o link do menu de widgets não ficará visível no painel de controle do administrador e você não poderá adicionar nenhum widget. Enquanto ainda estiver em functions.php, abaixo da função anterior, adicione o seguinte código:

// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'          => 'Sidebar',
                                'id'            => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget'  => '</div>',
                                'before_title'  => '<h2>',
                                'after_title'   => '</h2>',
                ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );

Agora nós precisaremos registrar um menu de navegação personalizado para permitir o uso do Appearance → menus feature No painel de administração, abaixo do código anterior adicione o seguinte:

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );

Salve e faça o upload do functions.php para o diretório de seu tema.

Sidebar.php

Agora abra o arquivo sidebar.php e o seguinte código. Isso faz com que a barra lateral e os widgets apareçam no seu tema sempre que get_sidebar() é inserido.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

A primeira linha diz ao WordPress que se não há widgets ativado, a barra lateral HTML não deve aparecer. A segunda linha estabelece os atributos do elemento que contém os widgets. HTML5 fornece o elemento ‘alem’ das barras laterais. A terceira linha é a função do wordPress para realmente exibir os widgets. A última linha encerra a instrução if inicial.

Salve e faça o upload do sidebar.php para o diretório de seu tema.
Para facilitar a navegação entre posts e páginas, abra o painel de controle do administrador e adicione widgets página e posts recentes na barra lateral. Agora vamos avançar para construir o layout.

Etapa 4 – Construindo um Layout com Modelos Header.php

Header.php definirá o topo do nosso documento, começando com a declaração  DOCTYPE.

Todo documento HTML deve começar com a declaração do DOCTYPE,  que informa ao seu navegador como deve interpretar o documento. O doctype do HTML5 é simplesmente um html. A marca de abertura <html> precisa de um atributo de idioma correto para o idioma escolhido durante a instalação – language_attributes()

No campo do título,você usa uma linha de código que exibe o nome do seu site, seguindo de uma abreviatura, uma declaração para exibir o slogan de seu site, OU o título da página atual ou publicação que você está vendo.

O caractere ‘?’ é um operador condicional PHP nomeado o operador ternário. Na linha de código, is_front_page() é uma função do WordPress que se torna TRUE se vendo a primeira página, ou FALSE se vendo qualquer post ou página. A função antes do cólon é usada se TRUE for retornado. E a função após o cólon é utilizada caso se torne FALSE.

Como você vê abaixo, a função bloginfo() é repetitivamente utilizadas com diferentes parâmetros para conseguir diferentes pedaços de informação pela base de dados do WordPress. Antes da tag <head> ser fechada com </head>, você deve incluir a ação wp_head() para se certificar que todas as funções anexadas a ele sejam executadas.

A função body_class() dará ao corpo a função das classes padrão definidas pelo WordPress a linha final permite o menu de navegação estar amostra se ele for criado no painel de controle do administrador. O header.php se parece com isso:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
   <header class="my-logo">
   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
 </header>
 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Caso queira usar uma logo como cabeçalho, substitua <?php bloginfo(‘name’); ?> com seu código de imagem dentro das tags <header>

Salve e faça o upload do header.php para o diretório de seu tema.

Index.php

Index.php define a página inicial e também será usado como layout padrão se os modelos específicos (i.e single.php. page.php) não forem encontrados.

Usaremos tags de modelo  para garantir que o cabeçalho (get_header), a barra lateral (get_sidebar) e o código do rodapé (get_footer) estejam incluídos em nossa página inicial. Alguns de nossos elementos terão classes atribuídas a eles, e as classes serão escritas quando chegarmos ao arquivo style.css.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

O Loop começa no <?php if (have_posts() ) : while ( have_posts() ) : the_post(); ?> e termina em <php endif; ?> dentro do loop, os seguintes tags de modelo são usados:

  • <?php the_permalink(); ?> – exibe o URL correto da postagem atual
  • <?php the_title_atribute(); ?> – exibe o título dessa postagem num formato seguro para o atributo do título do link
  • <?php the_tigle(); ?> – produz o título da postagem
  • <?php the_author(); ?> – exibe o trecho da postagem que é gerado automaticamente caso você não tenha escrito
  • <?php the_excerpt(); ?> – exibe o trecho da publicação, que é gerado automaticamente caso você não tenha escrito nada.

Importante! <header> </ header> podem ser usados várias vezes em qualquer página e não se referem especificamente ao cabeçalho da página.

Seções e artigos devem ter elementos de cabeçalho onde qualquer texto dentro de <h1>, <h2>, etc é usado. Se uma seção ou artigo não tiver texto de cabeçalho, eles poderão ser excluídos.

Salve, faça o upload do index.php para o diretório de seu tema, se você visitar seu site agora, você verá uma página muito simples.

Como criar um tema responsivo usando HTML5

Você pode ver que o título da guia é o nome e o slogan do seu site. O topo da página tem o título do seu site( ou o seu logotipo caso tenha optado por isso). Quaisquer posts que existam tem seu título, autor e trecho exibidos. Embora a página seja exibida bem, você ainda precisa fechar as tags <body> e <html> abertas em footer.php

Footer.php define o rodapé de cada uma das páginas e deve fechar qualquer tag HTML aberta em outros modelos de arquivo. neste caso <body> e <html> ainda estão abertos pelo header.php.

Também deve incluir a ação wp_footer() para assegurar que qualquer código final do WordPress e Java Script está adicionado à página. Se você estiver logado como administrador quando você visitar sua homepage, post, ou página, você vai notar que a barra de administrador não aparece. O código mostra que a barra do administrador está conectado à ação wp_footer().

Também iremos adicionar o elemento semântico HTML5 <footer></footer> para definir explicitamente o rodapé.

<footer>
      <p>Copyright &copy; 2017</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Salve e faça o upload de footer.php para o diretório do seu tema.

Single.php

Single.php  define o layout quando vendo um único post no seu website. Isso pode ser completamente diferente para o index.php.

Nesse caso, nós não iremos adicionar a barra lateral para os posts apenas para realçar a diferença no layout.

O conteúdo principal pega a largura inteira da página desde que nós coloquemos na categoria “conteúdo completo” pela página de estilos, o link foi removido do título como sendo desnecessário aqui. A função para exibir o post inteiro é the_content():

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

Page.php

Page.php define o jeito que as páginas são exibidas e pode ser novamente diferente do layout do índice e do post

Lembre-se de que se não existem modelos, o modelo do index.php é usado no lugar. Se você não criar page.php, não usará o mesmo layout como post.php.

Para fazer a diferença mais visível, iremos novamente adicionar uma barra lateral ao layout, e fazer o conteúdo da página ocupar 70% de sua largura.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Salve e faça o upload de page.php para o diretório do seu tema.

Style.css

Adicione o mesmo para o fundo da folha de estilos. Isso irá causar várias caixas terem o fundo branco e borda azul, para ajudar a visualizar quanto espaço cada um realmente toma.

/*
Theme Name: My Theme1
Author: Your Name
Author URI: http://www.yourwebsite.com
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}
.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Salve style.css e faça o upload para o diretório do seu tema.

Agora que você tem os modelos básicos e a página de estilo, você pode facilmente navegar pelas suas postagens e páginas. Seu novo tema criado deverá aparecer com isso.

Como criar um tema responsivo usando HTML5

Utilizando Consultas de Mídia

Desde que nosso layout básico tenha 2 linhas de caixas na página principal, nós podemos facilmente mudar o jeito que eles funcionam quando a janela do navegador é muito pequena para mostrar propriamente o texto.

Para esse tutorial de temas do WordPress nós iremos mudar a largura dos posts na lista de postagem quando a janela do navegador estiver abaixo de 800px. Em vez de ter 2 posts lado a lado, cada post irá ter sua própria linha. Nós faremos isso adicionando a consulta de mídia. Se você precisar recomeçar consulta de mídia, volte para a seção O que é “design responsivo”? antes de continuar.

Quando estiver escrevendo na consulta de mídia, você pode escrever em qualquer lugar da folha de estilos. Você pode colocar. Todas as consultas de mídia no fundo da folha de estilo, ou escrever, consultas de mídia específicas para itens específicos logo abaixo da definição original. É apenas uma questão do que você considera mais lógico.

Nós primeiramente iremos escrever a consulta de mídia que afeta a categoria .article-loop,  na qual tem a largura padrão de 49%. Escreveremos isso diretamente abaixo da definição original; a consulta de mídia irá estar que se a janela do navegador é  menor que 800px de largura, a categoria .article-loop deverá utilizar 99% do espaço disponível.

Então nós iremos escrever  consulta de mídia que, quando a janela do navegador é menor que 600px de largura, estende a barra lateral abaixo do conteúdo principal e a barra lateral para ficar com 100% da largura. Isso seria um layout muito mais apropriado para um aparelho móvel onde o espaço é limitado.

Ainda em style.css, encontre .article-loop que deve estar na linha 73. Abaixo da categoria .article-loop, escreva:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}

A primeira linha aqui, indica que a consulta de mídia deve somente afetar telas (ou seja, não a afeta a impressão) é apenas afeta a janela dos navegadores que estão a 800px ou menos de largura. Salve e faça o upload de style.css para o seu website. Mude o tamanho da janela do seu website, quando passar de 800px de largura você verá que as caixas de cada post mudam de largura e se sobrepõem.

Continue reduzindo a largura da janela do navegador até estar menor possível. Você verá que todo o texto se torna mais difícil para ler conforme o espaço fica muito pouco. Mas em nenhum ponto desaparece da tela. Se as larguras forem definidas como pixel em vez de porcentagens, logo que a janela ficar muito pequena, a barra lateral irá desaparecer e requer um scroll horizontal.

A próxima consulta de mídia, nós iremos adicionar e irá ser similar com a de cima. Irá informar o conteúdo principal e a barra lateral para pegar 100% do espaço disponível, e a barra lateral irá para baixo do conteúdo principal.

Importante: como isso afeta diferentes categorias que estão em lugares diferentes na pagina de estilo, em vez disso, compensa colocar isso na parte de baixo da página de layout.

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

Salve e faça o upload do style.css para a o diretório do seu tema. Volte para sua página principal e redimensione a janela do navegador até que o conteúdo ocupa 100% da largura e a barra lateral vá para baixo do conteúdo principal.

Usando a barra lateral, clique em qualquer lugar disponível na página e você verá a barra lateral também está abaixo do conteúdo da página, e tudo se encaixa perfeitamente.

Entendendo Tag de Modelos WordPress e os Ganchos de Ação

Para integrar completamente seu tema com o WordPress, você deve usar as Tags modelo e ação gancho, esses dois são duas coisas totalmente distintas.

Tags Modelo

Tags modelo são funções PHP providas pela WordPress para facilmente incluir os arquivos modelo (como o header.php) de onde seu tema em outro arquivo ou para mostrar alguma informação do banco de dados.

Por exemplo, para mostrar o rodapé na página principal, mas não em qualquer outra, adicione get_footer() e no final do index.php, mas não na page.php.

Abaixo há duas breves listas de algumas importantes tags modelo lhe dar uma ideia de como as tags estão disponíveis.

Tags modelo para incluir os arquivos modelo:

  • get_header() – inclui o modelo header.php
  • get_sidebar() – inclui o modelo sidebar.php
  • get_footer() –  inclui o modelo footer.php
  • get_search_form() – inclui o modelo searchform.php

Tags modelo para mostrar a informação da base de dados.

Importante: algumas tags modelo são usadas no loop. O loop é explicado após o tutorial, e simplesmente significa que o código recupera qualquer post solicitado.

  • bloginfo() – mostra a informação solicitada como parâmetro, se não bloginfo(“nome”) apareça no nome do seu website como definido no painel de controle do administrador (como definido na lista de parâmetros)
  • single_post_title() – mostra o título da publicação atualmente exibida em single.php
  • the_author() – mostra o autor da publicação atualmente exibida
  • the_content() – mostra o texto principal de um post ou página.
  • the_exerpt() – o trecho do post ou página.

A lista completa de Tags modelo WordPress podem ser encontradas aqui.

Ações Gancho

Ações gancho são funções gancho providas pela wordPress que geralmente tem outra função enganchada a ela, alguns ganchos não tem funções ligadas por padrão e existe para ser usado por plugins. Ações gancho permitem plugins se ligarem às suas próprias funções e tê los funcionando em vários pontos da pagina carregando.

No cabeçalho de seu tema modelo, a ação gancho wp_head() é chamada para incluir o cabeçalho HTML padrão dentro das tags <head></head>. Possui algumas funções básicas do WordPress para adicionar o HTML à página, e permite que qualquer função seja anexada aos plugins para serem executados.

Na seção de rodapé de seus temas, o gancho de ação wp_footer() é chamado para incluir o HTML e o JavaScript padrão e executar todas as funções anexada aos plugins

Importante! Se você não usar as ações gancho ao criar  o tema do WordPress, o código principal é importante estará faltando e os plugins não poderão funcionar corretamente.

Se você por exemplo, não chamar wp_footer() em seu modelo footer.php impedirá que a barra do administrador apareça quando você estiver logado como administrador. O código principal do WordPress que faz com que a barra de administração apareça anexada a ação gancho wp_footer() e as funções anexas não podem ser executadas se a ação gancho não existir.

Para uma explicação completa sobre ações gancho, leia as seções “ações” e “ações gancho” no tutorial de Como criar um plugin WordPress.

O WordPress Loop

O loop é usado para exibir posts. Ele pode ser usado para mostrar um único post ou todas as postagens publicadas em uma única página, o HTML que você escreve dentro do loop será usado para exibir todas as postagens solicitadas pelo loop. O código continua em loop até que chega no final do post. Se exibindo um post você usa a tag modelo, use a tag modelo the_content() dentro o loop para mostrar o conteúdo de um post. Se exibir uma lista de todos os posts publicados, você pode usar the_excerpt() dentro do loop para que a postagem inteira não seja exibida.

O loop é uma abreviatura  de várias linhas ifthen… declaração composta de quatro linhas de código. A primeira linha indica que, se um post está disponível use o código a seguir para mostrar o post. Se nenhuma publicação correspondente for encontrada, você pode definir um texto substituto. O exemplo padrão do WordPress parece assim e a linha comentada é onde suas tags de modelo HTML são escritas.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// HTML and template tags here to define the layout, and what is shown from the post
<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Conclusão

Parabéns! Você criou o seu primeiro tema responsivo HTML5 no WordPress!

Agora você entende Modelos e Tags Modelo, você deve dar uma outra olhada na lista de modelos e as Tags modelos do codex do WordPress e experimentar adicionar novas seções em seu layout. Experimente alterar o estilo, largura do css e ver como seu navegador responde a várias situações. Altere as regras para as consultas de mídia e veja se há melhores regras que podem ser definidas.

Você pode também seguir para o tutorial sobre como criar um tema filho no WordPress.

Author
O autor

Ariane G.

A Ariane é SEO Team Leader com experiência em conteúdo, localização e SEO. Seu desafio é levar a Hostinger ao topo dos resultados no Brasil, França e Reino Unido. Eventualmente ela compartilha seu conhecimento no blog e nos tutoriais da Hostinger e no tempo livre ela gosta de explorar lugares novos e viver intencionalmente.