Este tutorial te guiará paso a paso para añadir un snippet de código en tu tema de WordPress que muestre una lista de enlaces a las subpáginas cuando estás en una página padre, o a las «páginas hermanas» cuando estás en una página hija. Este código se puede adaptar para usarlo como shortcode, widget o en plantillas de Elementor.
Introducción
La función wp_list_pages
es fundamental en este snippet. Esta función es un wrapper de WP_Query
y nos devuelve una lista HTML con los enlaces a las páginas. Aquí, aprenderás cómo integrarla en tu sitio y cómo adaptarla a diferentes necesidades.
Código Base
El snippet básico que añadiremos al final del contenido de cada página es el siguiente:
/* Mostrar Subpáginas o páginas hermanas
Autor: Elías Gómez
URL: EliasGomez.pro
*/
function eg_list_subpages($content) {
global $post;
if( is_page() && $post->post_parent ) {
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
} else {
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}
if ($children) {
return $content."<ul>".$children."</ul>";
} else{
return $content;
}
}
add_filter('the_content', 'eg_list_subpages');
Explicación del Código
- Función
eg_list_subpages($content)
: Esta función se ejecuta cada vez que se muestra el contenido de una página al engancharse al filtrothe_content
. - Variable Global
$post
: Utilizamos la variable global$post
para acceder a los datos de la página actual. - Condición
if( is_page() && $post->post_parent )
: Verificamos si la página actual es una subpágina.
- Si es una subpágina, obtenemos las páginas hermanas (
child_of
delpost_parent
). - Si no es una subpágina (es una página padre), obtenemos las subpáginas (
child_of
delpost->ID
).
wp_list_pages
: Esta función genera una lista de páginas.
title_li=&child_of=...&echo=0
:title_li=
: No muestra un título.child_of=...
: ID de la página padre.echo=0
: No imprime directamente, sino que devuelve la lista como string.
- Retorno del Contenido:
- Si hay subpáginas o páginas hermanas, las añade al contenido original.
- Si no, retorna el contenido sin modificaciones.
- Filtro
add_filter('the_content', 'eg_list_subpages')
: Añade la función al filtrothe_content
, para que se ejecute cuando se muestra el contenido de la página.
Adaptación del Snippet
Usar el Código como Shortcode
Podemos convertir esta función en un shortcode para usarlo en cualquier parte del contenido, widgets o plantillas.
function eg_list_subpages_shortcode($atts) {
global $post;
$children = '';
if( is_page() && $post->post_parent ) {
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
} else {
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}
if ($children) {
return "<ul>".$children."</ul>";
} else{
return '';
}
}
add_shortcode('list_subpages', 'eg_list_subpages_shortcode');
Ahora, puedes usar [list_subpages]
en cualquier parte de tu contenido para mostrar las subpáginas o páginas hermanas.
Añadir el Código a un Widget
Si deseas añadir este código a un widget, puedes hacerlo utilizando el siguiente snippet:
class Subpages_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'subpages_widget',
__('Subpages Widget', 'text_domain'),
array( 'description' => __( 'Displays a list of subpages or sibling pages.', 'text_domain' ), )
);
}
public function widget( $args, $instance ) {
global $post;
$children = '';
if( is_page() && $post->post_parent ) {
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
} else {
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}
if ($children) {
echo $args['before_widget'];
echo $args['before_title'] . apply_filters( 'widget_title', 'Subpages' ) . $args['after_title'];
echo "<ul>".$children."</ul>";
echo $args['after_widget'];
}
}
}
function register_subpages_widget() {
register_widget( 'Subpages_Widget' );
}
add_action( 'widgets_init', 'register_subpages_widget' );
Integración en Plantillas de Elementor
Para usar este código en una plantilla de Elementor, puedes crear un shortcode como se mostró anteriormente y luego utilizar el widget de shortcode de Elementor.
- Crear el shortcode como se mostró anteriormente.
- En Elementor, añadir un widget de shortcode donde desees que aparezca la lista.
- Introducir el shortcode
[list_subpages]
en el widget de shortcode.
Variaciones del Código
Mostrar Solo Subpáginas
Si deseas mostrar solo las subpáginas, independientemente de si la página actual es una subpágina o no, puedes modificar la función de esta manera:
function eg_list_only_subpages($content) {
global $post;
if( is_page() && ! $post->post_parent ) {
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) {
return $content."<ul>".$children."</ul>";
}
}
return $content;
}
add_filter('the_content', 'eg_list_only_subpages');
Mostrar Páginas Hermanas
Para mostrar solo las páginas hermanas si la página actual es una subpágina, puedes modificar la función de esta manera:
function eg_list_sibling_pages($content) {
global $post;
if( is_page() && $post->post_parent ) {
$siblings = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
if ($siblings) {
return $content."<ul>".$siblings."</ul>";
}
}
return $content;
}
add_filter('the_content', 'eg_list_sibling_pages');
Conclusión
Este tutorial ha mostrado cómo añadir un snippet de código en tu tema de WordPress para mostrar subpáginas o páginas hermanas, y cómo adaptarlo para usarlo como shortcode, widget o en plantillas de Elementor. La clave es la función wp_list_pages
, que facilita la creación de listas de páginas en WordPress. Con estas adaptaciones, puedes mostrar dinámicamente las relaciones entre páginas en tu sitio web.