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 temáticos, o que eles fazem e como são priorizados, você será capaz de 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 ContentManagement System (CMS) procura os arquivos modelo que correspondem a ele.

Por exemplo, se você usar recurso de buscado WordPress e carregar uma página de resultados de busca, o CMS procurará por dois arquivos modelo:

  1. search.php, que rege a aparência de suas páginas de resultados de busca
  2. 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 do 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 busca, 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 ramo 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.

Se quiser personalizar temas ou construir novos a partir do zero, é importante compreender como funciona a hierarquia de modelos do WordPress. ✅ Este guia tem tudo o que precisa para começar... 👇Click to Tweet

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:

  1. Primeira página
  2. Artigos individuais
  3. Páginas individuais
  4. Tipos de correio personalizados
  5. Páginas de resultados de pesquisa
  6. Categorias e páginas de etiquetas
  7. 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 de 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:

Arquivos de modelos listados em um diretório temático do WordPress

Arquivos de modelos listados em um diretório temático do WordPress

Este é um tipo de página de postagem única, 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:

É 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 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:

O arquivo de modelo de cabeçalho do tema Twenty Twenty-One

O arquivo de modelo de Cabeçalho (Header) do tema Twenty Twenty-One

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 dentro do diretório raiz de seu site através de um cliente FTP (File Transfer Protocol).

Eis o que parece para o tema oficial anterior do WordPress, Twenty Twenty:

O diretório temático Vinte Vinte e Arquivos Temáticos e Modelos

O pasta do tema Twenty Twenty com Arquivos e Modelos

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:

A hierarquia de modelos do WordPress

A hierarquia de modelos do 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 discriminaçã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:

  1. front-page.php
  2. home.php
  3. 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 postagem. Para o conteúdo principal de cada artigo do blog, o WordPress procurará os seguintes arquivos:

  1. single.php
  2. singular.php
  3. 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. Na maioria dos casos, eles usam um modelo diferente de 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:

  1. page.php
  2. singular.php
  3. 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 postagens personalizadas para vários tipos de conteúdo que você pode não querer agrupar com páginas ou artigos. Os tipos de postagens 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:

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

A hierarquia de modelos para tipos de postagens 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 busca, então vamos recapitular brevemente como ela é:

  1. search.php
  2. 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.

Cansado de um host lento? Kinsta é construído com velocidade e desempenho em mente. Confira nossos planos

Com uma página de busca, 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 websites com grandes bibliotecas de conteúdo, esta hierarquia envolve mais ‘etapas’ do que o normal:

  1. category–{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. 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 caracóis 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:

  1. 404.php
  2. 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 tema infantil acrescenta uma segunda camada à hierarquia de modelos para qualquer tipo de página que você utilize.

Digamos que você esteja usando um tema infantil que inclui arquivos de modelos personalizados para páginas únicas. Aqui está a ordem na qual o WordPress tentará carregar os arquivos:

  1. page.php dentro do tema filho (child theme)
  2. página.php dentro do tema principal
  3. singular.php dentro do tema filho (child theme)
  4. singular.php dentro do tema principal
  5. index.php dentro do tema filho (child theme)
  6. 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 tema infantil é 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 tema infantil 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 freqüentemente 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:

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.

Pronto para personalizar o seu tema WordPress? ✨ Leia primeiro este guia para a hierarquia de modelos ⬆️Click to Tweet

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 website 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 de 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!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos