Se você quiser personalizar os temas ou construir novos a partir do zero, é importante entender como funciona a hierarquia de modelos do WordPress.
Antes de mais nada, este sistema WordPress ajuda a manter tudo organizado. Quando você souber quais são todos os arquivos de modelos de temas, o que eles fazem e como são priorizados, você conseguirá alterar quase todos os aspectos de como seu site WordPress fica.
Neste artigo, vamos explicar o que é a hierarquia de modelos do WordPress e como ela funciona. Em seguida, forneceremos uma descrição completa dos arquivos de modelo envolvidos em cada tipo de página do WordPress (incluindo uma folha de consulta para referência), para ajudá-lo a usá-los em seu benefício.
Vamos nessa!
Uma Introdução à Hierarquia de Modelos do WordPress
Tipicamente, os sites não-dinâmicos utilizam arquivos HTML e CSS estáticos para renderizar seu conteúdo. Entretanto, o WordPress é uma plataforma dinâmica baseada na linguagem de programação PHP. Cada site WordPress carrega múltiplos arquivos .php, cada um deles governando a aparência de uma seção ou componente específico.
Sempre que você carrega um determinado tipo de página, o Content Management System (CMS) procura os arquivos modelo que correspondem a ele.
Por exemplo, se você usar recurso de pesquisa do WordPress e carregar uma página de resultados de pesquisa, o CMS irá procurar por dois arquivos modelo:
- search.php, que rege a aparência de suas páginas de resultados de pesquisa
- index.php, que é o arquivo modelo padrão que o WordPress usa quando não consegue encontrar a opção superior dentro de cada hierarquia
Os arquivos modelo a que você tem acesso dependerá do tema que você usar. Todos os temas de WordPress são uma coleção de modelos, stylesheets e outros elementos, tais como imagens. Portanto, no exemplo acima, se o tema que você utiliza inclui um modelo search.php, o WordPress irá encontrá-lo e carregá-lo.
Em alguns casos, você pode usar um tema que não inclua arquivos de modelos para os tipos de páginas que você deseja carregar. É aí que entra a hierarquia de modelos do WordPress. É um sistema embutido que diz ao WordPress quais arquivos de modelos devem ser carregados e em que ordem.
Para uma página de pesquisa, se o WordPress não conseguir encontrar o arquivo search.php, ele descerá para o próximo arquivo na hierarquia, que é index.php. Este arquivo é o último recurso para cada branch dentro da hierarquia do modelo.
Em teoria, você pode ter um tema totalmente funcional que inclui apenas um arquivo modelo, e que é index.php.
Na prática, porém, um tema com um único arquivo de modelo dificilmente incluiria qualquer personalização de estilo, e todo tipo de página teria o mesmo aspecto. A menos que seja isso o que você pretende, compreender a hierarquia de modelos do WordPress é um dos passos mais importantes que você pode dar como desenvolvedor de um tema.
Como funciona a Hierarquia de Modelos do WordPress
Como você deve saber, o WordPress permite o uso de vários tipos de páginas, dependendo do que você deseja publicar. Há sete categorias principais que você pode usar:
- Primeira página
- Artigos individuais
- Páginas individuais
- Tipos de e-mail personalizados
- Páginas de resultados de pesquisa
- Categorias e páginas de etiquetas
- Páginas de erro 404
Cada uma dessas páginas tem sua própria hierarquia personalizada, o que significa que ela usa um conjunto específico de arquivos modelo.
Se você der uma rápida olhada em qualquer pasta do seu tema, você normalmente encontrará uma coleção de arquivos de modelos. A seguir, um exemplo de arquivos de modelos listados dentro do diretório de temas para um artigo de blog:
Este é um tipo de página de artigo único, o que significa que ele usa o arquivo single.php como modelo para o conteúdo principal da página (o próprio artigo do blog).
Além disso, ele tem um arquivo modelo separado para cada elemento da página, a maioria dos quais você deve ser capaz de identificar num relance, inclusive:
- Cabeçalho (Header)
- Rodapé (Footer)
- Comentários
- Barra Lateral (Sidebar)
É importante entender que, embora cada tipo de página tenha sua própria hierarquia, muitas vezes eles também compartilham arquivos de modelos comuns, tais como header.php e footer.php.
Se você está construindo seu próprio tema, isso significa que você pode criar estilos personalizados para cada tipo de página, ao mesmo tempo, em que constrói arquivos de modelos para reutilizar.
Você também pode criar arquivos de modelos personalizados para elementos como Barra Lateral (Sidebar) e Rodapé (Footer) que só se aplicam a certos tipos de página. Essa flexibilidade é tudo graças à abordagem modular do WordPress aos modelos.
Quando você muda de tema, as diferenças nos layouts que você vê são atribuídas aos novos arquivos de modelos que o WordPress carrega. O child theme também entram na hierarquia de temas do WordPress, que discutiremos em breve.
Onde Localizar e Alterar Arquivos de Modelos de WordPress
Um arquivo .php pode incluir tanto o código PHP quanto a marcação HTML (todos os quais você pode editar). Como tal, os arquivos de modelo do WordPress podem ser tão complexos quanto você precisa que sejam. Em muitos casos, os arquivos de modelo que o WordPress usa são uma coleção de funções para os elementos que eles governam.
Para dar um exemplo, aqui está uma rápida olhada no arquivo de modelo header.php que o tema oficial do WordPress Twenty Twenty-One utiliza:
Como mencionamos, cada tema WordPress inclui seu próprio conjunto de arquivos modelo. Você pode ver quais arquivos de modelo seu tema inclui acessando sua pasta no diretório raiz do seu site através de um cliente FTP (File Transfer Protocol).
Eis o que parece para o tema oficial anterior do WordPress, Twenty Twenty:
Por padrão, o WordPress carregará arquivos de modelos que estão dentro do diretório principal do seu tema (wp_content > temas) ou dentro da pasta de partes de modelos. Se você planeja criar vários arquivos de modelos, recomendamos manter seus modelos de página principal dentro do diretório principal. Para arquivos de modelos mais específicos, tais como uma página de largura total ou layouts de Barra Lateral (Sidebar), você pode usar subdiretórios.
A melhor maneira de entender toda a hierarquia de modelos do WordPress é através de uma folha de consultas. Neste caso, estamos mostrando-lhe uma visão geral da hierarquia de modelos, cortesia do Codex WordPress:
O Codex WordPress inclui muitas informações sobre a hierarquia de modelos, por isso recomendamos a marcação desse recurso. Por enquanto, vamos cavar em cada tipo de página e os arquivos de modelo que ela utiliza.
Uma subdivisão da hierarquia de modelos do WordPress por tipo de página
O WordPress usa sete tipos principais de páginas. Nesta seção, falaremos sobre cada um deles, e lhe forneceremos uma descrição dos arquivos modelo que eles utilizam. Vamos começar com a primeira página.
Modelos de arquivo para a página inicial
Sua página inicial do WordPress é a primeira parada que a maioria dos usuários fazem quando visitam seu site. Na prática, o layout da primeira página pode variar drasticamente de um site para outro.
Entretanto, para uma página inicial básica, o WordPress procurará estes três arquivos modelo em ordem:
- front-page.php
- home.php
- index.php
Se seu tema não incluir um arquivo de modelo de front-page.php, o WordPress passará por padrão para a segunda opção, e assim por diante. Como sempre, o arquivo index.php é a última parada que o WordPress faz na árvore de decisão do modelo.
Artigos individuais
Os artigos individuais do WordPress utilizam a hierarquia de modelo único de artigo. Para o conteúdo principal de cada artigo do blog, o WordPress procurará os seguintes arquivos:
- single.php
- singular.php
- index.php
No entanto, se você der uma olhada no modelo de folha de consulta, você notará uma hierarquia mais complexa que emerge em alguns casos.
Isso porque o WordPress permite que você designe arquivos modelo para mensagens individuais e categorias únicas, e então, por padrão, o single.php se ele não conseguir encontrar nenhuma dessas opções.
Além dos arquivos de modelos primários, você tem elementos como o Cabeçalho (Header), Rodapé (Footer), Barra Lateral (Sidebar) e seções de comentários. Como mencionamos anteriormente, cada um desses elementos pode ter seu próprio arquivo de modelo.
Páginas únicas
Depois dos artigos, as páginas únicas são o pão e a manteiga para a maioria dos sites WordPress. Geralmente, eles usam um modelo diferente da sua página inicial, a menos que ambos os tipos de páginas sejam padronizados para index.php.
Veja como fica a hierarquia de modelos de página única:
- page.php
- singular.php
- index.php
Embora a hierarquia de modelos para os artigos e páginas individuais seja semelhante, existem algumas diferenças importantes.
Primeiro, quando se trata de páginas, o WordPress usa o caminho get_page_templates() para arquivos personalizados, que você pode usar para alterar ou redirecionar o modelo de página padrão.
Além disso, você pode criar modelos para cartuchos e identificações específicas. Se você tiver um arquivo page-{slug}.php ou page-{id}.php, o WordPress tentará carregar cada arquivo em ordem, antes de fazer o padrão para page.php.
Tipos de artigos personalizados
Você pode criar tipos de artigos personalizadas para vários tipos de conteúdo que você pode não querer agrupar com páginas ou artigos. Os tipos de artigos personalizadas proporcionam a você um grau de organização maior para seu conteúdo e também têm sua própria hierarquia de modelos:
- archive-{post_type}.php
- archive.php
- index.php
A hierarquia de modelos para tipos de artigos personalizadas não é tão complexa quanto para páginas ou artigos completos. No entanto, o WordPress permite criar arquivos de modelos para cada tipo de artigo personalizada, para que eles não tenham que compartilhar os mesmos layouts exatos.
Páginas de resultados da pesquisa
Já lhe apresentamos a hierarquia de modelos que o WordPress utiliza para páginas de resultados de pesquisa, então vamos recapitular brevemente como ela é:
- search.php
- index.php
À medida que nos afastamos dos tipos de páginas ‘complexas’, como artigos ou sua página principal, a hierarquia de modelos do WordPress se torna muito mais simples.
Com uma página de pesquisa, você normalmente não precisa incluir muitos elementos além dos próprios resultados. Quanto mais simples a estrutura, mais curta a hierarquia geralmente é.
Categorias e Páginas de etiquetas
Embora muitos sites não tenham links diretos para eles, o WordPress gera páginas coletivas para suas tags e categorias. Há também subpáginas específicas para cada item dentro dessa taxonomia.
Considerando quão complexa a taxonomia pode se tornar para sites com grandes bibliotecas de conteúdo, esta hierarquia envolve mais ‘etapas’ do que o normal:
- category–{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Observe que a mesma hierarquia é usada para as etiquetas, exceto que “etiqueta” substitui “categoria” em todas as instâncias.
Em teoria, você pode criar arquivos de modelos individuais para cada categoria ou tag em seu site WordPress, e identificá-los através de slugs ou IDs. No entanto, poucos sites passam por todo esse trabalho.
Se você não planeja deixar os visitantes navegarem em sua página de categoria, sinta-se à vontade para entrar por padrão no modelo archive.php.
Páginas de erro 404
Às vezes, os visitantes tentarão acessar uma página que não existe. Quando isso acontece, o WordPress retorna uma página de erro 404.
Por padrão, o WordPress não oferece opções para personalizar o visual desta página. No entanto, você mesmo pode ajustar a aparência da página através do arquivo modelo. A hierarquia do modelo é bastante curta:
- 404.php
- index.php
À medida que seu site cresce, também crescerão os casos em que os usuários podem encontrar erros 404. Ter uma página de erro personalizada para essas situações pode ajudá-lo a informar aos visitantes por que a página não está carregando, apontá-los em outra direção e reduzir a frustração.
Ao carregar um arquivo de modelo 404, o WordPress irá procurar e carregar seu arquivo personalizado antes de usar o arquivo padrão.
Onde o tema filho (child theme) se encaixam na Hierarquia de Modelos WordPress
Se você gosta de personalizar seus temas do WordPress, uma melhor prática é usar um tema filho (child theme). O tema filho (child theme) também têm seu lugar dentro da hierarquia de modelos do WordPress, mas não é evidente se você olhar para a folha de fraude que fornecemos anteriormente.
Em resumo, a utilização de um child theme acrescenta uma segunda camada à hierarquia de modelos para qualquer tipo de página que você utilize.
Digamos que você esteja usando um child theme que inclui arquivos de modelos personalizados para páginas únicas. Aqui está a ordem na qual o WordPress tentará carregar os arquivos:
- page.php dentro do tema filho (child theme)
- página.php dentro do tema principal
- singular.php dentro do tema filho (child theme)
- singular.php dentro do tema principal
- index.php dentro do tema filho (child theme)
- index.php dentro do tema principal
Se o WordPress puder encontrar uma versão de um arquivo modelo dentro do tema filho (child theme), é a que ele carregará, mesmo que haja uma contraparte para ele dentro do tema dos pais. Em alguns casos, você pode se encontrar em uma situação em que você queira personalizar os arquivos de modelo para um tema que você usa, e alavancar um child theme é perfeito nesses cenários.
Como em outros tipos de personalizações, você perderá as alterações nos arquivos de modelos de um tema quando o atualizar. Adicionar essas mudanças através de um child theme o salvará dessa situação.
Usando WordPress Template Tags para desenvolvimento de temas
No desenvolvimento do WordPress, você muitas vezes encontrará tags modelo, que são funções PHP que você pode usar para gerar e buscar dados dinamicamente. As tags de modelo são frequentemente parte de arquivos de modelo, mas não são intercambiáveis.
O WordPress constrói dezenas de modelos de tags em seu código, que você pode usar no desenvolvimento de temas. Alguns exemplos incluem:
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
Estas etiquetas permitem reunir arquivos de modelos do tema que você está usando. Na prática, isso significa que você pode adicionar elementos específicos aos arquivos de modelos primários, tais como front-page.php ou index.php.
Se você quiser uma lista completa de todos os modelos de tags que você pode usar no desenvolvimento do WordPress, confira o Codex WordPress.
Lá, você encontrará instruções sobre como usar cada etiqueta de modelo, seus parâmetros individuais e exemplos do código em ação.
Resumo
Embora a hierarquia de modelos do WordPress possa parecer complexa à primeira vista, ela se resume a uma série de árvores de decisão simples. Sempre que você visitar um site WordPress, o CMS verá que tipo de página você está tentando acessar, e então usará a hierarquia para determinar qual arquivo de modelo carregar.
Além dos modelos principais para cada tipo de página, você também pode ter arquivos de modelos para elementos individuais, tais como Cabeçalho (Header) , Rodapé (Footer) e Barra Lateral (Sidebar).
Esta abordagem modular lhe dá controle total sobre a aparência de cada página do seu site e lhe ajuda a economizar tempo durante o processo de desenvolvimento do WordPress.
Você tem alguma pergunta sobre como funciona a hierarquia de modelos do WordPress? Compartilhe-as na seção de comentários abaixo!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário