Recientemente, uno de nuestros lectores nos preguntó cómo mostrar las páginas secundarias de una página de WordPress. Es una pregunta que recibimos con bastante frecuencia en WPBeginner, y resalta una necesidad común para mejorar la navegación del sitio web y la experiencia del usuario.
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. Esto ayuda a los usuarios a ver fácilmente toda la información disponible dentro de una sección específica y a navegar rápidamente a subtemas relevantes.
También puede que desee mostrar el enlace de la página principal en cada subpágina para facilitar la navegación, creando un efecto similar a las migas de pan. Esta navegación simplificada evita que los usuarios se pierdan en las profundidades de su sitio y mejora su experiencia de navegación general.
En este artículo, le mostraremos cómo mostrar fácilmente 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 contenido predeterminados llamados publicaciones y páginas. Las publicaciones son contenido de blog y generalmente se organizan con categorías y etiquetas.
Las páginas son contenido único o independiente que es perenne, como una página de 'Acerca de nosotros' o 'Contáctenos', por ejemplo.
En WordPress, las páginas pueden ser jerárquicas, lo que significa que puedes organizarlas con páginas principales y secundarias. Por ejemplo, podrías querer crear una página de Producto con páginas secundarias para Características, Precios y Soporte.
Para crear una página secundaria, sigue nuestra guía sobre cómo crear una página secundaria en WordPress.
Después de haber creado tus páginas principales y secundarias, es posible que desees listar las páginas secundarias en la página principal.
Ahora, una forma fácil de hacer esto es editando manualmente la página principal y agregar una lista de enlaces individualmente.
Sin embargo, necesitarás editar manualmente la página principal cada vez que agregues o elimines una página secundaria.
¿No sería mejor si pudieras simplemente crear una página secundaria y que apareciera automáticamente como un enlace en la página principal?
Dicho esto, veamos algunas otras formas dinámicas de mostrar rápidamente una lista de páginas secundarias en la página principal en WordPress. Te mostraremos tres métodos, para que puedas elegir el que mejor te convenga:
- Método 1. Mostrar páginas secundarias en la página principal usando un plugin
- Método 2. Listar páginas secundarias de una página principal usando código
- Método 3. Mostrar páginas secundarias dinámicamente sin ningún shortcode
Método 1. Mostrar páginas secundarias en la página principal usando un plugin
Este método es la forma más fácil de mostrar páginas secundarias en una página principal, y se recomienda para todos los usuarios.
Primero, necesitas instalar y activar el plugin Page-list. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarse, necesitas editar la página principal y simplemente agregar el siguiente shortcode donde quieras mostrar la lista de páginas secundarias.
[subpages]
Ahora puedes guardar tu página y previsualizarla en una nueva pestaña del navegador. Notarás que muestra una simple lista con viñetas de todas las páginas secundarias.
Si quieres, puedes agregar algo de CSS personalizado para cambiar la apariencia de la lista.
Aquí tienes algunos ejemplos de CSS que puedes 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 tu CSS personalizado, puedes previsualizar la página principal.
Así es como se veía en nuestro sitio web de WordPress de prueba:
El plugin proporciona un montón de parámetros de shortcode que te permiten establecer la profundidad, excluir páginas, el número de elementos y más.
Para más detalles, por favor consulta la página del plugin para obtener documentación detallada.
Método 2. Listar páginas secundarias de una página principal usando código
Este método es un poco avanzado y requiere que agregues código a tu sitio web de WordPress. Si no lo has hecho antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.
Para listar las páginas secundarias de una página principal, necesitas agregar el siguiente código en un plugin de fragmentos de código o en el archivo functions.php de tu 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 = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
En WPBeginner, siempre recomendamos agregar código en WordPress con el plugin WPCode.
WPCode te permite agregar fácilmente código personalizado sin editar los archivos de tu tema, por lo que no tienes que preocuparte por romper tu sitio.
Primero, necesitas instalar y activar el plugin gratuito WPCode. Para obtener instrucciones paso a paso, consulta esta guía sobre cómo instalar un plugin de WordPress.
Una vez que el plugin esté activado, navega a Fragmentos de código » Agregar fragmento desde tu panel de WordPress.
Desde ahí, coloca el cursor sobre la opción ‘Add Your Custom Code (New Snippet)’ y haz clic en el botón ‘Add Custom Snippet’.
Luego, debes elegir ‘Fragmento de PHP’ como tipo de código de la lista de opciones que aparecen en la pantalla.
A continuación, agrega un título para tu fragmento, que puede ser cualquier cosa para ayudarte a recordar para qué es el código.
Ahora, simplemente pega el código de arriba en el cuadro ‘Code Preview’.
Después de eso, simplemente cambia el interruptor de ‘Inactive’ a ‘Active’ y haz clic en el botón ‘Save Snippet’ en la parte superior de la página.
Este código primero verifica si una página tiene una página principal o si la página en sí es una página principal.
Si es una página principal, entonces muestra las páginas secundarias asociadas a ella. Si es una página secundaria, entonces muestra todas las demás páginas secundarias de su página principal.
Por último, si esta es solo una página sin página secundaria o principal, el código simplemente no hará nada. En la última línea del código, hemos agregado un shortcode, para que puedas mostrar fácilmente las páginas secundarias sin modificar las plantillas de tu página.
Para mostrar páginas secundarias, simplemente agrega el siguiente shortcode en una página o widget de texto en la barra lateral:
[wpb_childpages]
No olvides guardar tus cambios y previsualizarlos en una pestaña del navegador. Así es como aparece en nuestro sitio de prueba.
Ahora puedes estilizar esta lista de páginas usando algo de CSS personalizado.
Aquí tienes un código CSS de ejemplo que puedes 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 dinámicamente sin ningún shortcode
Usar shortcodes es conveniente, pero el problema con ellos es que tendrás que agregar shortcodes en todas las páginas que tengan páginas principales o secundarias.
Puedes terminar teniendo shortcodes en muchas páginas, y a veces incluso puedes olvidar agregarlo.
Un mejor enfoque sería editar el archivo de plantilla de página en tu tema, para que pueda mostrar automáticamente las páginas secundarias.
Para hacer eso, necesitas editar la plantilla principal page.php, o crear una plantilla de página personalizada en tu tema.
Puedes editar tu tema principal, pero esos cambios desaparecerán si cambias o actualizas tu tema. Por eso sería mejor si crearas un tema hijo y luego hicieras tus cambios en el tema hijo.
En tu archivo de plantilla de página, necesitas agregar esta línea de código donde quieras mostrar las páginas hijas.
<?php wpb_list_child_pages(); ?>
Eso es todo. Tu tema ahora detectará automáticamente las páginas hijas y las mostrará en una lista simple.
Puedes personalizar los estilos con CSS y formato.
Aquí tienes un ejemplo de cómo el sitio web de OptinMonster muestra la página principal y las subpáginas:
Esperamos que este artículo te haya ayudado a listar las páginas secundarias de una página principal en WordPress. También te puede interesar 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 constructores de páginas de WordPress de arrastrar y soltar para crear diseños personalizados sin código.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Philip
Hola, esto funciona, excepto que la principal también se muestra. ¿Cómo muestro solo las páginas secundarias? Gracias.
Soporte de WPBeginner
El método más sencillo para lo que parece que buscas sería no tener contenido en la página principal y solo tener tu contenido en las páginas secundarias.
Administrador
Sachit Shori
Muchísimas gracias. Me salvaste.
Soporte de WPBeginner
You’re welcome
Administrador
Emmanuel Husseni
Hola Wpbeginner,
Por favor, ¿cómo puedo ordenar todas las páginas secundarias alfabéticamente en la página principal? He seguido todos los pasos, pero las subpáginas se muestran al azar en la página principal.
Esperando respuesta. ....Gracias
Soporte de WPBeginner
Cambiarías las dos instancias de menu_order en nuestro código por: post_title
Administrador
Iyke O.
¿Cómo hago que la lista sea colapsable en la barra lateral?
Soporte de WPBeginner
Para que sea colapsable, podrías usar un plugin de acordeón, como uno de los de nuestro artículo aquí: https://www.wpbeginner.com/showcase/best-wordpress-accordion-plugins/
Administrador
Stacie
Fácil de seguir y cumplió su función. ¡Muchas gracias por compartir!
Soporte de WPBeginner
You’re welcome, glad our content could be helpful
Administrador
Aaro
¿Puedo asignar una clase CSS a esta función? Para que cuando haga cambios CSS en los elementos ul, no afecte a otros ul del sitio.
¿O alguna otra solución sencilla para esto?
Soporte de WPBeginner
You could add your CSS class in the ul section of the function
Administrador
Keshav Murthy
Hola, equipo de WPB,
Muchas gracias por este fragmento y el tutorial.
Me ahorró mucho tiempo y también me ayudó.
Con un cordial saludo,
Keshav Murthy
Soporte de WPBeginner
Glad our tutorial could help
Administrador
Gary Granai
Instalé el plugin code snippets en WordPress 4.9.8
Copié el código de https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond y lo agregué a un nuevo fragmento en code snippets.
Creé una página y luego otra página a la que se le dio el atributo de tener la primera página como página principal.
La relación entre página principal e hija se muestra en la lista de páginas en el menú desplegable de atributos.
Cuando abro la página principal, no veo nada que muestre una página hija.
Luego intenté usar la página functions.php.
Agregué el código copiado de https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond al final del código en la página de funciones.
Cuando abro la página principal, no se muestra. Lo que se muestra es un mensaje de error que dice que hay código inesperado.
Restauré la página functions.php a su estado original.
¿Qué cambios debo hacer a lo que intenté hacer?
Soporte de WPBeginner
Hola Gary,
Asegúrate de publicar la página hija antes de probar el código. También copia el código cuidadosamente de nuevo para asegurarte de que no estás copiando los números ni ningún carácter inesperado.
Administrador
Itika
Tengo una pregunta. He agregado subpáginas en la página principal, pero cuando abro el sitio en el móvil y hago clic en la página principal, se abre la página principal vacía. Para ver las subpáginas desplegables, uno tiene que mantener presionado el botón de la página principal. ¿Cómo puedo solucionar esto? No quiero que se abra esa página vacía. Quiero que si tocamos la página principal, se abra el menú desplegable.
Por favor, sugiera cómo hacerlo.