Mostrar una lista de páginas hijas en una página de WordPress

Si necesitas listar las páginas hijas que dependen de cualquier página de tu sitio web, hoy vemos cómo hacerlo a través de este sencillo tutorial.

Esta es una pregunta, que ya me he encontrado en varias ocasiones cuando alguno de vosotros me escribe al formulario de contacto, es un clásico.

Veamos un ejemplo para entenderlo mejor:

Imagina que quieres montar una academia online. Una de las primeras primeras decisiones que tendrás que tomar, es cómo vas a organizar los distintos cursos que crees y sus respectivas lecciones.

Aunque como siempre, no hay un sólo camino para llegar al mismo resultado, siempre puedes empezar por la aproximación más Lean, que es a través de páginas y páginas hijo. Antes de tener que instalar algún plugin como Sensei o Learndash, si sólo necesitas ordenar tus cursos y lecciones, el código que veremos hoy te puede ayudar a avanzar en tu proyecto

Dicho de otro modo, si lo que estás buscando es cómo listar las distintas páginas hijas que están contenidas dentro de una página padre, a continuación encontrarás los snippets que te permitirán tener un resultado similar al siguiente:

Como puedes ver, en el pantallazo anterior, he creado la siguiente estructura de páginas:

• Cursos
  • Curso 01
    • Lección 01
    • Lección 02
    • Lección 03
    • Lección 04
    • Lección 05

Esta estructura de lecciones (páginas hijas), se muestran, tanto en la página padre (Curso 01), como en todas las lecciones que componen el curso, de la siguiente forma:

Bien, para añadir esta nueva funcionalidad a tu sitio web, sólo tienes que seguir estos pasos:

¿Cómo listar las páginas hijas de una página de WordPress?

Paso 1. Creación del shortcode

Para crear el shortcode necesario para que aparezcan las página hijas de la página en la que inserte dicho shortcode sólo tienes que añadir el siguiente código en tu plugin de funciones:

<?php

function mk_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="lecciones">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('lecciones', 'mk_list_child_pages');

El código anterior, primero verifica si una página tiene padre o si la página en sí misma es una página padre.

Si es una página padre, entonces muestra las páginas hijas asociadas con ella. Si es una página hija, entonces muestra todas las demás páginas hijas de su página padre.

Por último, si solo es una página sin páginas hijas, entonces el código simplemente no hace nada.

En la última línea del código, se añade un shortcode, para que puedas mostrar fácilmente las páginas hijas sin tener que modificar tus plantillas de página.

Para mostrar las páginas hijas, simplemente añade el siguiente shortcode, tanto en la página padre como en las páginas hijas en la que quieras mostrar el listado:

[lecciones]

Paso 2. Creación de los estilos

Si has llegado hasta aquí y has aplicado el shortcode anterior, habrás comprobado que las páginas hijas de tu página se muestran en un listado de viñetas.

Si quieres que las lecciones de tu curso tengan un mejor aspecto, solo tienes que añadir el siguiente código en tu archivo style.css.

/* Lecciones */

ul.lecciones {
	margin: 0px;
	margin-top: 30px;
	margin-bottom: 30px;
}

ul.lecciones li {
	list-style-type: none;
	background-color: #f9f9f9;
	margin: 5px;
	padding: 5px 5px 5px 15px;
}

ul.lecciones li:hover {
	background-color: #f1f1f1;

}

ul.lecciones li:first-child {
	border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border: 0px solid #000000;

}

ul.lecciones li:last-child {
	border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border: 0px solid #000000;
}


ul.lecciones a {
	margin: 0;
	border: none;
}

Al introducir este snippet en tu hoja de estilo, conseguirás que tus páginas hijas se muestren con un aspecto similar al que veías en el primer pantallazo de este tutorial.

Resumiendo…

Como ves, no es necesario instalar ningún plugin para mostrar las páginas hijas de una página de WordPress. Bastan unas pocas líneas de código en tu plugin de funciones para resolverlo de forma fácil y rápida. Además, haciéndolo así, cada vez aprenderás más sobre tu instalación de WordPress y el funcionamiento de tu proyecto online.

Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.

Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉