Como Criar um Tema Responsivo para WordPress Usando HTML5: 6 Etapas e Códigos Necessários

Embora você sempre possa instalar um tema pronto para WordPress, criar um tema personalizado pode tornar seu site ainda mais exclusivo.

Com um tema próprio escrito em linguagens de programação populares, como PHP, HTML e CSS, você também pode selecionar recursos ou elementos específicos com base em suas necessidades para melhorar o desempenho do site.

Felizmente, criar um tema do WordPress do zero não precisa ser complicado. Por exemplo: um tema simples com layout único e elementos estáticos é bem fácil de fazer, pois você só precisa de dois arquivos.

Neste tutorial, você aprenderá a criar um tema do WordPress do zero em seis etapas. Também explicaremos como deixar esse tema responsivo, para que ele funcione perfeitamente em dispositivos móveis, e falaremos sobre outros conceitos importantes para a personalização.

Baixe o Guia de Recursos HTML definitivo

Como Criar uma Área de Testes WordPress para Desenvolvimento de Temas

Ao desenvolver seu próprio tema, evite usá-lo imediatamente no site ativo, pois isso pode causar erros.

Em vez disso, configure uma área de teste do WordPress usando a ferramenta integrada que acompanha o plano de hospedagem Business WordPress da Hostinger. Essa opção é bem mais rápida do que configurar um ambiente local, pois você não precisará instalar diversas ferramentas.

Para isso, navegue até o hPanel → Sites → Gerenciar. Na barra lateral, clique em WordPress → Teste.

Por fim, crie a área de testes do WordPress indo para a guia Teste e clicando em Criar ambiente de teste. Digite o subdomínio de sua preferência e clique em Criar.

Como Criar um Tema WordPress

Depois de configurar a área de preparação, siga estas etapas para criar um tema do WordPress do zero usando PHP, HTML5 e CSS3.

1. Crie e Armazenar os Arquivos do Tema

Para criar seu próprio tema personalizado, são necessários pelo menos dois templates. O arquivo index.php exibe o conteúdo, enquanto o style.css gerencia os elementos visuais do tema, como as fontes.

Entretanto, a maioria dos temas do WordPress tem arquivos de template adicionais para definir o layout de áreas específicas do site, como posts e páginas. Aqui estão alguns dos mais comuns:

• header.php – contém o HTML exibido na parte superior do seu site WordPress.
• footer.php – armazena o HTML que fica na parte inferior do site.
• sidebar.php – gera os elementos da barra lateral.
• functions.php – adiciona funcionalidades ao tema, como os widgets do WordPress.
• single.php – lida com posts avulsos, incluindo tipos personalizados.
• page.php – mostra o conteúdo estático de uma única página.

Neste tutorial, usaremos todos esses arquivos de modelo. Siga estas etapas para criá-los no seu site de teste:

1. Faça login no hPanel e acesse o Gerenciador de arquivos do seu site.

2. Navegue até o diretório de temas do WordPress acessando public_html → staging → wp-content → themes.
3. Na barra lateral, clique em Nova pasta.
4. Digite o nome do tema. Ele deve ser único, curto e conter apenas caracteres alfanuméricos sem espaços. Clique em Criar.
5. Clique duas vezes na pasta para abri-la. Selecione Novo arquivo na barra lateral.
6. Digite index.php e clique em Criar.
7. Repita as duas etapas anteriores para todos os seus arquivos de templates. Neste tutorial, criaremos style.css, header.php, footer.php, functions.php, sidebar.php, single.php e page.php.

Esses arquivos de tema devem estar na mesma pasta dentro do diretório de instalação do WordPress para permitir que o CMS carregue esses arquivos de tema com base na hierarquia de templates.

Você não precisará de todos esses templates personalizados se todo o seu site usar o mesmo layout. No entanto, recomendamos usá-los para separar o código principal do conteúdo adicional e, com isso, simplificar a personalização do tema.

Você também precisa criar arquivos JavaScript no diretório do tema se quiser incluir elementos de design dinâmicos. Não os usaremos neste tutorial; em vez disso, criaremos uma pasta chamada Images para armazenar elementos visuais, como logotipos.

No momento, esses arquivos de tema estão vazios. Neste tutorial, vamos adicionar a apresentação visual primeiro e configuraremos o layout depois.

2. Configure a Folha de Estilo CSS Inicial

Depois de criar todos os arquivos de template para o seu tema, podemos começar a escrever o código em si. Comece trabalhando na folha de estilo style.css que criamos anteriormente para permitir que o WordPress reconheça seu conteúdo.

A esse ponto, você deve adicionar as informações que serão exibidas na área de administração do WordPress, como o nome do tema, o autor e a descrição. Você deve escrever esses dados com base na formatação do cabeçalho de arquivos do WordPress. Aqui está um exemplo:

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

Clique no ícone de disco no canto superior direito para salvar o arquivo. Agora, volte ao menu de gerenciamento de sites do hPanel → WordPress → Teste. Clique em Gerenciar teste em seu ambiente de teste e selecione Staging Admin Panel.

Navegue até a barra lateral → Aparência → Temas e você verá a base do seu tema.

Vamos adicionar elementos visuais para tornar o tema mais interessante. Abra o arquivo de folha de estilo e escreva seu código CSS sob o cabeçalho. Por exemplo, adicionaremos o seguinte para alterar a cor do plano de fundo:

* {
  box-sizing: border-box;
}
body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

Vamos detalhar este código para entendê-lo. O trecho começa com um asterisco (*) para selecionar todos os elementos HTML e aplicar o estilo dentro do primeiro par de chaves. Nesse caso, adicionamos um modelo de caixa CSS que contém o conteúdo, o preenchimento e a borda.

Enquanto isso, o segundo estilo define a cor de fundo e a fonte padrão para todo o conteúdo HTML dentro das tags <body></body>.

No momento, você não verá nenhuma alteração, pois o conteúdo HTML está ausente. Incluiremos mais códigos CSS neste arquivo depois de adicionar elementos e criar a estrutura do tema.

3. Adicione Funções ao Seu Tema WordPress

Agora que seu tema do WordPress aparece no painel de administração, é hora de criar sua estrutura e desenvolver funções e recursos. Para isso, adicionaremos códigos aos arquivos functions.php e sidebar.php.

functions.php

Devido a configurações inconsistentes de margens e preenchimento, cada navegador podm exibir seu tema do WordPress de forma diferente. Para garantir que ele seja exibido corretamente em todos os browsers, vincule o arquivo normalize.css a functions.php.

O modelo normalize.css é uma folha de estilo predefinida que fornece uma base para seu código CSS, permitindo que ele seja carregado de forma consistente em diferentes navegadores. Para adicioná-lo, insira a função de normalização em functions.php:

<?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");
}

add_action('wp_enqueue_scripts', 'add_normalize_CSS');

Esse código solicitará ao WordPress que escolha o arquivo normalize.css do URL de origem anexado.

Em seguida, adicione uma função para ativar a área de widgets ou a barra lateral. Um widget é uma extensão modular que permite adicionar recursos específicos a diferentes seções do seu site WordPress. Para ativá-lo, adicione o código abaixo ao arquivo functions.php:

// 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, vamos ativar o tema acessando Aparência → Temas e clicando em Ativar. Em seguida, você deverá ver o menu Widgets na aba Aparência — por lá, é possível adicionar ou remover widgets do seu site.

O código contém um hook de ação – uma função PHP que carrega o código de outro arquivo para modificar as configurações e os recursos do WordPress sem alterar o núcleo. Discutiremos essa terminologia mais detalhadamente na seção posterior.

Por fim, adicione o código abaixo para ativar a função que insere um menu de navegação personalizado ao seu tema:

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

Ele mostrará a opção Menus no menu Aparência. Lembre-se de salvar as alterações clicando no botão de disco no editor de código do Gerenciador de arquivos sempre que adicionar um novo código.

Você pode inserir várias outras funções no arquivo functions.php. Por exemplo, desenvolvedores costumam adicionar uma imagem em destaque e miniaturas de postagens.

sidebar.php

Em seguida, criaremos a barra lateral do tema do WordPress para exibir os widgets usando a função get_sidebar(). Insira o código abaixo no arquivo sidebar.php e salve as alterações.

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

No código, a instrução if verifica se o WordPress já exibe uma barra lateral. Caso contrário, ele mostrará os widgets que você adicionou no menu Widgets, na área Aparência.

4. Crie um Layout Para Seu Tema Personalizado

Depois de adicionar a barra lateral e as funções de normalização de CSS, vamos criar o layout do seu tema WordPress. Ao final desta etapa, a estrutura do site começará a tomar forma.

Além do index.php, modificaremos os arquivos header.php, footer.php, single.php, page.php e style.php para dar um layout dedicado a cada uma dessas páginas.

header.php

Este arquivo de template define a área superior de sua página da web. Inicie seu código com o seguinte:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O trecho acima permite que o cabeçalho do seu tema ajuste seu tamanho automaticamente com base no tamanho da tela usando o design responsivo. Explicaremos esse conceito em detalhes mais adiante.

Em seguida, adicione o seguinte:

<!DOCTYPE html>
<html <?php language_attributes(); ?>

A declaração DOCTYPE informa ao navegador o tipo de arquivo de seu template de cabeçalho. Enquanto isso, a função language_attributes() especifica o HTML como a principal linguagem de codificação do documento.

Em seguida, adicione as tags HTML <head></head>, que contêm os metadados do documento, como o título da página, o conjunto de caracteres padrão, a janela de visualização do design responsivo e a folha de estilo vinculada. Todos esses detalhes são incluídos em diferentes tags.

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

Em seguida, criamos a seção body do documento HTML e usamos a função body_class para atribuir automaticamente uma classe à tag <body> para estilização.

<body <?php body_class(); ?>>

Adicione o cabeçalho, ao qual atribuiremos a classe my-logo. Em seguida, usamos as tags <h1></h1> para mostrar o logotipo na pasta Image como o título principal e a âncora para o URL do site.

<header class="my-logo">
    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/Images/logo.png" alt="Site Logo" width="50px" height="50px"></a></h1>
</header>

Por fim, adicione o código abaixo para inserir um menu de navegação no cabeçalho do tema:

<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ); ?>

index.php

O arquivo index.php define a estrutura da página inicial e serve como layout padrão se outros modelos de página não estiverem disponíveis.

Se você tiver layouts diferentes para o cabeçalho, a barra lateral e o rodapé, adicione as tags de template para chamar o código deles no index.php. Por exemplo, use get_header para vincular o cabeçalho, e assim por diante.

Para dividir sua página em seções, use elementos semânticos HTML5 como <head> e <section>. Se você quiser aplicar a folha de estilo CSS a eles, adicione a classe da seguinte forma:

<head class="class-name">

Aqui está um exemplo de código no arquivo index.php que contém tags de modelo e elementos semânticos:

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

No código acima, também adicionamos um loop do WordPress – isto é, um código PHP que recupera posts do banco de dados e os passa para outras funções. Ele começa em <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> e termina em <?php endif; ?>.

O loop contém as seguintes funções para recuperar detalhes específicos da postagem:

• <?php the_permalink(); ?> – gera o URL real da postagem.
• <?php the_title_attribute(); ?> – exibe o título da postagem em um formato compatível com os atributos do elemento.
• <?php the_title(); ?> – mostra o título da postagem.
• <?php the_author(); ?> – gera o nome do autor da postagem.
• <?php the_excerpt(); ?> – extrai o trecho da postagem, que será gerado automaticamente se você não escrever um.

footer.php

O arquivo footer.php define o conteúdo na parte inferior do tema, como informações de direitos autorais ou um mapa do site. Você também pode adicionar as tags de fechamento <body> e <html> aqui, caso não as tenha especificado no header.php.

Defina o conteúdo do rodapé com o elemento semântico HTML <footer></footer>. Por exemplo, adicionaremos informações de copyright na parte inferior.

Também adicionaremos o hook de ação wp_footer para carregar o código da função wp_footer no núcleo do WordPress ou nos arquivos de plugins. Veja como ficará o código completo:

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

single.php

O arquivo single.php determina o layout de todos os tipos de postagem no WordPress. Além dos posts de blog, ele define tipos de postagem personalizados, como uma página de produto em uma loja online.

Inicie o código chamando o arquivo de cabeçalho usando a função get_header(), como no exemplo abaixo:

<?php get_header(); ?>

Em seguida, adicione as tags <section></section> para criar o contêiner principal e atribuir uma classe para estilização. Use um loop do WordPress para recuperar o conteúdo do post e exibi-lo usando a função the_content().

Se o conteúdo da postagem não estiver disponível, exibiremos uma mensagem de erro. Veja a seguir como fica o código completo:

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

Diferentemente de outros arquivos de template, não adicionamos a função get_sidebar() para omitir a barra lateral e os widgets nas postagens.

page.php

Áreas como landing pages contêm conteúdo estático, que raramente é alterado. Em vez do single.php, elas herdarão o layout do index.php se não houver templates de página dedicados.

Usaremos um código semelhante ao single.php, mas com vários ajustes para distinguir as páginas do site dos demais posts. Além de inserir uma barra lateral, tornaremos a área de conteúdo menor. Veja como o código ficará:

<?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 content was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Embora usemos o mesmo loop, esse código obterá as páginas em vez das postagens, pois o colocamos no arquivo page.php.

Neste ponto, seu tema personalizado do WordPress já tem um layout e algum conteúdo. No entanto, se você acessar seu site de teste agora, ele mostrará as informações em formato de texto simples (além de um logotipo), pois você não adicionou nenhum estilo.

Em vez de abrir os arquivos de modelo PHP por meio do Gerenciador de arquivos, você pode usar o Editor de Arquivos de Tema, no próprio WordPress, para adicionar ou modificar seu código. Acesse-o no menu Aparência no painel de administração do WordPress.

5. Aprimore seu Design com a Folha de Estilos CSS

Após adicionar os elementos HTML e atribuir classes a cada um deles, retorne à sua folha de estilo para personalizar o design do seu tema. Comece adicionando os códigos abaixo ao arquivo style.css para modificar o tamanho, o preenchimento e a cor do logotipo:

.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}

Em seguida, adicione o código abaixo às seções de estilo no layout do tema. Personalizaremos a âncora h1, o artigo e o rodapé:

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

Por fim, atribua o estilo a outros elementos, como a área de conteúdo e a barra lateral, adicionando os seguintes trechos de código:

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

Depois de salvar as alterações, o site de teste deverá ter a seguinte aparência:

Para modificar a folha de estilo, você pode adicionar CSS personalizado ao WordPress por meio do editor de temas. Acesse o recurso em Aparência → Temas → Personalizar → CSS Adicional na barra lateral.

6. Teste e Implemente seu Tema

Antes de implantar seu novo tema personalizado, vamos ativá-lo em seu site de teste do WordPress para verificar se ele é exibido e funciona corretamente.

Acesse o painel de administração da área de teste e ative o novo tema no menu Temas. Em seguida, acesse o site de teste clicando no botão Visitar Site na parte superior da barra de administração.

Depois de verificar o visual e os layouts, implemente o tema em seu site ativo. Para isso, retorne ao Gerenciador de arquivos da área de teste, clique na pasta do tema e selecione o botão de download na barra superior. Faça o download como um arquivo ZIP.

Extraia a pasta para o seu computador e faça upload dela no diretório /wp-content/themes do seu site ativo por meio do Gerenciador de arquivos. Ative o tema por meio do painel de administração do WordPress.

Conceitos Essenciais no Desenvolvimento de Temas para WordPress

Depois de criar seu próprio tema, talvez você queira modificar seus recursos e visual posteriormente. Para ajudar você nesse processo, explicaremos os conceitos essenciais de design e funcionalidade no desenvolvimento de temas do WordPress.

Consultas de Mídia e Design Responsivo

As telas dos visitantes do site podem variar em resolução, tamanho e orientação. Se você desenvolver o tema apenas para desktops, ele não funcionará corretamente em outros dispositivos, como celulares.

Usar princípios de design responsivo garante que o seu tema funcione corretamente, independentemente do tamanho da tela. Eles permitem que o site ajuste o layout, o posicionamento do conteúdo e o tamanho dos elementos automaticamente, detectando o tipo de tela dos dispositivos.

Para ativar o design responsivo no seu tema, adicione consultas de mídia CSS para definir a apresentação do conteúdo quando a janela de visualização for alterada. Elas usam porcentagens para determinar o layout e o tamanho em relação à tela.

Por exemplo, cada seção no design de um tema de duas colunas sempre ocupará 50%, independentemente da resolução e da orientação. Há várias propriedades CSS para consultas de mídia, mas algumas das mais comuns são:

• max-width – define a largura máxima da área visível do navegador.
• min-width – determina a largura mínima da área visível.
• orientation – verifica se a tela está no modo retrato ou paisagem.

Recomendamos adicionar as consultas de mídia na parte inferior e atribuir classes para uma organização mais limpa do código e uma personalização mais simples do tema.

Por exemplo, adicione a seguinte consulta de mídia para ajustar automaticamente o tamanho do conteúdo principal e da barra lateral do tema criado anteriormente:

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

Essa regra se aplica a telas e janelas de navegador com largura máxima de 400 pixels. Os elementos selecionados — content-area e primary-sidebar — mostrarão 80% de seu tamanho original se a janela de visualização estiver dentro da dimensão especificada.

Talvez sejam necessárias regras adicionais para outros tamanhos e orientações de tela para garantir que o conteúdo seja sempre exibido corretamente. Por exemplo, defina uma condição quando o conteúdo for exibido em 100%:

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

Tags de Template

As tags de template são funções PHP que permitem vincular arquivos com facilidade e simplificar consultas complexas a bancos de dados. Em vez de escrever códigos longos, os desenvolvedores do WordPress podem realizar essas tarefas usando uma única linha de script.

Para aplicar um template em uma página específica, adicione a tag ao arquivo correspondente. Por exemplo, para mostrar o rodapé somente na página inicial, adicione get_footer na parte inferior de home.php e não em page.php.

Embora algumas tags sejam opcionais se você não usar o arquivo de template, outras são essenciais para garantir que os loops do WordPress funcionem corretamente. Elas recuperam informações de posts do banco de dados, permitindo que o loop obtenha e passe os dados adiante.

Para vincular um arquivo de template, aqui estão algumas das tags usadas mais comumente:

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

Enquanto isso, as seguintes tags de template exibem informações do banco de dados do WordPress:

• bloginfo() – exibe as informações solicitadas no parâmetro, como bloginfo(“name”), que mostra o nome do seu site.
• single_post_title() – apresenta o título da postagem visualizada no momento quando usado no arquivo single.php.
• the_author() – mostra o autor da postagem visualizada no momento.
• the_content() – gera o texto principal de um post ou página.
• the_excerpt() – exibe um trecho de qualquer post ou página.

Loop do WordPress

Um loop do WordPress é um código que passa pelos posts, recupera seus dados e os passa para outras funções. Sua funcionalidade básica é buscar conteúdo do banco de dados e exibi-lo no front-end.

No desenvolvimento de temas do WordPress, os loops são essenciais para exibir posts dinamicamente. Caso contrário, você se limitará ao conteúdo estático, pois seus arquivos de template não têm as informações mais recentes do banco de dados.

O loop vai para o arquivo index.php e outros templates que exibem o conteúdo da postagem. Ele sempre começa com a instrução if, como a seguir:

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

Em seguida, especifique as tags de modelo, HTML ou funções PHP para modificar os dados recuperados, se existirem. Por exemplo, use the_content() para mostrar o conteúdo completo de uma única postagem ou the_excerpt() para exibir um trecho.

Em nosso page.php anterior, exibimos as informações da página como o conteúdo principal usando o seguinte código:

<article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>

O loop do WordPress termina com a instrução else, especificando a condição a ser aplicada se os dados consultados não existirem. Por exemplo, ele mostrará uma mensagem de erro:

<?php endwhile; else : ?>
   <p><?php _e( 'Sorry, no pages matched your criteria.' ); ?></p>
<?php endif; ?>

Hooks de Ação

Hooks são funções PHP que permitem manipular o recurso padrão do WordPress sem editar os arquivos principais. Dependendo da finalidade, há dois tipos de hook: ação e filtro.

Os hooks de filtro são usados para modificar o código existente em function.php e enviar os dados alterados para o usuário. Enquanto isso, os de ação servem para criar novas funções que são executadas em um momento específico.

Além dos arquivos principais, você pode usar hooks para anexar funções de plugins do WordPress ao seu tema. Isso garante a compatibilidade entre diferentes softwares no ambiente do CMS, otimizando a estabilidade.

Além disso, os hooks permitem que você organize seu código em arquivos separados para simplificar as modificações, atualizações e depuração. Você também pode usá-los para adicionar mais recursos, como ativar o personalizador integrado do WordPress ou o editor de sites para temas de blocos.

Em nosso tema recém-criado, usamos um hook de ação no arquivo header.php para buscar o cabeçalho HTML padrão do WordPress e inseri-lo em seu código:

<?php wp_head(); ?>
 </head>

Enquanto isso, o hook de ação wp_footer() em seu template de rodapé inclui o código padrão do WordPress e executa funções definidas em plugins:

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

Se o seu tema não incluir hooks, códigos-fonte importantes não serão carregados e os plugins não funcionarão corretamente. Por exemplo, um wp_footer() ausente pode desativar a barra de administração do WordPress, pois ela está anexada ao hook de ação.

Práticas Recomendadas ao Criar Tema WordPress

Para garantir o desempenho e a integridade do seu tema WordPress, considere algumas práticas recomendadas durante o desenvolvimento:

Valide o Código e os Arquivos do Seu Tema

Verifique seu novo tema para garantir que ele esteja de acordo com os mais recentes padrões de revisão do WordPress. Além de verificar a funcionalidade, a validação de código ajuda a detectar problemas que podem afetar a segurança, a compatibilidade, o licenciamento e a qualidade do tema.

A maneira mais fácil de fazer isso é usar um plugin como o Theme Check. Recomendamos executar o teste regularmente após fazer alterações para detectar rapidamente possíveis problemas.

Teste seu Tema em Diferentes Dispositivos e Navegadores

Para garantir que as regras de consulta de mídia do seu tema do WordPress funcionem corretamente em diferentes janelas e navegadores, acesse o site em diferentes dispositivos.

Você pode simular diferentes tamanhos de tela usando a barra de ferramentas do seu navegador. Os usuários do Google Chrome podem acessá-la pressionando Ctrl + Shift + C e, em seguida, Ctrl + Shift + M. Ajuste a resolução e a proporção da tela na barra superior.

Além de testar em diferentes dispositivos, teste seu tema do WordPress em outros navegadores, pois eles podem renderizar CSS e HTML de forma diferente, causando erros que podem prejudicar a experiência do usuário.

Utilize um Template de Tema

Comece com um template de tema para simplificar o seu processo de desenvolvimento. Em vez de escrever código do zero, você só precisa adicionar estilos e recursos adicionais com base em suas necessidades.

Um template de tema geralmente segue os padrões de codificação do WordPress, fornecendo um tema de base robusto para seu desenvolvimento. Alguns também têm um grande suporte da comunidade e uma base de conhecimento para facilitar a solução de problemas.

Como existem muitos temas para iniciantes, recomendamos um tema gratuito feito por um desenvolvedor de boa reputação, como Astra ou Underscores.

Reduza e Otimize seu Código

Ao criar temas do WordPress do zero, mantenha o código limpo para reduzir o tamanho dos arquivos. Isso permite que os navegadores renderizem seu tema mais rapidamente, garantindo a velocidade ideal do site.

Para melhorar ainda mais o tempo de carregamento da página, use ferramentas como o Minifier para reduzir o tamanho de seus arquivos PHP, CSS e JavaScript. Esse processo remove caracteres adicionais que não afetam a funcionalidade do código, como espaços em branco.

Antes de reduzir seu código, faça backup dos arquivos originais, pois o resultado pode ser difícil de ler, complicando a depuração ou a manutenção.

Além disso, crie child themes – subtemas que permitem adicionar novas funções ou estilos sem afetar os arquivos do modelo principal. Eles ajudam a evitar configurações incorretas e permitem que você reverta as alterações com facilidade.

Conclusão

A criação de um tema WordPress do zero permite que você torne seu site mais exclusivo e personalizado. Você pode escolher apenas os recursos necessários, minimizando o excesso de códigos para melhorar a velocidade de carregamento da página.

Neste artigo, explicamos como criar seu próprio tema para um site WordPress. Depois de configurar uma área de preparação, siga estas etapas:

1. Crie index.php, style.css e outros arquivos de templates na pasta de temas de sua área de teste, dentro do diretório themes do WordPress.
2. Configure a folha de estilo CSS inicial adicionando as informações do desenvolvedo e a cor de fundo do site.
3. Torne seu tema do WordPress funcional adicionando uma barra lateral em functions.php e sidebar.php.
4. Crie o layout do tema do WordPress modificando o index.php e outros arquivos de modelo usando tags HTML.
5. Aprimore o design do tema adicionando CSS a cada classe por meio da folha de estilo.
6. Teste seu tema personalizado na área de preparação e envie os arquivos para o seu site principal quando terminar.

Além disso, não se esqueça de aplicar o design responsivo ao seu tema do WordPress para garantir que ele seja exibido corretamente em todos os tamanhos de tela. Por fim, configure corretamente as tags de modelo, os loops do WordPress e os hooks de ação para manter a compatibilidade com outros softwares do CMS.

Perguntas Frequentes Sobre Como Criar Tema WordPress

Para ajudar a aprofundar seu conhecimento, esta seção responderá a algumas perguntas frequentes sobre como criar um tema para WordPress.