Nesta lição, você começará a aprender como o WordPress carrega conteúdo dependendo da página em que você está e da hierarquia dos arquivos de modelo de tema. Você também aprenderá o que é necessário para um tema válido. E no final vamos finalmente criar nosso tema e ativá-lo.
Arquivos de modelo de tema
Por trás do capô, o WordPress descobre qual modelo carregar com base na URL em que você está. Se o seu WordPress estiver instalado no domínio “example.com/wordpress/", você deverá ver o modelo da página inicial. Ir para “example.com/wordpress/category/news/" como padrão fornecerá uma lista de postagens atribuídas à categoria Notícias usando um modelo de categoria.
O WordPress segue uma hierarquia de qual template carregar, e qual ele escolhe depende de quais templates você tem disponíveis em seu tema. Por exemplo, “example.com/wordpress/category/news” o WordPress primeiro procurará um modelo específico para a categoria “news”. Se não for encontrado, o WordPress procurará um modelo específico para o ID da categoria. Novamente, se isso não for encontrado, o WordPress procura o modelo de categoria geral. Se isso não for encontrado, o WordPress procurará um modelo ainda mais geral para arquivos. E assim por diante.
O WordPress Codex, que é o site de documentação do WordPress, mantém uma imagem útil e atualizada que ilustra a hierarquia dos arquivos de templates de temas; https://codex.wordpress.org/File:Template_Hierarchy.png#file
Não se preocupe se a imagem parecer muito confusa no começo! À medida que avançamos no tutorial, você se verá consultando esta imagem para descobrir quais modelos você deseja implementar em seu tema.
A maneira como você lê a imagem é indo da esquerda para a direita. Com base em qual página você está, os modelos são muito específicos, e quanto mais você avança para o lado direito, mais gerais os modelos se tornam. O fallback final é o mais à direita; index.php, que será carregado se nenhum outro modelo de ajuste for encontrado.
Todos os arquivos de modelo listados na imagem acima precisam residir na pasta raiz do seu tema e ser nomeados exatamente como indicado. Você não pode colocar seus modelos em subpastas para fins organizacionais porque o WordPress não poderá encontrá-los!
Vamos começar simples! Hoje vamos criar os poucos arquivos necessários para o WordPress reconhecê-lo como um tema e depois expandir a partir daí.
Anatomia de um tema WordPress
Você precisa de apenas dois arquivos para criar um tema WordPress válido.
Na ilustração da hierarquia de modelos, você notou o mais à direita; chamado index.php? Este é o modelo de fallback final se o WordPress não encontrar nenhum modelo. Esse é um dos arquivos necessários. O outro arquivo é um arquivo de folha de estilo (.css). Ele não precisa necessariamente ter CSS, mas precisa conter um bloco de comentários que forneça informações ao WordPress sobre seu tema. Essas duas coisas são tudo o que você precisa para um tema WordPress válido.
Vamos criar nosso tema criando esses dois arquivos!
Criando seu primeiro tema
Todos os temas precisam estar em suas pastas separadas dentro da subpasta /wp-content/themes/. Se você navegar para esta pasta em seu navegador de arquivos, provavelmente já verá algumas pastas de temas aqui; Twentynineteen, Twentyseventeen, etc. Esses são temas que vêm incluídos no WordPress como padrão.
Em /wp-content/themes/, crie uma nova pasta. Nomeie-o adequadamente (minúsculas, sem espaços, não igual a qualquer outra pasta). Normalmente, o nome da pasta é uma versão slug do nome do seu tema. Para este tutorial, vou nomear minha pasta de tema ” wptutorial“.
Entre na pasta do seu tema e crie um novo arquivo vazio chamado index.php. Editei o arquivo e apenas adicionei algum texto aleatório, para que possamos ver mais facilmente quando estiver em uso:
Já estamos na metade! Vamos criar o segundo arquivo necessário. Dentro da pasta do seu tema, crie um novo arquivo vazio chamado style.css.
Abra o style.cssarquivo e inicie imediatamente um bloco de comentários (/*e feche-o com */). Dentro deste bloco de comentários, precisamos seguir algumas regras do WordPress em como definir nosso tema. No mínimo, precisamos definir o nome do nosso tema. Mas também podemos adicionar informações sobre quem é o autor, página inicial, número da versão, informações de licença e muito mais. Veja a documentação do WordPress sobre o que você pode adicionar.
Neste tutorial vamos mantê-lo simples; adicionaremos o nome do tema e você escreverá seu próprio nome como autor. Você pode ir em frente e usar o(s) nome(s) que quiser, isso é o que eu inseri no meu style.css:
/*
Theme Name: A White Pixel Theme
Author: Alex White
*/Salve e feche o arquivo (este tutorial não tocará neste arquivo novamente), a menos que você queira escrever CSS para o seu tema à medida que avança.
Parabéns! Você acabou de criar um tema WordPress válido!
Ativando seu tema
Vamos entrar no painel de administração do WordPress e navegar até “Aparência > Temas” e ver se podemos encontrar nosso tema lá.
Clique no botão Ativar e visite seu site. Você deve ver o que você escreveu index.php!
Este index.phpmodelo será usado independentemente da página em que você estiver. Tente ver um único post, e você verá o mesmo. Um tema deve ter no mínimo 5-10 modelos para lidar com diferentes conteúdos. Não se preocupe, nós chegaremos lá.
Incrível, temos um tema! Na próxima lição, começaremos a codificar e fazer coisas.