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.
¿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 incluir 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.
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 fácil y recomendado para todos los usuarios.
Primero, debe instalar y activar el Lista de páginas plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Tras la activación, debe editar la página principal y simplemente agregar lo siguiente shortcode 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.
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.
La plugin proporciona un montón de shortcode parámetros que le permiten establecer profundidad, excluir páginas, número de elementos y más. Para más detalles, por favor ver el pluginpágina de 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 sitio específico plugin, 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 = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
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 shortcode, para que pueda mostrar fácilmente las páginas secundarias sin modificar sus plantillas de página.
Para mostrar las páginas secundarias, simplemente agregue lo siguiente shortcode 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.
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 dinámicamente 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 el archivo principal page.php plantilla, o cree 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. Es por eso que sería mejor si crea un tema hijo y luego realiza sus 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.
<?php wpb_list_child_pages(); ?>
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. He aquí un ejemplo de cómo Sitio web de OptinMonster muestra la página principal y las subpáginas:
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 . También puedes encontrarnos en Twitter y Facebook.
Cómo mostrar una lista de páginas secundarias para una página principal en WordPress .
Fuente: wpbeginner