Uso de get_pages() para crear botones de enlace a las páginas de nivel superior de tu sitio: Aplicación de estilo

Si seguiste mi tutorial anterior, ahora tendrás un tema en tu sitio (o un tema hijo) que incluye enlaces a tus páginas de nivel superior en el encabezado del mismo.

Creé un tema hijo del tema twenty sixteen, y así es como se ven mis enlaces en este momento:

En este tutorial te mostraré cómo añadir un poco de CSS a tu tema para que esos enlaces tengan un aspecto un poco más agradable. Comencemos por deshacernos de las viñetas circulares y añadamos floats.

Eliminar las viñetas circulares y añadir floats

Abre la hoja de estilos de tu tema. Si creaste un tema hijo, estará vacío, pero si estás trabajando con tu propio tema te sugiero que añadas este estilo en la parte de tu hoja de estilos donde figuren los estilos de la cabecera.

Una resumen del código que genera los enlaces de página (si existen páginas a las que enlazar):

1

<ul class="top-level-page-links">

2

3

<?php // using a foreach loop, output the title and permalink for each page

4

foreach ( $pages as $page ) { ?>

5

6

    <li class="page-link">

7

8

		<a href="<?php echo get_page_link( $page->ID ); ?>">

9

			<?php echo $page->post_title; ?>

10

		</a>

11

12

	</li>

13

14

<? } ?>

15

16

</ul>

Esto significa que estamos apuntando a un elemento ul con la clase top-level-page-links y dentro de eso, elementos li con la clase page-link seguidos de un elemento a (es decir, enlaces).

Primero, eliminemos las viñetas. Añade esto:

1

ul.top-level-page-links  {

2

    list-style: none;

3

}

A continuación, deshagámonos del relleno de cada elemento de lista y agreguemos una declaración margin-left:

1

ul.top-level-page-links  {

2

    list-style-type: none;

3

	margin-left: 0;

4

}

Ahora actualiza la pantalla y verás que el estilo de la lista ha desaparecido:

A continuación, vamos a conseguir que esos enlaces floten uno al lado del otro. Añade esto a tu hoja de estilos:

1

.page-link {

2

    float: left;

3

}

Ahora tus enlaces estarán uno al lado del otro:

A continuación, continuemos y hagamos que los enlaces se asemejen un poco más a botones.

Añadir márgenes, relleno y fondos

Para que nuestros enlaces parezcan botones, añadiremos un margen, relleno y un fondo a los enlaces.

Añade esto a tu hoja de estilos:

1

.page-link a {

2

    margin-right: 10px;

3

	padding: 0.5em 10px;

4

	background-color: #454545;

5

}

Ten en cuenta que solo he utilizado un margen a la derecha, ya que quiero que el botón izquierdo quede alineado a la izquierda de la página.

Cuando actualices la pantalla, los botones se parecerán más botones:

Se ven mucho mejor, pero necesitan un poco de finura. Vamos a editar el color del texto y el fondo para que cuando alguien pase el cursor sobre el botón, cambie de color.

Añadir efectos "hover"

Ahora, hagamos que esos botones sean un poco más atractivos.

Añade dos bloques de declaración más a la hoja de estilos, asegurándote de añadirlos después del bloque de declaración de los enlaces que acabas de añadir:

1

.page-link a:link,

2

.page-link a:visited {

3

    color: #fff;

4

	text-decoration: none;

5

}

6

.page-link a:hover,

7

.page-link a:active {

8

	background-color: #dddddd;

9

	color: #454545;

10

	text-decoration: none;

11

}

Esto cambia el color de los enlaces, elimina el subrayado y cambia el color cuando alguien pasa el cursor sobre uno de ellos o esté activo.

Veamos cómo se ve esto en la página:

Y cuando sobrevuelo un enlace:

¡Mucho mejor!

Resumen

En este tutorial de dos partes, has aprendido a crear enlaces a las páginas de nivel superior de tu sitio que se generan automáticamente y, a continuación, a aplicar estilo a dichos enlaces mediante CSS para que se vean como botones.

Esto te proporciona una manera agradable y destacada que permite a tus visitantes ir directamente a esas páginas, y será útil si tienes páginas de nivel superior a las que deseas asegurarte que accedan muchos visitantes.