Carregando...

Como listar posts de uma categoria específica em WordPress

Postado: 12 de maio de 2021 Tempo de Leitura: 2 Minutos

Como podemos Selecionar post de uma determinada categoria em wordpress.

Suponha que você queira listar post da categoria Blog

Vamos Adicionar o Loop na categoria Desejada.

<section class="box-lista-posts">

<?php query_posts('showposts=4&category_name=blog');?>
<?php if (have_posts()): while (have_posts()) : the_post();?>
   
    <article class="lista-posts">

      <div class="mask">

        <?php the_post_thumbnail('full', array('title' => get_the_title() ));?>
      
      </div><!--opa-->

      <div class="desc">  

        <time datetime="08/03/2021">Postado em: <?php the_time('d/m/Y \\à\\s H:i');?></time>

        <h4><?php the_title();?></h4>

        <p><?php echo excerpt('20'); ?></p>
        
        <a href="<?php the_Permalink()?>" class="link-artigo" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

<?php endwhile; else:?>
<?php endif;?>

</section>

Explicando o código:

  1. showposts: Lista o máximo de post de uma categoria.
  2. category_name: O nome da categoria que você quer listar os posts.
  3. the_post_thumbnail: É para exibir imagens em destaque em qualquer lugar que você quiser.
  4. the_time: Pega a Data e hora.
  5. the_title: Pega o Titulo do post.
  6. excerpt: Pega o texto e você ainda pode limitar exemplo: excerpt(’20’).
  7. the_Permalink: Pega o link dentro no href.

Veja outro exemplo aqui:

<section class="box-lista-posts">

<?php query_posts('showposts=8&category_name=artigos');?>
<?php if (have_posts()): while (have_posts()) : the_post();?>
   
    <article class="lista-posts">

      <div class="mask">

        <?php the_post_thumbnail('full', array('title' => get_the_title() ));?>
      
      </div><!--opa-->

      <div class="desc">  

        <time datetime="08/03/2021">Postado em: <?php the_time('d/m/Y \\à\\s H:i');?></time>

        <h4><?php the_title();?></h4>

        <p><?php echo excerpt('33'); ?></p>
        
        <a href="<?php the_Permalink()?>" class="link-artigo" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

<?php endwhile; else:?>
<?php endif;?>

</section>

Vamos Adicionar o Css para listar os 4 posts certinho.

.box-lista-posts {

    width:90%;
    margin:auto; 
}

.box-lista-posts h3 { 

	margin-bottom:1em; 
	border-bottom:1px #e4e4e4 solid; 
	padding-bottom:0.5em; 
}

.lista-posts { 

	width:100%; 
	height:auto; 
	background-color:#fff; 
	box-shadow:0px 1px 2px rgba(0,0,0,0.15); 
	margin-bottom:1.5em; 
	float:left; 
	position:relative; 
	border-radius:3px; 
	overflow:hidden; 
}

.lista-posts .mask { 

	overflow:hidden; 
	position:relative;
}

.lista-posts img  { 

	left:0%; 
	max-width:100%!important; 
	width:100%; 
	height:auto; 
	position:relative!important; 
	border:none!important; 
	display:block; 
}

.lista-posts .desc { 

	background-color:transparent; 
	width:100%; 
	float:left; 
	padding:0.6em; 
	min-height:100px; 
	max-height:100%; 
}

.lista-posts .desc time  { 

	font-size:0.9em; 
	color:#ccc; 
}

.lista-posts .desc h4 { 

	color:#2fcacf; 
	font-family:"Raleway", sans-serif; 
	font-size:1.2em; 
	padding:0.4em 0em; 
	margin-bottom: 0.3em; 
}

.lista-posts .desc .link-artigo { 

	text-decoration:none; 
	color:#ff7a04; 
}

.lista-posts .desc .link-artigo:hover  { text-decoration:underline; }

.lista-posts .desc p  { 

	width:100%; 
	float:left; 
	margin-bottom: 0.5em;
	font-size:1em; 
}

/*Vamos Adicionar o Responsivo*/

/*768 dividido por 16 = 48em*/
@media (min-width:48em){
  
  .lista-posts  { width:48%; margin-right:4%; }
  .lista-posts:nth-of-type(2n+0) { margin-right:0; }

}

/*960 dividido por 16 = 60em*/
@media (min-width:60em){

.lista-posts:nth-of-type(2n+0),
.lista-posts                   { width:23.5%; margin-right:2%; margin-bottom:0; }
.lista-posts:nth-of-type(4n+0) { margin-right:0; }

} 

Pronto, em alguns passos conseguimos selecionar posts de uma determinada categoria no wordpress e estilizar com css.

Publicado por: Loop Nerd

730 Visualizações

Tags

Deixe um comentário

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