Sobre o autor

Nick Schäferhoff é empresário, comerciante online e blogueiro profissional da Alemanha. Quando não está construindo sites, criando conteúdo ou ajudando seus clientes… Mais sobre o Nick↬

Gosto de pensar no WordPress como a porta de entrada para o desenvolvimento da Web. Muitas pessoas que começaram a usar a plataforma estão inicialmente apenas procurando uma maneira confortável (e gratuita) de criar um site simples, geralmente com a ajuda de uma página do WordPress plugin do construtor. Mais ou menos como “Vou tentar apenas uma vez.”

No entanto, uma boa parte dos usuários não para por aí. Em vez disso, eles são fisgados. Tenha mais ideias. Experimentar. Experimente novos plug-ins. Descubra o Firebug. Estrondo. Logo não há mais volta. Isso soa como sua história? Como um usuário do WordPress, é natural desejar cada vez mais controle sobre o seu site. Para desejar design personalizado, funcionalidade personalizada, tudo personalizado.

Leituras adicionais no SmashingMag:

• Como criar e personalizar um tema filho do WordPress
• Construção Uma página de arquivo personalizado para WordPress
• Personalizando arquivos WordPress

Felizmente, o WordPress foi construído exatamente para isso. Sua estrutura flexível e arquitetura compartimentada permitem que qualquer pessoa mude praticamente qualquer coisa em seu site.

Entre as ferramentas mais importantes na busca pelo controle completo do site estão os modelos de página. Eles permitem que os usuários alterem drasticamente o design e a funcionalidade de seu site. Quer um cabeçalho personalizado para sua página inicial? Feito. Uma barra lateral adicional apenas para a página do seu blog? Sem problemas. Uma página de erro 404 exclusiva? Estar. Minhas. Convidado.

Se você deseja saber como os modelos de página do WordPress podem ajudá-lo a conseguir isso, continue lendo. Mas, primeiro, algumas informações básicas.

Arquivos de modelo no WordPress

Do que estamos falando quando falamos de modelos no contexto do WordPress? A versão curta é que os modelos são arquivos que informam ao WordPress como exibir diferentes tipos de conteúdo.

A versão um pouco mais longa: toda vez que alguém enviar uma solicitação para visualizar parte do seu site, a plataforma WordPress descobrirá qual conteúdo eles desejam ver e como essa parte específica do seu site deve ser processada.

Para o último, o WordPress tentará usar o arquivo de modelo mais apropriado encontrado em seu tema. Qual deles é decidido com base em uma ordem definida, a hierarquia de modelos do WordPress. Você pode ver como isso se parece na imagem abaixo ou nesta versão interativa.

A hierarquia de modelo é uma lista de arquivos de modelo com os quais o WordPress está familiarizado que são classificados para determinar quais arquivo tem precedência sobre outro.

Você pode pensar nele como uma árvore de decisão. Quando o WordPress tenta decidir como exibir uma determinada página, ele desce na hierarquia do modelo até encontrar o primeiro arquivo de modelo que se ajusta à página solicitada. Por exemplo, se alguém tentasse acessar o endereço http://yoursite.com/category/news, o WordPress procuraria o arquivo de modelo correto nesta ordem:

Na parte inferior da hierarquia está o índice .php. Ele será usado para exibir qualquer conteúdo que não tenha um arquivo de modelo mais específico anexado ao seu nome. Se um arquivo de modelo tiver uma classificação superior na hierarquia, o WordPress usará automaticamente esse arquivo para exibir o conteúdo em questão.

Modelos de página e seu uso

Para páginas, o modelo padrão geralmente é o page.php com o nome apropriado. A menos que haja um arquivo de modelo mais específico disponível (como archive.php para uma página de arquivo), o WordPress usará page.php para renderizar o conteúdo de todas as páginas do seu site.

No entanto, em muitos casos pode ser necessário alterar o design, aparência, comportamento ou funcionalidade de partes individuais do seu site. É aqui que os modelos de página entram em jogo.Os modelos de página personalizados permitem que você individualize qualquer parte do seu site WordPress sem afetar o resto.

Você já deve ter visto isso no trabalho. Por exemplo, muitos temas WordPress hoje vêm com uma opção para alterar sua página para largura total, adicionar uma segunda barra lateral ou mudar a localização da barra lateral. Se esse for o seu caso, provavelmente foi feito por meio de arquivos de modelo. Existem várias maneiras de fazer isso e vamos examiná-las mais tarde.

Antes, no entanto, uma palavra de cautela: como trabalhar com modelos envolve editar e alterar arquivos em seu tema ativo, é sempre uma boa ideia de ir com um tema filho ao fazer esses tipos de personalizações. Dessa forma, você não corre o risco de ter suas alterações sobrescritas quando seu tema pai for atualizado.

Como personalizar qualquer página no WordPress

Existem três maneiras básicas de usar o personalizado modelos de página no WordPress: adicionando instruções condicionais a um modelo existente; a criação de modelos de página específicos com classificação superior na hierarquia; e atribuição direta de modelos a páginas específicas. Vamos dar uma olhada em cada um deles.

Usando tags condicionais em modelos padrão

Uma maneira fácil de fazer alterações específicas da página é adicionar as várias tags condicionais do WordPress a um modelo já em uso. Como o nome sugere, essas tags são usadas para criar funções que só são executadas se uma determinada condição for atendida. No contexto de modelos de página, isso seria algo ao longo da linha de “Executar apenas a ação X na página Y.”

Normalmente, você adicionaria tags condicionais ao arquivo page.php do seu tema (a menos que, claro, você deseja personalizar uma parte diferente do seu site). Eles permitem que você faça alterações limitadas à página inicial, página inicial, página do blog ou qualquer outra página do seu site.

Aqui estão alguns usados com frequência tags condicionais:

Por exemplo, quando adicionado ao seu page.php no lugar da tag get_header(); padrão, o código a seguir carregará um arquivo de cabeçalho personalizado denominado header -shop.php ao exibir a página http://yoursite.com/products.

Um bom caso de uso para isso seria se você tem uma loja em seu site e você precisa exibir uma imagem de cabeçalho diferente ou um menu personalizado na página da loja. Você pode então adicionar essas personalizações em header-shop.php e ele aparecerá no local apropriado.

No entanto, as tags condicionais não são li limitado a uma página. Você pode fazer várias declarações consecutivas, como:

Neste segundo exemplo, duas condições mudarão o comportamento de diferentes páginas em seu site. Além de carregar o arquivo de cabeçalho específico da loja mencionado acima, agora também carregaria um header-about.php em uma página com o ID 42. Para todas as outras páginas, o arquivo de cabeçalho padrão se aplica.

Para saber mais sobre o uso de tags condicionais, os seguintes recursos são altamente recomendados:

• WordPress Codex: Tags condicionais
• ThemeLab: o guia definitivo para tags condicionais do WordPress

Criando arquivos específicos de página na hierarquia do WordPress

As tags condicionais são uma ótima maneira de introduzir pequenas alterações em seus modelos de página. Claro, você também pode criar personalizações maiores usando muitas instruções condicionais, uma após a outra. Acho essa solução muito complicada, no entanto, e optaria por arquivos de modelo designados.

Uma maneira de fazer isso é explorar a hierarquia de modelos do WordPress. Como vimos, a hierarquia percorrerá uma lista de arquivos de modelo possíveis e escolherá o primeiro que encontrar que se encaixa. Para páginas, a hierarquia é semelhante a esta:

• Modelo de página personalizado
• página- {slug} .php
• página- {id} .php
• page.php
• index.php

Em primeiro lugar, estão os modelos de página personalizados que foram atribuídos diretamente a uma página específica. Se um deles existir, o WordPress o usará independentemente dos outros arquivos de modelo presentes. Falaremos mais sobre modelos de página personalizados em breve.

Depois disso, o WordPress procurará um modelo de página que inclua o slug da página em questão. Por exemplo, se você incluir um arquivo denominado page-about.php em seus arquivos de tema, o WordPress usará esse arquivo para exibir sua página ‘Sobre’ ou qualquer página que possa ser encontrada em http://www.yoursite.com/about .

Como alternativa, você pode conseguir o mesmo segmentando o ID da sua página. Portanto, se essa mesma página tiver um ID 5, o WordPress usará o arquivo de modelo page-5.php antes de page.php se ele existir; isto é, apenas se não houver um modelo de página de classificação superior disponível.

(A propósito, você pode descobrir o ID de cada página passando o mouse sobre o título em ‘Todas as páginas’ no verso do WordPress -end. O ID aparecerá no link exibido pelo seu navegador.)

Atribuindo modelos de página personalizados

Além de fornecer modelos em um formato que o WordPress usará automaticamente, também é possível atribuir manualmente modelos personalizados a páginas específicas.Como você pode ver na hierarquia de modelos, eles superarão qualquer outro arquivo de modelo presente na pasta do tema.

Assim como a criação de modelos específicos de página para a hierarquia do WordPress, isso requer que você forneça um arquivo de modelo e em seguida, vincule-o à página para a qual deseja usá-lo. O último pode ser feito de duas maneiras diferentes com as quais você já deve estar familiarizado. Caso não esteja, aqui está como fazer.

1. Atribuindo modelos de página personalizados a partir do editor do WordPress

No editor do WordPress, você encontra um campo de opção chamado ‘Atributos da página’ com um menu suspenso em ‘Modelo’.

Ao clicar nele, você obterá uma lista de modelos de página disponíveis em seu site WordPress. Escolha o que deseja, salve ou atualize sua página e pronto.

2. Definindo um modelo personalizado por meio da edição rápida

O mesmo também pode ser feito sem entrar no editor do WordPress. Vá para ‘Todas as páginas’ e passe o mouse sobre qualquer item da lista. Um menu se tornará visível, incluindo o item ‘Edição rápida’.

Clique nele para editar as configurações da página diretamente da lista. Você verá o mesmo menu suspenso para escolher um modelo de página diferente. Escolha um, atualize a página e pronto.

Não é tão difícil, não é? Mas e se você ainda não tiver um modelo de página personalizado? Como você o cria para que seu site fique exatamente do jeito que você deseja? Não se preocupe, essa é a próxima parte.

Um guia passo a passo para criar modelos de página personalizados

Reunir arquivos de modelo personalizados para suas páginas não é é difícil, mas aqui estão alguns detalhes aos quais você deve prestar atenção. Portanto, vamos repassar o processo bit a bit.

1. Encontre o modelo padrão

Uma boa maneira é começar copiando o modelo que está sendo usado atualmente pela página que você deseja modificar. É mais fácil modificar o código existente do que escrever uma página inteira do zero. Na maioria dos casos, esse será o arquivo page.php.

(Se você não souber como descobrir qual arquivo de modelo está sendo usado na página que deseja editar, o plugin What The File will provem ser úteis.)

Usarei o tema Twenty Twelve para demonstração. Aqui está a aparência de seu template de página padrão:

Como você pode ver, nada muito extravagante aqui: as chamadas usuais para o cabeçalho e rodapé, e o loop no meio. A página em questão se parece com isto:

2. Copie e renomeie o arquivo de modelo

Depois de identificar o arquivo de modelo padrão, é hora de fazer uma cópia. Usaremos o arquivo duplicado para fazer as alterações desejadas em nossa página. Para isso, também teremos que renomeá-lo. Não é possível ter dois arquivos com o mesmo nome, isso é confuso para todos.

Você é livre para dar ao arquivo o nome que quiser, desde que ele não comece com nenhum dos nomes de arquivo de tema reservados . Portanto, não o nomeie como page-something.php ou qualquer outra coisa que faça o WordPress pensar que é um arquivo de modelo dedicado.

Faz sentido usar um nome que identifique facilmente o que esse arquivo de modelo é usado para, como my-custom-template.php. No meu caso, irei usar custom-full-width.php.

3. Personalize o cabeçalho do arquivo de modelo

Em seguida, temos que dizer ao WordPress que este novo arquivo é um modelo de página personalizado. Para isso, teremos que ajustar o cabeçalho do arquivo da seguinte maneira:

O nome em ‘Nome do modelo’ é o que será exibido em ‘Página Atributos ‘no editor do WordPress. Certifique-se de ajustá-lo ao nome do seu modelo.

4. Personalize o código

Agora é hora de chegar à essência do modelo de página: o código. No meu exemplo, quero apenas remover a barra lateral da minha página de demonstração.

Isso é relativamente fácil, pois tudo que tenho a fazer é remover <?php get_sidebar(); ?> da minha modelo de página, uma vez que é isso que chama a barra lateral. Como consequência, meu modelo personalizado fica assim:

5. Carregar o modelo de página

Depois de salvar meu arquivo personalizado, é hora de carregá-lo em meu site. Os modelos de página personalizados podem ser salvos em vários lugares para serem reconhecidos pelo WordPress:

• A pasta do seu tema ativo (filho)
• A pasta do seu tema pai principal
• Uma subpasta dentro de qualquer um desses

Eu pessoalmente gosto de criar uma pasta chamada page_templates em meu tema filho e colocar quaisquer modelos personalizados lá.Acho mais fácil manter uma visão geral dos meus arquivos e personalizações.

6. Ative o modelo

Como última etapa, você precisa ativar o modelo de página. Conforme mencionado anteriormente, isso é feito em Atributos da página → Modelos no editor do WordPress. Salve, veja a página e voilà! Aqui está minha página personalizada sem barra lateral:

Não é tão difícil, não é? Não se preocupe, você vai pegar o jeito rapidamente. Para dar a você uma impressão melhor de como usar esses modelos de página, demonstrarei casos de uso adicionais (incluindo o código) no restante do artigo.

Cinco maneiras diferentes de usar modelos de página

Conforme já mencionado, os modelos de página podem ser empregados para muitos propósitos diferentes. Você pode personalizar praticamente qualquer coisa em qualquer página com a ajuda deles. Apenas sua imaginação (e habilidades de codificação) o atrapalham.

1. Modelo de página de largura total

O primeiro caso que veremos é uma versão avançada do modelo de demonstração que criamos acima. Lá em cima, já removemos a barra lateral excluindo <?php get_sidebar(); ?> do código. No entanto, como você viu na captura de tela, isso não resulta em um layout de largura total, já que a seção de conteúdo fica à esquerda.

Para resolver isso, precisamos lidar com o CSS, em particular esta parte:

O atributo width limita o elemento que contém nosso conteúdo a 65,1042% do espaço disponível . Queremos aumentar isso.

Se apenas mudarmos para 100%, no entanto, isso afetará todas as outras páginas do nosso site, que está longe de ser o que desejamos. Portanto, a primeira ordem aqui é alterar a classe principal div em nosso modelo personalizado para outra coisa, como class="site-content-fullwidth”. O resultado:

Agora podemos ajustar o CSS para nossa nova classe personalizada:

Como resultado, o conteúdo agora abrange todos o caminho através da tela.

2. Página de erro 404 dinâmica com áreas de widget

A página de erro 404 é onde cada pessoa chega e tenta acessar uma página de seu site que não existe, seja por meio de um erro de digitação, um link com defeito ou porque o o permalink da página mudou.

Apesar do fato de que obter um 404 não é apreciado por todos na Internet, se você estiver executando um site, a página de erro 404 não é de pouca importância. Seu conteúdo pode ser o fator decisivo para que alguém abandone seu site imediatamente ou fique por perto e verifique seu outro conteúdo.

Codificar uma página de erro personalizada do zero é complicado, especialmente se você não confiar em suas habilidades . A melhor maneira é construir áreas de widget em seu modelo para que você possa alterar com flexibilidade o que é exibido lá arrastando e soltando.

Para isso, pegaremos e editaremos o arquivo 404.php que acompanha Twenty Twelve ( hierarquia de modelos, lembra?). No entanto, antes de alterarmos qualquer coisa lá, primeiro criaremos um novo widget inserindo o seguinte código em nosso arquivo functions.php:

Isso deve exibir o widget recém-criado em seu back-end do WordPress. Para garantir que ele realmente apareça no site, você precisa adicionar a seguinte linha de código à sua página 404 no local apropriado:

Depois carregando o modelo para o meu site, é hora de preencher minha nova área de widget:

Se eu der uma olhada na página de erro 404, meus widgets recém-criados aparecem lá:

3. Modelo de página para exibição de tipos de postagem personalizados

Os tipos de postagem personalizados são uma ótima maneira de introduzir conteúdo que tenha seu próprio conjunto de pontos de dados, design e outras personalizações. Um caso de uso favorito para esses tipos de postagem são itens de revisão, como livros e filmes. Em nosso caso, queremos construir um modelo de página que mostre os itens do portfólio.

Primeiro, precisamos criar nosso tipo de postagem personalizado (CPT). Isso pode ser feito manualmente ou via plugin. Uma opção de plug-in que posso recomendar sinceramente são os Tipos. Ele permite que você crie facilmente tipos de postagem e campos personalizados.

Instale e ative Tipos, adicione uma postagem personalizada, certifique-se de que seu slug seja ‘portfólio’, personalize todos os campos de que precisar (como adicionar uma imagem em destaque ), ajuste quaisquer outras opções e salve.

Agora que temos nosso tipo de postagem de portfólio, queremos que apareça em nosso site. A primeira coisa que faremos é criar a página em questão.Esteja ciente de que se você escolheu ‘portfólio’ como o pacote do seu CPT, a página não pode ter o mesmo pacote. Fui com meu clients-portfolio e também adicionei um texto de exemplo.

Depois de adicionar alguns itens na seção de tipo de postagem ‘portfólio’, queremos que eles apareçam em nossa página logo abaixo do conteúdo da página.

Para conseguir isso, usaremos novamente um derivado do arquivo page.php. Copie-o, chame-o de portfolio-template.php e mude o cabeçalho para este:

No entanto, neste caso, teremos que fazer algumas mudanças no modelo original. Quando você der uma olhada no código de page.php, verá que ele chama outro arquivo de modelo no meio, denominado content-page.php (onde diz <?php get_template_part( ‘content’, ‘page’ ); ?>). Nesse arquivo encontramos o seguinte código:

Como você pode ver, é aqui que o título e o conteúdo da página são chamados. Visto que definitivamente os queremos em nosso site de portfólio, precisaremos copiar as partes necessárias deste modelo para nosso arquivo page.php. O resultado é o seguinte:

Para colocar os itens do portfólio em nossa página, adicionaremos o seguinte código logo abaixo da the_content() chamada.

Isso fará com que o CPT apareça na página:

Tenho certeza de que todos concordamos que parece menos do que estelar, então alguns estilos estão em ordem.

Muito melhor, não acham?

E aqui está o código completo para o modelo de página do portfólio:

4. Página de contribuidor com imagens de avatar

O próximo em nossos casos de uso de modelo de página é uma página de contribuidor. Queremos criar uma lista de autores em nosso site, incluindo suas imagens e o número de postagens que publicaram em seu nome. O resultado final será semelhante a este:

Começaremos novamente com nosso arquivo híbrido anterior e adicionaremos o código da lista de contribuidores a ele. Mas e se você não souber como criar tal coisa? Não se preocupe, você pode sobreviver com o roubo inteligente.

Veja, o tema padrão Twenty Fourteen vem com uma página de contribuidor por padrão. Você pode encontrar seu modelo na pasta de modelos de página com o nome contributors.php.

Ao examinar o arquivo, no entanto, você encontrará apenas a seguinte chamada lá: twentyfourteen_list_authors();. Felizmente, como um usuário ávido do WordPress, você agora conclui que isso provavelmente se refere a uma função no arquivo function.php do Twenty Fourteen e você está certo.

Pelo que encontramos lá, a parte que nos interessa é isto:

Vamos adicioná-lo novamente abaixo da chamada para the_content() com o seguinte resultado:

Agora, um pouco de estilo:

E deve ser isso. Obrigado Twenty Fourteen!

5. Página de arquivo personalizada

Twenty Twelve vem com seu próprio modelo para páginas de arquivo. Ele entrará em ação, por exemplo, quando você tentar visualizar todos os posts anteriores de uma determinada categoria.

No entanto, eu quero algo um pouco mais parecido com o que o Problogger fez: uma página que permite que as pessoas descubram conteúdo em meu site de várias maneiras diferentes. Isso, novamente, é feito com um modelo de página.

Mantendo nosso modelo misto de antes, adicionaremos o seguinte abaixo da the_content() chamada:

Além disso, um pouco de estilo para a barra de pesquisa:

E o resultado deve ser um pouco assim:

Para fins de conclusão, aqui está o arquivo inteiro:

Não se esqueça de atribuí-lo a um página!

Modelos de página WordPress resumidos

No seu caminho para dominar o WordPress, aprender a usar modelos de página é um passo importante. Eles podem tornar a personalização do seu site muito, muito fácil e permitem que você atribua funcionalidade e design exclusivos a quantas páginas desejar. Desde adicionar áreas de widget até mostrar tipos de postagem personalizados e exibir uma lista dos colaboradores do seu site – as possibilidades são praticamente infinitas.

Se você usa tags condicionais, explora a hierarquia de modelos do WordPress ou cria arquivos de modelo específicos de página, depende inteiramente de você e do que você está tentando alcançar. Comece pequeno e vá chegando a coisas mais complicadas. Não demorará muito para que cada parte do seu site WordPress responda a todas as suas ligações.