Como listar posts de uma categoria específica em WordPress
ANTERIOR
Como inserir Vídeo com Html5
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.
Deixe um comentário