• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Diseñador web WordPress Freelance

Diseño web, WordPress y Marketing Online

  • Inicio
  • Portfolio
  • Blog
  • Contacto

Wordpress · 19 mayo, 2016

Añadir ubicaciones de menú personalizadas en WordPress

En éste tutorial vamos a ver cómo añadir ubicaciones de menú personalizadas en WordPress.

Muchas veces necesitamos añadir nuevos menús en nuestra web, pero el tema que tenemos instalado no nos permite añadirlos en el sitio que nosotros queremos, así que tenemos 2 opciones:

  • Buscar un tema que traiga esa ubicación en concreto (no es muy buena idea, ya que si luego necesitamos otro menú más, tendremos que buscar otro tema que traiga esas 2 ubicaciones, y podemos entrar en un bucle peligroso 😉 ).
  • Añadir nosotros mismos la ubicación donde queramos, independientemente del tema con el que estemos trabajando.

Para el tutorial vamos a utilizar el tema Twenty Sixteen, que es el que trae WordPress activado por defecto en sus últimas versiones.

Vamos a utilizar también la magnífica herramienta online GenerateWP, que nos generará el código necesario para añadirlo.

Como vemos, el tema Twenty Sixteen trae por defecto 2 ubicaciones de menú, el menú principal que está en el header y un menú para iconos sociales que coloca en la parte derecha del footer.

Menús por defecto de Twenty Sixteen

Pero ¿qué pasa si necesitamos otro menú con categorías, productos destacados, posts destacados o lo que necesitemos?

1. Añadir la nueva ubicación del menú

Para ello vamos a ayudarnos de GenerateWP, una fantástica herramienta online que nos generará el código necesario para añadir a nuestro tema.

Lo primero que tenemos que hacer es acceder a su web y entrar en la opción «Menu Generator«.

En la pestaña «General» nos pide 3 datos:

  • Function name: Es el nombre que le vamos a dar a la función. Yo la he llamado df_menu_footer. «df» son mis inicales, las pongo siempre delante de los nombres de las funciones porque si por casualidad añades un plugin o cualquier funcionalidad que tenga una función que se llame igual, va a dar problemas. Si añades la iniciales (o lo que sea) es muy difícil que haya otra función con ese nombre.
  • Child Themes: Aquí definimos si queremos que funcione con child themes. Yo le he puesto que sí.
  • Text Domain: Esto es por si hubiera traducciones. Le ponemos el mismo nombre.

 

Generate WP

Vamos la pestaña «Menu 1» (nos deja hacer hasta 5):

  • Menu 1 Name: Es el nombre que le queremos dar al menú. Nos advierte de que no puede tener espacios ni mayúculas. Yo lo he llamado «menu-footer«.
  • Menu 1 Description: Es la descripción que nos va a aparecer en el panel de control de WordPress en el apartado Apariencia>Menús

GenerateWP

Ya no tenemos más campos que rellenar así que le damos a la opción Update Code y copiamos el código que nos ha generado, en éste caso es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if ( ! function_exists( 'df_menu_footer' ) ) {
 
// Register Navigation Menus
function df_menu_footer() {
 
$locations = array(
'menu-footer' => __( 'Menú del footer', 'df_menu_footer' ),
);
register_nav_menus( $locations );
 
}
add_action( 'init', 'df_menu_footer' );
 
}

Éste código lo tenemos que pegar en el archivo functions.php de nuestro tema.

Una vez que lo hemos añadido, vemos que la ubicación ya nos aparece en el panel de control:

Anadir ubicaciones de menú personalizadas en WordPress

Pero si creamos un menú y le asignamos esa ubicación no nos aparecerá, ya que tenemos que «decirle» a WordPress en qué lugar de la plantilla queremos que aparezca ese menú.

2. Añadir el menú donde queramos.

Obviamente, como a la nueva ubicación la he llamado «Menú del footer«, lo voy a colocar en el footer 😛

Para hacerlo, abrimos el archivo footer.php del tema sobre el que estamos trabajando y pegamos el siguiente código:

<?php wp_nav_menu( array( ‘menu-footer’ => ‘df_menu_footer’ ) ); ?>

Colocamos esta línea en el lugar del footer donde queramos que aparezca el menú.

Acordaos de cambiar «menu-footer» y «df_menu_footer» por lo que hayáis puesto en Menu 1 Name y en Function Name.

footer.php

Ahora sí que nos aparece el menú en el sitio que le hemos asignado:

Menú personalizado en WordPress

Por defecto aparece con los estilos propios del tema que estemos utilizando. Para dejarlo bonito y a nuestro gusto tendremos que añadirle algo de CSS.

Os pongo un ejemplo básico de personalización con CSS. Lo he hecho un poco exagerado para que se aprecien bien los cambios:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.menu-menu-del-footer-container {
width: 100%;
background-color: #1a1a1a;
margin-bottom:30px;
}
 
.menu-menu-del-footer-container ul {
list-style: none;
margin-top:35px;
}
 
.menu-menu-del-footer-container ul li {
display: inline-block;
margin-right: 30px;
}
 
.menu-menu-del-footer-container ul li a{
display: inline-block;
padding:15px;
background-color: #fff;
color: #111;
border-radius: 8px;
}

Y el resultado sería:

Menús personalizado con WordPess

Y ya está!. Ya podemos añadir tantos menús como queramos en las ubicaciones que necesitemos.

¿Necesitas más ayuda?

Si quieres seguir aprendiendo o necesitas mi ayuda, puedes:

  • Contactar para ver cómo puedo ayudarte.
  • Suscribirte para no perderte ninguna de mis publicaciones.
  • Si quieres comentar, adelante, te responderé encantado.

Muchas gracias por leerme 😉

 

Comparte si crees que le puede servir de ayuda alguien.

Archivado en:Wordpress

Diego Fresno

Diego Fresno López

Diseñador web freelance especializado en WordPress y Genesis.

Interacciones con los lectores

Comentarios

  1. Noriaki dice

    19 mayo, 2016 en 4:30 pm

    Excelente artículo y tutorial para personas como yo que no sabemos casi nada de código. Tengo una pregunta adicional: Yo desearía colocar el menú de forma vertical en un «sidebar» ¿qué mas hay que complementar? Gracias Diego.

    Responder
    • Diego Fresno dice

      25 mayo, 2016 en 11:11 am

      Muchas gracias, Noriaki!.
      Si es en una sidebar puedes insertarlo con el widget «Menú personalizado» 😉

      Responder
  2. Dem dice

    4 junio, 2016 en 4:17 am

    en dónde debo poner esto para modifical el estilo?

    .menu-menu-del-footer-container {
    width: 100%;
    background-color: #1a1a1a;
    margin-bottom:30px;
    }
    .menu-menu-del-footer-container ul {
    list-style: none;
    margin-top:35px;
    }
    .menu-menu-del-footer-container ul li {
    display: inline-block;
    margin-right: 30px;
    }
    .menu-menu-del-footer-container ul li a{
    display: inline-block;
    padding:15px;
    background-color: #fff;
    color: #111;
    border-radius: 8px;
    }

    Muchas gracias!

    Responder
    • Diego Fresno dice

      4 junio, 2016 en 7:58 am

      Hola Dem.
      Eso se pone en el archivo style.css del tema, pero cuidado, para que funcione las clases tienen que ser exactamente las mismas.
      Un saludo.

      Responder
  3. Elias Torres dice

    4 junio, 2016 en 4:51 am

    Hola, Que tal la verdad de gran ayuda tu post, muchas gracias , mi consulta es si esto me ayudaría en lo siguiente, no lo que necesito es insertar arriba de la cabecera principal del menú, el teléfono y la dirección del local de la pagina que estoy haciendo, lamentablemente esta plantilla de wordpress no tiene esa opción, y no se como colocar esos datos encima de mi logo o del menú, y que sean adaptables para móviles, que me recomiendas no poseo mucha experiencia en wordpress. gracias!

    Responder
    • Diego Fresno dice

      4 junio, 2016 en 8:02 am

      Hola Elias!.
      Para lo que tú quieras no necesitas añadir un menú nuevo, porque lo que tú quieres insertar es texto puro. Fíjate si tu tema tiene un area de widgets en el header. Otra opción es editar el archivo header.php.

      Un saludo!.

      Responder
  4. Kiko dice

    1 septiembre, 2016 en 3:08 pm

    Hola Diego:
    Buen tutorial…muy útil.
    Saludos

    Responder
  5. Jose Miguel dice

    27 octubre, 2016 en 2:32 pm

    Hola Diego he conseguido insertar el nuevo menú que he creado pero el estilo que me da no es el que me aparece en el menú principal (horizontal, fondo negro, tipo blanca..), si no que sale vertical, separado por puntos y sin fondo de color. Me gustaría que tomara los estilos del menú predefinido. ¿Cómo puedo hacerlo?

    Responder
    • Diego Fresno dice

      28 octubre, 2016 en 12:01 pm

      Hola Jose Miguel!.

      Deberías asignarle al menú la misma clase que tenga el menú principal. Puedes verlo con el inspector de elementos de Chrome, por ejemplo.

      Un saludo!!.

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

diegofresno.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Diego Fresno López como responsable de esta web.
La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.

  • Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (proveedor de hosting de diegofresno.com) dentro de la UE. Ver política de privacidad de Raiola.
  • Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@diegofresno.com así como el derecho a presentar una reclamación ante una autoridad de control.
    Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://diegofresno.com, así como consultar mi política de privacidad.

Barra lateral primaria

Últimas Entradas

Filtrar spam en Analytics

Cómo filtrar el spam de Analytics

Crear custom post types

Crear custom post types en WordPress

Pasar WordPress a SSL

Añadir áreas de widget personalizadas en WordPress

Añadir un nuevo área de widgets personalizado en WordPress

Importar y exportar widgets en WordPress

Importar y exportar widgets en WordPress

Suscríbete al blog

Footer

diegofresno.com Diseño web y Marketing Online Av. Argentina, 132. Oficina 239 33213 Gijón Asturias

  • Inicio
  • Portfolio
  • Blog
  • Contacto
  • Facebook
  • LinkedIn
  • Aviso Legal
  • Políticas de privacidad
Google ârtner Diego Fresno
DMCA.com Protection Status