Personalize A Lista Dos Últimos Artigos Publicados No WordPress

Que tal apresentar uma lista com os últimos artigos publicados no seu blog sem a necessidade de nenhum plugin só com o código puro e simples? Que tal? Gostou da ideia?

lista

Imagem: stock.xchng

Então, vamos trabalhar!

Para começar, escolha onde você vai querer mostrar essa lista. Para usar como exemplo, vou mostrar a minha lista ao final da primeira página (não vou mostrar, só estou dizendo isso para que você se localize).

Então eu vou até a página em que eu quero mostrá-la, no meu caso a primeira página (index.php), e vou até o final da página, até o trecho <?php endwhile; ?> e vou colar logo depois dele o seguinte código:

<div id=’listadelinks’>
<ul>
<?php query_posts(‘showposts=15&offset=3’); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><li><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></li></h2>
<?php endwhile; endif; ?>
</ul>
</div>

Agora é só salvar e pronto!

Isso é só o que você precisa, mas vamos entender a parte que você pode modificar para que além do que você precisa, a lista seja também o que você deseja.

Onde está <?php query_posts(‘showposts=15&offset=3’); ?> controla exatamente o número de posts que vão aparecer na sualista (no caso 15) e o número de posts que deve saltar para começar a listar os já publicados (no caso 3).

Esse salto é importante, porque vamos supor que você apresenta 3 posts na sua primeira página, não tem a necessidade de mostrar o título dos 3 já que eles estão na primeira página não é mesmo?

Então o que você faz com esse código é pular 3 e começar do 4º texto publicado. Se eu tivesse 10 textos na minha primeira página, começaria a lista de posts publicados pelo número 11 e assim por diante.

Se você quiser uma lista menor, basta mudar o 15 para 10 ou a quantidade de posts que você quiser que apareçam. Se você quiser que ela comece depois do 1º post publicado, mude o 3 para 2 ou para o número que corresponda ao post que você quer que comece a lista.

Agora, vamos criar estilos para a nossa lista!

Depois de adicionar o código acima no lugar onde você quer que a lista apareça, vá até a página style.css do seu tema e adicione o seguinte trecho ao final dela:

#listadelinks a {
color: #0000ff;
text-decoration: none;
font-size: 13px;
}

#listadelinks a:hover {
text-decoration: underline;
}

#listadelinks a:visited {
color: #000000;
text-decoration: none;
}

Explicando o código:

#listadelinks a {
color: #0000ff; (cor do link antes de clicar nele ou passar o mouse)
text-decoration: none; (para não aparecer sublinhado)
font-size: 13px; (tamanho da fonte)
}

#listadelinks a:hover {
text-decoration: underline; (para aparecer sublinhado quando passar o mouse sobre o link)
}

#listadelinks a:visited {
color: #000000; (cor do link depois de visitado)
text-decoration: none; (para não aparecer sublinhado)
}

Comments

comments