Cómo mostrar una lista de páginas secundarias para una página principal en WordPress

Recientemente, uno de nuestros lectores nos preguntó cómo mostrar las páginas secundarias de una página de WordPress.

Si organiza su sitio web de WordPress con páginas principales y secundarias, es posible que desee mostrar sus páginas secundarias o subpáginas en la página principal principal. Es posible que también desee mostrar la página principal en cada subpágina para facilitar la navegación.

En este artículo, le mostraremos cómo mostrar fácilmente una lista de páginas secundarias para una página principal en WordPress.

Visualización de una lista de páginas secundarias para una página principal en WordPress

¿Cuándo necesita mostrar una lista de páginas secundarias?

WordPress viene con dos tipos de publicaciones predeterminadas llamadas publicaciones y páginas. Las publicaciones son contenido de blog y, por lo general, se organizan con categorías y etiquetas.

Las páginas son contenido único o independiente que son perennes, como la página “Acerca de nosotros” o la página “Contáctenos”.

En WordPress, las páginas pueden ser jerárquicas, lo que significa que puede organizarlas con páginas principales y secundarias.

Por ejemplo, es posible que desee crear una página de producto con páginas secundarias para Funciones, Precios y Soporte.

Para crear una página secundaria, siga nuestra guía sobre cómo crear una página secundaria en WordPress.

Una vez que haya creado sus páginas principal y secundaria, es posible que desee enumerar las páginas secundarias en la página principal principal.

Ahora, una forma fácil de hacer esto es editar manualmente la página principal y agregar una lista de enlaces individualmente.

Agregar manualmente enlaces a páginas secundarias

Sin embargo, deberá editar manualmente la página principal cada vez que agregue o elimine una página secundaria. ¿No sería mejor si pudiera crear una página secundaria y aparecería automáticamente como un enlace en la página principal?

Dicho esto, echemos un vistazo a otras formas dinámicas de mostrar rápidamente una lista de páginas secundarias en la página principal en WordPress.

Método 1. Mostrar páginas secundarias en la página principal mediante un complemento

Este método es más sencillo y recomendado para todos los usuarios.

Primero, debe instalar y activar el complemento de lista de páginas. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe editar la página principal y simplemente agregar el siguiente código abreviado donde desea mostrar la lista de páginas secundarias.

[subpages]

Ahora puede guardar su página y obtener una vista previa en una nueva pestaña del navegador. Notará que muestra una lista simple con viñetas de todas las páginas secundarias.

Lista simple de enlaces de páginas secundarias

Si lo desea, puede agregar CSS personalizado para cambiar la apariencia de la lista. Aquí hay algunos ejemplos de CSS que puede usar como punto de partida.

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Después de aplicar su CSS personalizado, puede obtener una vista previa de la página principal. Así es como se veía en nuestro sitio web de prueba de WordPress.

Lista de páginas secundarias con CSS

El complemento proporciona una serie de parámetros de código abreviado que le permiten establecer la profundidad, excluir páginas, la cantidad de elementos y más. Para obtener más información, consulte la página del complemento para obtener documentación detallada.

Método 2. Enumere las páginas secundarias de una página principal mediante el código

Este método es un poco avanzado y requiere que agregue código a su sitio web de WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.

Para enumerar las páginas secundarias en una página principal, debe agregar el siguiente código en un complemento específico del sitio, o en el archivo functions.php de su tema:

function wpb_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 = '
    ' . $childpages . '
'; } return $string; } add_shortcode('wpb_childpages', 'wpb_list_child_pages');

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

Si es una página principal, muestra las páginas secundarias asociadas a ella. Si es una página secundaria, muestra todas las demás páginas secundarias de su página principal.

Por último, si esta es solo una página sin una página secundaria o principal, entonces el código simplemente no hará nada. En la última línea del código, hemos agregado un código corto, para que pueda mostrar fácilmente las páginas secundarias sin modificar las plantillas de su página.

Para mostrar las páginas secundarias, simplemente agregue el siguiente código abreviado en una página o widget de texto en la barra lateral:

[wpb_childpages]

No olvide guardar los cambios y obtener una vista previa de ellos en una pestaña del navegador. Así es como aparece en nuestro sitio de prueba.

Lista de enlaces simple

Ahora puede diseñar esta lista de páginas usando CSS personalizado. Aquí hay un código CSS de muestra que puede usar como punto de partida.

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Método 3. Mostrar páginas secundarias de forma dinámica sin ningún código abreviado

El uso de códigos cortos es conveniente, pero el problema con ellos es que tendrá que agregar códigos cortos en todas las páginas que tienen páginas principales o secundarias.

Puede terminar teniendo códigos cortos en muchas páginas y, a veces, incluso puede olvidarse de agregarlos.

Un mejor enfoque sería editar el archivo de plantilla de página en su tema, para que pueda mostrar automáticamente las páginas secundarias.

Para hacer eso, necesita editar la plantilla page.php principal o crear una plantilla de página personalizada en su tema.

Puede editar su tema principal, pero esos cambios desaparecerán si cambia o actualiza su tema. Por eso sería mejor si crea un tema hijo y luego realiza los cambios en el tema hijo.

En su archivo de plantilla de página, debe agregar esta línea de código donde desea mostrar las páginas secundarias.


Eso es todo. Su tema ahora detectará automáticamente las páginas secundarias y las mostrará en una lista simple.

Puede personalizar los estilos con CSS y formato. A continuación, se muestra un ejemplo de cómo el sitio web de OptinMonster muestra la página principal y las subpáginas:

Ejemplo de subpáginas de OptinMonster

Esperamos que este artículo le haya ayudado a enumerar las páginas secundarias de una página principal en WordPress. Es posible que también desee ver nuestra guía sobre las páginas más importantes para crear en un nuevo sitio web de WordPress, y nuestra comparación de los mejores creadores de páginas de WordPress de arrastrar y soltar para crear diseños personalizados sin ningún código.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.