O WordPress é um sistema de gerenciamento de conteúdo (CMS) muito popular para a criação de blogs, lojas de eCommerce e outros sites. Ele se destaca por sua flexibilidade, com suporte a milhares de temas gratuitos e pagos em várias plataformas, o que ajuda a acelerar o processo de criação de sites.
No entanto, o verdadeiro poder do WordPress está em suas opções de personalização, pois você pode ajustar a aparência do seu site com vários construtores de páginas e temas de blocos para se adequar ao seu gosto. Mas e se essas opções ainda não atenderem às suas necessidades específicas? A boa notícia é que você pode desenvolver seu tema do zero.
Este guia descreve a criação de um tema de WordPress clássico. Você aprenderá a criar um tema passo a passo, o que lhe dará a base para criar temas mais avançados no futuro.
Pré-requisitos
Desenvolver seu tema do zero é um processo técnico que envolve escrever código. Você deve estar familiarizado com o seguinte:
- PHP — Essencial para adicionar funcionalidade e conteúdo dinâmico ao seu tema. É a espinha dorsal do WordPress.
- HTML — Usado para criar a estrutura dos templates do seu tema.
- CSS — Usado para estilizar o tema e garantir que ele tenha boa aparência em diferentes dispositivos e navegadores.
Além disso, a configuração de um ambiente de desenvolvimento é fundamental. Você pode criar um com o DevKinsta, uma suíte de desenvolvimento local para sites WordPress, seguindo estas etapas:
- Visite o site DevKinsta para fazer o download do aplicativo para o seu sistema operacional.
- Siga as instruções de instalação para o seu sistema operacional.
- Abra o DevKinsta e clique em Novo site WordPress.
- Em seguida, selecione a opção Novo site WordPress e preencha os campos Nome do site, Nome de usuário do administrador e Senha do administrador do WordPress.
- Por fim, clique em Criar site e aguarde de 30 a 60 segundos para que o site seja criado.
Depois que o site for criado, você poderá visualizá-lo, acessar o painel do WP e até mesmo ver o caminho do arquivo para a instalação local do WP no seu computador, o que lhe dará acesso a todo o código.
Entendendo a estrutura de temas do WordPress
Antes de explorar o processo passo a passo de criação do seu tema clássico, é essencial que você entenda a estrutura de um tema clássico de WordPress e os principais arquivos envolvidos. Esse conhecimento fornecerá uma base sólida para o desenvolvimento do seu tema.
O diretório de temas de WordPress
Todos os temas do WordPress são armazenados no diretório wp-content/themes directory da sua instalação WordPress. Cada tema reside em sua própria pasta dentro desse diretório.
Principais arquivos em um tema de WordPress
Há dois arquivos principais que todo tema clássico de WordPress deve ter:
index.php— O arquivo de template principal, que serve como fallback para todos os outros arquivos de template. É o arquivo principal que o WordPress usa para exibir o conteúdo.style.css— Esse arquivo contém os metadados do tema e os estilos CSS personalizados. É fundamental para definir a aparência do tema e fornecer informações essenciais, como nome, autor e versão.
Para estruturar bem o seu tema e adicionar funcionalidades, você pode usar arquivos de template adicionais, como os seguintes, que são comuns aos temas clássicos e usados no tema de exemplo criado neste guia:
header.php: Esse arquivo pode conter a seção de cabeçalho do seu tema, incluindo a logomarca do site e o menu de navegação.footer.php: Esse arquivo deve conter a seção de rodapé do seu tema.functions.php: Esse arquivo pode ser usado para adicionar funções personalizadas, recursos e opções de suporte ao tema.single.php: Esse arquivo de template é usado para exibir artigos individuais do blog.page.php: O arquivo de template usado para exibir páginas estáticas.
Agora que você entende os arquivos essenciais e suas funções, vamos passar para o processo passo a passo de criação do seu tema clássico de WordPress.
Como criar um tema clássico de WordPress
Há um ditado popular que diz que a melhor maneira de aprender é fazendo. Vamos aplicar esse princípio criando um tema de blog clássico que exibe seus artigos WordPress na página inicial com estilo CSS personalizado e recursos adicionais.
Etapa 1: Crie uma nova pasta de tema
Crie uma pasta no diretório themes, como myblogtheme.
Etapa 2: Adicione informações de metadados do tema
Em seguida, vamos configurar os detalhes do tema no arquivo style.css. Aqui está um exemplo de algumas informações de metadados que você pode incluir em style.css:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/No código acima:
- Nome do tema: O nome do seu tema exibido na área de administração do WordPress em Aparência > Temas.
- Autor: Mostra o nome do criador do tema.
- URI do autor: Links para o site ou perfil do autor.
- Descrição: Fornece uma visão geral da finalidade e dos recursos do tema.
- Versão: Indica a versão atual do tema para atualizações.
- Licença: Especifica os termos de distribuição.
- URI da licença: Links para o texto completo da licença.
Você pode saber mais sobre esses campos no Manual de Temas do WordPress.
Depois de adicionar essas informações ao arquivo style.css, vá para Aparência > Temas na área de administração do WordPress. Você verá o tema recém-criado listado. Ao clicar para ver os Detalhes do tema, você perceberá que todas as informações que adicionou aparecem lá.
Agora que você já tem o arquivo style.css configurado, vamos prosseguir com a criação dos outros arquivos essenciais do tema.
Etapa 3: Crie o arquivo de template principal para o seu tema
O arquivo index.php serve como o arquivo de template principal do tema. Qualquer código que você adicionar aqui será usado para exibir o conteúdo principal do seu site.
Por exemplo, se você adicionar algum código HTML básico aqui, tudo será exibido quando você ativar e visualizar o tema. No entanto, você deseja extrair informações do CMS do WordPress para exibir por meio do arquivo de template do tema, e é aqui que você usa o PHP para adicionar funções do WordPress.
Aqui você encontra a estrutura básica do arquivo index.php:
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>Na estrutura acima, get_header() e get_footer() são usados para extrair as seções de cabeçalho e rodapé de seus respectivos arquivos de template (header.php e footer.php).
Preencheremos o arquivo index.php com o código correto, mas primeiro vamos trabalhar nas seções de cabeçalho e rodapé do tema.
Etapa 4: Crie o arquivo de cabeçalho
O arquivo header.php exibe a seção de cabeçalho do seu site, que normalmente inclui elementos como a logo do site e o menu de navegação. Também inclui folhas de estilo, scripts e meta tags. Aqui está a aparência do nosso arquivo header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Vamos detalhar e explicar cada parte desse arquivo e adicionar as funções e os hooks correspondentes ao functions.php.
Vamos começar com a seção <head>. Essa seção inclui metadados essenciais, o título do site, a codificação de caracteres e a função wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>A função language_attributes(); define os atributos de idioma para o documento HTML. Em seguida, a função wp_head(); é crucial, pois permite que o WordPress e os plugins insiram elementos essenciais na seção <head>, como folhas de estilo e scripts.
Para enfileirar a folha de estilo, adicione o seguinte a functions.php:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');A função wp_enqueue_style() adiciona a folha de estilo principal à seção head. Prefixamos a função com my_custom_theme para evitar conflitos com outros temas ou plugins. Você pode optar por adicionar isso diretamente à tag head com a tag <link>.
Da mesma forma, vamos declarar uma função para adicionar o título do site à seção head:
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Agora, por causa da função wp_head(), o estilo e a tag de título são adicionados ao cabeçalho dinamicamente. Você pode verificar isso inspecionando o site do WordPress com as ferramentas de desenvolvimento do navegador. Na seção <head>, você deve ver o link da folha de estilo e a tag de título gerada dinamicamente, confirmando que eles estão incluídos.
Em seguida, no corpo, declaramos a seção da barra de navegação onde mostramos uma logo fictícia e garantimos uma opção para usar uma logo personalizada quando definida na identidade do site do WordPress:
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>A seção de logo usa a função the_custom_logo() para exibir uma logo personalizada, se houver uma definida. Se nenhuma logo personalizada for definida, ele exibirá uma imagem padrão.
Para ativar o suporte a logo personalizada, adicione o seguinte código a functions.php:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Essa função adiciona suporte a uma logo personalizada. Por fim, a seção do menu de navegação:
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>A função wp_nav_menu() exibe o menu de navegação atribuído ao local “Header Menu”. Para registrar o menu de navegação, verifique se você tem esse código em functions.php:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));Aqui está a aparência do seu arquivo function.php agora:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>Seguindo essas etapas, você garante que o cabeçalho ofereça suporte a uma logo personalizada e exiba um menu de navegação, tornando-o dinâmico e facilmente personalizável por meio do painel de controle do WordPress.
Etapa 5: Crie o arquivo de rodapé
O arquivo footer.php será responsável por exibir a seção de rodapé do seu site. Para esse tema, o arquivo footer.php exibirá apenas o ano dos direitos autorais:
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Nesse arquivo, incluímos a função wp_footer(), da mesma forma que incluímos wp_head() no cabeçalho. A função wp_footer() permite que o WordPress e os plugins insiram elementos essenciais, como scripts, logo antes da tag de fechamento </body>. Isso é fundamental para garantir que todos os recursos necessários sejam carregados corretamente e que seu site funcione conforme o esperado.
Etapa 6: Exibição de artigos de blog com o loop do WordPress
Vamos voltar ao arquivo index.php para explicar como fazer um loop e exibir os artigos do seu site do WordPress usando o loop do WordPress — uma maneira poderosa de exibir conteúdo dinamicamente. Esta é a aparência do loop:
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>O código acima verifica se há algum artigo a ser exibido antes de entrar no loop. No loop, as funções do WordPress como the_title(), the_author(), the_time('F j, Y') e the_excerpt() exibem informações sobre cada artigo do WordPress.
A função the_post_thumbnail() também é usada para exibir a miniatura, mas ela é envolvida em uma instrução if, de modo que só é exibida quando há uma imagem em destaque para o seu artigo. No arquivo functions.php, devemos adicionar suporte para miniaturas de artigos com essa função para que haja uma opção de carregar imagens em destaque quando você criar novos artigos:
add_theme_support('post-thumbnails');Adicione isso à função my_custom_theme_setup() que criamos no arquivo functions.php. É assim que o arquivo index.php se parece agora:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Você notará que foi adicionado algum código estático, que será estilizado como um banner que exibe “Welcome to my blog” e um parágrafo de texto.
Etapa 7: Criação de um template de artigo único
Antes de estilizar o tema, vamos definir um template básico para exibir artigos individuais do blog quando você clicar em qualquer página ou artigo do tema. Para fazer isso, crie um arquivo single.php na raiz do tema e adicione o seguinte código:
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>No código acima, get_header() e get_footer() incluem o cabeçalho e o rodapé. Em outras partes do código, as funções do WordPress exibem conteúdo dinâmico.
Etapa 8: Crie um arquivo de template para as páginas do WordPress
Assim como você criou um template para artigos individuais do WordPress, pode criar um template para exibir suas páginas do WordPress. Para fazer isso, crie um arquivo page.php na raiz da pasta do seu tema e adicione o seguinte código:
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Etapa 9: Estilizar seu tema
Até agora, criamos alguns modelos básicos para o nosso tema. Agora, é hora de adicionar um estilo personalizado para que você tenha uma ótima aparência. Você pode adicionar seus estilos ao arquivo style.css na pasta do tema. Para começar, copie o estilo deste gist do GitHub para o exemplo de tema criado neste guia.
Etapa 10: Teste e implemente seu tema
Até agora, você criou um tema do WordPress com sucesso. Agora, é hora de você testar e implantar o tema.
Primeiro, verifique se o tema está ativado, acessando o painel de controle do WordPress e selecionando Aparência > Temas. Se você ainda não o fez, clique no seu tema e ative-o. Você também pode clicar no botão Personalizar para definir a identidade do site, ajustar o menu e ajustar outras configurações para garantir que o site seja exibido corretamente.
Quando estiver satisfeito com seu tema, você terá algumas opções para implantá-lo:
- Você pode colocar seu site local on-line: Se estiver desenvolvendo localmente com o DevKinsta, você poderá facilmente enviar seu site para um ambiente de teste. Isso permite que você teste seu tema em uma configuração semelhante a um ambiente de produção antes de enviá-lo para o ambiente de produção. Você pode encontrar instruções detalhadas sobre como fazer isso em nossa documentação DevKinsta.
- Empacote e carregue seu tema: Como alternativa, você pode empacotar seu tema em uma pasta compactada e carregá-lo em um site on-line. Vá para Aparência > Temas > Adicionar Novo > Carregar Tema no painel WordPress e selecione o arquivo de tema compactado para fazer o upload.
Se você estiver testando o tema em um ambiente de teste, isso garante que tudo funcione conforme o esperado antes de colocá-lo no ar. Essa etapa é fundamental para você detectar possíveis problemas e garantir que o site tenha a aparência e o funcionamento perfeitos.
Resumo
Neste artigo, criamos um tema clássico de WordPress do zero. Abordamos a configuração de arquivos essenciais, a adição de estilos personalizados e a criação de templates para artigos e páginas individuais.
Se você quiser que seu site tenha a funcionalidade e a aparência exatas que deseja, desenvolver o tema de WordPress é o caminho a seguir. No entanto, se você não tiver tempo, habilidades ou disposição para fazer isso, a contratação de um profissional pode ajudá-lo a alcançar sua visão com eficiência.
Quando finalmente tiver um site que atenda às suas preferências, você precisará de uma hospedagem robusta para evitar problemas como tempo de inatividade, ataques DDoS e outros. É aqui que os provedores de hospedagem premium, como a Kinsta, brilham.
A Kinsta oferece a você uma poderosa hospedagem gerenciada de WordPress com uma arquitetura totalmente em contêiner, alimentada exclusivamente pelo Google Cloud Platform na rede de nível premium do Google.
Entre em contato conosco para saber mais sobre nossa solução de hospedagem gerenciada superior.
Deixe um comentário