WordPress

Post em Colunas no WordPress

Hey terráqueos, nesse tutorial vou mostrar pra vocês como inserir post em Colunas no WordPress, em um dos meu últimos projetos como freelancer, precisei dividir os posts em colunas e quebrei um pouco a cabeça para fazer funcionar.

Veja aqui o exemplo

Vamos lá, a maneira que eu vou mostrar aqui é usando 3 loops e dividindo os posts um em cada coluna, ficando mais ou menos assim:
Post 1 | Post 2 | Post 3
Post 4 | Post 5

Implementando Post em colunas no WordPress

1ª Passo – Criando a Página

Vamos criar um template próprio de página para isso, então você deve fazer o download do arquivo page.php que fica em /wp-content/themes/nome-do-seu-tema/, então duplique o arquivo, renomeando (no meu exemplo ficou page-post-em-colunas.php), o inicio da página deve ficar assim:

<?php
/**
 * Template da Página Posts em Colunas no WordPress
 * Template Name: Post em colunas
 */
get_header();?>

2ª Passo – Criando os Loops

Vamos criar o primeiro loop para implementar post em colunas no WordPress, então o loop básico ficaria mais ou menos assim:

<div class="coluna">		
 <?php $i=1; // Inicia o contador?>
 <?php query_posts('showposts=50');?>
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <?php if($i==4) $i=1;?>
 <?php if ($i==1): // Verifica se o contador esta no primeiro post ?>   
<div class="titulo">
 <a href="<?php the_permalink();?>" title="<?php the_title();?>">
  <?php the_title(); //título do Post ?>
 </a>  
</div>
 <div class="conteudo"><?php the_content(); // Conteúdo do Post ?></div>
 <?php endif; ?>
 <?php $i++; // Incrementa 1 ao contador ?>
 <?php endwhile; endif; ?>
</div>

Como já disse anteriormente, no exemplo vai ser exibido 3 colunas de posts, então basta replicar mais duas vezes o código acima, alterando apenas a linha 7 em cada loop, para o segundo loop a linha 7 deve ficar assim:

<?php <?php if ($i==2): // Verifica se o contador esta no segundo post ?>

Seguindo a mesma lógica pro terceiro loop, a linha 7 fica assim:

<?php <?php if ($i==2): // Verifica se o contador esta no terceiro post ?>

Pra deixar post em colunas no WordPress, no exemplo eu usei o seguinte CSS:

.coluna {
	width:30%;
	float:left;	
	margin-right:5%;
}
.colunaFinal {
	width:30%;
	float:left;	
	margin-right:0;
}
.titulo {
	background:#CCC;
	text-align:center;
	font-weight:bold;
	height:40px;
}
.conteudo {
	margin-bottom:15px;
	text-align:justify;	
}

Não sei se vocês repararam, mas existe uma classe no CSS chamada .colunaFinal que eu criei pra que a ultima coluna não tenha o margin-right, então no terceiro loop, você também deve alterar o nome da classe de .coluna para .colunaFinal, ficando assim:

<div class="colunaFinal">

Então pra adicionar post em colunas no WordPress, nosso código completo, ficou da seguinte maneira:

<?php
/**
 * Template da Página Posts em Colunas no WordPress
 *
 * @pacote Exemplos WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 * Template Name: Post em colunas
 */
get_header(); ?>
<style type="text/css">
.coluna {
	width:30%;
	float:left;	
	margin-right:5%;
}
.colunaFinal {
	width:30%;
	float:left;	
	margin-right:0;
}
.titulo {
	background:#CCC;
	text-align:center;
	font-weight:bold;
	height:40px;
}
.conteudo {
	margin-bottom:15px;
	text-align:justify;	
}
</style>
<div class="coluna">		
	<?php $i=1; // Inicia o contador?>
	<?php query_posts('showposts=50');?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php if($i==4) $i=1;?>
	<?php if ($i==1): // Verifica se o contador esta no primeiro post ?>   
	<div class="titulo">
      <a href="<?php the_permalink();?>" title="<?php the_title();?>">
	    <?php the_title(); //título do Post ?>
      </a>  
    </div>
	<div class="conteudo"><?php the_content(); // Conteúdo do Post ?></div>
	<?php endif; ?>
	<?php $i++; // Incrementa 1 ao contador ?>
	<?php endwhile; endif; ?>
</div>
<div class="coluna">		
	<?php $i=1; // Inicia o contador?>
	<?php query_posts('');?>
	<?php query_posts('showposts=50');?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php if($i==4) $i=1;?>
	<?php if ($i==2): // Verifica se o contador esta no segundo post ?>   
	<div class="titulo">
      <a href="<?php the_permalink();?>" title="<?php the_title();?>">
	    <?php the_title(); //título do Post ?>
      </a>  
    </div>
	<div class="conteudo"><?php the_content(); // Conteúdo do Post ?></div>
	<?php endif; ?>
	<?php $i++; // Incrementa 1 ao contador ?>
	<?php endwhile; endif; ?>
</div>
<div class="colunaFinal">		
	<?php $i=1; // Inicia o contador?>
	<?php query_posts('');?>
	<?php query_posts('showposts=50');?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php if($i==4) $i=1;?>
	<?php if ($i==3): // Verifica se o contador esta no terceiro post ?>   
	<div class="titulo">
      <a href="<?php the_permalink();?>" title="<?php the_title();?>">
	    <?php the_title(); //título do Post ?>
      </a>  
    </div>
	<div class="conteudoFinal"><?php the_content(); // Conteúdo do Post ?></div>
	<?php endif;?>
	<?php $i++; // Incrementa 1 ao contador ?>
	<?php endwhile; endif; ?>
</div>
<!-- EXIBE O BLOCO DO FOOTER -->
<?php get_footer(); ?>

Agora basta subir o arquivo page-post-em-colunas.php e criar a página no Administrador do WordPress como modelo Padrão a página Post em colunas.

Conseguiram deixar post em colunas no WordPress? Achou dificil? Tem dúvidas? Comentem.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    21 respostas para Post em Colunas no WordPress

    1. Moises escreveu em 10 de março de 2014

      Muito bom! só uma dúvida: tem como colocar os posts como somente parte, ou seja, somente até a parte de leia mais ou more?

      Obrigado

    2. Qcabeca escreveu em 10 de março de 2014

      Opa Moisés, no passo 2, na linha 14, basta alterar o the_content por the_excerpt

      Ou pode fazer dessa maneira também. Limitar Caracteres do Resumo do Post

    3. Camila escreveu em 22 de março de 2014

      MUITOoooo OBRIGADA, VOCê salvou meu blog! rsrsrs

      Tem como definir cada coluna para uma categoria? por exemplo, coluna 1 categoria moda; coluna 2 categoria beleza; coluna 3 categoria viagens?

      Obrigada =)

    4. iran escreveu em 22 de março de 2014

      bOA TARDE AMIGO,
      COMO FAÇO PARA QUE AS CATEGORIAS TAMBÉM RODEM EM COLUNAS? eXEMPLO:
      AS CATEGORIAS DO POST TAMBÉM FIQUEM EM COLUNAS.

    5. Qcabeca escreveu em 23 de março de 2014

      Olá Camila, que bom que foi util pra você, fico feliz.

      Se for pra fazer em coluna de categorias, eu tiraria toda a parte de incrementar do código do tutorial, e definiria em cada Loop a sua categoria desejada.

      Qualquer coisa me avise.

    6. Qcabeca escreveu em 23 de março de 2014

      Iran,

      Respondi acima pra Camila, veja se ajuda. Qualquer coisa me avise. Abs

    7. iran escreveu em 23 de março de 2014

      Boa noite,
      seria uma espécie de catalogo.

      Exemplo:
      quando clicar na categoria roupas, mostrar em colunas somente post dessa taxonomia.

      Se for em bolsas, mostrar em colunas somente post dessa taxonomia. Mostrar em páginas separadas para cada.

      Qual a forma menos trabalhosa?

    8. Qcabeca escreveu em 23 de março de 2014

      Bom Iran, vamos ver se agora eu entendi, basta você criar uma página como a do Exemplo, pra cada categoria correto?

      Depois, no código do 2º Passo, basta você alterar o Loop e adicionar na linha 2, o seguinte código:

       <?php $args=array('posts_per_page' => 50, 'taxonomy' => 'nome-da-taxonomia');?>

      Em seguida, substitua a linha 3 do mesmo passo 2 por essa

      <?php query_posts($args);?>

      Se não estou enganado assim funcionará, qualquer coisa, volte aqui, haha.

    9. iran escreveu em 24 de março de 2014

      Fiz do jeito que você falou, mas ele não lista nada.

      Se você pegar o link direto http://localhost/wordpress/catalogo/

      exibe todos os posts das categorias normalmente.

      Mas, quando tento só listar de uma única categoria pelo link direto http://localhost/wordpress/itens/roupas/

      Ele exibe os post, mas um em baixo do outro. Não tem como personalizar a página que exibe direto ao acessar as categorias? Qual seria essa página? archive.php?

    10. Qcabeca escreveu em 24 de março de 2014

      Hum, se você puder me enviar o link, fica melhor.

      Mas nesse sentido que você falou, você pode editar o category.php e caso não tenha, pode criar um da maneira que desejar.

      Vai me avisando ae.

    11. Camila escreveu em 25 de março de 2014

      tentei, mas esta dando erro! será que você poderia me ajudar com o codigo? nao ta aparecendo o post da categoria determinada, e sim o ultimo post publicado :(

    12. Qcabeca escreveu em 26 de março de 2014

      Camila, cola o código no pastebin e me envia o link pra eu dar uma olhada.

    13. iran escreveu em 26 de março de 2014

      Eu coloco para listar uma única e não mostra nada. Só mostra se eu fizer o processo que você ensina listando todos as categorias.

    14. Qcabeca escreveu em 26 de março de 2014

      Se puder me envia o link pra eu dar uma olhada. Se quiser me passar os dados do admin, me envie via form de contato que consigo visualizar melhor.

    15. iran escreveu em 26 de março de 2014

      Esta em localhost, posso te enviar alguma coisa?

    16. Qcabeca escreveu em 26 de março de 2014

      Iran, Enviei um e-mail pra você. Me envie o código pelo e-mail.

    17. Marcelo escreveu em 19 de outubro de 2014

      Cara,

      Muito bom o teu tutorial. Por favor, há como limitar a três artigos, isto é, um por coluna?

    18. Qcabeca escreveu em 28 de outubro de 2014

      Opa Marcelo, basta inserir um

      posts_per_page=3

      dentro do seu loop. Simples assim.

      Obrigado pelos elogios, qualquer coisa me avise. Sucesso

    19. aNDRESSA escreveu em 25 de novembro de 2014

      oLÁ! aDOREI E ESTÁ TUDO FUNCIONANDO!
      cOMO O mARCELO, ACIMA, TAMBÉM GOSTARIA DE EXIBIR APENAS 1 POST POR COLUNA, SENDO O MAIS RECENTE NA COLUNA 1, O PENÚLTIMO NA 2 E ANTEPENÚLTIMO NA 3. ESTOU TENTANDO O POSTS_PER_PAGE, CONFORME A SUA ORIENTAÇÃO E NÃO ESTOU CONSEGUINDO. NÃO SEI BEM ONDE COLOCAR… PODERIA ME AJUDAR? AGRADEÇO MUITO! ABRAÇÃO!

    20. Qcabeca escreveu em 8 de dezembro de 2014

      Olá Andressa, já conseguiu resolver? Tentou trocar o ‘posts_per_page‘ por ‘showposts’ no loop?

      Pra ordenar como você quer use oder=DESC também no loop

      Qualquer coisa, me avise.

    21. marcelo escreveu em 27 de março de 2015

      Obrigado pela resposta. Abraço

    Envie seu comentário.

    Seu email não será publicado