Hola amigo developer, hoy te traigo un post interesante que seguramente vas a utilizar en la construcción de theme con WordPress.
He visto varios tutoriales en español e ingles, que muestran como mostrar varias paginas hijas y nietas en un theme de WordPress; pero muchas veces deseas que esto se haga con un mayor grado de profundidad. Ejemplo que las paginas hijas, muestren a sus paginas hijas y a la vez estas a sus hijas en cada pagina que navegamos; así recursivamente.
Problemas que se quiere resolver
Queremos que dinámicamente una pagina que estemos visualizando actualmente, muestre todas sus paginas hijas directas y así sucesivamente; en el árbol de jerarquía que se puede definir en el dashboard de WordPress.
Optimización del código encontrado en una sola función
Estuve investigando y encontré una buena fuente de este tema, en el mismo foro de wordpress.org que pondré aquí; por si quieres darle una ojeada 👀. Pero el código esta un poco mezclado, en las directrices para construir templates nativos de WordPress; te obligan a hacerlo. Es por esto que utilizo un child theme o mi propio plugin para generar un shortcode y poder ejecutarlo posteriormente, pero esa es otra historia que abordaremos en otro post 😉.
public function listChildPages(): string
{
$string = '';
$current_pageId = get_the_ID();
// Obtenemos la pagina padre de la pagina actual, si no le asignamos 0.
$parent_pageId = wp_get_post_parent_id($current_pageId) ?? 0;
// Obtenemos las paginas hijas y nietas de la pagina actual.
$pages = get_pages([
'sort_column' => 'menu_order',
'child_of' => $current_pageId
]);
// Obtenemos las paginas hijas y nietas de la pagina padre, si es que existe un padre.
if (is_page($current_pageId) && $parent_pageId) {
$pages = get_pages([
'sort_column' => 'menu_order',
'child_of' => $parent_pageId
]);
}
// Filtramos las paginas hijas directas de nuestra pagina actual.
$children = get_page_children($current_pageId, $pages);
// Si hay hijos, se apertura una etiqueta de navegación
if ($children) {
$string = '<nav class="pages-cluster"><div class="columns">';
}
foreach ($children as $child) {
// Si la pagina actual es padre de alguna pagina hija, se lista esa pagina.
// Con la intencion de mostrar los hijos directos y no las paginas nietas
if ($child->post_parent === $current_pageId) {
$string .= "<a class='is-family-secondary' href='" . get_permalink($child->ID) . "'>{$child->post_title}</a>";
}
}
// Se cierra la fila de paginas hijas
if (!strlen($string)) {
$string .= '</div></nav>';
}
return $string;
}
Mostrando el posible resultado que deberías obtener
Posteriormente puedes ejecutar el shortcode en tu template con do_shortcode, como indica el tutorial que estoy dejando aquí 👍; tendrás un resultado muy similar a la imagen siguiente, claro dependiente de tu maquetación CSS. Vemos como lucen las paginas hijas, de la pagina "Trabajos en los que ayudamos".
Ahora podemos ver como quedaron las paginas nietas de la pagina "Trabajos en los que ayudamos".
