O WordPress Loop é uma parte essencial de como o conteúdo do seu site WordPress é exibido. Se você deseja personalizar algumas partes do seu site (ou começar a explorar o desenvolvimento no WordPress), é fundamental entender o WordPress Loop.
Não importa se você nunca ouviu falar do WordPress Loop ou se já tem alguma familiaridade básica, este artigo está aqui para que você saiba tudo o que precisa saber sobre o WordPress Loop.
Explicaremos o que é o Loop e por que aprender a trabalhar com ele pode ser útil. Em seguida, mostraremos passo a passo como utilizá-lo em modelos PHP (para temas clássicos) e com o bloco Query Loop em temas baseados em blocos mais recentes.
Vamos começar, do início…
O que é o WordPress Loop?
O WordPress Loop é o mecanismo que o WordPress usa para exibir conteúdo no seu site. Tradicionalmente, ele é composto por código PHP que você pode personalizar usando tags de template, embora os temas baseados em blocos mais recentes do WordPress utilizem o bloco Query Loop em vez de PHP.
Em termos mais técnicos, o Loop consulta o banco de dados do seu site para recuperar os dados de cada artigo e, em seguida, exibe essas informações de acordo com um template. Para controlar esse template, você pode usar uma variedade de tags de template ou blocos, dependendo de estar utilizando PHP ou o bloco Query Loop.
Por exemplo, suponha que você tenha uma página que lista seus artigos mais recentes, como a página principal do seu blog:
- Primeiro, o Loop verifica se há artigos.
- Se houver artigos, ele exibirá o primeiro artigo de acordo com seu template.
- Depois, ele verifica se existe outro artigo. Se houver, ele “repetirá” o template novamente e exibirá o segundo artigo conforme o mesmo template.
- Ele continuará “repetindo” pelos seus artigos até que não haja mais (ou até atingir algum outro limite, como regras de paginação).
Aqui está um exemplo de frontend de como o Loop se parece no blog da Kinsta – cada caixa destacada é outra iteração do “loop”. Você pode ver que todas as seis caixas usam o mesmo template.
Quando o WordPress usa o Loop para exibir conteúdo?
O WordPress usa o Loop para exibir conteúdo em qualquer página que liste várias partes de conteúdo (artigos, páginas, tipos de artigos personalizados, etc.).
Aqui estão algumas das principais situações em que o WordPress usa o Loop, embora essa não seja uma lista completa:
- Página inicial do site que mostra os artigos recentes
- Página principal de listagem do blog
- Páginas de listagem de categorias
- Páginas de listagem de tags
- Páginas de resultados de pesquisa
- Páginas de listagem de tipos de artigo personalizados
Tecnicamente, o WordPress também pode usar o Loop para exibir uma parte individual do conteúdo. Nessas situações, o “loop” terminaria depois que você consultasse o primeiro item.
No entanto, quando a maioria das pessoas pensa no WordPress Loop, está pensando nele “repetindo” vários itens para exibi-los em algum tipo de lista.
Para que você pode usar o WordPress Loop?
Aprender a editar e manipular o WordPress Loop pode ajudar você a usar o WordPress para criar sites dinâmicos e mais fáceis de usar.
Aqui estão três das principais maneiras de usar o WordPress Loop para melhorar seu site:
Controlar como exibir o conteúdo básico de artigos e metadados
O motivo mais comum para personalizar o WordPress Loop é controlar o layout básico do conteúdo do site.
Por exemplo, suponha que você queira controlar o layout da página de listagem do blog. Manipulando o WordPress Loop, você pode controlar o layout de elementos importantes, como o título do artigo, o conteúdo, o autor, os metadados (por exemplo, data de publicação) e assim por diante.
Usando condicionais, você também pode criar layouts diferentes para diferentes tipos de conteúdo. Por exemplo, você pode usar um layout para listar artigos da categoria “Notícias” e outro para listar artigos da categoria “Entrevistas”.
Isso permite otimizar o design para diferentes tipos de conteúdo no seu site e criar uma ótima experiência para seus visitantes.
Inserir dados de campos personalizados para criar sites mais dinâmicos
Entender como usar o WordPress Loop também pode ajudar você a usar o WordPress para criar tipos mais dinâmicos de sites de conteúdo.
Por exemplo, digamos que você queira criar um site de listagem de imóveis. Como parte disso, você deseja ter uma página que liste informações sobre casas que estão disponíveis para venda por meio de um tipo de artigo personalizado “Casa” que você criou.
Se você usar apenas o design padrão de listagem de artigos que vem com o tema, ele exibirá apenas informações básicas, como o título e o conteúdo, da mesma forma que exibe os artigos normais do blog.
Ao editar o WordPress Loop para o tipo de artigo “Casa” e adicionar as tags de template relevantes, você poderá incluir informações dos campos personalizados que estiver usando, como o número de quartos e banheiros em cada casa, a metragem quadrada e assim por diante.
Inserir conteúdo que não seja de artigo em suas listas de artigos (por exemplo, anúncios)
Aprender a usar o WordPress Loop também pode ajudar você a inserir conteúdo não dinâmico nas listas de conteúdo do seu site. Esse é o conteúdo que seu site não está extraindo do banco de dados do WordPress.
Por exemplo, digamos que você queira inserir um banner de anúncio entre cada artigo da lista (ou algum outro tipo de conteúdo estático). Ao editar o Loop, você pode injetar facilmente seus anúncios em qualquer ponto do layout.
Duas opções para trabalhar com o WordPress Loop
Com o desenvolvimento moderno de temas do WordPress, a maneira como você interage com o WordPress Loop dependerá do tipo de tema que estiver usando.
No passado, todos os temas do WordPress eram baseados em modelos PHP, portanto, você precisaria trabalhar com o Loop usando PHP nesses arquivos de template de tema. Atualmente, esses tipos de temas são chamados de temas clássicos do WordPress.
Os temas mais populares de WordPress ainda usam essa abordagem clássica, o que significa que você usará PHP para trabalhar com o WordPress Loop. Alguns exemplos de temas clássicos incluem Astra, GeneratePress, Kadence, Neve, OceanWP e assim por diante.
No entanto, os novos temas de bloco de WordPress criados no Editor de Sites não usam mais arquivos de modelo PHP como os temas clássicos, portanto, você não pode usar PHP para personalizar o Loop se estiver usando um tema de bloco. Em vez disso, esses novos temas de bloco usam um bloco especial “Query Loop” para personalizar o WordPress Loop.
Você pode conferir nossa lista dos melhores temas de bloco para ver alguns exemplos de temas populares que usam essa abordagem.
A seguir, mostraremos a você como usar as duas abordagens para trabalhar com o WordPress Loop:
- Se estiver usando um tema clássico, você usará PHP para interagir com o Loop.
- Se estiver usando um tema de bloco, você usará o método de bloco Query Loop para interagir com o Loop.
Se não tiver certeza do tipo de tema que está usando, você pode examinar as opções no menu Appearance no painel do WordPress:
- Se você vir outras opções como Customize, Widgets e Theme File Editor, então você está usando um tema clássico.
- Se você vir uma opção Editor sem as outras opções, isso geralmente significa que você está usando um tema de bloco.
Como usar o WordPress Loop com temas clássicos (código)
Se estiver usando um tema clássico do WordPress, você trabalhará com o WordPress Loop nos arquivos de modelo PHP do seu tema.
Aqui está um exemplo de uma implementação muito básica do WordPress Loop:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Para ajudar você a entender o que esse código está fazendo, vamos dividi-lo em três seções:
- Como iniciar o WordPress Loop
- Como controlar o conteúdo exibido do WordPress Loop usando tags de template
- Como encerrar o WordPress Loop
Em seguida, abordaremos o tópico um pouco mais avançado do uso de instruções condicionais para ajustar o loop com base em diferentes situações.
Como iniciar o WordPress Loop
Para iniciar o WordPress Loop, você terá quatro elementos:
<?php– Isso informa ao servidor da web que você começará a usar PHP.if ( have_posts() )– Isso verifica se o banco de dados do site possui artigos que correspondam à consulta. Se houver artigos, o código a seguir será executado. Caso contrário, você pode usar uma instrução else para adicionar um texto alternativo, como será mostrado posteriormente.while ( have_posts() )– Isso diz ao servidor para continuar repetindo enquanto houver artigos para exibir. O limite geralmente é definido nas configurações de Configurações → Leitura. Por exemplo, se você configurar o site para exibir até 10 artigos por página, o servidor continuará repetindo até 10 vezes (se você tiver pelo menos 10 artigos publicados).the_post();– Isso instrui o servidor a recuperar os dados de cada artigo do banco de dados do site. Você pode controlar a exibição desses dados usando tags de template, como será abordado na próxima seção.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();Como controlar o conteúdo exibido do WordPress Loop usando tags de template
Depois de abrir o WordPress Loop, você pode usar tags de template para controlar quais informações deseja incluir para cada artigo, juntamente com o layout geral* desse conteúdo.
As tags de template que você usar dentro do Loop serão repetidas para cada artigo exibido.
Aqui estão algumas das tags de template mais comuns que você pode querer usar:
the_title()the_content()the_excerpt()the_post_thumbnail()the_author()next_post_link()the_ID()the_meta()the_shortlink()the_tags()the_time()previous_post_link()the_category()
Se você estiver criando sites WordPress mais personalizados, poderá incluir dados de campos personalizados no WordPress Loop. A maneira mais fácil de fazer isso seria por meio de um plugin como Advanced Custom Fields (ACF), Meta Box ou Pods, todos os quais incluem sua própria funcionalidade para tags de template que podem ser usadas no WordPress Loop.
Por exemplo, vejamos a sintaxe de um loop simples que exibe apenas o título, a miniatura da imagem destacada e o resumo de cada artigo.
Aqui está o que você pode ver:
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();Como encerrar o WordPress Loop
Para fechar o WordPress Loop, você precisa encerrar o loop while, a instrução if e o PHP.
Para lidar com situações em que o WordPress não consegue retornar nenhum artigo, você pode adicionar uma instrução else antes de fechar a instrução if.
Aqui está como ficaria para encerrar o Loop no exemplo acima, com a adição da instrução else para cobrir situações em que nenhum artigo corresponde à consulta:
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// once we're finished with the template tags, we can now close the loop
endwhile;
else:
// this tells your site what to do if no posts match the query
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Usando condicionais para controlar o comportamento no WordPress Loop
Depois de entender a estrutura básica do Loop, você pode começar a usá-lo de maneiras mais avançadas.
Um ótimo ponto de partida é o uso de declarações condicionais. Essas declarações permitem ajustar facilmente o comportamento do Loop para diferentes tipos de conteúdo. Por exemplo, como no exemplo anterior, você pode usar um layout para listar artigos na categoria “Entrevistas” e outro para artigos na categoria “Notícias”.
Aqui estão algumas das tags condicionais que você pode usar:
is_home()is_admin()is_single()is_page()is_page_template()is_category()ouin_category()is_tag()is_author()is_search()is_404()has_excerpt()
Se você clicar nos links acima, poderá ver exemplos de código de como modificar o WordPress Loop para diferentes tipos de condicionais.
Por exemplo, veja como pode ser aplicar estilos diferentes aos artigos na categoria com o ID “3” usando in_category e aplicando um <div> diferente a esses artigos:
<?php
// Start the Loop.
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * See if the current post is in category 3.
* If it is, the div is given the CSS class "post-category-three".
* Otherwise, the div is given the CSS class "post".
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// Display the post's title.
the_title( '<h2>', ';</h2>' );
// Display a link to other posts by this posts author.
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// Display the post's content in a div.
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// Display a comma separated list of the post's categories.
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// closes the first div box with the class of "post" or "post-cat-three"
?>
</div>
<?php
// Stop the Loop, but allow for a "if not posts" situation
endwhile;
else :
/*
* The very first "if" tested to see if there were any posts to
* display. This "else" part tells what do if there weren't any.
*/
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
// Completely stop the Loop.
endif;
?>Como usar o WordPress Loop em temas de blocos (Editor de Sites)
Como mencionado anteriormente, os temas de blocos do WordPress utilizam o Editor de Sites para controlar os templates do tema, em vez de arquivos do modelo PHP.
Por esse motivo, não é possível usar PHP para personalizar o WordPress Loop se você estiver utilizando um tema de blocos. Em vez disso, você usará o bloco Query Loop.
Os princípios básicos permanecem os mesmos, no entanto.
Essencialmente, você usará o bloco Query Loop para abrir o loop. Dentro do bloco Query Loop, há um contêiner chamado Post Template e outros contêineres para paginação e para exibir mensagens de “nenhum resultado”.
Então, em vez de usar tags de template como no PHP, você adicionará blocos de tema do WordPress dentro do contêiner Post Template para controlar o layout de cada item do loop.
Como adicionar o bloco Query Loop
Vá para o Editor de Sites (Appearance → Editor) e crie ou edite o template relevante. Você também pode adicionar o Loop a um conteúdo individual, como uma página onde deseja listar artigos.
De qualquer forma, você pode começar adicionando o bloco Query Loop. Em seguida, você pode escolher entre usar um dos padrões de Loop existentes no seu tema clicando em Choose ou começar com uma tela em branco clicando em Start blank.
Para este exemplo, escolheremos Start blank.
Você pode então escolher entre algumas variações iniciais diferentes, sendo que a opção mais simples é exibir apenas o título e o conteúdo de cada item.
Após escolher a variação inicial, você pode usar as configurações na barra lateral do bloco Query Loop para controlar qual conteúdo será incluído no Loop (“query”).
Por padrão, o Loop listará artigos regulares, mas você pode alterar o tipo de artigo para listar outros tipos de conteúdo. Além disso, você pode alterar a ordem e usar filtros para consultar apenas partes específicas do conteúdo, como conteúdo de uma determinada categoria, de um determinado autor e assim por diante.
Como personalizar o template do Loop
Agora, você pode usar os blocos na seção Theme para personalizar ainda mais o Post Template dentro do bloco Query Loop. Esses blocos têm a mesma função básica que as tags de template no código PHP.
Por exemplo, se você quiser exibir o autor de cada parte do conteúdo, poderá adicionar o bloco Author Name (Nome do autor) onde deseja que o nome do autor apareça.
Você também encontrará outros blocos para itens relevantes, como Imagem em destaque, Data, Categorias, Tags, etc.
Se você observar o esboço, verá que todos esses blocos estão dentro do grupo Post Template.
Também há outros grupos para controlar a paginação e situações em que a consulta não retorna resultados.
Dicas para trabalhar com o WordPress Loop
Como o Loop é parte integrante do WordPress, qualquer erro ou engano pode causar problemas em seu site. Isso é especialmente verdadeiro se você estiver trabalhando com modelos PHP, pois erros de sintaxe podem acionar a mensagem “There has been a critical error on your website”.
Para evitar problemas, aqui estão algumas dicas…
Teste em um ambiente de desenvolvimento local
Se esta é a primeira vez que você trabalha com o WordPress Loop, é recomendável experimentar e testar diferentes conceitos para entender melhor como ele funciona.
Para fazer isso com segurança, você pode usar um ambiente de desenvolvimento local do WordPress, que fornece um espaço seguro no seu computador.
Para criar sites WordPress locais de forma fácil para testes e aprendizado, você pode usar a ferramenta gratuita DevKinsta.
Com suporte para Windows e Mac, o DevKinsta permite criar quantos sites de desenvolvimento local você precisar.
Trabalhe em um ambiente de teste para sites ativos
Se você estiver trabalhando no WordPress Loop para um site ativo do WordPress, é altamente recomendável fazer tudo em um site de teste antes de aplicar as alterações ao seu site ativo do WordPress.
Se você hospeda seu site WordPress na Kinsta, pode usar o ambiente teste integrado da Kinsta para fazer todas as alterações em um espaço seguro.
Depois de verificar se tudo está funcionando, você pode facilmente enviar suas alterações de teste para a versão de produção do seu site.
Alternativas de plugins para trabalhar diretamente com o WordPress Loop
Se trabalhar diretamente com o WordPress Loop parecer complicado, você pode contar com vários plugins populares que oferecem maneiras alternativas de criar loops de conteúdo, sem a necessidade de usar PHP ou o bloco Query Loop.
Aqui estão algumas alternativas de plugins para o WordPress Loop que você pode considerar, embora esta não seja uma lista completa:
Elementor Pro
O Elementor é um popular plugin de criação de páginas com interface visual de arrastar e soltar. Com o Elementor Pro, você tem acesso a funcionalidades completas de construção de temas, permitindo criar templates do tema usando o Elementor. Em 2022, o Elementor adicionou o recurso Loop Builder ao Elementor Pro, que permite controlar e personalizar conteúdo “em loop” usando a interface visual do Elementor.
Escrevemos um guia completo sobre como usar o Elementor, além de outros conteúdos sobre Elementor no blog da Kinsta.
Bricks
O Bricks é outro construtor de sites visuais popular para WordPress. Como parte de suas muitas ferramentas de design, ele inclui seu próprio construtor Query Loop que usa uma abordagem de código simplificada, juntamente com muitas opções adicionais na interface gráfica.
Também temos um guia sobre como criar sites WordPress com o Bricks.
WP Show Posts
O WP Show Posts não oferece tanta flexibilidade quanto os dois plugins anteriores. No entanto, se você está procurando uma maneira fácil de listar artigos do WordPress em vários formatos, pode ser a ferramenta mais simples para essa tarefa.
Ele é gratuito e foi criado pelo mesmo desenvolvedor do popular tema GeneratePress. Embora o desenvolvedor não esteja mais adicionando novos recursos ao plugin, ele continua mantendo sua funcionalidade existente.
Resumo
Para aprimorar suas habilidades de desenvolvimento do WordPress, você deve entender o WordPress Loop. O Loop é essencial para a forma como o WordPress exibe o conteúdo; aprender a usá-lo dará a você mais controle sobre como exibir o conteúdo em seu site.
Dito isso, os temas de bloco mais recentes de WordPress não dependem mais de modelos PHP como os temas clássicos, portanto, talvez você não precise usar PHP para trabalhar com o Loop. Em vez disso, se estiver adotando o movimento do tema de bloco, você usará o bloco Query Loop para obter efeitos semelhantes.
De qualquer forma, aprender a usar o WordPress Loop de forma mais eficaz trará benefícios a longo prazo.
Como o WordPress Loop é uma parte fundamental do WordPress, qualquer problema no Loop pode prejudicar seu site. Para evitar problemas, recomendamos aprender em um ambiente de desenvolvimento local, como o DevKinsta, ou usar o ambiente de teste que a hospedagem de WordPress da Kinsta oferece para trabalhar em um ambiente seguro.
Deixe um comentário