Criar um tema WordPress de raiz pode parecer um desafio, mas com o conhecimento certo e uma abordagem passo a passo, qualquer pessoa pode construir um tema funcional e otimizado. Neste guia, vamos criar um tema do zero utilizando Bootstrap, CSS puro e VS Code. Além disso, abordaremos práticas de SEO e otimização.
1. Preparando o projeto
Antes de começarmos a fazer código, precisamos preparar o ambiente de desenvolvimento.
Ferramentas Necessárias:
- WordPress instalado localmente (usando XAMPP, LocalWP ou outro ambiente de desenvolvimento)
- Editor de código (VS Code)
- Navegador para testes
- Bootstrap para estilos
2. Criando a Estrutura do Tema
Navegue até a pasta wp-content / themes do seu WordPress local e crie uma nova pasta com o nome do seu tema, por exemplo, meu-tema.
Dentro dessa pasta, crie os seguintes arquivos e diretórios:
Arquivo style.css
O WordPress reconhece temas pelo arquivo style.css. Adicione o seguinte cabeçalho:
/*
Theme Name: Nome do tema
Theme URI: https://exemplo.com
Author: Nome do criador do tema
Author URI: https://seusite.com
Description: Um tema WordPress feito de raiz
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meu-tema
*/
3. Estruturando os Arquivos do Tema
Agora vamos configurar os arquivos principais do nosso tema.
Arquivo index.php
O index.php é o principal ponto de entrada do tema. Vamos criar uma estrutura básica:
<?php get_header(); ?>
<main>
<h1>Bem-vindo ao Meu Tema WordPress</h1>
<p>Este é um tema criado do zero.</p>
</main>
<?php get_footer(); ?>
Arquivo header.php
O cabeçalho contém a estrutura inicial do HTML:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title><?php bloginfo(‘name’); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo(‘name’); ?></h1>
<p><?php bloginfo(‘description’); ?></p>
</header>
Arquivo footer.php
O rodapé do site:
<footer>
<p>© <?php echo date(‘Y’); ?> – Todos os direitos reservados.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
4. Adicionando Bootstrap ao Tema
Para usar o Bootstrap, vamos podemos adicioná-lo no functions.php:
function meu_tema_scripts() {
wp_enqueue_style(‘bootstrap-css’, ‘https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css’);
wp_enqueue_style(‘estilo-principal’, get_stylesheet_uri());
wp_enqueue_script(‘bootstrap-js’, ‘https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js’, array(‘jquery’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘meu_tema_scripts’);
Agora podemos usar as classes do Bootstrap no nosso tema. Por exemplo, podemos modificar o index.php para:
<main class=”container text-center”>
<h1 class=”mt-5″>Bem-vindo ao Meu Tema WordPress</h1>
<p class=”lead”>Este é um tema responsivo usando Bootstrap.</p>
</main>
5. Melhorando SEO e Otimização
Para otimizar nosso tema:
- Estrutura semântica: Use tags HTML apropriadas (header, main, article, footer).
- Meta tags: Adicione no header.php:
<meta name=”description” content=”<?php bloginfo(‘description’); ?>”>
- Carregamento eficiente: Scripts e estilos são carregados corretamente via functions.php.
- Imagens otimizadas: Utilize wp_get_attachment_image() para carregar imagens corretamente.
6. Personalização com Widgets e Menus
Adicionando suporte a menus:
No functions.php, adicione:
function meu_tema_menus() {
register_nav_menus(array(
‘menu-principal’ => __(‘Menu Principal’, ‘meu-tema’)
));
}
add_action(‘after_setup_theme’, ‘meu_tema_menus’);
Agora, no header.php, podemos exibir o menu:
<nav>
<?php wp_nav_menu(array(‘theme_location’ => ‘menu-principal’)); ?>
</nav>
7. Criando um Template para Posts
Para exibir posts dinamicamente, criamos single.php:
?php get_header(); ?>
<main class=”container”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</article>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>
8. Publicando o Tema
- Compacte a pasta do tema (meu-tema.zip).
- No dashboard do WordPress, acesse Aparência > Temas > Adicionar Novo.
- Carregue e ative o tema.
Criar um tema de WordPress de raiz
Criar um tema WordPress de raiz pode parecer complexo no início, mas seguindo esses passos, você terá um tema funcional, responsivo e otimizado para SEO. Com o tempo, pode personalizá-lo ainda mais com novas funcionalidades e design aperfeiçoado.
