Hierarquia de templates WordPress

17,544 views
17,373 views

Published on

Aprenda a utilizar corretamente a hierarquia de templates WordPress para planejar seus projetos da forma correta e facilitar toda manutenção e funcionamento do sistema.

Apresentação utilizada no 5º WordPress Meetup RJ e atualizada no lançamento do WordPress 4.3 beta 1, que trás a adição do arquivo singular.php na hierarquia de templates do WP.

Published in: Technology
6 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total views
17,544
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
86
Comments
6
Likes
18
Embeds 0
No embeds

No notes for slide

Hierarquia de templates WordPress

  1. 1. Hierarquia de um template WordPress
  2. 2. Quem vos fala @GugaAlves • Sócio-Fundador da Agencia Wattz • Analista de Sistemas Pós Graduado em Gestão Estratégica de Marketing Digital • Professor do Instituto Infnet • Criador do Tudo Para WordPress
  3. 3. Se preparem, vem muita coisa por ai!
  4. 4. Termos que voce deve saber ID – Numero identificador da página no Banco de dados. No Exemplo acima, é 3635 Slug – Caminho amigável da URL. No Exemplo, é contato
  5. 5. Introdução Os arquivos de um tema WordPress são usados ​​para gerar as páginas da web em seu site WordPress. Alguns modelos (como o cabeçalho e rodapé do modelo) são usados ​​em todas as páginas do seu site, enquanto outros são usados ​​apenas em condições específicas. Esta apresentação visa explicar como o WordPress determina qual arquivo deverá ser usado em cada tipo de página. Se você quiser criar um tema WordPress do zero, ou mesmo utilizar um tema pronto ou Framework, é necessário conhecer esta organização.
  6. 6. Como isso funciona? WordPress usa a string de consulta para decidir qual modelo ou conjunto de modelos deve ser usado para exibir a página. A string de consulta em sua URL vem depois do ponto de interrogação inicial e pode conter um número de parâmetros separados por &. Obs.: Quando alteramos os links permanentes do site, estas consultas não são visiveis em seu navegador, mas continuam sendo feitas.
  7. 7. Quais os passos o WP percorre para descobrir qual arquivo utilizar? 1. Verifica cada string consultada e otipo de consulta para decidir qual página está sendo solicitada (por exemplo, uma página de busca, uma página de categoria, etc) 2. Seleciona o template na ordem determinada pelo modelo hierárquico. 3. Procura por arquivos de modelo com nomes específicos no diretório do tema atual e usa o primeiro arquivo de modelo de correspondência, conforme especificado pela hierarquia. Se WordPress não encontrar um arquivo de modelo com um nome correspondente, ele vai pular para o próximo arquivo na hierarquia. Se WordPress não pode encontrar qualquer arquivo de modelo de correspondência, o arquivo do tema será usado.
  8. 8. Exemplo Se o seu blog está em http://meusite.com/ e um visitante clica em um link para uma página, como http://meusite.com/category/sua-categoria/ http://meusite.com/ http://meusite.com/category/sua- categoria/
  9. 9. 1. WordPress procura por um arquivo de modelo no diretório do tema atual que corresponde ao slug da categoria. Se o slug da categoria é "unicornios", então WP procura por um arquivo de modelo chamado category-unicornios.php. 2. Se category-unicornios.php não existe e ID da categoria é de 4, o WP procura por um arquivo de modelo chamado category-4.php. 3. Se category-4.php não existe o WP irá procurar um arquivo de modelo de categoria genérica, category.php. 4. Se category.php também não existe, o WP irá procurar por um modelo de arquivo genérico, archive.php. 5. Se archive.php também não existe, o WordPress vai buscar o ultimo arquivo da hierarquia, o index.php. TOP-DOWN
  10. 10. Estrutura mais comum header.php footer.php ? sidebar.php
  11. 11. Arquivos Obrigatórios Apenas 2 arquivos são obrigatorios num tema WordPress: • index.php • style.css Mas para fazer um bom tema, voce precisa de arquivos CSS, JS, Imagens, e sempre que possivel um arquivo de tradução.
  12. 12. Modelo Visual http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
  13. 13. Arquivos mais comuns em um tema • 404.php • Archive.php • Author.php • Category.php • Footer.php • Functions.php • Header.php • Index.php Outros arquivos que podem ser criados • Attachment.php • Date.php • Front-page.php • Home.php • Taxonomy.php • Comments.php • Page.php • Single.php • Search.php • Sidebar.php • Tag.php • Style.css • Screenshot.png
  14. 14. 404.php Caso a URL solicitada (ou digitada) não exista, a página 404 e carregada. O erro 404 é um código de resposta HTTP que indica que o cliente pode se comunicar com o servidor, mas o servidor não pôde encontrar o que foi pedido. 404.php index.php
  15. 15. 404.php Seja criativo ao criar sua página 404. Existem bons exemplos em http://www.hongkiat.com/blog/ 49-nice-and-creative-error- 404-pages/
  16. 16. Header.php Arquivo onde você deve criar o cabeçalho padrão de seu site, para ser incluido no topo dos arquivos do tema através da função get_header(), que faz o include deste arquivo.
  17. 17. Footer.php Arquivo onde você deve criar o rodapé padrão de seu site, para ser incluido nos demais arquivos do tema através da função get_footer(), que faz o include deste arquivo.
  18. 18. Footer.php
  19. 19. Page.php Arquivo utilizado como modelo de uma página estática. page-{slug}.php page-{id}.php page.php singular.php Template page index.php
  20. 20. Template Pages Modelo de página que pode ser escolhido para formatar a página criada do jeito que um arquivo montado por você solicitar. Para funcionar, é necessario ter o seguinte começo: /* * Template Name: Nome do Template */
  21. 21. Template Pages O nome do arquivo não tem um formato específico, mas prefira usar como page-NAME.php ou template-NAME.php. Costumo utilizar template- NAME.php por questão de preferência e organização.
  22. 22. Página de uma única postagem Utilizado para mostrar o conteúdo de um único post, seja ele do blog ou de um Custom Post Type Obs.: O singular.php foi introduzido no WordPress na versão 4.3. single.php singular.php index.php single-{post-type}.php
  23. 23. Archive.php Se você quer uma única página com links para todas as suas postagens, organizados apenas para formar a principal porta de entrada para o passado de seu blog. Utilize o Archives.php. archive-{post-type}.php archive.php index.php
  24. 24. Search.php Página do resultado de uma busca search.php index.php
  25. 25. Sidebar.php Arquivo onde você deve a barra lateral padrão de seu site, para ser incluido nos demais arquivos do tema através da função get_sidebar(), que faz o include deste arquivo.
  26. 26. Front-page.php 1 - front-page.php O arquivo front-page.php é usado para processar a página inicial do seu site, mesmo se a home.php existir ou você configurar em Configurações >> Leitura uma página estática. Portanto, o Front-Page tem precedência sobre o Home.php. 2 3 4 - index.php
  27. 27. Home.php Por padrão, o WordPress define a home page do seu site para exibir seus últimos posts. Esta página é chamada de „Índice de posts‟. Você também pode configurar o seu blog para exibir em uma página estática em separado. O arquivo home.php é usado para processar o Índice de posts, se ele estiver sendo usado como a primeira página ou na página estática selecionada em Configurações >> Leitura. home.php index.php front-page.php
  28. 28. Author.php Arquivo utilizado para listar todos os posts de um autor. author-{id}.php author.php archive.php index.php author-{nicename}.php
  29. 29. Functions.php Arquivo utilizado para declarar as funçoes que seu tema precise, como recorte de imagens, declaraçao de widgets, incluir JS e CSS no tema, etc.
  30. 30. Style.css Arquivo com o CSS do tema, que deve conter as linhas abaixo: /* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: descriçao do tema Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: tags que falem mais sobre o tema Text Domain: twentyfourteen */
  31. 31. Screenshot.png Imagem do tema, que aparece na tela de seleção de temas Screenshot do tema Odin Dimensao: 880x660 pixels
  32. 32. Outros Arquivos Attachment.php – Exibe arquivos anexados ao post. Date.php – Arquivo de posts por data. Comments.php – Comentários do blog. date.php archive.php index.php
  33. 33. Custom Post Type O WordPress pode armazenar e exibir muitos tipos diferentes de conteúdo.Custom Post Type‟s são tipos de posts customizados, onde podemos trabalhar novas áreas de um site com um gerenciamento específico. http://codex.wordpress.org/Post_Types#Custom_Post_Types archive-{post_type}.php single-{post_type}.php
  34. 34. Taxonomias A taxonomia é uma daquelas palavras que a maioria das pessoas “nunca ouviu” ou não utiliza. Basicamente, uma taxonomia é uma forma de agrupamento de itens. Taxonomias padrão no WP: Tags e Categorias
  35. 35. Isso se voces mataram aula de Biologia na escola! Taxonomia dos Seres Vivos – Homens Reino: Animalia Filo: Chordata Classe: Mammalia Infraclasse: Placentalia Ordem: Primata Família: Hominidae Subfamília: Homininae Gênero: Homo.
  36. 36. Category.php Usado para exibir todos os posts da categoria solicitada. category-{id}.php category.php archive.php index.php category-{slug}.php
  37. 37. Tag.php Usado para exibir todos os posts da tag solicitada. tag-{id}.php tag.php archive.php index.php tag-{slug}.php
  38. 38. Exemplo prático Site sobre filmes Categorias: Ação, Aventura, Suspense, Drama, Comédia. Tags: nomes de autores, datas, nomes de atores, nome de diretores.
  39. 39. Custom Taxonomy Assim como as tags e taxonomias, podemos ter outras taxonomias para serem utilizadas. taxonomy- {taxonomia}.php taxonomy.php archive.php index.php taxonomy-{taxonomia}- {termo}.php
  40. 40. Voltando ao nosso exemplo Site sobre filmes Categorias: Ação, Aventura, Suspense, Drama, Comédia. Custom Taxonomy ‘Diretores’ (taxonomy-diretores.php) Custom Taxonomy ‘Ano de Lançamento’ (taxonomy-ano-lancamento.php) Custom Taxonomy ‘Atores’ (taxonomy-atores.php)
  41. 41. Voltando ao nosso exemplo Página do diretor Steven Spielberg, na taxonomia „Diretores‟ taxonomy-diretores-steven-spielberg.php
  42. 42. Tenho que decorar isso tudo? Calma! Não precisa decorar isso tudo ainda, você pode, sempre que precisar, consultar um modelo visual ou esta apresentação. Com mais prática, você acaba todos de cabeça.
  43. 43. Quer estudar mais? Que tal pegar um tema pronto e tentar editá-lo? http://wordpress.org/themes/
  44. 44. Referências • http://codex.wordpress.org/Template_Hierarchy • http://wphierarchy.com/
  45. 45. Obrigado!

×