Tutorial: Posts lado a lado no WordPress

27 de janeiro de 2021

Versão Blogger em breve.

Fiz esse tutorial porque pesquisei muito e não conseguia achar como fazer esse efeito de posts lado a lado no blog com WordPress. Até que, felizmente, um dia qualquer estava assistindo a um curso de desenvolvimento de temas e acabei vendo o instrutor fazendo isso — aí segui os passos e consegui fazer. Resolvi, então, compartilhar esse conhecimento com vocês, caso também tenham a mesma dúvida que eu!

O objetivo deste tutorial é fazer a área de posts ficar assim, ó:

Sendo bem sincera, este post é mais um tutorial para mim mesma do que para os outros. É como se eu estivesse anotando os meus aprendizados em um caderno, mas aproveito para disponibilizar este caderno para o público que visita o meu blog.

Sem mais delongas, vamos começar~

Importante! Este tutorial tem como base o uso de Bootstrap. Se você não conhece o Bootstrap, recomendo pesquisar um pouco sobre o framework antes de tentar este tutorial.

Se você está seguindo este tutorial, assumo que você já sabe o que é o WordPress loop, como configurá-lo para chamar o post para a página etc. É justamente nisso que iremos mexer para conseguir fazer este efeito.

O loop geralmente aparece assim:

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// Post Content here
		//
	} endwhile;
} endif;
?>

Como algumas pessoas bem sabem, não é possível colocar HTML dentro de uma tag PHP sem alguns chunchos, por isso, não é possível formatar o loop em si. Porém, o que ninguém lembra de te contar é que esse loop pode ser dividido em partes, ou seja, é possível abrir um espaço para colocar HTML e formatar o loop da forma que quisermos!

Na realidade, se você não for como eu e consegue compreender códigos só de olhar para eles, isso fica óbvio olhando o próprio codex do WordPress. Porém, se você é como eu que precisa das coisas bem explicadinhas, isso pode não ficar tão óbvio — motivo pelo qual eu me bati bastante pra conseguir aprender isso.

Para entender melhor, vamos observar este código:

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

Este é o início do loop. Ele é como se fosse um “cabeçalho” e, na realidade, o que ele faz é “chamar” o post. Ou seja, ele não equivale ao post em si, ele apenas o chama. Se fecharmos a tag php aí, é possível colocar HTML para formatar o post dentro do loop! Depois, só precisamos fechar com:

<?php
endwhile;
wp_reset_postdata();
endif;
?>

O wp_reset_postdata(); serve para evitar que o HTML dentro do loop fique se repetindo e ferrando todo o resto do código, então ele é importante, viu?

Enfim, agora que você sabe como quebrar a tag PHP do loop para poder formatar o post, está na hora de colocar o código que transformará em colunas!

Para isso, você precisa adicionar um <div class="row"> antes de iniciar o loop e fechar essa divisória depois da última parte do loop, assim:

<div class="row">
<?php
    if( have_posts() ):
        while( have_posts() ):
            the_post();
?>

		//
		// Post Content here
		//

<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>

Agora, onde fica o código do post, você deve adicionar a coluna seguindo os padrões do Bootstrap. No código do meu tema, como eu faço o post num arquivo php separado, fica assim:

<div class="col-md-6 excerpt">
    <?php get_template_part( 'template-parts/content', 'archive' ); ?>
</div>

Por fim, o código completo fica assim:

<div class="row">
<?php
    if( have_posts() ):
        while( have_posts() ):
            the_post();
?>

<div class="col-md-6 excerpt">
    <?php get_template_part( 'template-parts/content', 'archive' ); ?>
</div>

<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>

Com este código, os meus posts aparecem em duas colunas, uma do lado da outra, ao invés de aparecer um post embaixo do outro, como no print.

Não sei se esse tutorial vai servir de ajuda para alguém de fato, mas fica aqui caso algum dia alguém esteja perdido e acabe achando isso aqui, risos.

Se houver qualquer dúvida, não se esqueça de deixar nos comentários que tentarei ajudar!

Cuidem-se e fiquem bem!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *