Usa dos bucles para generar tu primera entrada de blog de forma diferente

() translation by (you can also view the original English article)

Creo que puedo decir con seguridad que si eres un blogger, querrás destacar el contenido más reciente de tu blog para que la gente lo vea y lo lea. Existen algunas formas mediante las que podrías conseguirlo, incluyendo el uso de diferentes estilos para la primera entrada en tu página de blog para resaltarla o mostrarla de forma prominentemente en tu barra lateral.

En este tutorial te mostraré cómo ir un poco más allá de lo que podrías lograr usando CSS: en lugar de aplicar simplemente estilo diferente a tu primera entrada de blog, generarás contenido distinto para ese fin. Concretamente, la primera entrada tendrá un título, una imagen destacada y contenido, mientras que el resto de entradas solo tendrán el título, la imagen destacada y el extracto.

Puedes adaptar esta técnica: si no quieres tanto detalle, puedes modificar el bucle en cada una de las consultas con las que trabajaremos para que (por ejemplo) la primera entrada tenga un título, una imagen y un extracto, mientras que otras solo tengan el título y la imagen. O podrías eliminar la imagen destacada en la entradas posteriores. Depende de ti.

La técnica que usaremos para hacer esto implica usar la clase WP_Query para escribir una consulta adicional antes de la consulta principal en el archivo de plantilla home.php, que controla la página principal del blog. A continuación, usaremos pre_get_posts() para modificar la consulta principal de modo que la publicación más reciente no se genere dos veces. Crearé un tema hijo del tema predeterminado Twenty Fifteen y crearé un archivo home.php para el mismo, además de una hoja de estilo para configurar el tema secundario.

Lo que necesitarás

Para seguir este tutorial, necesitarás lo siguiente:

una instalación de desarrollo de WordPress
una copia del tema Twenty Fifteen instalado (o puedes trabajar con tu propio tema si lo prefieres)
entradas añadidas a tu sitio, yo he añadido la mayor parte de las mías importando los datos de prueba unitaria del tema
un editor de código

Configurar del tema del hijo

Si estás trabajando con el tema Twenty Fifteen, el primer paso consiste en configurar tu tema hijo. Crea una nueva carpeta en tu directorio wp-content/themes y asígnale un nombre: estoy llamando a la mía tutsplus-blog-page-two-loops. Ahora cree un archivo style.css vacío en esa carpeta y añade en él lo siguiente:

/*
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");

Esto le dice a WordPress que tu tema es un tema hijo del tema Twenty Fifteen e importa la hoja de estilo de ese tema. Es probable que desees editar algunos de los detalles para reflejar el hecho de que se trata de un tema tuyo.

Crear un archivo de plantilla para la página del blog

Como es la página principal del blog lo que deseas modificar, tendrás que crear un archivo de plantilla para ello en tu tema hijo. El archivo de plantilla que necesitas crear es home.php, que alimenta la página principal del blog, independientemente de que sea o no la primera página de tu sitio.

Crea un archivo llamado home.php en la carpeta del tema.

Ahora abre el archivo index.php en Twenty Fifteen y copia el código al principio y al final de ese archivo (es decir, no copies el bucle). Tu archivo tendrá un aspecto similar al siguiente:

<?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(); ?>

Si usas tu propio tema, copia el código equivalente del archivo index.php de tu tema en su lugar, para que tengas los elementos que lo contienen para tu página pero ningún bucle.

Añadir el primer bucle

El siguiente paso es crear el primer bucle, que mostrará la entrada más reciente en su totalidad.

Debajo de la etiqueta de cierre </header> en tu archivo home.php, añade los argumentos para la consulta:

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

Esto sólo consultará la entrada más reciente. Ten en cuenta que no tienes que incluir el tipo de entrada y el valor predeterminado es 'post'.

Ahora agrega el bucle debajo de tus 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();

} ?>

Este bucle genera el título de la entrada, la miniatura (si la hay) y el contenido.

Ten en cuenta que he añadido una clase adicional, .first-post, en la etiqueta de plantilla post_class(). Si quieres resaltar tu primera entrada usando CSS, esta clase adicional te ofrece una manera fácil de hacerlo.

Es muy importante que añadas rewind_posts() después del bucle, ya que de lo contrario el siguiente bucle no funcionará.

Añadir el segundo bucle

El segundo bucle es muy similar, pero en lugar de usar WP_Query, solo tiene acceso a la consulta principal.

Debajo del bucle que acabas de agregar, añade el segundo bucle:

<?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 bucle es muy similar al primero, pero con dos diferencias:

Produce el extracto en lugar del contenido.
No incluye la clase .first-post .

Ahora guarda tu archivo.

Desplazar la consulta principal mediante pre_get_posts

Por el momento, si revisas la página principal de tu blog verás que tu entrada más reciente se muestra dos veces. Lo solucionaremos desplazando la consulta principal mediante el enlace de pre_get_posts.

Crea un nuevo archivo en el tema llamado functions.php. Alternativamente, si estás trabajando con tu propio tema y ya tiene un archivo de funciones, ábrelo.

Añade este código al archivo de funciones:

<?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' );

Esto filtra la consulta principal, pero solo en la página principal, añadiendo un desplazamiento de 1.

Ahora guarda tu archivo y echa un vistazo a la página principal de tu blog:

Main blog page showing both sticky post and most recent post

Hay un problema. Debido a que mi blog tiene una entrada pegajosa, esta se muestra por encima de la entrada más reciente, que no es lo que quiero. También muestra el contenido completo tanto de la entrada más reciente y como de la entrada fija.

Fijar las entradas "pegajosas"

Esto se corrige fácilmente. Abre tu archivo home.php de nuevo y añade otro argumento a los argumentos de la primera consulta:

1	'ignore_sticky_posts' => true

Esto asegurará que WordPress ignore las entradas pegajosas o fijas cuando se ejecute el primer bucle. El primer conjunto de argumentos de consulta ahora tendrá este aspecto:

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

Ahora guarde el archivo de nuevo y revisa la página de tu blog:

Blog page with most recent post at the top

¡Eso está mejor! La entrada más reciente está en la parte superior en su totalidad y la entrada pegajosa está por debajo de ella, mostrando solo su extracto. Si te desplazas hacia abajo verás que las otras entradas también muestran solo un extracto:

Blog page with posts showing excerpts only

Si deseas omitir las entradas pegajosas en el segundo bucle, puedes hacerlo agregando el argumento ignore_sticky_posts a la segunda consulta. Yo quiero que mis entradas pegajosas funcionen de la forma estándar para cualquier entrada a excepción, sin embargo, de mi entrada más reciente, así que no lo haré.

Reparar la paginación

Notarás que si navegas a la segunda y posteriores páginas de entradas (es decir, las páginas paginadas) de tu blog, se muestran las mismas entradas que en la primera página, ¡lo cual significa que solo se muestran tus diez entradas más recientes! Esto se debe a que el desplazamiento de la consulta principal ha roto la paginación.

Por suerte, esto se soluciona fácilmente modificando la función que añadiste al gancho pre_get_posts.

Abre tu archivo funciones.php de nuevo y edita la función para que se lea como la siguiente:

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

Lo que hemos hecho aquí es añadir la etiqueta condicional is_paged(). Esto comprueba si existen páginas paginadas que no sean la primera, por lo que devuelve true si el visitante está mirando la segunda o posteriores páginas de entradas. Mediante el uso de !$query->is_paged(), nos aseguramos de que la consulta solo se desplazará si la página no está paginada.

Ahora guarda tu archivo y vuelve a comprobarlo. La paginación ahora estará funcionando bien.

Notarás que la misma entrada reciente sigue mostrándose en la parte superior de la página. Esto se debe a que la página está utilizando la misma plantilla y los mismos dos bucles.

En mi sitio estoy feliz de dejar esto tal cual porque quiero que la entrada más reciente sea muy prominente. Sin embargo, si deseas cambiar esto, añadiría un argumento adicional a la primera consulta, a saber, 'paged' => false.

Resumen

Modificar la forma en que la página principal de tu blog genera entradas es fácil de conseguir usando la clase WP_Query con el gancho pre_get_posts. En este tutorial has aprendido a:

Añadir un bucle adicional a la página de tu blog utilizando WP_Query para generar la primera entrada en su totalidad
modificar la consulta principal para que la primera entrada no se genere dos veces
corregir errores con las entradas pegajosos y la paginación

Podrías adaptar esta técnica para mostrar la última entrada de una categoría determinada, para usar contenido diferente en el bucle y mucho más.