Cómo utilizar wp_list_pages () para crear menús de página principal y secundaria

En este tutorial, veamos cómo podemos manejar el trabajo con enlaces hacia y desde páginas principales y secundarias en sus temas. Es posible que vea estas jerarquías denominadas páginas y subpáginas de nivel superior. WordPress hace que sea fácil vincular páginas en su sitio de tal manera que sus visitantes puedan comprender fácilmente la jerarquía y la relación entre ellos. Usaremos la función wp_list_pages () para configurar una lista de páginas secundarias basada en la página principal en particular que hemos seleccionado. Echemos un vistazo a cómo configurar esto ahora.

Páginas principales y secundarias en el panel de WordPress

Por ejemplo, puede tener una página de Servicios y en esa página hay información sobre todos los servicios que puede proporcionar. Incluso puede tener suficiente contenido para dividir algunos de los servicios en su propia página. En este caso, hemos agregado una página secundaria de consultoría y una página secundaria de soporte técnico a la página principal de Servicios. WordPress indica esto visualmente al sangrar ligeramente la página secundaria y al poner un guión antes del nombre de la página secundaria.
ejemplo de páginas secundarias en wordpress

Cómo configurar la página principal de un niño

Es muy fácil asignar un padre a una página cuando crea una nueva página en WordPress. En cualquier página dada durante la creación o edición, si miramos la sección Atributos de la página, podemos ver un menú desplegable para elegir qué página de nivel superior nos gustaría que fuera la principal de esta página actual en la que estamos trabajando. Aquí continuaremos y configuraremos la página de Consultoría para tener un Padre de Servicios.
configurar una página de wordpress como padre de un niño

La navegación deseada

Ahora que tenemos algunas páginas secundarias configuradas, tendremos el objetivo de hacer que WordPress genere automáticamente enlaces secundarios a la página dependiendo de la página principal que estemos visitando. Entonces, si visitamos la página de ejemplo de WordPress que hemos configurado, no deberíamos ver enlaces secundarios. Sin embargo, si visitamos la página de Servicios, deberíamos ver dos enlaces a las páginas secundarias de consultoría y soporte técnico. Si está siguiendo, asegúrese de agregar la página principal de sus dos hijos al menú en el que hemos estado trabajando hasta ahora.

Presentamos la función de WordPress wp_list_pages ()

Para ayudarnos a lograr nuestro objetivo, haremos uso de la función wp_list_pages (). Esta función muestra una lista de páginas de su sitio en formato de lista. Genera automáticamente los elementos <li> para usted. Eso es algo que se ve a menudo con las funciones de WordPress, es que no solo devuelven valores, sino que en realidad generan html. Esta es una información importante para recordar. Así que sigamos adelante y agreguemos esta función a nuestro archivo page.php y veamos qué sucede.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="page-layout">
            <?php wp_list_pages(); ?>
            <h2><?php the_title() ?></h2>
			<?php the_content() ?>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no pages!</p>';
endif;
 
get_footer();
 
?>

Cuando ahora visitamos la página de Servicios, obtenemos el siguiente resultado.
visitando nuestra página principal

Si miramos la fuente del fragmento generado por esta función, se ve así:

1
2
3
4
5
6
7
8
9
10
11
12
<li class="pagenav">Pages
  <ul>
    <li class="page_item page-item-47"><a href="http://wordpresstutorial.dev/about-us/">About Us</a></li>
    <li class="page_item page-item-51 page_item_has_children current_page_item"><a href="http://wordpresstutorial.dev/services/">Services</a>
      <ul class='children'>
        <li class="page_item page-item-53"><a href="http://wordpresstutorial.dev/services/consulting/">Consulting</a></li>
        <li class="page_item page-item-55"><a href="http://wordpresstutorial.dev/services/technical-support/">Technical Support</a></li>
      </ul>
    </li>
    <li class="page_item page-item-2"><a href="http://wordpresstutorial.dev/wordpress-example-page/">WordPress Example Page</a></li>
  </ul>
</li>

Esto es muy interesante. La función no solo genera el html requerido para generar los enlaces en forma de lista, sino que también aplica clases de manera inteligente a las etiquetas <ul> y <li>.

Personalizar la salida de wp_list_pages ()

El comportamiento predeterminado de wp_list_pages () es generar enlaces a todas las páginas de su sitio como acabamos de ver. En nuestro caso, solo queremos enlaces secundarios de un padre específico. Para hacer esto, necesitaremos alterar el comportamiento de wp_list_pages () pasando algunos argumentos a la función. Veamos qué podemos hacer. Solo queremos mostrar páginas secundarias. Además, queremos deshacernos del texto de Pages que etiqueta los enlaces. Estos son los argumentos que podemos pasar como una matriz para hacer esto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="page-layout">
			<?php $args = [
				'child_of' => $post->ID,
				'title_li' => '',
			];
			wp_list_pages( $args ); ?>
            <h2><?php the_title() ?></h2>
			<?php the_content() ?>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no pages!</p>';
endif;
 
get_footer();
 
?>

páginas secundarias en acción
Ahora, esto nos acerca a lo que queremos, pero aún no es perfecto. Observe que cuando hacemos clic en los enlaces secundarios reales, desaparecen. Lo que sería mejor es que pudiéramos hacer clic en los enlaces secundarios y el enlace principal permanecería activo, además de seguir ofreciendo enlaces secundarios. Podemos hacer esto, pero necesitamos agregar un código personalizado para manejar esto por nosotros. Primero, necesitamos agregar una nueva función a nuestro archivo functions.php. El propósito de esta función es encontrar el antepasado principal más superior de la página que se está viendo actualmente y su nombre será get_the_top_ancestor_id.

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
function custom_theme_assets() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}
 
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );
 
register_nav_menus( [ 'primary' => __( 'Primary Menu' ) ] );
 
function get_the_top_ancestor_id() {
	global $post;
	if ( $post->post_parent ) {
		$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
		return $ancestors[0];
	} else {
		return $post->ID;
	}
}

Ahora queremos hacer uso de esta función en nuestro archivo page.php así:
page.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="page-layout">
			<?php $args = [
				'child_of' => get_the_top_ancestor_id(),
				'title_li' => '',
			];
			wp_list_pages( $args ); ?>
            <h2><?php the_title() ?></h2>
			<?php the_content() ?>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no pages!</p>';
endif;
 
get_footer();
 
?>

Ahora bien, si esto funciona correctamente, nuestros enlaces secundarios deberían permanecer intactos incluso cuando hacemos clic en ellos. Vamos a ver cómo funciona.
los enlaces secundarios se muestran correctamente

¡Muy genial! Los enlaces secundarios ahora continúan mostrándose incluso cuando profundizamos en ellos. Sin embargo, algo no está del todo bien todavía. ¿Notaste que la página de ancestros no permanece encendida, por así decirlo? En otros trabajos, la pestaña Servicios ya no tiene un bonito fondo azul para indicar que es la página del ancestro activo. Podemos arreglar esto fácilmente agregando la clase current-page-ancestor a nuestra hoja de estilo style.css así.

1
2
3
4
5
6
7
.navigation-menu ul li.current-menu-item a:link,
.navigation-menu ul li.current-menu-item a:visited,
.navigation-menu ul li.current-page-ancestor a:link,
.navigation-menu ul li.current-page-ancestor a:visited {
    background-color: #4285f4;
    color: #ffffff;
}

Con esa simple adición, nuestra página anterior ahora debería permanecer activa mientras hacemos clic en sus páginas secundarias.
aplicar CSS a la página principal del ancestro

Aplicar estilo a los enlaces de Active Children

Lo último que haremos es aplicar el efecto 'iluminado' también a las páginas secundarias. WordPress es muy capaz en este sentido. Nos da una forma de rastrear no solo el estado activo principal, sino también el estado activo secundario al mismo tiempo. También agregaremos algunos efectos de estilo más a los enlaces de los niños. Aquí está el estilo que podemos aplicar a los enlaces secundarios en nuestro archivo style.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.child-navigation-menu ul {
    margin: 20px;
    padding: 0;
}
 
.child-navigation-menu ul:before, .navigation-menu ul:after {
    content: "";
    display: table;
}
 
.child-navigation-menu ul li {
    list-style: none;
    float: left;
    margin-right: 3px;
}
 
.child-navigation-menu ul li {
    margin-right: 20px;
    font-size:80%;
}
 
.child-navigation-menu ul li a:link,
.child-navigation-menu ul li a:visited {
    text-decoration: none;
}
 
.child-navigation-menu ul li.current_page_item a:link,
.child-navigation-menu ul li.current_page_item a:visited {
    border-bottom: solid 3px #ecf0f1;
}

Compruébalo: ¡
enlaces de estado activo padre e hijo
bastante dulce! Ahora, tanto los enlaces principales como secundarios realizan un seguimiento de su estado y la interfaz de usuario presenta diferentes efectos estilísticos basados en la página actual que está viendo el visitante del sitio.

Cómo utilizar wp_list_pages () para crear un resumen de menús de página principal y secundaria

En este tutorial, aprendimos algunas características interesantes sobre cómo trabajar con menús de página en WordPress. En primer lugar, vimos cómo configurar y reconocer los tipos de páginas principales y secundarias en el panel de WordPress y por qué podríamos querer utilizarlos. A partir de ahí, traducimos eso a lo que debería presentar la interfaz de usuario en función de si una página era principal o secundaria. La función wp_list_pages () nos ayudó a hacer el trabajo pesado en este sentido. Una vez más vimos que a la hora de trabajar con WordPress vamos a tener que ser conscientes de qué funciones nos pueden ayudar, así como de cómo personalizar su comportamiento en función de los argumentos que les pasemos.

Header Ads Widget

Cómo utilizar wp_list_pages () para crear menús de página principal y secundaria

Páginas principales y secundarias en el panel de WordPress

Cómo configurar la página principal de un niño

La navegación deseada

Presentamos la función de WordPress wp_list_pages ()

Personalizar la salida de wp_list_pages ()

Aplicar estilo a los enlaces de Active Children

Cómo utilizar wp_list_pages () para crear un resumen de menús de página principal y secundaria

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget