Añadir lista de enlaces a subpáginas o páginas hermanas en WordPress

    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

    1. 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 filtro the_content.
    2. Variable Global $post: Utilizamos la variable global $post para acceder a los datos de la página actual.
    3. 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 del post_parent).
    • Si no es una subpágina (es una página padre), obtenemos las subpáginas (child_of del post->ID).
    1. 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.
    1. Retorno del Contenido:
    • Si hay subpáginas o páginas hermanas, las añade al contenido original.
    • Si no, retorna el contenido sin modificaciones.
    1. Filtro add_filter('the_content', 'eg_list_subpages'): Añade la función al filtro the_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.

    1. Crear el shortcode como se mostró anteriormente.
    2. En Elementor, añadir un widget de shortcode donde desees que aparezca la lista.
    3. 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.