✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Tutorial de Tema WordPress para Iniciantes – Parte 10: Adicionando Mais Modelos

11

Nesta lição do tutorial do tema WordPress para iniciantes, vamos mergulhar mais nos modelos. Vamos aprender sobre as partes do modelo e implementá-lo para reutilização. E adicionaremos mais modelos padrão do WordPress ao nosso tema.

Mas antes de começarmos a adicionar mais arquivos de modelo, precisamos saber por que devemos nos preocupar com as partes do modelo.

Partes do modelo: blocos de construção mais flexíveis

As partes do modelo funcionam exatamente como get_header()aprendemos get_footer()na parte 2, mas não se limitam a esses arquivos. Você pode usar peças de modelo para qualquer arquivo que desejar!

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, é uma boa ideia separar a saída do pós-loop em um arquivo. Dessa forma, você não precisa repeti-lo em todos os modelos.

Vamos “converter" alguns dos nossos códigos existentes em partes de templates antes de começarmos a fazer mais templates!

Criando uma parte do modelo de loop de postagem

Crie um novo arquivo vazio em nossa pasta de temas; chamado content-loop.php. Você pode nomear as partes do modelo como quiser. Mas você não pode nomeá-los da mesma forma que qualquer um dos modelos definidos do WordPress. No nosso index.php, localize tudo que você tem dentro do loop, recorte e cole dentro do content-loop.php.

Dentro do loop agora vazio em index.php, use a chamada de função get_template_part()e defina seu arquivo de peça de modelo como parâmetro (sem a .phpextensão). Esta é a aparência em ambos os arquivos:

... while (have_posts()): the_post(); get_template_part('content-loop'); endwhile; the_posts_pagination(); ...

Se você atualizar sua primeira página, não verá absolutamente nenhuma diferença.

Excelente! Agora que o nosso index.phpestá bom e limpo, podemos usá-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ê a criar mais modelos para ter mais controle no design do seu tema.

Adicionando um modelo de categoria

Se você consultar a hierarquia de modelos do WordPress, poderá ver que, para categorias de postagem, o WordPress procurará o modelo chamado category.php. Vamos criar esse primeiro.

Na pasta do seu tema, faça uma cópia do index.phparquivo e renomeie a cópia category.php.

E é isso. Você está basicamente pronto…!

No entanto, adicionaremos um detalhe; queremos mostrar um título que nos diga que estamos em uma página de categoria para postagens na categoria chamada X. O WordPress tem uma função para isso que você pode usar em todos os modelos de arquivo (categoria, tags, arquivos de data), the_archive_title. Vamos adicioná-lo antes do loop, dentro de uma <h1>tag.

Se você visualizar uma página de categoria de postagem, deverá ver algo assim, com o título do arquivo “Categoria: “. PS: Se você quiser alterar a saída do título do arquivo (por exemplo, não mostrar “Category: “), você pode adicionar um filtro para get_the_archive_title. A página de documentação mostra um ótimo exemplo de como fazer exatamente isso.

Tutorial de Tema WordPress para Iniciantes – Parte 10: Adicionando Mais Modelos

Bem, isso foi fácil! Vamos lidar com o modelo de resultados de pesquisa a seguir.

Adicionando um modelo de resultados de pesquisa

O procedimento é exatamente o mesmo que fizemos para modelos de categoria. Desta vez, faça uma cópia de category.phpe renomeie a cópia para search.php.

Tudo o que precisamos corrigir é o título. A função de título de arquivo que usamos no modelo de categoria infelizmente não funciona muito bem para o modelo de resultados de pesquisa. Na verdade, não existe uma função simples no WordPress que gere um título para nós.

Mas podemos facilmente fazer uma nós mesmos e, ao mesmo tempo, demonstrarei como gerar uma variável dinâmica e ainda manter o texto traduzível.

PHP tem duas funções úteis, printf()e sprintf(). Eles fazem o mesmo, exceto que printfo gera (como echo) e sprintfo retorna, para que possamos armazená-lo em uma variável. Depois de colocarmos o texto como primeiros parâmetros, podemos adicionar variáveis ​​dinâmicas como argumentos, que são então injetados no texto. Dentro deles, podemos usar as funções de texto traduzível __()e _e(). Eu recomendo que você leia um pouco sobre como funciona o printf ou o sprintf, pois não entrarei em mais detalhes aqui.

O WordPress oferece uma função simples para obter a string que foi pesquisada; get_search_query(). Com isso dito, vamos substituir a função de título do arquivo por isso;

O que o código acima faz é de dentro para fora; definindo um texto traduzível “Search: %s” que é colocado dentro de um printfque ecoa a string e substitui a constante da string (%s) pelo segundo argumento; que é get_search_query().

Como resultado, obtemos um título como este ao pesquisar por “er”:

Tutorial de Tema WordPress para Iniciantes – Parte 10: Adicionando Mais Modelos

Agradável! Mais um molde pronto. Quanto à última parte desta lição, entraremos em nosso modelo de postagem única e adicionaremos algo muito comum no WordPress; o modelo de comentários.

Adicionando um modelo de comentários a uma única postagem

Em nosso single.php, após o artigo do post, queremos mostrar os comentários. Os comentários devem gerar uma lista de comentários anteriores e um formulário para adicionar um novo comentário.

O modelo de comentários é um arquivo de modelo que você pode adicionar ao seu tema, mas o WordPress na verdade tem sua própria saída de modelo de comentários padrão. Se você não tiver comments.phpem seu tema, solicitar o modelo de comentários retornará a saída padrão do WordPress para ele. É o que faremos neste tutorial.

Só queremos chamar o modelo de comentários se a postagem tiver comentários ativados (é uma configuração para cada postagem e uma configuração global do site). Então adicionamos uma verificação if para verificar se os comentários são permitidos com comments_open()e se retornar true, solicitamos o template de comentários com comments_template(). Tenha em mente que tudo isso deve acontecer dentro do loop. Eu o adicionei após o final de </article>, logo antes do fechamento do loop.

Se você visitar um único post que tenha permitido comentários (adicionei um comentário apenas para mostrar a lista de comentários também); você obterá este lindo (ahem) modelo de comentários padrão:

Tutorial de Tema WordPress para Iniciantes – Parte 10: Adicionando Mais Modelos

Agora, você pode (e muitas vezes é encorajado) criar o seu próprio comments.phptema, o que substituirá a saída padrão do WordPress. No entanto, não estou criando um modelo de comentários neste tutorial, pois a saída padrão do WordPress funciona muito bem, desde que você o estilize corretamente. Se você inspecionar o HTML, há muitos wrappers e classes disponíveis.

Documentação sobre os métodos usados

Fonte de gravação: awhitepixel.com

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação