{"id":233960,"date":"2023-02-25T10:29:00","date_gmt":"2023-02-25T07:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233960"},"modified":"2022-11-11T13:25:38","modified_gmt":"2022-11-11T10:25:38","slug":"tutorial-de-tema-wordpress-para-iniciantes-parte-10-adicionando-mais-modelos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-10-adicionando-mais-modelos\/","title":{"rendered":"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 10: Adicionando Mais Modelos"},"content":{"rendered":"\n

Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, vamos mergulhar mais nos modelos. Vamos aprender sobre as partes do modelo e implement\u00e1-lo para reutiliza\u00e7\u00e3o. E adicionaremos mais modelos padr\u00e3o do WordPress ao nosso tema.<\/p>\n

Mas antes de come\u00e7armos a adicionar mais arquivos de modelo, precisamos saber por que devemos nos preocupar com as partes do modelo<\/strong>.<\/p>\n

Partes do modelo: blocos de constru\u00e7\u00e3o mais flex\u00edveis<\/h2>\n

As partes do modelo funcionam exatamente como get_header()<\/code>aprendemos get_footer()<\/code>na parte 2<\/a>, mas n\u00e3o se limitam a esses arquivos. Voc\u00ea pode usar pe\u00e7as de modelo para qualquer arquivo que desejar!<\/p>\n

Os temas geralmente usam uma parte de modelo para postagens em um loop. Normalmente, muitos modelos, como categoria, arquivo e resultados de pesquisa, geralmente exibem cada postagem em um loop da mesma maneira. Portanto, \u00e9 uma boa ideia separar a sa\u00edda do p\u00f3s-loop em um arquivo. Dessa forma, voc\u00ea n\u00e3o precisa repeti-lo em todos os modelos.<\/p>\n

Vamos “converter" alguns dos nossos c\u00f3digos existentes em partes de templates antes de come\u00e7armos a fazer mais templates!<\/p>\n

Criando uma parte do modelo de loop de postagem<\/h2>\n

Crie um novo arquivo vazio em nossa pasta de temas; chamado content-loop.php<\/code>. Voc\u00ea pode nomear as partes do modelo como quiser. Mas voc\u00ea n\u00e3o pode nome\u00e1-los da mesma forma que qualquer um dos modelos definidos do WordPress<\/a>. No nosso index.php<\/code>, localize tudo que voc\u00ea tem dentro do loop, recorte e cole dentro do content-loop.php<\/code>.<\/p>\n

Dentro do loop agora vazio em index.php<\/code>, use a chamada de fun\u00e7\u00e3o get_template_part()<\/code>e defina seu arquivo de pe\u00e7a de modelo como par\u00e2metro (sem a .php<\/code>extens\u00e3o). Esta \u00e9 a apar\u00eancia em ambos os arquivos:<\/p>\n

...\n    while (have_posts()): the_post(); \n        get_template_part('content-loop');\n    endwhile;\n    the_posts_pagination();\n...<\/code><\/pre>\n
<article <?php post_class(); ?>>\n    <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n    <?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?>\n    <?php the_excerpt(); ?>\n    <?php the_category(); ?>\n<\/article><\/code><\/pre>\n
Se voc\u00ea atualizar sua primeira p\u00e1gina, n\u00e3o ver\u00e1 absolutamente nenhuma diferen\u00e7a.<\/p>\n
Excelente! Agora que o nosso index.php<\/code>est\u00e1 bom e limpo, podemos us\u00e1-lo como base para duplicar em mais modelos. Abaixo, mostrarei como adicionar um modelo de categoria e um modelo de resultados de pesquisa, mas encorajo voc\u00ea a criar mais modelos para ter mais controle no design do seu tema.<\/p>\n
Adicionando um modelo de categoria<\/h2>\n
Se voc\u00ea consultar a hierarquia de modelos do WordPress<\/a>, poder\u00e1 ver que, para categorias de postagem, o WordPress procurar\u00e1 o modelo chamado category.php<\/code>. Vamos criar esse primeiro.<\/p>\n
Na pasta do seu tema, fa\u00e7a uma c\u00f3pia do index.php<\/code>arquivo e renomeie a c\u00f3pia category.php<\/code>.<\/p>\n
E \u00e9 isso. Voc\u00ea est\u00e1 basicamente pronto\u2026!<\/p>\n
No entanto, adicionaremos um detalhe; queremos mostrar um t\u00edtulo que nos diga que estamos em uma p\u00e1gina de categoria para postagens na categoria chamada X. O WordPress tem uma fun\u00e7\u00e3o para isso que voc\u00ea pode usar em todos os modelos de arquivo (categoria, tags, arquivos de data), the_archive_title<\/code>. Vamos adicion\u00e1-lo antes do loop, dentro de uma <h1><\/code>tag.<\/p>\n
<?php get_header(); ?>\n<h1><?php the_archive_title(); ?><\/h1>\n<?php\nif (have_posts()) {\n...<\/code><\/pre>\n
Se voc\u00ea visualizar uma p\u00e1gina de categoria de postagem, dever\u00e1 ver algo assim, com o t\u00edtulo do arquivo “Categoria: “. PS: Se voc\u00ea quiser alterar a sa\u00edda do t\u00edtulo do arquivo (por exemplo, n\u00e3o mostrar “Category: “), voc\u00ea pode adicionar um filtro para get_the_archive_title<\/a>. A p\u00e1gina de documenta\u00e7\u00e3o mostra um \u00f3timo exemplo de como fazer exatamente isso.<\/p>\n
\"Tutorial<\/a><\/p>\n
Bem, isso foi f\u00e1cil! Vamos lidar com o modelo de resultados de pesquisa a seguir.<\/p>\n
Adicionando um modelo de resultados de pesquisa<\/h2>\n
O procedimento \u00e9 exatamente o mesmo que fizemos para modelos de categoria. Desta vez, fa\u00e7a uma c\u00f3pia de category.php<\/code>e renomeie a c\u00f3pia para search.php<\/code>.<\/p>\n
Tudo o que precisamos corrigir \u00e9 o t\u00edtulo. A fun\u00e7\u00e3o de t\u00edtulo de arquivo que usamos no modelo de categoria infelizmente n\u00e3o funciona muito bem para o modelo de resultados de pesquisa. Na verdade, n\u00e3o existe uma fun\u00e7\u00e3o simples no WordPress que gere um t\u00edtulo para n\u00f3s.<\/p>\n
Mas podemos facilmente fazer uma n\u00f3s mesmos e, ao mesmo tempo, demonstrarei como gerar uma vari\u00e1vel din\u00e2mica e ainda manter o texto traduz\u00edvel.<\/p>\n
PHP tem duas fun\u00e7\u00f5es \u00fateis, printf()<\/code>e sprintf()<\/code>. Eles fazem o mesmo, exceto que printf<\/code>o gera (como echo) e sprintf<\/code>o retorna, para que possamos armazen\u00e1-lo em uma vari\u00e1vel. Depois de colocarmos o texto como primeiros par\u00e2metros, podemos adicionar vari\u00e1veis \u200b\u200bdin\u00e2micas como argumentos, que s\u00e3o ent\u00e3o injetados no texto. Dentro deles, podemos usar as fun\u00e7\u00f5es de texto traduz\u00edvel __()<\/code>e _e()<\/code>. Eu recomendo que voc\u00ea leia um pouco sobre como funciona o printf<\/a> ou o sprintf<\/a>, pois n\u00e3o entrarei em mais detalhes aqui.<\/p>\n
O WordPress oferece uma fun\u00e7\u00e3o simples para obter a string que foi pesquisada; get_search_query()<\/code>. Com isso dito, vamos substituir a fun\u00e7\u00e3o de t\u00edtulo do arquivo por isso;<\/p>\n
<h1><?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?><\/h1><\/code><\/pre>\n
O que o c\u00f3digo acima faz \u00e9 de dentro para fora; definindo um texto traduz\u00edvel “Search: %s” que \u00e9 colocado dentro de um printf<\/code>que ecoa a string e substitui a constante da string (%s<\/code>) pelo segundo argumento; que \u00e9 get_search_query()<\/code>.<\/p>\n
Como resultado, obtemos um t\u00edtulo como este ao pesquisar por “er”:<\/p>\n
\"Tutorial<\/a><\/p>\n
Agrad\u00e1vel! Mais um molde pronto. Quanto \u00e0 \u00faltima parte desta li\u00e7\u00e3o, entraremos em nosso modelo de postagem \u00fanica e adicionaremos algo muito comum no WordPress; o modelo de coment\u00e1rios.<\/p>\n
Adicionando um modelo de coment\u00e1rios a uma \u00fanica postagem<\/h2>\n
Em nosso single.php<\/code>, ap\u00f3s o artigo do post, queremos mostrar os coment\u00e1rios. Os coment\u00e1rios devem gerar uma lista de coment\u00e1rios anteriores e um formul\u00e1rio para adicionar um novo coment\u00e1rio.<\/p>\n
O modelo de coment\u00e1rios \u00e9 um arquivo de modelo que voc\u00ea pode adicionar ao seu tema, mas o WordPress na verdade tem sua pr\u00f3pria sa\u00edda de modelo de coment\u00e1rios padr\u00e3o. Se voc\u00ea n\u00e3o tiver comments.php<\/code>em seu tema, solicitar o modelo de coment\u00e1rios retornar\u00e1 a sa\u00edda padr\u00e3o do WordPress para ele. \u00c9 o que faremos neste tutorial.<\/p>\n
S\u00f3 queremos chamar o modelo de coment\u00e1rios se a postagem tiver coment\u00e1rios ativados (\u00e9 uma configura\u00e7\u00e3o para cada postagem e uma configura\u00e7\u00e3o global do site). Ent\u00e3o adicionamos uma verifica\u00e7\u00e3o if para verificar se os coment\u00e1rios s\u00e3o permitidos com comments_open()<\/code>e se retornar true, solicitamos o template de coment\u00e1rios com comments_template()<\/code>. Tenha em mente que tudo isso deve acontecer dentro do loop. Eu o adicionei ap\u00f3s o final de <\/article><\/code>, logo antes do fechamento do loop.<\/p>\n
...\n        <p><?php _e('Author', 'wptutorial'); ?>: <?php the_author(); ?><\/p>\n    <\/article>\n    <?php \n    if (comments_open()) {\n        comments_template();\n    }\n    endwhile;\n} else {\n    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?><\/p><?php\n...<\/code><\/pre>\n
Se voc\u00ea visitar um \u00fanico post que tenha permitido coment\u00e1rios (adicionei um coment\u00e1rio apenas para mostrar a lista de coment\u00e1rios tamb\u00e9m); voc\u00ea obter\u00e1 este lindo (ahem) modelo de coment\u00e1rios padr\u00e3o:<\/p>\n
\"Tutorial<\/a><\/p>\n
Agora, voc\u00ea pode (e muitas vezes \u00e9 encorajado) criar o seu pr\u00f3prio comments.php<\/code>tema, o que substituir\u00e1 a sa\u00edda padr\u00e3o do WordPress. No entanto, n\u00e3o estou criando um modelo de coment\u00e1rios neste tutorial, pois a sa\u00edda padr\u00e3o do WordPress funciona muito bem, desde que voc\u00ea o estilize corretamente. Se voc\u00ea inspecionar o HTML, h\u00e1 muitos wrappers e classes dispon\u00edveis.<\/p>\n
Documenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n