¿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.
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(5 votos, promedio: 5,00 de 5)
Cargando...
me he perdido en el punto 5 🙁 nose en que parte debo poner el código.. en que punto del css
Hola, puedes colocarlo al final del archivo style.css, o también puedes poner este código en: Apariencia > Personalizar > CSS adicional, otra opción es usar un Child Theme, revisa : https://decodecms.com/crear-un-child-theme-en-wordpress-de-manera-correcta/
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
Hola
Si tienes un archivo footer.php o similar en el theme padre, puedes copiar ese archivo al theme hijo y allí agregar la funcionalidad que quieras. Es lo que comento en el punto 5 del artículo : https://decodecms.com/crear-un-child-theme-en-wordpress-de-manera-correcta/.
Saludos,
Gracias por el detalle, en el comentario.
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í?
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.
muy buen post, gracias por compartir.
Y si quiero que el menu de navegacion esté ubicado a la izquierda? Desde el punto 0,0? Como antiguamente eran la mayoria de webs?
Hola eso lo podrías hacer con CSS, lo importante es que al menos el menú te aparezca con la estructura HTML adecuada, luego los retoques de diseño lo haces con estilos CSS.
Hola, en la plantilla ‘Great’ el menú está alineado a la izquierda pero solo se puede centrar en la versión de pago, mi pregunta es: ¿se puede centrar de algún modo el menú? haciengo algún truco o modificando el código?
Saludos
Hola, si, podrías centrarlo por CSS, de manera general primero el contenedor debe ocupar el 100% del ancho y luego usas margin:auto para centrar los elementos.
Lo hago y me aparecen todas las paginas, no.solo las que añado al menú de pie de pagina
Hola, revisa si has agregado el menú a la posición de menú que has creado.
Hola Jhon, en el header de mi tema (Sahifa) tengo el TOP MENU y el PRIMARY MENU. Me gustaría que desde el TOP menu se pudiera cambiar el PRIMARY menu. He instalado el plugin Conditional Menu; pero no hace lo que quiero.
¿Sabes de alguna solución?
También estuve buscando una solución para mostrar una página diferente dependiendo del país del visitante.
Agradeceré cualquier dato que puedas darme.
Hola, posiblemente te sirva mejor la funcionalidad de mostrar un menú de acuerdo a determinada condición, en tu caso por ejemplo de acuerdo a la página seleccionada de tu top menu. https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/ . Sin embargo lo que planteas es algo ligeramente diferente ya que entiendo que son ítems de menú y no el menú completo el que debe cambiar. Evaluaré hacer un artículo sobre esto.
Hola, Jhon. Muy buen post, estaba buscando algo así para el footer de mi web. Aun no es visible pues está en construcción. Sin embargo se me ha presentado una dificultad, luego que coloco el menú no consigo darle estilo. Coloco el último código que incluyes en el post en la posición que señalas del apartado Style CSS, al refrescar mi front page no se aprecian los cambios. Qué podrá ser?
Hola, pueden ser varias cosas, pero entre las principales es que tengas estilos que tengan una mayor prioridad para ese elemento, la otra es que las clases CSS sean otras, en cualquier caso te sugiero inspeccionar el código antes y usar los IDs o clases CSS correctas, revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Hola Te quería pedir ayudar, mi tema no tiene menu distinto para moblie, como se puede agregar? ya que en el mobile no está exactamente el mismo contenido que para escritorio, pero no encuentro información de como hacer eso, me puedes ayudar? desde ya muchas gracias!!!
Hola, en tu caso creo que lo más práctico sería que evalúes usar un pugin, revisa por ejemplo: https://wordpress.org/plugins/mobile-menu/
Hola! Estoy creando una web y ya tengos listos los menus: uno que seria la navegación principal y otro el de navegacion movil. A la hora de ubicar este último no puedo, solo salen 3 ubicaciones disponibles. ¿Como puedo añadir la ubicación movil? Gracias!!
Hola, el proceso para añadir una nueva posición de menú móvil es similar a lo que se detalla en este artículo, sin embargo al ser una posición que se verá en móvil entonces puedes validar y dar estilos para móvil.
Por ejemplo a nivel de WordPress existe una función para validar si el sitio se esta mostrando en móvil
https://developer.wordpress.org/reference/functions/wp_is_mobile/