Use Dois Loops Para Deixar O Primeiro Post do Blog Diferente

Portuguese (Português) translation by João Fagner (you can also view the original English article)

Acho que é seguro dizer, se você for um blogueiro, você vai querer destacar o conteúdo mais recente do seu blog para que as pessoas possam ler. Existem algumas maneiras que você poderia fazer isso, incluindo o uso de estilos diferentes para o primeiro post em sua página do blog para realçá-la ou exibi-lo com destaque na barra lateral.

Neste tutorial eu vou mostrar a você como ir um pouco além do uso de CSS: em vez de simplesmente estilizar o seu primeiro post do blog diferentemente, você vai ter a saída do conteúdo diferente. Especialmente o primeiro post que irá ter um título, uma imagem de destaque e conteúdo, enquanto os outros posts terão apenas título, imagem de destaque e resumo.

Você pode adaptar esta técnica: se você não quiser tanto detalhe é só alterar o loop em cada uma das consultas que estará trabalhando com isto (por exemplo) o primeiro post tem um título, imagem e resumo enquanto os outros têm apenas o título e a imagem. Ou você poderia deixar a imagem de destaque para postagens subseqüentes. Cabe a você.

A técnica que usaremos para fazer isto envolve o uso da classe WP_Query para escrever uma consulta extra antes da consulta principal no arquivo modelo home.php, o que leva a página principal do blog. Então usaremos o pre_get_posts() para alterar a consulta principal para que o post mais recente não apareça duas vezes. Vou criar um tema filho do tema padrão Twenty Fifteen e criar um arquivo home.php, além de criar uma folha de estilos para estilizar o tema filho.

O Que Você Vai Precisar

Para seguir este tutorial, você vai precisar:

uma instalação de desenvolvimento do WordPress
uma cópia do tema Twenty Fifteen instalado (ou você pode trabalhar com seu próprio tema, se você preferir)
adicionado post ao seu site — eu adicionei a maioria das minhas importando os dados de teste de unidade de tema
um editor de código

Configurando o Tema Filho

Se você está trabalhando com o tema Twenty Fifteen, o primeiro passo é configurar seu tema da filho. Crie uma nova pasta no seu diretório wp-content/themes e de-lhe um nome — eu vou chamar meu tutsplus-blog-page-two-loops. Agora crie um arquivo style.css vazio nessa pasta e adicionar o seguinte código nele:

/*
Theme Name:     Tuts+ Use Two Loops on Your Main Blog Page
Theme URI:      http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/
Description:    Theme to support WPTutsPlus tutorial on creating a custom taxonomy archive. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       twentyfifteen
Version:        1.0
*/

@import url("../twentyfifteen/style.css");

Isso informa o WordPress que seu tema é uma filho do tema Twenty Fifteen e importa a folha de estilo do tema filho. Você provavelmente vai querer editar alguns detalhes afinal se trata do seu tema.

Criando Modelo (Template) de Arquivo Para a Página do Blog

Como é a página principal do blog que você deseja alterar, você precisará criar um arquivo de modelo (template) no seu tema filho. Você precisa criar o modelo de arquivo home.php, que alimenta a página principal do blog sendo ou não a primeira página do seu site.

Crie um arquivo chamado home.php na pasta do tema.

Agora abra o arquivo index.php em Twenty Fifteen e copie o código no início e no final do arquivo (ou seja, não o loop). Seu arquivo será parecido com isto:

<?php

get_header(); ?>

    <div id="primary" class="content-area">
  	<main id="main" class="site-main" role="main">
		
			<header>
				<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
			</header>
			
			
            <?php // Previous/next page navigation.
    		the_posts_pagination( array(
			    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
			    'next_text'          => __( 'Next page', 'twentyfifteen' ),
			    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
			) ); ?>
            
		</main><!-- .site-main -->
	</div><!-- .content-area -->

<?php get_footer(); ?>

Se você estiver usando o seu próprio tema, copie o código equivalente de arquivo do index.php do seu tema em vez disso, para que você tenha a estrutura e elementos para sua página, mas sem loop.

Adicionando o Primeiro Loop

O próximo passo é criar o primeiro loop, que irá mostrar o mais o post mais recente na íntegra.

Abaixo da tag de fechamento </header> no arquivo home.php, adicione os argumentos para a consulta:

1	$args = array(
2	'posts_per_page' => '1',
3	);

Isto é apenas a consulta para o post mais recente. Observe que você não precisa incluir o tipo de post, é esse por padrão para 'post'.

Agora adicione o loop abaixo dos seus argumentos:

$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

<?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>

<article id="post-<?php the_ID(); ?>" <?php post_class( 'first-post' ); ?>>
    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

	<?php if ( has_post_thumbnail() ) { ?>
		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail( 'medium', array(
				'class' => 'left',
				'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
			) ); ?>
		</a>
	<?php } ?>
	
	<section class="entry-content">
		<?php the_content(); ?>
	</section><!-- .entry-content -->	
				
	<footer class="entry-footer">
		<?php twentyfifteen_entry_meta(); ?>
		<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
	
</article><!-- #post-## -->

<?php // End the loop.
endwhile;

rewind_posts();

} ?>

Esse loop exibira o título do post, a miniatura se houver e o conteúdo.

Note que adicionei uma classe extra, .first-post, na tag modelo post_class(). Se você quer destacar o seu primeiro post usando CSS, essa classe extra irá fácilitar a estilização.

É muito importante que você adicione rewind_posts() após o loop, caso contrário o próximo loop não vai funcionar.

Adicionando o Segundo Loop

O segundo loop é muito semelhante, mas em vez de usar WP_Query, ele só acessa a consulta principal.

Abaixo do loop que você acabou de adicionar, adicione o segundo loop:

<?php while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

	<?php if ( has_post_thumbnail() ) { ?>
		<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail( 'medium', array(
				'class' => 'left',
				'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
			) ); ?>
		</a>
	<?php } ?>
	
	<section class="entry-summary">
		<?php the_excerpt(); ?><a href="<?php the_permalink(); ?>">Further information</a>.
	</section><!-- .entry-summary -->
				
	<footer class="entry-footer">
		<?php twentyfifteen_entry_meta(); ?>
		<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
	
</article><!-- #post-## -->

<?php // End the loop.
endwhile; ?>

Este loop é muito parecido com o primeiro, mas com duas diferenças:

Ele exibe o resumo em vez do conteúdo.
Não inclui o .first-post classe de css

Agora salve o seu arquivo.

Compensando (Offsetting) a Consulta Principal Usando pre_get_posts

No momento, se você verificar sua página principal do blog você vai ver que seu post mais recente é exibido duas vezes. Nós iremos consertar compensando a consulta principal usando o gancho pre_get_posts.

Crie um novo arquivo em seu tema chamado functions.php. Como alternativa, se você está trabalhando com seu próprio tema e já tem um arquivo de funções, abra ele.

Adicione este código ao seu arquivo de funções:

<?php
// offset the main query on the home page 
function tutsplus_offset_main_query ( $query ) {
     if ( $query->is_home() && $query->is_main_query() ) {
		 $query->set( 'offset', '1' );
	}
 }
add_action( 'pre_get_posts', 'tutsplus_offset_main_query' );

Isto filtra a consulta principal, mas apenas na página inicial, adicionando um deslocamento de 1.

Agora salve seu arquivo e dê uma olhada na sua página principal do blog:

Main blog page showing both sticky post and most recent post

Há um problema. Porque meu blog tem um post fixo (sticky), isto está sendo exibido acima do post mais recente e não é o que eu quero. Ele também está exibindo todo o conteúdo de ambos, o post mais recente e o post fixo(sticky).

Consertando o Post Fixo (Sticky)

Isso é facilmente corrigido. Abra novamente o seu arquivo home.php e adicione mais um argumento para os argumentos da sua primeira consulta:

1	'ignore_sticky_posts' => true

Isto irá assegurar que WordPress ignora os posts fixos (sticky) quando estiver executando o primeiro loop. Seu primeiro conjunto de argumentos de consulta agora ficará assim:

1	$args = array(
2	'posts_per_page' => '1',
3	'ignore_sticky_posts' => true
4	);

Agora salve o arquivo novamente e verifique sua página do blog:

Blog page with most recent post at the top

Muito melhor! O post recente está no topo na íntegra e o post fixo (sticky) está abaixo, com apenas sua saída de resumo. Se você rolar mais para baixo, você vai ver que os outros posts também só estão mostrando um resumo:

Blog page with posts showing excerpts only

Se você quiser ignorar posts fixo (sticky) em seu segundo loop, você poderia fazer adicionando o argumento de ignore_sticky_posts para a sua segunda consulta. Eu quero que os posts fixo funcionem como estão, mas meu post mais recente, no entanto, eu não quero.

Consertando a Paginação

Você vai notar que, se você navegar para as páginas subseqüentes de posts (ou seja, as páginas paginadas) em seu blog, os mesmos posts são exibidos como na primeira página, significando que são exibidos apenas seus dez posts mais recentes! Isso ocorre porque a compensação (offsetting ) da consulta principal está quebrado na paginação.

Felizmente isto é facilmente corrigido alterando a função que você adicionou para o gancho de pre_get_posts.

Abra novamente o seu arquivo functions.php e edite a função para que ele fique como a abaixo:

function tutsplus_offset_main_query ( $query ) {
     if ( $query->is_home() && $query->is_main_query() && !$query->is_paged() ) {
		 $query->set( 'offset', '1' );
	}
 }

O que fizemos aqui foi adicionar a tag condicional is_paged(). Isto verifica se há páginas paginadas diferentes da primeira, então retorna true se o visitante está olhando para segunda página ou os post subseqüente. Usando !$query->is_paged(), nós estamos garantindo que a consulta só será deslocada se a página não for paginada.

Agora salve seu arquivo e verifique novamente. A Paginação agora irá funcionar bem.

Você vai notar que o mesmo post recente ainda é exibido na parte superior da página. Iso ocorre porque está usando o mesmo modelo (template) e com os mesmos dois loops.

No meu site, eu estou feliz de deixar dessa maneira porque eu quero que o post mais recente seja altamente ressaltado. No entanto, se você quisesse mudar isto, você adicionaria um argumento extra para sua primeira consulta, ou seja, 'paged' => false.

Resumo

Alteramos a maneira que a página principal do seu blog exibi os post que foi feito facilmente usando a classe WP_Query com o gancho de pre_get_posts. Neste tutorial você aprendeu como:

Adicionar um loop extra à sua página de blog usando WP_Query para exibir o primeiro post na íntegra
alterar a consulta principal para que o primeiro post para não exibir duas vezes
corrigir erros com paginação e posts fixo (sticky)

Você pode adaptar esta técnica para exibir o último post de uma determinada categoria, usar conteúdo diferente em seu loop e muito mais.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!