Cómo crear una página de inicio con múltiples listados usando consultas personalizadas

WordPress te proporciona un par de opciones integradas para la página de inicio de tu sitio web: una presentación de las entradas más recientes de tu blog o una página estática de tu elección. ¿Pero qué pasaría si quisieses crear algo un poco más interesante que eso?

Si tu sitio cuenta con muchos datos usando categorías, taxonomías o tipos de entradas personalizadas para organizarlos, podrías desear mostrar la información de más de una forma en tu página de inicio. La buena noticia es que puedes hacerlo usando una plantilla personalizada para la página de inicio. En esta plantilla escribes un número de consultas personalizadas para listar los datos de la forma que quieras. En este tutorial aprenderás cómo hacer lo siguiente:

• Crear una plantilla de página de inicio personalizada para que la use tu tema
• Incluir cuatro consultas en esa plantilla para mostrar diferentes tipos de datos, incluyendo tres consultas personalizadas

Las consultas listarán las entradas estándar además de un tipo de entrada personalizada registrada para este proyecto, denominada ‘animal’. Puedes encontrar el archivo de plantilla con las cuatro consultas en el paquete de código.

Lo que necesitarás para completar este tutorial

• Una instalación de desarrollo de WordPress
• Un tema instalado que puedas editar. Si estás trabajando con un tema existente te recomiendo que crees un tema hijo de forma que puedas crear archivos de plantilla sin editar el tema padre. Yo estoy usando un tema hijo de Twenty Twelve

El diseño de la página de inicio

Antes de empezar a configurar la plantilla de la página de inicio, tómate algún tiempo para identificar que contiene la página de inicio:

La página de inicio contiene lo siguiente:

• Una cabecera con un banner y un menú de navegación
• El contenido de la página de inicio, texto y una imagen
• Tres listados, cada uno usando una consulta personalizada:
  • Actualizaciones, son entradas estándar dentro de la categoría ‘Updates’ (Actualizaciones)
  • En detalle, entradas estándar dentro de la categoría ‘Detail’ (Detalle)
  • Animales, estos usan un tipo de entrada personalizada denominada ‘animal’
• Un pie de página estándar

Los elementos de este diseño con los que trabajarás son el contenido de la página de inicio y tres listados.

Antes de que empieces: Configura los datos

Antes de empezar, necesitarás disponer de algunos elementos con los que puedan trabajar tus consultas:

• El registro de un tipo de entrada personalizada denominada ‘animal’. Para conocer los detalles de cómo hacer esto, consulta register_post_type en el WordPress Codex. Alternativamente, el archivo functions.php del paquete de código incluye el código que hace esto
• Establecer dos categorías para las entradas normales, ‘Updates’ y ‘In Detail’
• La configuración de una página estática denominada ‘Home’, con algo de contenido añadido a ella. Esto debería ser establecido como página de inicio a través de la página de Ajustes del escritorio de WordPress
• Algunas entradas normales en cada categoría y algunas en animals (usando el tipo de entrada personalizada). La plantilla mostrará hasta ocho de cada una

Crear la plantilla de la página de inicio

El primer paso es crear el archivo de plantilla que contendrá tu código. Crea un archivo en blanco en la carpeta de tu tema y denomínalo front-page.php. Añade el siguiente código al archivo:

1

<?php

2

/**

3

 * The template for displaying the homepage.

4

 * Includes multiple loops and a slideshow

5

 */

6

get_header(); ?>

7

// front page content goes here

8

<?php get_footer(); ?>

Guarda tu archivo. Como puedes ver, esto incluye los archivos de plantilla de la cabecera y el pie de página en tu página de inicio. No se incluye ninguna columna lateral, ya que no forma parte del diseño de la página de inicio. Cuando visites la página de inicio de tu sitio ahora tendrás una página vacía que solo muestra una cabecera y un pie de página:

Añadir contenido estático a la página de inicio

Además de mostrar los resultados de las consultas personalizadas, la página de inicio mostrará el contenido de la página estática "Inicio". Para agregar esto al archivo de plantilla, inserta el siguiente código para reemplazar la línea '// front page content goes here':

1

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

2

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

3

		<section class="entry-content full-width">

4

			<?php the_content(); ?>

5

		</section><!-- .entry-content -->

6

	</article><!-- #post-## -->

7

?>

Este es el bucle estándar. WordPress lo usará para mostrar el contenido de la página estática que has registrado como página de inicio. Tu página de inicio ahora contendrá el contenido estático:

La primera consulta personalizada con WP_Query

Para las consultas personalizadas, usarás la clase WP_Query. Esto te permite configurar consultas personalizadas y ejecutar un bucle basado en cada una de ellas para mostrar entradas.

El uso de WP_Query es una práctica mucho mejor que usar la función query_posts, ya que esta última restablece completamente la consulta principal y puede causar problemas de rendimiento. WP_Query toma un conjunto de parámetros que definen la consulta que deseas ejecutar. Algunos ejemplos de los parámetros que podrías especificar incluyen (aunque no se limitan a ellos):

• post_type - entradas, páginas, archivos adjuntos o un tipo de entrada personalizada
• categoría
• etiqueta
• término o términos de taxonomía
• posts_per_page - el número de entradas que se mostrarán
• order - ASC o DESC
• orderby - puedes ordenar por fecha, nombre, autor, menu_order (orden de menú) o muchos más parámetros
• ... y muchos más

Para obtener más información sobre los parámetros que puedes usar con WP_Query, consulta WP_Query en el Códice de WordPress. Para utilizar WP_Query, inserta el código siguiente:

1

<?php

2

$args = array(

3

	// query arguments here

4

)

5

$query = new WP_Query( $args );

6

while ( $query->have_posts() ) :

7

	$query->the_post();

8

	// post content to display here

9

endwhile;

10

?>

En tu página de inicio quieres enumerar las últimas ocho entradas dentro de la categoría "Updates". Para ello, agrega el código siguiente entre la consulta principal y la llamada al pie de página:

1

<section class="front-page archives clear">

2

	<section class="archive">

3

		<h2><a href="<?php bloginfo( 'url' ); ?>/category/updates/">Updates</a></h2>

4

		<ul class="updates">

5

			<?php $query = new WP_Query( array(

6

				'post_type' => 'post',

7

				'category_name' => 'Updates',

8

				'posts_per_page' => 8

9

			) );

10

			while ($query->have_posts()) : $query->the_post(); ?>

11

			<li class="home update"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php the_date( 'j F' ); ?></a></li>

12

			<?php endwhile; ?>

13

		</ul>

14

	</section>

15

</section>

Esto crea un elemento <section> para contener tu listado y abre el listado con un enlace al archivo de categorías dentro de una etiqueta <h2>. A continuación, define los argumentos de WP_Query y ejecuta el bucle en función de esa consulta. Las clases adicionales se pueden usar para aplicar estilo a cada listado individual.

La segunda consulta personalizada

La segunda consulta personalizada es casi idéntica a la primera, solo consulta entradas de una categoría diferente. Añade lo siguiente después de la primera consulta e inmediatamente antes de la segunda etiqueta de cierre </section>:

1

<section class="archive">

2

	<h2><a href="<?php bloginfo( 'url' ); ?>/category/in-depth/">In Depth</a></h2>

3

	<ul class="updates">

4

		<?php $query = new WP_Query( array(

5

			'post_type' => 'post',

6

			'category_name' => 'In Depth',

7

			'posts_per_page' => 8

8

		) );

9

		while ($query->have_posts()) : $query->the_post(); ?>

10

		<li class="home in-depth"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php the_date( 'j F' ); ?></a></li>

11

		<?php endwhile; ?>

12

	</ul>

13

</section>

Esto añade una segunda lista de entradas para aquellas que pertenezcan a la categoría "In Detail".

La tercera consulta personalizada: consulta de un tipo de entrada personalizada

La tercera y última consulta no consulta las entradas estándar, sino el tipo de entrada personalizada 'animal' que registraste antes de crear el archivo de plantilla. Después de la segunda consulta personalizada, agrega lo siguiente:

1

<section class="archive">

2

	<h2><a href="<?php echo get_post_type_archive_link( 'Animals' ); ?>">Our favourite animals</a></h2>

3

	<ul class="updates">

4

		<?php $query = new WP_Query( array(

5

			'post_type' => 'animal',

6

			'posts_per_page' => 8

7

		) );

8

		while ( $query->have_posts() ) : $query->the_post(); ?>

9

		<li class="home in-depth"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

10

		<?php endwhile; ?>

11

	</ul>

12

</section>

Ahora tienes todas las consultas en su sitio y se muestran en la página de inicio:

Estilo de los listados

El último paso consiste en añadir un poco de estilo. Por el momento los listados están uno debajo del otro, con muy poco espaciado o decoración.

En este paso añadirás un estilo sencillo que mejorará esto. En la hoja de estilos del tema, agrega lo siguiente:

1

.clear {

2

	float: none;

3

	clear: both;

4

}

5

.home section.archive {

6

	width: 31%;

7

	margin: 10px 1%;

8

	border-top: 1px solid #222;

9

	float: left;

10

}

11

.home section.archive ul li {

12

	line-height: 1.4em;

13

}

Esto garantizará que los listados se desplacen bajo el contenido principal y los colocará uno al lado del otro. También añade cierto espaciado entre los elementos de cada lista:

Resumen

Ahora tienes una página de inicio personalizada que incluye el contenido estático de la página, además de tres consultas personalizadas que enumeran diferentes tipos de contenido. Podrías adaptar este enfoque a diferentes requisitos. Por ejemplo:

• Para una página de inicio que solo muestre archivos y no haya contenido estático, simplemente elimina el primer bucle
• Para enumerar el tipo de entradas "animals" de una manera diferente, puedes especificar taxonomías en tus argumentos para WP_Query
• Podrías añadir o cambiar el contenido que se muestra para cada entrada, por ejemplo, utilizando the_thumbnail() para mostrar miniaturas de entrada (o imágenes destacadas)
• Podrías agregar consultas personalizadas a la barra lateral o a la plantilla de pie de página para mostrarlas en todas las páginas

Recursos

Algunos recursos útiles:

• Página del Codex sobre la clase WP_Query: http://codex.wordpress.org/Class_Reference/WP_Query
• Creación de un archivo de plantilla para la página de inicio: http://codex.wordpress.org/Template_Hierarchy#Front_Page_display
• Registro de tipos de entradas personalizadas: http://codex.wordpress.org/Function_Reference/register_post_type