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.
Denise
Para las páginas de tercer nivel (nietos), quiero mostrar el mismo menú que se ve en las páginas hijas (todos los enlaces hijos del padre). Con este fragmento, cuando estoy en una página nieta, solo veo las otras páginas nietas en el menú. ¿Cómo necesitaría modificarse este código para mostrar todos los enlaces hijos incluso cuando se está en páginas nietas?
vicky
cómo obtener los ids de las páginas hijas, no los ids de las nietas... por favor, ayúdenme, soy principiante
Meredith L
Soy relativamente nuevo en el blogging y recientemente cambié al tema Kale de Wordpress. He estado tratando de hacer páginas de atributos de página (bajo la página principal Recetas) para poder tener categorías separadas para aperitivos, postres, etc. Todo parece funcionar en la parte de administración, pero luego en el sitio mismo no hay atributos de página/menú desplegable de la categoría Recetas. ¿Qué estoy haciendo mal? Todo está configurado como público, así que no estoy seguro de cuál es el problema.
Daves
Gracias por este código. Pero no quiero que esto se muestre en la página de inicio (página estática), solo en las páginas principales. ¿Cómo se puede hacer?
Gracias.
Boris Budeck
Estoy usando el tema Generatepress (creé un tema hijo a partir de él para personalizarlo) y no puedo hacer que esto funcione. El shortcode se muestra en la página de salida, parece que ni siquiera se reconoce como un shortcode. Uso widgets de Elementor y ni los widgets de texto ni los de shortcode funcionan.
¿Alguna idea de cómo hacerlo funcionar cuando se usan widgets de Elementor?
Soporte de WPBeginner
Hola Boris,
Por favor, intente agregar este código al archivo functions.php de su tema o a un plugin específico del sitio.
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
Administrador
Frederic
¡un gran post, es exactamente lo que estoy buscando desde hace muchas horas! y funciona de maravilla, solo agregando el código en el function.php del tema y luego agregando el shortcode en la página donde quiero que aparezcan las subpáginas, ¡y voilà!
maravilloso, ¡muchas gracias por tu generosidad!!
Soporte de WPBeginner
Hola Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Administrador
Mariano
¡Hola!
Gracias por el código. ¿Cómo puedo mostrar la imagen destacada de cada página hija?
Ron
Como con tantos fragmentos que encontramos, uno tiene que revisar todos los comentarios para que funcione. ¿Qué tiene de malo probar lo que escribes?
Alicia
¿Puedes hacer un menú desplegable para páginas padre/hijo en wordpress.com, o tiene que ser la versión .org?
Razvan
¿Qué pasa si quiero mostrar publicaciones hijo, no páginas hijo?
Rudy
Usar este código termina mostrando la página padre junto con las páginas hijo, lo cual es redundante. Según entiendo, lo que realmente necesitamos es mostrar solo las páginas hijo, no la página padre. ¿Alguna modificación sugerida que pueda hacer esto?
Michael Feske
Great, but it works not
add_shortcode es correcto o debe ser add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?
con add_shortcode es error Fatal error: Uncaught Error: Call to undefined function add_shortcode()
con add_filter no hay error pero funciona bien
Milos
En la actualización de plugins, por alguna extraña razón siempre obtengo un error:
Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34
Jeffrey Fry
¿Cómo se puede mostrar también la fecha de la página hija?
ethann
Hola, gran artículo,
¿Me puedes ayudar a crear un menú desplegable de páginas secundarias en una página principal? Necesito esta funcionalidad para uno de mis proyectos de WordPress y soy completamente nuevo en WordPress.
Alex
¿Soy el único que no puede hacer que funcione?
Tengo la siguiente estructura
Acerca de
— Página 1
— Página 2
— Página 3
Cuando estoy en "Acerca de" o en una página hija (1, 2 o 3), me gustaría tener una lista con mi página principal (Acerca de) y todos los hijos (1, 2, 3) – ¿Alguien ha logrado que funcione?
Thanks!
Kendra
¡Oh Dios mío, lo siento, esto es molesto! Ignora mis otras publicaciones. No me di cuenta de que no se podía pegar código en los comentarios.
NO pude hacer que funcionara con wpb_list_child_pages();
SÍ pude hacer que funcionara con echo do_shortcode( '[wpb_childpages]')
Y para obtener el título de la página principal, inserté esto encima de la lista de páginas secundarias:
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);
Jean Bishop
Estoy usando este código y funciona muy bien. ¿Es posible mostrar también categorías en los menús junto con las páginas?
Michelle
Hola,
Quiero hacer lo siguiente
La página principal debe estar en venta o en alquiler.
Luego quiero que el hijo, por ejemplo una provincia (Gauteng), se enlace a la página principal de "en venta" y "en alquiler".
¿Cómo hago eso?
Michelle
Zakhar
¿Cómo puedo crear un shortcode con un parámetro, por ejemplo, [wpb_childpages id=”1″], donde id=”1″ es el id de la página principal?
Strand
Hola,
¿Es posible limitar los enlaces a un número específico, como un máximo de 12 páginas secundarias?
Gracias
Aander
Gracias,
¿Podría explicar, por favor, cómo puedo organizar las páginas secundarias en una lista desplegable a la que se pueda acceder a través de la página principal? (No quiero que los visitantes puedan ver todas las páginas secundarias en forma de blogroll).
Es decir, en la página principal quiero crear una lista desplegable (listbox) a la que se añadirían las páginas secundarias en un orden predefinido (digamos en orden alfabético). Después de leer Introducción, un visitante puede continuar eligiendo cualquier página de la lista a su antojo (las páginas secundarias no tienen conexión lógica, por lo que en cualquier caso buscará la página exacta).
¿Es realizable 'mi sueño'?
Gracias de nuevo.
Quantum-mecha
¿Cómo agrego paginación para Child Page?
¡Gracias!
Astrid
Hola equipo de WPBeginner,
Usé el código que proporcionaron con la “opción de shortcode” y funcionó (enlaces a páginas secundarias). Sin embargo, quería usar la opción permanente, y eso no funcionó.
Cuando agregué esta línea de código [ ] la página principal devuelve un error 500 y no se muestran páginas secundarias en absoluto.
¿Qué estoy haciendo mal?
De paso, si quisiera mostrar un extracto con su respectiva imagen, ¿cómo lo haría? ¡Gracias!
Astrid
Pude resolver esto.
Agregué el fragmento de código y luego agregué este shortcode [wpb_childpages] a la página principal donde quería que se mostraran las páginas secundarias. ¡Impresionante!
Ahora, para mostrar extractos y una imagen, ¿usaría las mismas consultas, al igual que las publicaciones de una categoría?
Thanks in advance
Jade
Hola, me preguntaba a qué te referías con ‘consulta’. ¿Cómo obtuviste exactamente los extractos y las imágenes para que se mostraran en la página principal?
¡Gracias!
Mehar
Muy útil. Gracias.
Pradeep
¿Alguien podría confirmar si la página de ejemplo utilizada en este tutorial http://optinmonster.com/how-it-works/ utiliza esta función o no? Me parece que usan pestañas, en lugar de páginas secundarias.
Si estoy en lo correcto, ¿alguien podría dirigirme a un recurso para obtener esa función, ya que estoy buscando desesperadamente una solución fluida como la que tienen en esa página?
Muchas gracias,
Pradeep
Andrew Roberts
Para la opción que no es de código corto, podrías querer informar a los usuarios que necesitan cambiar
return $string;porecho $string;o incluir en la plantilla de su página la funciónecho page_list_child_pages();Gracias a Erik por señalar esto anteriormente
Meredith Adams
¡Gracias!
Gaby
¡Gracias! Me preguntaba por qué el código no funcionaba...
Howard
Hola, puedo hacer que esto funcione cuando visito mi dominio con un subdirectorio (por ejemplo, example.com/home), pero cuando veo el sitio sin esto (example.com), la lista de páginas secundarias no aparece. ¿Alguien puede indicarme dónde me estoy equivocando?
Gracias de antemano – soy muy nuevo en Wordpress.
Emily Jennewein
¿Cómo haces para que esta función muestre la página principal en la parte superior de la lista junto con la lista de páginas secundarias y de nietas? En las páginas secundarias no se muestra la página principal.
Michael
¿cómo puedo personalizar esto para que solo muestre la página secundaria de una página específica?
Yester
¿Cómo se agrega una clase activa a la actual?
Jenny
¿Existe ahora un plugin que pueda hacer lo mismo?
y también, ¿podemos decidir dónde irá el cuadro con las páginas de submenús en cualquier área de la página, no solo en la parte superior? Usando un plugin
Personal de WPBeginner
Sí, se puede usar para tipos de publicación personalizados. Como esto:
function wpb_list_child_pages() {
global $post;
if ( 'movie' == get_post_type() && $post->post_parent )
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'post_type=movie&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');
Daniela
¡Esto es genial! ¿Hay alguna forma de hacer lo mismo para Tipos de Publicación Personalizados que tienen publicaciones hijas?
Caroline
¡También me pregunto!
¡Si alguien sabe, por favor ayude!
dpc
¿Hay alguna forma de modificar esto para imprimir las publicaciones hijas de un tipo de publicación personalizado en una página de publicación de tipo de publicación personalizado? ¡Gracias, es muy útil!
Sokeara
¡Es genial para mí! De todos modos, me gustaría saber cómo puedo mostrar el título y la miniatura de la página hija en la página principal.
Ashley Bell
Hola, tengo la misma consulta. Me gusta mucho cómo está estilizada la lista en la página Beginners Blueprint, pero no tengo idea de por dónde empezar. ¿Alguien puede recomendar un artículo para leer o dar algún consejo, gracias?
Razvan Zamfir
¡Hola!
Buen fragmento, pero ¿cómo listo solo las páginas nietas?
¡Gracias!
amitabha197
Hay un error en las páginas que no tienen páginas hijas, así que he modificado ligeramente
if( count($childpages) != 0 ) {
$string = ” . $childpages . ”;
}
en lugar de
if( $childpages ){
$string = ” . $childpages . ”;
}
Personal de WPBeginner
Para ejecutar un shortcode en las plantillas de WordPress, necesitas agregarlo así:
Matt Rock
No pude hacer que funcionara el código de plantilla “wpb_list_child_pages();”, pero echo shortcode hizo el truco. ¡Gracias!
Erik
Simplemente cambia “return $string” por “echo $string” (esto imprimirá las páginas).
fariha
gracias, funcionó
Coen Siebenheller
Agregué el código a functions.php y cuando agrego el shortcode [wpb_childpages] en mi texto, funciona. Pero cuando intento agregarlo a una de mis plantillas, no muestra nada. ¿Alguien sabe qué estoy haciendo mal?
Elena Rapisardi
¡¡Gran explicación!!
¿Hay alguna forma de mostrar siempre las páginas principales?
Quin
Esto es brillante, gracias.
¿Hay alguna forma de adaptarlo para que el Padre muestre el Nieto, y no el Hijo?
Dejan
¡Gran función, gracias!
Richelly Italo
La gran idea, ¡gracias, amigo!
Steph
¿Puedes decirnos cómo detener la lista en el primer nivel? Me gustaría mostrar todas las subpáginas de ese padre, pero no los hijos de las subpáginas. Gracias.
Stefan
Solo agrega &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Genial. Me encanta esta idea de un plugin de sitio y ver el código que estás agregando (para que sepas que está limpio y no hace cosas malas) en lugar de depender de algún plugin que podría estar instalando cualquier cosa.
Para algo tan simple como listar páginas hijas, estoy de acuerdo en que debería ser parte de un plugin más grande en lugar de solo un plugin, de lo contrario, terminas con tantos plugins que es difícil hacer un seguimiento.
Rishi Gangoly
This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually.
Bojan
¡Esto es genial! Ponerlo en un plugin es una gran característica y una gran oportunidad para extender la funcionalidad agregando:
– imagen destacada de página hija (como miniatura)
– Título de página hija
– el resto de los metadatos (autor, fecha, número de comentarios)
– estilo en columnas quizás
y así sucesivamente
De esta manera, tendríamos un plugin de Portafolio casi completo: portafolios hechos de Páginas en lugar de solo de tipos de publicación personalizados.
Gracias..
Ivica
El mejor plugin para mostrar páginas hijas en una barra lateral para aquellos que desean una navegación de páginas hijas aún más rápida y "limpia":
http://wordpress.org/plugins/child-page-navigation/
yousef mayeli
Hola
Gracias, fue muy útil. Pero si pudieras mostrarlo en video, sería mucho más utilizable. Como lo haría Tyler Moore.
Gracias
Yousef
Nancy
¡Esto es genial! Tengo muchos enlaces añadidos manualmente a páginas secundarias, y esto hará que el mantenimiento de nuestro sitio sea MUCHO más fácil. Acabo de estar probando en mi entorno de desarrollo, y me gustaría ajustar un poco la función, de modo que en una página secundaria, cuando se incluya el shortcode, se listen todos los hijos del mismo padre, EXCEPTO la página que se está mostrando actualmente. Realmente todavía estoy aprendiendo PHP, así que mientras intentaré resolver esto por mi cuenta, agradecería cualquier ayuda para hacer ese cambio en el código.