• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez

  • ¿Eres agencia?
  • Quién soy
  • Servicios WordPress
    • Mantenimiento
    • Maquetación & Desarrollo
    • Soporte técnico
  • Portfolio
  • Blog
  • Presupuestos
Estás en: Inicio / Publicaciones / Crear el Archive Page de nuestro Custom Post (sin plugins)

Crear el Archive Page de nuestro Custom Post (sin plugins)

El 26 de abril de 2019 por dani.sanchez

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! 😉

Publicado en: Publicaciones, Tutoriales, WordPress Etiquetado como: custom post, desarrollo web, php, programación web, publicaciones, tutoriales, wordpress

¿Quiéres invitarme a un café?

Si te has fijado en este blog no hay ni rastro de publicidad, todo el contenido publicado lo hago de forma artruista al igual que yo recurro a otros sitios cuando necesito algo. Pero si te he servido de ayuda y quieres agradecérmelo, puedes hacer una pequeña donación (el importe que quieras):

Entradas similares

  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»
  • Portátiles reacondicionados, ¿mejor que uno nuevo?

Barra lateral principal

Autor

Dani Sánchez

logo mastodon @danisanchez

Entradas recientes

  • Iniciar sesión en nuestros VPS mediante SSH Keys
  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»

Comentarios recientes

  1. Brandon Portes en Taller de verano de WooCommerce #1
  2. Sebastian en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  3. Rigol en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora
  4. dani.sanchez en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  5. rikylinux en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress
Medium banner says Support Inkscape
Banner pie de página

Maquetación web, landings, blogs y tiendas online
cuidando hasta el mínimo detalle

Si necesitas que desarrolle tu proyecto web ponte en contacto conmigo.

Contacto
  • Mastodon
  • YouTube
  • LinkedIn

Alojado con energía 100% verde

Dani Sánchez © 2025 · Política de privacidad · Política de cookies