Criando seu primeiro tema no WordPress

Criando seu primeiro tema no WordPress

Antes de começar essa lição, é importante que você tenha ao menos completado as duas lições anteriores:

Se você ainda não leu tais conteúdos, e acabou caindo aqui de paraquedas, recomendo voltar alguns passos antes, ok? 🤓

A ideia principal desta lição, é que você já seja capaz criar seu próprio tema, e consiga visualizar e ativar ele dentro do painel administrativo do WordPress.

Criando a estrutura de pastas

Como dito na lição anterior: "todos os temas existentes na plataforma do wordpress, estão armazenados dentro da pasta wp-content/themes", e conosco isso não vai ser diferente.

Dentro da pasta themes, vamos começar criando uma nova pasta, que vai representar o seu tema. No meu caso eu criei uma pasta chamada wp-micilini, mas você pode criar a pasta com o nome que desejar.

Tenha em mente que o nome da pasta do seu tema, deve respeitar as seguintes regras:

Criando os arquivos principais

Para que um tema seja minimamente aceito pelo WordPress, nós devemos criar pelo menos dois arquivos principais dentro da pasta do seu tema:

Esses arquivos precisam ser criados exatamente com estes nomes, ok?

Se você ainda não sabe o propósito desses arquivos, recomendo ler este artigo.

Criou ambos os arquivos dentro da pasta? Então vamos continuar!

Só com a criação desses dois arquivos, já é possível reconhecer nosso tema dentro do painel administrativo do wordpress (Apparence > Themes):

Infelizmente, ao contrário dos outros temas, você pode perceber que o nosso está sem um plano de fundo 🙁

Iremos resolver isso agora!

Criando um plano de fundo para o seu tema

Para que o wordpress reconheça o plano de fundo do seu tema no painel administrativo, você precisa criar dentro na pasta do tema, um novo arquivo chamado screenshot.png.

Atenção: O arquivo de plano de fundo precisa ser chamado de screenshot e ser salvo com a extensão do tipo PNG.

De acordo com a documentação do wordpress, o tamanho de imagem recomendado para este arquivo é 1200px de largura por 900px de altura (1200x900).

Inicialmente, o wordpress vai mostrar essa imagem em tamanho menor, mas quando ela precisar ser redimencionada, ela assumira seu tamanho real.

O ideal é que a imagem represente a tela inicial do seu tema, mas você pode mostrar sua logo, ou qualquer outro tipo de ilustração que desejar.

Editando as informações do tema

Ainda dentro do painel administrativo, se você passar o cursor do mouse em cima do plano de fundo do seu tema, um botão chamado Informações do Tema, vai ficar disponível.

Clicando nele, um modal irá se abrir contendo todas as informações relacionadas com o seu tema, incluindo o autor, a descrição e a versão do mesmo.

Para editar essas informações, você vai precisar editar o arquivo style.css, de modo a criar no início do arquivo, o seguinte comentário:

/*
Theme Name: Micilini WPTema
Theme URI: https://micilini.com/conteudos/wordpress
Author: Micilini Roll
Author URI: https://micilini.com/william-lima
Description: Este tema foi criado com o intuito de ensinar os alunos do portal da micilini.com a desenvolverem seus próprios temas usando a plataforma do WordPress.
Requires at least: 5.3
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-micilini
Tags: Tags: accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images
*/

Note que a estrutura do comentário acima, segue um padrão de chave e valor, na qual deve ser respeitada.

E sim, o WordPress vai ler os comentários existentes dentro do style.css, a fim de usa-los como informações do seu tema 😕

Pode parecer meio estranho a primeira vista, mas é assim que funciona.

Acredito que as chaves ali presentes, já são auto-explicativas, com exceção de algumas:

Requires at least: Diz ao wordpress a versão mínima requerida para ativar o tema. 

Tested up to: Diz ao wordpress a versão do CMS em que esse tema foi testado e criado.

Requires PHP: É a versão mínima requerida do PHP para que seu tema seja instalado.

Version: É a versão atual do seu tema.

Text Domain: Deve ser do mesmo nome da pasta do seu tema.

Tags: São as tags informativas que estarão relacionadas com o seu tema.

No caso das tags, você só pode usar aquelas que estão informadas neste link, separando-as por vírgulas.

Então nada de sair criando tags aleatórias, pois o wordpress não irão reconhece-las, ok?

Salvando este arquivo, você já deve ser capaz de notar algumas mudanças nas informações do seu tema:

Criando o HTML inicial do index.php

Antes de ativar seu tema, é necessário que você tenha pelo menos a estrutura básica do HTML, definida dentro do seu arquivo index.php.

E você pode fazer isso, criando a seguinte estrutura:

<!DOCTYPE html>
<html lang="pt_BR">
 <head>
 <title>Meu Primeiro Tema</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
 <p>Seja bem vindo ao meu primeiro tema =)</p>
 </body>
</html>

Após salvar este arquivo, dentro do painel do wordpress, você já pode ativar o seu tema normalmente:

Ao acessar a página inicial, você já será capaz de ver a página inicial do seu tema ativo 🤩

🏁 Marco UM

Parabéns, você acaba de atingir o MARCO UM da jornada da criação de temas para WordPress 🚩

Por que eu decidi criar este tópico justamente no meio do conteúdo?

Porque se você quiser, você já pode abandonar essa jornada (isso mesmo que você leu), e decidir criar seus temas sozinho por conta própria 😊

Se você já é um desenvolvedor, já trabalhou com as tecnologias HTML, CSS, Javascript e PHP, e teve algum tipo de experiência na criação de páginas da web.

Talvez sua mão está coçando, pensando no seguinte:

"Eu posso criar uma pasta assets dentro da pasta do meu tema, onde ali dentro, eu posso colocar meus arquivos css, javascript, imagens, fontes... quem sabe criar um pequeno sistema de rotas usando PHP dentro do index, de modo a chamar as telas necessárias... posso criar classes que se comuniquem com o banco de dados... e terei um SITE!".

E isso é totalmente verdade, você pode fazer isso sim, caso desejar.

É claro que o conhecimento relacionado a criação de temas para wordpress, ele vai muito além disso.

Seguir pela linha de raciocínio acima, você não vai ter um tema wordpress totalmente otimizado, e integrado com o painel administrativo.

Portanto, chegou o momento de tomar uma decisão, vai criar um tema totalmente integrado com o WordPress ou vai parar por aqui?

Criando o cabeçalho e o rodapé

O cabeçalho (header.php) e o rodapé (footer.php), fazem parte daquela estrutura anatômica que vimos na lição passada. 

É importante saber que um tema do WordPress, ele precisa ser dinâmico, por esse motivo que o cabeçalho, o rodapé, a barra lateral e entre outros componentes, são separados em seus respectivos arquivos.

Isso porque, dentro do painel administrativo, o usuário pode modificar a linguagem do site, e a formatação de caracteres, sendo de vital importância que o nosso tema, seja capaz de ler tais informações, e reproduzir no HTML da página.

Imagina que você está criando um tema que usa o charset UTF-8, e que um japonês resolveu instalar o seu tema? Sendo que no país dele, o charset é diferente de UTF-8.

Sabendo disso, como isso ele vai mudar o charset do tema que ele comprou com você? Será que ele vai precisar entrar em contato com você? Ou será que você já pensou em tudo, e integrou essa funcionalidade no painel administrativo?

É por esse motivo que não podemos criar temas estáticos, e não integrados com o painel do wordpress (lembra da lógica de raciocínio do marco um?).

Até porque, o wordpress foi criado justamente com a missão de oferecer uma interface simples ao cliente final, fazendo com que eles possam criar seu próprio site sem precisar mexer em códigos.

Por conta deste motivo, que você, futuro desenvolvedor de temas para wordpress, precisa criar temas integrados com o painel administrativo.

Agora tudo faz sentido, não?

Como na maioria dos temas que vemos mundo a fora, o cabeçalho e o rodapé da página sempre se repetem em todas as páginas, e com o nosso tema isso não vai ser diferente.

Começando com o cabeçalho da página, dentro da pasta do seu tema, você vai precisar criar um novo arquivo chamado header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
 <head>
 <meta charset="<?php bloginfo('charset') ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body <?php body_class(); ?>>
 <header>
 <section class="logo-area">
 <img src="./logo.png" />
 </section>
 <section class="links-area">
 <ul>
 <li>Home</li>
 <li>Sobre</li>
 <li>Serviços</li>
 </ul>
 </section>
 </header>

Como podemos ver no código acima, o header.php armazena toda a parte de início da estrutura HTML, indo até o final da tag </header>, uma vez que após essa tag, já entraremos no corpo da nossa página, e quem ficará responsável por prover isso, será outro arquivo.

Talvez você tenha percebido a existência de algumas funções PHP que foram inseridas dentro das tags HTML, vejamos cada uma delas a seguir.

language_attributes: comando responsável por recuperar a linguagem padrão do wordpress (ingles, portugues, chines, espanhol...), que pode ser definida pelo usuário por meio do painel administrativo.

bloginfo: comando que recebe um parâmetro na função, responsável por recuperar alguma informação definida pelo painel administrativo do wordpress.

No caso do comando bloginfo('charset'), estamos retornando a formatação de caracteres, que de forma padrão costuma ser UTF-8.

body_class: comando usado para gerar uma lista de classes CSS de forma automática, onde é frequentemente usado no arquivo header.php, para adicionar classes CSS dinamicamente, com base nas informações da página.

Isso permite que você crie temas mais flexíveis e personalizados, tornando mais fácil a aplicação de estilos específicos a diferentes partes do seu site sem a necessidade de criar estilos personalizados para cada página individualmente.

Mas fique tranquilo que mais tarde, nós iremos entender mais a fundo o funcionamento real da função body_class() .

O próximo arquivo que iremos criar, será o footer.php, que nada mais é do que o rodapé do nosso template:

<footer class="footer-area">
 Todos os direitos reservados, 2023
</footer>
</body>
</html>

Perfeito, cabeçalho e rodapé da nossa aplicação criados com sucesso, agora chegou o momento de estilizarmos um pouco o arquivo index.php, fazendo algumas modificações adicionais 😁

Editando o index.php

No caso do nosso index.php, ele será montado de maneira dinâmica, de modo que o cabeçalho e o rodapé serão integrados a ele.

Isso significa, que o index.php conterá somente o corpo do HTML do página inicial.

Veja abaixo como ficou o resultado final:

<?php get_header(); ?>

<div class="site-area">
 <main class="main-area">
 <section class="init-block">
 <div class="information-block">
 <h2>Tema feito com WP-Micilini</h2>
 <p>Este tema é muito legal para ser verdade!</p>
 </div>
 <div class="image-block">
 <img src="./wp-micilini-image.png" />
 </div>
 </section>
 </main>
</div>

<?php get_footer(); ?>

get_header: comando do wordpress responsável por incluir o arquivo header.php do tema.

get_footer: comando do wordpress responsável por incluir o arquivo footer.php do tema.

Se você abrir a página inicial do site, verá que o HTML foi carregado normalmente, em conjunto com o cabeçalho e rodapé, mas sem estilo algum 😅 (Nós ainda iremos criar, ok?)

Se você inspecionar o elemento <body> com o navegador, notará que diversas classes CSS foram adicionadas ao elemento:

Se isso também apareceu para você, significa que a função body_class(); entrou em ação, e está cumprindo o seu papel.

Sabendo que a função adiciona essas classes na tag <body>, nós poderíamos criar uma regra específica no CSS, fazendo com que todas as nossas seções, parágrafos, além de outros outros elementos HTML que existem na página home, possuam estilizações específicas, exemplo:

.home section{
padding:12px;
}

.home .site-area{
margin:24px;
text-align:right;
}

No caso do código acima, toda <section> existente dentro de uma classe maior chamada "home", terão um padding de 12 pixels.

Muito interessante, não acha?

Conclusão

Nesta lição você aprendeu a criar o seu primeiro tema com o WordPress, e viu que isso não é nem de longe um bixo de sete cabeças, como muitos dizem por aí 🥳

Na próxima lição, você aprenderá a incluir suas folhas de estilos, scripts, e fontes de maneira correta, dentro das páginas do seu tema.

Te espero lá 😎