O WordPress Loop explicado: o que é e como funciona

O loop é uma parte central do WordPress. Sem ele, você não veria conteúdo em nenhum site WordPress. É responsável por garantir que os artigos apareçam na página do blog e nos arquivos, bem como conteúdo estático em páginas únicas.

Se você for um designer de temas, não conseguirá aprender a usá-lo. No entanto, como um usuário casual do WordPress, você pode nem estar ciente de que ele existe.

Para aliviar isso, neste post, explicaremos o loop do WordPress em detalhes. Veremos o que é e como funciona e onde encontrá-lo no WordPress. Você também aprenderá a criar o seu próprio e verá alguns exemplos do loop do WordPress para solidificar sua compreensão.

O que é o Loop do WordPress (e onde você o encontra)?

Se você explicar brevemente o que é o loop do WordPress, é simplesmente a marcação que busca e gera conteúdo nas páginas de um site WordPress. Seja uma página estática, postagem, página de blog ou arquivo – em qualquer lugar que o WordPress extraia conteúdo do banco de dados e o exiba em uma página, o loop está envolvido.

No entanto, por que é chamado de loop em primeiro lugar?

Porque ele será executado repetidamente. Além disso, como você verá abaixo, ele consiste literalmente em um loop PHP.

Com que frequência o loop do WordPress é executado?

Até que não haja mais nada para exibir. Mesmo em páginas estáticas, ele percorre o conteúdo disponível. No entanto, neste caso, ele pára após uma passagem.

Como é o Loop do WordPress?

Para deixar mais claro do que estamos falando, vamos ver um exemplo e repassá-lo passo a passo. Aqui está um exemplo de como é um loop simples do WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Se você já conhece PHP ou é um desenvolvedor WordPress, não deve ter nenhum problema em entendê-lo. No entanto, para todos os outros, vamos examinar as peças uma a uma.

• if ( have_posts() ) : — Esta é uma instrução if que está usando a função have_posts(). Se as instruções são comuns na programação, elas simplesmente dizem “se a seguinte condição se aplicar, continue”. Nesse caso, a condição é have_posts() , que é simplesmente uma verificação para verificar se existem postagens que possam ser exibidas.
• while ( have_posts() ) : — Esta linha é um while -loop e marca o início do loop do WordPress. Ele executará o código que ele contém enquanto sua condição for verdadeira. Novamente, a condição é se o WordPress tem alguma postagem na loja. A frequência com que retornará true é determinada pelo número de postagens definidas nas configurações do WordPress na interface de administração.
• the_post(); — Este é o código que o loop executa. É uma função do WordPress que chama todos os dados disponíveis para a próxima postagem e os salva para prepará-los para exibição. Para isso, temos muitas tags de modelo sobre as quais falaremos abaixo.
• // Display content here — Aqui é onde colocamos a marcação que determina qual parte do conteúdo exibir e de que maneira. Geralmente é uma mistura de PHP e HTML. Não estamos mostrando aqui porque é mais complexo e vamos falar sobre isso mais tarde.
• endwhile; — O pedaço de código que fecha o while -loop depois de ter feito o que precisamos que ele faça.
• endif; — O mesmo que acima, mas para a instrução if .

Então, basicamente a estrutura é a seguinte: verifique se existem posts, então puxe os dados necessários do banco de dados e exiba-os de uma forma pré-determinada, repita isso enquanto houver posts válidos para exibir.

Sintaxe alternativa

Uma coisa rápida, às vezes você também verá o loop escrito assim:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Isso é exatamente igual ao exemplo acima, apenas em uma sintaxe PHP alternativa. Qual deles você usa realmente depende de você. Por uma questão de consistência, continuaremos com a primeira variação.

Onde encontrar o loop do WordPress?

O fato de o loop estar sempre funcionando sempre que o conteúdo aparece em uma página já responde onde encontrar o loop do WordPress. As respostas estão em todos os arquivos de modelo do seu tema que exibem conteúdo.

Como alternativa, dependendo da arquitetura do seu tema, ele também pode estar em uma parte do modelo. Esses são arquivos de modelo que contêm partes de código usadas com frequência (como o loop). Eles podem ser inseridos em outros arquivos em vez de reutilizar o mesmo trecho de código todas as vezes.

Por exemplo, se você abrir o arquivo page.php do tema Twenty Twenty-One, poderá ver que, aqui, o loop está dividido em partes. Enquanto ele inicia dentro do próprio arquivo, a seção que determina como gerar os dados reside em uma parte do modelo chamada content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

A hierarquia de modelos do WordPress determina qual arquivo o sistema usa para exibir que tipo de página e cada arquivo precisa conter um loop ou uma referência de onde você pode encontrá-lo.

Isso também significa que o loop pode parecer diferente em arquivos individuais, ou seja, em páginas diferentes. Por exemplo, em um arquivo você pode querer exibir apenas trechos de posts, enquanto na página principal do blog, você pode querer mostrar posts inteiros (até o link “leia mais”). Para isso, você precisa de diferentes tipos de marcação, e é por isso que o loop não teria a mesma aparência dentro home.php e archive.php .

Como criar um loop

Para criar um loop, você pode basicamente começar com o código simples que dissecamos acima. Esse é realmente o loop padrão. Aqui está novamente:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

A parte complicada é o que deixamos de fora: a parte que determina a exibição do conteúdo. Para isso, como mencionado, você costuma usar uma mistura de HTML e PHP. Por exemplo, aqui está como você diria ao WordPress para cuspir o post envolto em uma tag <article> com uma classe e id personalizados, o título como um cabeçalho h1 , mais a imagem e o conteúdo em destaque.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Uma coisa que se destaca acima é que existem muitas tags escritas com sublinhados. Essas são as tags de modelo do WordPress, que oferecem atalhos para chamar partes comuns do conteúdo. Aqui, usamos the_title() para exibir o título do post, the_post_thumbnail() para a imagem em destaque e the_content() para o conteúdo principal. Há muito mais, como the_excerpt() ou the_category() . Você pode encontrar uma lista de opções aqui.

Outra coisa importante para o loop do WordPress são as tags condicionais. Você os vê muito usados ​​na marcação relacionada a loops para exibir algo apenas sob certas condições. Por exemplo, é muito comum envolver the_post_thumbnail() em uma instrução condicional para evitar que o WordPress tente colocá-lo na página quando não existe nenhuma imagem em destaque.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Temos mais exemplos abaixo. Para saber mais sobre tags condicionais, consulte o WordPress Codex.

Exemplos do Loop do WordPress

Como parte final deste tutorial, veremos alguns exemplos de como usar o loop do WordPress.

O tema vinte e um

Ao olhar para o tema Twenty Twenty-One, a primeira coisa que se destaca é o uso pesado de peças de modelo. Todos os arquivos de modelo padrão como page.php , single.php e até index.php iniciam o loop dentro do arquivo, mas então usam get_template_part para descarregar a exibição de conteúdo para outros arquivos. Nesse caso, são content-page.php , content-single.php e content.php respectivamente. Aqui está uma versão abreviada de single.php como exemplo:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Isso também é visível em outros arquivos. Por exemplo, o cabeçalho e o rodapé também têm suas próprias partes de modelo. Você pode ver referências àqueles dentro do loop em outros lugares. Por exemplo, se você olhar para content-single.php , poderá ver uma chamada para a parte do template author-bio.php no final.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Além disso, é relativamente justo padrão:

1. Abra um elemento HTML <article> com um id e uma classe personalizados
2. Crie o elemento de cabeçalho do artigo que gera o título envolvido em um cabeçalho h1 e exibe a imagem em destaque com uma função personalizada para Twenty Twenty-One
3. Siga isso com um elemento entry-content que contém a tag de modelo the_content() para gerar conteúdo de postagem única
4. Incluir marcação para paginação e o rodapé de entrada com outra função Twenty Twenty-One para exibir informações meta do post
5. Por fim, há a já mencionada chamada à biografia do autor em sua própria parte do modelo

O tema padrão vinte e dez WordPress

Se você voltar ao primeiro tema padrão do WordPress, Twenty Ten, e usar o repositório do subversion para ver os arquivos da versão 1.0, poderá ver como o tratamento dos arquivos de loop e modelo evoluiu ao longo do tempo. Naquela época, muitos dos arquivos de modelo continham seus próprios loops completos do WordPress, em vez de terceirizar para partes de modelo reutilizáveis. Você pode ver isso claramente no page.php do tema.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

O mesmo também é visível em onecolumn-page.php , que é um arquivo que controla um modelo de página personalizado que o tema oferece. O que também é digno de nota é que ele está usando a chamada mais antiga para o loop que foi escrita em uma linha na época.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

Em temas modernos, é mais comum vê-lo espalhado por várias linhas, como visto anteriormente, para aumentar a legibilidade do código.

O tema Twenty Ten também tem um arquivo loop.php autônomo que é muito longo para incluir aqui sem exceder meu limite de palavras. Ele é dividido em três partes que controlam a exibição de vários tipos de posts (galeria de imagens, posts da categoria Asides , todos os outros posts). Cada um deles é dividido em instruções if e else para explicar casos diferentes, como páginas de arquivo e pesquisa.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

A coisa toda contém uma lógica bastante complicada e é por isso que sai bastante longo e complicado. Estou feliz que temos outras maneiras de lidar com isso hoje e recomendo que você dê uma olhada para ver um exemplo de loop do WordPress que você não deseja emular.

A propósito, se você acha que estou sendo muito duro com os desenvolvedores daquela época, fique tranquilo, eles concordam com minha avaliação. Basta olhar para o comentário do desenvolvedor onde loop.php fecha o loop.

 <?php endwhile; // End the loop. Whew. ?>

O bloco de loop de consulta do WordPress

Você pode não estar ciente disso porque é um recurso relativamente novo do Gutenberg, mas o editor de blocos (e, por extensão, a edição completa do site) agora também possui um bloco que contém um loop do WordPress. É chamado de Bloco de Loop de Consulta e você pode adicioná-lo ao seu site como qualquer outro bloco. A maneira mais fácil é adicionar uma barra e digitar seu nome como /queryloop . Aperte enter e ele aparecerá na página.

O bloco permite criar um loop PHP sem ter que escrever código. Ele exibirá automaticamente as postagens mais recentes em seu site. Além disso, possui várias opções de personalização. Em primeiro lugar, o bloco vem com vários layouts predefinidos. Você pode percorrê-los através das setas ou clicar na opção Grade para vê-los todos de uma vez.

Escolha o que você gosta ou clique em Escolher se você chegou à sua opção favorita para finalizar a escolha. É importante observar que os layouts consistem em padrões de blocos, portanto, grupos pré-arranjados de blocos únicos. Isso também significa que você pode organizá-los de forma diferente conforme necessário, eles ainda são blocos normais. Use as setas ou clique e segure a opção Arrastar para movê-los para onde quiser.

Além disso, cada bloco (e geralmente cada grupo de blocos) também vem com suas opções usuais na tela principal do editor e na barra lateral. Aqui, você pode alterar suas cores, tamanhos de fonte, formatos e muito mais.

Quando estiver satisfeito, se você publicar ou visualizar a página, verá seu loop de consulta personalizado do WordPress aparecer nela. Portanto, mesmo que você não seja um desenvolvedor WordPress e não entenda PHP, ainda pode aproveitar o que o loop tem a oferecer.

O loop do WordPress explicado em poucas palavras

O loop é algo com o qual qualquer profissional do WordPress deve estar familiarizado. No entanto, mesmo que você seja um usuário mais casual, ainda não é uma má ideia entender como funciona. Pode facilitar a solução de problemas ou criar modelos de página personalizados, se desejar.

Neste post, analisamos o que é o loop, onde ele reside e o detalhamos em detalhes. Também vimos como você pode criar seu próprio loop e exemplos de temas padrão e do novo bloco de consulta. Até agora, você sabe tudo o que precisa para criar e personalizar o loop do WordPress.

Qual é o seu uso favorito do loop do WordPress? Por favor, compartilhe seus pensamentos nos comentários abaixo!

Imagens: Jonny Gios/Unsplash, Tine Ivanic/Unsplash