X
Jhon Marreros Guzmán

Añadir una nueva ubicación de menú a un theme WordPress

¿Te gustaría cambiar un poco el diseño de tu theme y agregar un nuevo menú?, entonces te diriges a apariencia, menus, y luego de crear tu nuevo menú te das cuenta que no hay una ubicación en la que te gustaría mostrarlo.

Cambiar de theme sería una opción, pero también puedes evaluar agregar una nueva posición de menú al theme que estas usando.

 

1- Generalidades

Antes de pensar en cambiar de theme debido a que no tiene la ubicación de menú que deseas, evalúa colocar esta posición manualmente, si, tocarás algo de código pero puede valer la pena.

Anteriormente habíamos visto como configurar el theme Twenty Seventeen, en este artículo volveremos a usar este theme, colocaremos la nueva ubicación de menú en la parte inferior, en lugar del link de Copyright de WordPress que se muestra actualmente.

 

2- Modificando la función de registro de menús

Cuando usas el theme Twenty Seventeen verás que tiene dos posiciones de menú por defecto, si buscas en el archivo functions.php del theme la función register_nav_menus verás algo similar a lo siguiente


register_nav_menus( array(
	'top' => __( 'Top Menu', 'twentyseventeen' ),
	'social' => __( 'Social Links Menu', 'twentyseventeen' )
) );

Para agregar una nueva ubicación de menú llamada footer modifica el código anterior y agrega una línea adicional al array, tal como se muestra a continuación:


register_nav_menus( array(
	'top' => __( 'Top Menu', 'twentyseventeen' ),
	'social' => __( 'Social Links Menu', 'twentyseventeen' ),
	'footer' => __( 'Footer Menu', 'twentyseventeen' )
) );

 

3- Crear menú y Asignar posición

Crea un nuevo menú llamado Menú Pie de Página  desde Apariencia > Menús, y asigna dos ítems de ejemplo, tal com se muestra en la imagen adjunta.

 

Luego en el Tab de Gestionar Lugares, verás que ya esta disponible una nueva ubicación que puedes usar para el nuevo menú.

 

4- Mostrar el menú en el Theme

Toca mostrar el nuevo menú que has creado como parte de tu theme, en el caso de Twenty Seventeen, si inspeccionas los archivos del theme encontrarás el archivo footer.php, en este archivo hay una referencia a este otro archivo: template-parts/footer/site-info.php, es en este último en donde puedes colocar el código de referencia al nuevo menú, también puedes eliminar el link de copyright y sólo dejar el siguiente código:


<div class="site-info">
<?php
wp_nav_menu( array(
	'theme_location' => 'footer',
	'menu_id' => 'footer-menu',
) );
?>
</div>

 

5- Agregando estilos CSS

Como paso final ubica el archivo style.css de tu theme y agrega el siguiente código CSS, esto le dará un aspecto visual de menú a los items que se muestran.


#footer-menu li{
	display:inline-block;
	margin-left:15px;
}

 

6- Resultado Final

Al final verás algo similar a la imagen adjunta, en esta imagen aparece también el menú de redes sociales junto al nuevo menú que has creado.

 

Artículos Relacionados

Categorías: Themes
Etiquetas: mejoras

Ver comentarios (32)

  • me he perdido en el punto 5 :( nose en que parte debo poner el código.. en que punto del css

  • En el caso que quisiera implementarlo pero hacerlo desde el theme child, que serían los cambios que tendría que hacer, ya que también estoy siguiendo el otro articulo de creación de theme child y quisiera una unificación de esos dos tutoriales.

    Gracias de antemano

    • Creo que me quede corto con el comentario, lo que trataba de referirme es si estoy haciendo el theme child y ya he copiado el style.css y funtions.php, pero quiero agregarle al child en la parte de funtions.php el " 'footer' =>..." y al site-info.php " wp_nav_menu( array(... " como lo implemento desde el child

  • En vez de agregarlo en el footer, podría agregar un segundo menú top, para que aparezca uno debajo de otro?
    Sería algo así?

    register_nav_menus( array(
	'top' => __( 'Top Menu', 'twentyseventeen' ),
        'top' => __( 'Top Menu2', 'twentyseventeen' ),	
        'social' => __( 'Social Links Menu', 'twentyseventeen' )
) );

    Es posible?
    Y luego en qué parte del código lo hago visible?

    • Hola, si es posible, ubica el archivo header.php, es en este archivo en donde se llama al menú superior.

  • Podrías talvez hacer un tutorial por ejemplo para crear un menú flotante tipo hamburguesa en la parte inferior derecha del tema, creo que es buena idea para móviles el dedo está más cerca jeje gracias tienes buen contenido

    • Hola Yandry, si, es buena idea, evaluaré hacer un tutorial sobre eso. gracias!, aunque creo que usualmente aparece en la parte superior, no en la inferior :)

  • Hola, hace un par de semanas me pidieron que me encargara de las fotos y ciertas cosas de una web , la cual utiliza la plantilla Vierra. Me percaté que el menú no está bien, ya que la barra que la plantilla tiene está localizada en la parte superior y por ende dentro de ella los nombre de cada categoría o boton , sin embargo los nombres están abajo de la barra y no sé cómo solucionar aquello .

    Agradezco mucho tu explicación :)

  • Hola, he intentado hacerlo y me sale el mensaje :"Algo fue mal. Tu cambio no se ha podido guardar. Por favor, inténtalo de nuevo. También es posible que tengas que arreglarlo manualmente y subir el archivo por FTP.". He borrado todos cambios y he dejado como antes y mensaje sigue saliendo, escritorio está bloqueado...

    • Realiza los cambios directamente en el archivo, y súbelo por FTP, es decir no lo modifiques con el editor de WordPress

  • buenas tarde existe la posibilidad de cambiar el menu en la version movil que el menu no salga en la parte superior derecha si no que salga en la parte inferior derecha gracias

    • Te sugiero revisar media queries de CSS, con sentencias CSS deberías poder hacerlo.

  • Hola, esta plantilla no me permite agregar ubicación y no se ve el menu en el Mobil, como tengo que hacer para que se vea???

    • Asegúrate primero que la posición adicionalmente a que se vea en el backend se pueda mostrar en el front-end de tu sitio, en móvil posiblemente tengas que hacer ajustes.

Deja un comentario