• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Mostrar lista de sub páginas en página padre en WordPress
Anuncio banner webservi

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

  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisiteExtraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post TypeEliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en 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 primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Usar funciones de WordPress fuera de WordPress

Regenerar imágenes de miniaturas en WordPress

Modificar el precio de un producto por código en WooCommerce

Excluir páginas de la búsqueda de WordPress

Recientes

  • Guía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad