Crea nuevos menús en la ubicación que quieras de tu web WordPress

En nuestro WordPress el theme que utilizamos puede soportar un número de ubicaciones de menús limitado y en lugares concretos. Pero ¿qué ocurre si necesitamos crear un nuevo menú en otro lugar? en el footer, el sidebar, el topbar… En este tutorial vamos a ver paso a paso cómo hacerlo, es un poquito largo pero vale la pena aprender y tener la libertad de ubicar menús dónde nosotros queramos 🙂

Para hacer esta práctica vamos a generar 2 menús en lugares distintos y en plantillas diferentes. Vamos a ubicar el primero en el footer del famoso tema Twenty Twelve y también crearemos un nuevo menú en el topbar de la X theme, una plantilla de pago con mil posibilidades pero que por defecto no admite menús en el topbar.

1-Accedemos a Generate WP

La plataforma https://generatewp.com es una auténtica maravilla, nos va a permitir crear el código necesario para hacer un montón de cosas ¡y sin tener ni idea de código! así que échale un vistazo y verás cuántas posibilidades. Nosotros de momento al grano, ¡a por nuestros nuevos menús!

En https://generatewp.com/generator  seleccionamos «Menu Generator».

Vamos a darle un nombre  en «Function Name», por ejemplo: marabelia_menus ¿Queremos que sea apto para «Child Themes»? Decimos que sí «Text Domain» no es necesario escribir una traducción, lo dejamos como está.

crear-nuevo-menu-wordpress

Como vemos, podemos crear hasta 5 menús, pero nosotros vamos a crear 2. Clickamos en «Menu 1» y le vamos a llamar «footer», puedes ponerle el nombre que quieras siempre que sea con formato de slug, en mínusculas y sin espacios. Escribimos una pequeña descripción.

nuevo-menu-footer

El «Menú 2″ lo vamos a llamar «topbar» y escribimos una pequeña descripción también (esto no se va a ver en ningún sitio, es para nosotros)

nuevo-menu-en-topbar

 

Muy bien, ahora pulsamos «Update Code» y se nos genera un código. En tu caso seguramente sólo quieras un menú, así que tu código será distinto:

if ( ! function_exists( 'marabelia_menus' ) ) {// Register Navigation Menus
function marabelia_menus() {$locations = array(
'footer' => __( 'Menu ubicado en footer', 'text_domain' ),
'topbar' => __( 'menu ubicado en topbar', 'text_domain' ),);register_nav_menus( $locations );}add_action( 'init', 'marabelia_menus' );}

2-Instalamos el plugin Code Snippets

Este código que hemos generado debemos integrarlo en nuestro WordPress y en realidad podríamos hacerlo directamente en la página functions.php de nuestro theme, y más concretamente en nuestro child theme.. peeeroooo… ¿qué ocurre el día que cambiamos de tema? que perderíamos todo o tendríamos que buscarlo dentro de functions.php para copiar y pegarlo de nuevo. Con el plugin Code Snippets podemos tener todos esos «trocitos de código» bien ordenados, activados o no, en un plugin a parte, así que aunque actualicemos el tema o incluso lo cambiemos no perderemos nada. Una vez instalado y activado este plugin vamos a crear un «New Snippet» y lo rellenamos con el nombre qu elijamos, el código que hemos creado y una pequeña descripción. Las «Tags» son interesantes para que en un futuro, cuando tengamos muchos snippets, nos ayuden en la búsqueda. Pulsamos «Save changes and activate»

plugin-code-snippets

3- Creando nuevos menús

En nuestro caso particular, hemos creado 2 ubicaciones nuevas, una en el footer y otra en el topbar. Vamos a centrarnos en la opción 1, con el tema Twenty Twelve activado. En Apariencia/menu creamos un nuevo menú, que llamaremos «nuevo footer» y añadimos las páginas que queramos, en este caso «About», «Blog» y «Cart» y ¡ nos aparecen 2 nuevas ubicaciones que antes no teníamos «Menú ubicado en footer» y «Menú ubicado en topbar».

En este caso vamos  a colocarlo en el footer y dejamos en blanco el «Menú ubicado en topbar» que es el que hemos generado para la X theme.

creando-nuevos-menus

 

4- Colocando el nuevo menú dentro de nuestra plantilla Twenty Twelve

Bueno, hasta aquí hemos hecho mucho pero todavía no aparece nuestro menú en el footer, ya hemos creado el menú en cuestión con las páginas que hemos querido, ¿pero cómo lo vemos? Ahora tenemos que ubicarlo dentro de nuestra plantilla y para eso necesitamos este código:

<?php wp_nav_menu( array( ‘theme_location’ => ‘topbar’ ) ); ?>

 

En nuestro caso quedaría así:

 <?php// ============================================================================= // HEADER.PHP // —————————————————————————– // The site header. Variable output across different stacks. // // Content is output based on which Stack has been selected in the Customizer. // To view and/or edit the markup of your Stack’s index, first go to “views” // inside the “framework” subdirectory. Once inside, find your Stack’s folder // and look for a file called “wp-header.php,” where you’ll be able to find the // appropriate output. // ============================================================================= ?> <?php x_get_view( x_get_stack(), ‘wp’, ‘header’ ); ?>

 

Vamos a buscar ahora la página .php donde se encuentra el footer. Por FTP vamos a nuestro thema wpcontent/themes/twentytwelve y tenemos footer.php. Descargamos esta página y la dejamos reservada por si hubiera algún problema, la copiamos en un archivo .txt y añadimos nuestra frase de código, subimos la página y sobreescribimos la actual.

nuevo-menu-footer-twenty

 

Actualizamos y ya tenemos el menú visible en nuestro footer!

menu-footer-twenty-twelve

Nos aparece subrayado y en alienación vertical, para darle otro formato hay que modificar el .css. si no sabes cómo, estamos trabajando en un nuevo tutoríal para explicarlo.

En nuestro caso estamos trabajando sobre la propia plantilla ya que es una página para pruebas, pero lo mejor es que lo hagas sobre tu child theme o tema hijo, sino, cuando actualices la plantilla, tu menú en el footer desaparecerá! o tendrás que acordarte de copiar y pegar el código de nuevo en la página footer.php. Si no sabes como trabajar con temas hijos te recomendamos que leas atentamente este post.

5- Colocando el nuevo menú dentro de nuestra plantilla X Theme

Activamos  X Theme y por supuesto en «Personalizar» / «Header» activaremos el Topbar. Ahora vamos a Apariencia / menús creamos el menú que nos interese, lo llamamos por ejemplo «Nuevo Menu topbar». Añadimos al menú las páginas que queramos, en este caso las mismas que antes, «About», «Blog» y «Cart» y clickamos «menú ubicado en topbar». Guardamos menú.

menu-ubicado-en-topbar-x-theme

y ahora volvemos a la frase de código que deberemos copiaren en el lugar de nuestra plantilla dónde queramos que aparezca este menú. Ahora recordemos la id que teníamos en el snippet:

 

<?php wp_nav_menu( array( ‘theme_location’ => ‘topbar’ ) ); ?>

 

¿Dónde debemos copiar esta frase para que sea visible el código? por intuición podría ser en header.php, vayamos pues a esta página a través del FTP ../wp/content/themes/X y nos encontraremos con esto:

 

<?php

// ============================================================================= // HEADER.PHP // —————————————————————————– // The site header. Variable output across different stacks. // // Content is output based on which Stack has been selected in the Customizer. // To view and/or edit the markup of your Stack’s index, first go to «views» // inside the «framework» subdirectory. Once inside, find your Stack’s folder // and look for a file called «wp-header.php,» where you’ll be able to find the // appropriate output. // ============================================================================= ?> <?php x_get_view( x_get_stack(), ‘wp’, ‘header’ ); ?>

Nos viene a decir que tenemos que ir a la Carpeta «Framework»  y dentro de ésta a «Views» para encontrarnos con carpetas diferentes llamadas «Ethos», «Icon» etc que son las opciones de diseño que te da X theme, según la que hayamos elegido en «Personalizar» podemos encontrar la página header.php en una u otra. Pero ¡Atención! porque en el directorio también está la carpeta «global» y si entramos veremos que ahí está un archivo llamado topbar.php y ahí es donde deberemos ubicar nuestra frase de código.

x-theme-topbar

Si queremos no perder este menú aunque actualicemos la plantilla deberemos utilizar nuestro X Child. X Theme te lo da ya hecho y con las carpetas creadas, así que descargamos topbar.php de nuestro X theme, lo editamos, y lo subimos a nuestro X Child  que es el que tenemos activado.  Nos quedará así:

topbar-x-child

Actualizamos nuestra web y ¡Voilá! nuestro menú está ya en el topbar. Al igual que con el primer menú, ahora faltaría darle formato con .css en nuestro Child Theme, para alinearlo en horizontal, cambiar el color etc. pero ese será en nuestro próximo tutorial. ¡Próximamente :)!

nuevo-menu-en-topbar-x-theme

 

8 comentarios de “Crea nuevos menús en la ubicación que quieras de tu web WordPress

  1. Tulio dice:

    Hola tengo una gran duda, pude realizar todo sin problema, pero cuando se coloca el menu no puedo lograr que sea el menu que yo cree especialmente para el top, solo me muestra de nuevo el menu principal de la barra de navegacion pero arriba osea donde quiero que este el top. Como podria solucionar eso?

    • Marabelia dice:

      Hola Tulio, en el punto 3 del tutorial, tenemos que generar un nuevo menú, en apariencia / menús, donde dice «Elige el menú que quieras editar» has debido usar tu menú principal pero tienes que clicar en «crea un nuevo menú» (a la derecha). Entonces agrega las páginas que te interesan para tu nuevo menú y en «ajustes» indica la nueva indicación, dime si con esto lo has podido resolver.
      Un saludo,

  2. tgcfmg dice:

    saludos yo tengo una plantilla llamada vice no tiene menu en la parte susperior y e echo lo pasos para crearselo pero al agregar el ultimo codigo en la plantilla la opcion tobar no me aparece ahora solo tengo la uvicaciones de los menus y ya pero no me aparecen en la web

Deja una respuesta

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