• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Mostrar lista de sub páginas en página padre en WordPress

Mostrar lista de sub páginas en página padre en WordPress

Mostrar lista de sub páginas en página padre en WordPress

[ 15 enero 2019 ] [ Actualizado: 22 enero 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Una de las características de las páginas es que pueden tener sub páginas, sin embargo, te has preguntado ¿cómo mostrar todos los enlaces de las sub páginas en su página padre directamente?, en este artículo veremos cómo realizar esto de manera simple.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

lista de sub paginas en página resultado final

 

Generalidades

En un artículo anterior vimos las diferencias entre entradas y páginas, una de las diferencias es que en las páginas una manera de organizar el contenido es a través de las sub páginas, tal como se muestra en la siguiente imagen:

página de servicios de jemplo con sub páginas

 
Para mostrar la lista de las páginas hijo en la página padre, lo podemos hacer a través de programación creando un Shortcode

 

Creando el Shortcode

Para crear el Shortcode podemos usar el siguiente código el cual lo puedes colocar en el archivo functions.php de tu child-theme.


function dcms_list_child_pages() {
	global $post;
	$string = '';
	$child_of = $post->ID;

	if ( is_page() && $post->post_parent ){
		$child_of= $post->post_parent;
	}
	
	$params = array(
		'child_of'     => $child_of,
		'title_li'     => '',
		'echo'         => 0
	);

	$childpages = wp_list_pages($params);

	if ( $childpages ) {
		$string = '<ul class="list-child-pages">' . $childpages . '</ul>';
	}

	return $string;
}

add_shortcode('dcms_childpages', 'dcms_list_child_pages');

En el código anterior:

  • Creamos el shortcode llamado dcms_childpages usando la función add_shortcode
  • La función add_shortcode hace referencia a la función dcms_list_child_pages en donde estará la lógica para la creación del listado
  • Dentro de la función dcms_list_child_pages obtenemos el ID de la página en la variable child_of
  • Utilizamos la función wp_list_pages que es una función de WordPress para devolver las sub páginas de una determinada página pasándole los parámetros en la variable $params
  • Almacenamos los resultados devueltos por la función en la variable $childpages
  • Finalmente concatenamos la lista obtenida en la variable $string, la cual será devuelta

 

Usa la documentación de la función wp_list_pages para revisar todos los posibles parámetros que se pueden usar.

 

Usando el Shortcode

El Shortcode que hemos creado se llama dcms_childpages, simplemente podemos usarlo de la siguiente forma:

[dcms_childpages]

Por ejemplo para colocar el Shortcode en la página de servicios de la imagen anterior, lo puedes hacer con el editor Gutenberg usando el bloque de Shortcode, tal como se muestra en la siguiente imagen:

Uso del shortcode creado para listado de sub páginas

 

Conclusión

Tal como has podido ver, es posible hacer un listado automático de todas las páginas hijo o sub páginas de una página padre y evitar hacer las actualizaciones del listado de manera manual.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Microdatos en campos de productos en WooCommerce

Contenidos de texto a voz en WordPress

Tabs a acordeón en página de productos de WooCommerce

Heartbeat API de WordPress, aprende a configurarla

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados