Entendendo a estrutura básica de um tema para WordPress
Agora chegou o momento de colocar a mão na massa, e aprender definitivamente como funciona a estrutura básica de um tema voltado a plataforma do WordPress.
Já quero te adiantar que a configuração de um tema, não é nem de longe um bicho de sete cabeças, como muitos dizem por aí.
Preparado para começar a jornada, e aprender de uma vez por todas, como tudo isso funciona na prática?
Então chega de papo, e vamos direto ao que interessa 🙂
Instalando o WordPress
Se nós queremos criar temas para WordPress, o primeiro passo que precisamos fazer é instalar o WordPress, e isso é meio óbvio por sinal 🤣
Para a sua sorte, eu redigi um pequeno artigo que te ensina a como configurar um ambiente de desenvolvimento com o PHP, usando o sistema operacional Windows.
Dentro desse artigo, mais especificamente na parte que eu falo sobre ambiente de desenvolvimento local para WordPress, eu ensinei a instalação de uma ferramenta chamada LocalWP, que te ajuda a configurar facilmente um novo site.
Sendo assim, eu recomendo fortemente o uso do LocalWP, e que você crie um novo site utilizando essa ferramenta.
Criou um novo site? Sim? Então já podemos prosseguir com a nossa jornada!
Mas sinta-se a vontade, caso você queira utilizar o WampServer, Xampp, MAMP, ou qualquer outra aplicação, ok? 😋
Preparando sua IDE
Além do WordPress, você precisa de uma IDE, que nada mais é do que um editor de códigos.
Se você preenche os requisitos informados na lição anterior, é mais do que óbvio que em algum momento da sua vida, você já mexeu em algum editor de códigos, seja em um Notepad++, Atom, IntelliJ, Visual Studio e afins.
Nesta jornada, eu estarei fazendo o uso do Visual Studio Code, que pode ser baixado gratuitamente por este link.
Caso desejar, você pode usar o seu editor de códigos favorito, sem nenhum problema, ok?
Abrindo seu site na sua IDE
Para já deixarmos tudo preparado para colocar a mão na massa, chegou o momento de abrir o seu site do WordPress na sua IDE favorita.
Se você estiver usando o LocalWP, é importante você saber que os arquivos do WordPress podem ser acessados clicando no link chamado go to site folder:
Como estou usando Windows, ele vai abrir para mim o caminho da instalação do WordPress, que por sinal está dentro de uma pasta chamada Local Sites, dentro dos arquivos do meu usuário.
- C:\Users\MeuUsuario\Local Sites\minha-primeira-aplicao/app/public
Sabe esse caminho? Você vai precisar abrir ele com a sua IDE favorita, de modo que você consiga ver tudo o que existe dentro da pasta public:
Conseguiu ver essa estrutura de pastas na aba EXPLORER da sua IDE?
Então você está pronto para seguir na jornada 😎
Caso você estiver fazendo o uso do WordPress em conjunto com outro ambiente de desenvolvimento, acredito que você já sabia que os arquivos do site deverão existir dentro da pasta htdocs ou www.
Ativando o modo DEBUG
É de extrema importância que você ative o modo DEBUG no seu site do WordPress, antes de se aventurar em criar temas para ele.
Para fazer isso, você vai precisar editar um arquivo chamado wp-config.php, e procurar por esta linha:
if ( ! defined( 'WP_DEBUG' ) ) {
define( 'WP_DEBUG', false );
}Em seguida, você precisa trocar o false pelo true:
define( 'WP_DEBUG', true );Desse modo, qualquer erro que aparecer, ele será mostrado para você durante o desenvolvimento, em vez de uma mensagem de erro padrão que não diz muita coisa.
Ah, e não esqueça de salvar este arquivo 😅
Anatomia de um tema WordPress
Começando pela estrutura de pastas do próprio WordPress, nós temos:
wp-admin: Esta pasta contém a interface de administração do Wordpress, ou seja, os arquivos necessários que o usuário utiliza para criar novos posts, adicionar páginas, alterar configurações e entre outras.
Ou seja, são todos os layouts e funções internas que vemos quando acessamos o painel administrativo do wordpress (seusite.com/wp-admin).
wp-content: É a pasta onde se encontra a maior parte do conteúdo e personalização, como é o caso dos temas e plugins baixados/instalados, além da pasta uploads, que armazena todo tipo de conteúdo (Vídeo, Foto, PDF...) que você insere no wordpress.
wp-includes: Esta pasta contém todos os arquivos vitais para o funcionamento de todo o seu site, aqui é onde se encontra o CORE do wordpress, o coração do CMS.
Esses arquivos não devem ser alterados, a menos que você saiba exatamente o que está fazendo, pois podem afetar o funcionamento do seu site.
No caso dos nossos temas que serão desenvolvidos, eles sempre existirão dentro da pasta wp-content/themes, assim como qualquer outro tema existente no WordPress.
Portanto, nós iremos nos atentar somente em trabalhar em cima da pasta themes, durante essa jornada, ok?
Basicamente para um tema funcionar, ele só precisa de três arquivos principais:
- A pasta com o nome do tema criada dentro de themes.
- O arquivo index.php e style.css criados dentro da pasta do seu tema.
Somente com esses 3 arquivos, já é possível criar uma tema totalmente simplista, e até funcional.
Obviamente que um tema mais completo vai requerer uma infinidade de outros arquivos.
Agora que você já sabe que a nossa mão de obra vai se concentrar dentro da pasta wp-content/themes, vamos nos aprofundar ainda mais na anatomia de um tema.
Anatomia básica
De acordo com a ilustração criada pelo site da WPTuts, nós temos a seguinte anatomia básica de um tema:
Para acompanhar a estrutura quie será discursada daqui em diante, você pode abrir a pasta wp-content/themes/twentytwentyone existente dentro do seu wordpress.
Index.php
Tudo começa pelo arquivo index.php, ele é o arquivo principal do seu tema, e sempre será usado pelo wordpress quando o usuário acessar a página principal do seu site.
É através dele que será carregado outros arquivos importantes como header.php, footer.php, sidebar.php e entre outros.
O index.php também é conhecido como fallback file, uma vez que ele serve como um arquivo de último recurso que o WordPress utiliza, para exibir o conteúdo do site quando não consegue encontrar um arquivo mais específico para lidar com uma determinada solicitação.
Um exemplo disso é o arquivo single.php, que é usado para exibir postagens individuais.
Quando um usuário tenta acessar uma postagem individual, por de baixo dos panos, a primeira coisa que o wordpress tenta fazer, é abrir o arquivo single.php, pois ele acredita que lá está toda a lógica que se é usada para carregar, e mostrar uma postagem ao usuário.
Quando o wordpress não consegue encontrar esse arquivo, ele recorre ao index.php, e é por esse motivo que ele é chamado de fallback file, ou "arquivo reserva".
Tudo certo com o entendimento do arquivo index.php? Então vamos continuar 🤓
Agora, se por algum motivo nós precisarmos apresentar uma página com um visual específico para o visitante do nosso site, o index.php já não seria usado neste momento, pois a própria lógica do wordpress daria preferência a outros possíveis arquivos dessa estrutura.
Home.php
É o arquivo usado para criar o layout da página inicial!
Sim, só que no caso do index.php, ele atua mais como um arquivo reserva do que como um arquivo que representa uma página inicial.
No caso do home.php, ele é específico para a exibição da página inicial com postagens mais recentes, e é usado para listar as postagens em ordem cronológica inversa.
Em resumo, a principal diferença entre o "index.php" e o "home.php" é o contexto de uso.
O "index.php" é um arquivo de modelo de fallback usado para várias páginas no seu site, enquanto o "home.php" é específico para a página inicial quando você opta por exibir as postagens mais recentes nela.
Header.php
É um dos componentes principais de todo e qualquer tema do wordpress, e desempenha um papel fundamental na estrutura de uma página existente no seu site.
Ele representa o cabeçalho da página, que geralmente contém elementos como o logotipo do site, o menu de navegação, informações de contato, a barra de pesquisa e outros elementos de design e navegação que aparecem no topo de cada página do site.
Sua principal função é oferecer a mesma estrutura de cabeçalho de modo constante em todo site.
⭐ É importante ressaltar que esse arquivo não segue a hierarquia do index.php, logo se o header.php não existir, o wordpress simplesmente não vai carregar ele.
Footer.php
Assim como o header.php, o footer.php representa o rodapé da página.
⭐ É importante ressaltar que esse arquivo não segue a hierarquia do index.php, logo se o footer.php não existir, o wordpress simplesmente não vai carregar ele.
Sidebar.php
Em alguns temas, é possível adicionar uma barra lateral ao seu visual, e este arquivo representa justamente isso.
⭐ É importante ressaltar que esse arquivo não segue a hierarquia do index.php, logo se o sidebar.php não existir, o wordpress simplesmente não vai carregar ele.
Single.php
Quando um determinado usuário tenta visualizar a página de um determinado post, o wordpress se encarrega de abrir o arquivo single.php.
Pois ele acredita que lá estará o visual e toda a lógica de carregamento deste post.
👀Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
Page.php
Assim como o single.php, o page.php é voltado para carregar as páginas estáticas que você cria dentro do painel administrativo do wordpress.
As páginas no wordpress são conteúdos que geralmente não mudam com frequência e podem incluir informações como páginas de "Sobre nós", "Contato", "Política de Privacidade" e outras páginas de conteúdo estático.
O page.php é projetado para fornecer uma estrutura consistente, e um layout para todas as páginas individuais do seu site, independentemente do conteúdo específico.
👀Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
404.php
Quando um determinado usuário tentar acessar uma página que não existe, a lógica do wordpress se encarrega de abrir o arquivo 404.php.
Lá estará o visual de uma página de erro ("conteúdo não encontrado"), que será mostrado ao usuário.
👀 Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
Archive.php
Se você já instalou alguns temas no wordpress, você vai perceber que ele conta com uma seção de "arquivados", cujo o papel, é exibir listas de postagens arquivadas com base em critérios específicos.
Tais como páginas de categorias, etiquetas, autor, datas e também resultados de pesquisa.
👀Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
Search.php
Como o próprio nome já diz, é o arquivo que é aberto quando tentamos realizar uma pesquisa no seu site.
👀Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
Author.php
É a página usada para carregar informações do autor que escreveu determinada postagem.
👀Caso este arquivo não exista, o wordpress abrirá o arquivo index.php.
Outros arquivos
Além dos arquivos citados acima, o wordpress consegue carregar mais de 28 arquivos específicos, dando maior comodidade durante a criação das páginas dos nossos temas.
Caso queira saber quais arquivos são esses, você pode consultar a documentação.
Além dos arquivos presente na anatomia, nós contamos com outros arquivos essenciais para a criação dos nossos temas.
style.css: É o arquivo que contém os estilos CSS que serão usados pelo seu tema.
functions.php: É o arquivo principal que armazena a maioria das funções em PHP que seu tema precisa para funcionar.
comments.php: É o arquivo usado para carregar comentários que os usuários podem fazer acerca das suas postagens.
Você deve ter percebido também a existência de algumas funções como: get_header(), wp_nav_menu(), get_search_form(), comments_template(), get_footer(), get_sidebar()...
Que nada mais são do que funções disponibilizadas pelo próprio wordpress, que nos facilitam a importação de certos componentes do nosso tema, para dentro das nossas páginas.
Conclusão
Nesta lição você aprendeu um pouco mais sobre a anatomia de um tema wordpress 🤩
Na próxima lição, sairemos da teoria e entraremos na prática, onde você será capaz de criar seu primeiro tema!
Até a próxima 🙂