Seguimos con esta serie de artículos destinados a la creación de nuestros propios tipos de contenido en WordPress. Hasta ahora hemos visto cómo crear un custom post, asignarle taxonomías y campos personalizados y hasta creamos un template para cargar toda esta información.
Ahora lo que nos falta es crear la página archivo (archive page) para listar nuestro custom post, a modo de listado de entradas de WordPress.
Para ello, al igual que hicimos con el template para el custom post (single-vehiculos.php), necesitamos crear un nuevo archivo (page.php) al que llamaremos por ejemplo page-todos-los-vehiculos.php y guardaremos en el directorio principal del tema activo.
page.php es el archivo que contiene la estructura básica para una página interna de WordPress y al igual que hicimos con single.php, vamos a aprovechar el codigo escrito para copiarlo en nuestro archivo page-todos-los-vehiculos.php y eliminaremos lo que no necesitamos, dejando únicamente el inicio y final del loop.
Dentro del loop vamos a crear la consulta que buscará todas entradas de tipo vehículo.
La esctructura de la consulta se define:
$args = array(
'post_type' => 'vehiculos',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
$consulta_vehiculos = new WP_Query($args);Primero declaramos una variable $args (argumentos) de tipo array donde pasamos los argumentos de la consulta. Los argumentos más básicos que vamos a definir son: el tipo de post al que hacemos referencia (vehículos), el número de resultados por página (-1 devuelve todos los resultados), el orden (por fecha) y el recorrido del orden (ascendente ASC o descendente DESC).
Existen muchos otros argumentos que ponemos incorporar a la consulta para complicarla todo lo que deseemos, pero de momento vamos a empezar por lo más básico.
Despues generamos una nueva consulta new WP_Query() pasándole los argumentos definidos anteriormente: new WP_Query($args).
A continuación vamos a mostrar los datos recogidos en la consulta creando nuestro propio loop. La síntaxis sería la siguiente:
while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
//Código
endwhile; wp_reset_postdata();
La forma de declarar nuestro loop personalizado es muy similar al que toma WordPress para el loop principal, con la diferencia de que especificamos la variable donde tenemos nuestra consulta:
while($consulta_vehiculos->have_posts())
$consulta_vehiculos->the_post()
Lo que se traduciría en lenguaje comprensible como: «Mientras existan posts de vehículos, muestrame el post de vehículo«.
El final del loop finaliza con endwhile;
Además, para los loops personalizados añadimos la función wp_reset_postdata() para «limpiar» los datos de la consulta una vez mostrados y que no interfieran con otros loops que podamos definir en otras partes.
Para asociar este nuevo archivo con una página interna de WordPress que podamos, por ejemplo añadir al menú principal, crearemos una nueva página y utilizaremos como slug (enlace permanente) el nombre que le hayamos dado al archivo del listado, es decir si hemos llamado al archivo page-todos-los-vehiculos.php utilizaremos como slug en la nueva página «todos-los-vehiculos«.
Como siempre, actualizamos los enlaces permanentes de WordPress en Ajustes – Enlaces Permanentes – Guardar Cambios y en este momento quedará asociado el nuevo archivo page-todos-los-vehiculos.php con la página interna de WordPress Vehículos.
Para probar nuestra nueva página, vamos a incluir en loop una llamada a la función the_title(), que deberá devolvernos todos los títulos de los post de tipo vehículo que haya en la base de datos:
while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
the_title();
endwhile; wp_reset_postdata();Si visualizamos la página Vehículos, veremos que mostrará el título del post que hay actualmente creado de tipo vehículo:
Vamos a añadir algunos vehículos más para poder jugar con los listados de resultados:
Para la página de archivo de vehículos, tomaremos algunos datos para generar el listado, a parte del título, tomaremos la imagen destacada y una parte del contenido. Para ello, en lugar de llamar a la función the_content(), llamaremos a la función the_excerpt(), que toma solamente una parte del contenido.
while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
the_post_thumbnail();
the_title('<h2>','</h2>');
the_excerpt();
endwhile; wp_reset_postdata();Obtendríamos como resultado:
Por supuesto ya dependería de nosotros darle un poco de formato CSS, metiendo cada apartado en su correspondiente DIV, ajustando el tamaño de las miniaturas, etc. Detalles de diseño que no vamos a ver en este artículo, pues se extendería demasiado y el objetivo principal es el de generar el listado de entradas.
En siguientes artículos veremos cómo paginar este listado, para cuando tengamos un número importante de entradas.
Nos vemos en el siguiente post! 😉
