Uma das dúvidas mais frequentes nos iniciados em Wordpress é a de como customizar a página inicial do seu blog. Fazer uma modificação na index é muito fácil, só requer conhecimento de como os posts são chamados. Alguns templates tags também são importantes para o processo, além de plugins que auxiliam na tarefa.

O programador tem que ter em mente que:

  • deve-se ter fazer uso do Loop para a corrente principal de posts, mas isso não é regra. O Loop é o trecho que inicia com e termina com - novamente é preciso discernimento, pois esses trechos podem estar diferentes também;
  • para chamar outros blocos de posts, use a template tag get_posts();
  • sua imaginação é o limite.

Vou demostrar aqui como fazer a página inicial do seu blog com um post em destaque, e uma lista com demais posts em ordem decrescente de publicação. Vamos fazer a seguinte transformação:

Então, de uma lista com posts iguais, a página conterá mais detaque para o último post publicado, listando os outros posts a seguir. Neste tutorial vamos mexer só com o Loop da index.php, mas existem várias maneiras de se fazer a mesma coisa. Tudo vai depender do que você quer fazer no seu blog.

THE LOOP
Antes de mais nada, deixe-me mostrar a sintaxe básica do Loop do WP. A descrição está nos comentários:

<?php if (have_posts()) : // checa se existem posts ?>
 
<?php while (have_posts()) : the_post(); // aqui comeca o laco, que se repetira para cada post ?>
 
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><?php // o titulo do post ?>
 
<div class="entry">
<?php the_content(); // o conteudo do post ?>
</div>
 
<?php endwhile; // fim do laço para cada post?>
 
<?php else : // caso nao seja encontrado nenhum post, executa esse trecho?>
 
<h2 class="center">N&atilde encontrado</h2>
 
<?php endif; // fim de tudo ?>

Em linhas gerais, esse é um loop bem básico. O importante é saber reconhecer onde ele começa, termina e o que se pode fazer nos blocos de código.

Para destacar o último post, e fazer uma lista com os demais, vamos usar um Loop apenas. Basta dizer para o WP como ele vai diferenciar o primeiro post dos demais. Também vamos adicionar uma imagem antes do conteúdo do primeiro post; essa será uma imagem para ilustrar o post. Não há necessidade de nenhum plugin específico.

Primeiro, configure a largura máxima das imagens para upload no WP. Vá até Configurações >> Diversos e escolha um valor para “Tamanho médio”. Sugiro que seja a mesma largura da parte de conteúdo do seu blog. Neste exemplo vamos usar 450 px.

Quando for escrever um post, selecione essa imagem e a coloque em cima do conteúdo do seu post. Insira o “tamanho médio” (que vai estar redimensionado automaticamente). Após escrever seu post, use a tag “more” para separar o conteúdo que vai na estar na index.

Feito isso, o resultado será semelhante ao que você vê aqui no meu blog; com a diferença de que eu aplico isso em todos os posts.

Agora vamos ao código que você tem que alterar no index.php do seu tema:

<?php if (have_posts()) : // checa se existem posts 
$i = 1; // esse variavel vai checar se estamos no primeiro post
?>
 
<?php while (have_posts()) : the_post(); // aqui comeca o laco, que se repetira para cada post ?>
 
<?php if ($i==1) { // checamos se e o primeiro post... ?>
 
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><?php // o titulo do post ?>
 
<div class="entry">
<?php the_content("Leia mais"); // o conteudo do post, com a imagem e o texto de leia mais ?>
</div>
 
<?php } else { // se nao for o primeiro post, imprime so o titulo ?>
 
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><?php // o titulo do post ?>
 
<?php } // fim da verificacao de primeiro post 
$i++; // acrescenta +1 na variavel - dessa forma nao passaremos pelo primeiro post outra vez
?>
 
<?php endwhile; // fim do laço para cada post?>
 
<?php else : // caso nao seja encontrado nenhum post, executa esse trecho?>
 
<h2 class="center">N&atilde encontrado</h2>
 
<?php endif; // fim de tudo ?>

Viu só? São poucas coisas que devem ser alteradas. Novamente: use sua imaginação. Use a index como uma página html qualquer; insira qualquer imagem e texto, não tenha medo de modificar nada. Uma dica: desenhe todo o xhtml da sua página antes. Teste no browser a aparência dela, e só depois aplique as funções e o Loop.

Aqui, um pequeno vídeo tutorial para este artigo (ver como se faz é mais fácil né?): :)

Obs.: como é o primeiro vídeo, já me desculpem pela qualidade da voz e da gravação, beleza?
Obs (2).: veja em tela inteira, a qualidade é melhor.

Leia também