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:
- showposts: Lista o máximo de post de uma categoria.
- category_name: O nome da categoria que você quer listar os posts.
- the_post_thumbnail: É para exibir imagens em destaque em qualquer lugar que você quiser.
- the_time: Pega a Data e hora.
- the_title: Pega o Titulo do post.
- excerpt: Pega o texto e você ainda pode limitar exemplo: excerpt(’20’).
- 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
Deixe um comentário