Agregar nuevos menús y nuevas posiciones para estos en WordPress

Tiempo estimado de lectura: 15 minutos

 

Cómo agregar nuevos menús a cualquier tema de WordPress

Seguramente has utilizado en alguna ocasión un tema de WordPress en el que quizás necesitabas agregar nuevos menús y nuevas ubicaciones de los mismos a ese tema.

Si has tenido esta necesidad o simplemente quieres saber cómo poder agregar nuevos menús y elegir sus ubicaciones en tu tema de WordPress, en este artículo te voy a mostrar cómo hacerlo.

En este ejemplo voy a utilizar el tema twentyseventeen y en él vamos a crear un nuevo menú que irá en el pie de página y se llamará Pie de página.

Estos son los pasos que vamos a seguir

En primer lugar, tendremos que registrar el nuevo menú en Wordpress, a continuación vamos crear propiamente el menú y por último asignaremos ese menú a la posición que deseemos.

Comenzamos…

Registro del nuevo menú

Para crearlo vamos a Apariencia, Menús, pulsamos el link Crear un nuevo menú, le damos un nombre (por ejemplo Pie de página) y pulsamos el botón Crear. Con esto, hemos creado el nuevo menú y hemos hecho que WordPress lo tenga reconocido.

Creación del nuevo menú

Ahora vamos a asignarle las páginas al nuevo menú, para ello las seleccionamos del bloque Páginas que tenemos a la izquierda y pulsamos el botón Añadir al menú, por último pulsamos el botón Guardar menú.

Crear la nueva posición donde queremos asociar este menú

Para crear la posición de nuestro nuevo menú vamos a editar el archivo functions.php de nuestro tema.

Dentro de functions.php vamos a buscar la función que registra los menús dentro del tema, para ello basta hacer una búsqueda normal con la palabra menú.

Aquí vemos la función register_nav_menus en la que vemos los dos menús con los que trabaja este tema, vamos a añadir nuestro nuevo menú para que sea reconocido y posteriormente ubicado en su lugar.

Para ello, añadimos una nueva línea a los menús que ya hay creados con el siguiente código:

‘footer’ => __( ‘Footer Menu’, ‘twentyseventeen’ )

Nota:
Recuerda colocar una coma ( , ) al finalizar el código del menú anterior que ya estaba registrado en functions.php.

Si guardamos este archivo y vamos al escritorio del tema, en el apartado Menús vemos como ya ha aparecido el nombre del nuevo menú en el apartado Localizaciones.

Acabamos de aprender a agregar nuevos menús a nuestro WordPress.

Aquí lo que tenemos que hacer es asignarle el Menú pie de página a la nueva posición que hemos creado y guardar los cambios. Con esto ya tendremos asociado el menú llamado Pie de página con el nuevo registro que hemos creado en functions.php anteriormente.

Hacer que el nuevo menú aparezca en la zona donde queremos que aparezca

Si vemos la página web, y en nuestro caso, vamos hacia abajo hasta el footer, vemos que aún no se ha colocado nuestro menú donde debería haberse colocado (que es en el pie de página).

Para conseguir que se muestre debemos buscar dentro de nuestro tema el archivo footer.php, en él está registrada a su vez el menú de las redes sociales que incluye nuestro tema, pues será aquí donde crearemos nuestro nuevo menú y haremos que se muestre, para ello utilizaremos la función wp_nav_menu.

Registrando el nuevo menú en el footer de la página

Podemos copiar el código del menú social para crear nuestro nuevo menú, pero en realidad es mucho más sencillo que todo el código que se utiliza en el menú social. En realidad, nuestro menú (el código de nuestro menú) será tan sencillo como el código del menú superior.

Vamos a duplicar entonces el código del menú superior para utilizarlo con nuestro nuevo menú, para ello vamos a la carpeta template-parts, navigation, y abrimos el archivo navigation-top.php. En él copiamos el código:

<?php wp_nav_menu( array(
‘theme_location’ => ‘top’,
‘menu_id’ => ‘top-menu’,
) ); ?>

Y lo pegamos en el archivo site-info.php que está en la carpeta template-parts, footer.

Y el texto Proudly powered by WordPress… ¿qué ocurre con él?

Aquí también es donde se muestra el link de Desarrollado por WordPress, y es el mismo sitio donde queremos poner nuestro menú footer (es decir, vamos a eliminar el link y poner el menú en su lugar).

Para mostrar el menú lo pegamos dentro del div site- info, cambiamos la palabra top por footer, para que lógicamente haga referencia a nuestro nuevo menú y borramos el link.

El código completo del div sería este:

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

Si actualizamos la página web para ver los cambios, veremos esto:

Nota:
Si no ves las opciones del menú footer o ves otro menú en su lugar, asegúrate de que para el menú Footer menu tienes asignado el menú Pie de Página.
Para ello ve a Apariencia, Menús y selecciónalo en la ficha Gestionar lugares.

Aplicarle estilos al menú para que se muestre más bonito

Para aplicarle estilos a este menú y que sean de forma permanente hay que aplicarlos en la hoja de estilos css del tema. Para hacerlo vamos a la hoja de estilos general para nuestro tema, llamada style.css y al final de este archivo pegamos este código:

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

Ahora sólo falta guardar los cambios y ver en la vista previa en el navegador cómo hemos podido agregar nuevos menús con sus correspondientes ubicaciones.

Nota:
Si no consigues ver los cambios cuando pegas el código en la hoja de estilos global del tema, debes entonces pegarlo en el apartado CSS adicional.
Para ello debes ir a Apariencia, Personalizar.

Y este es el resultado final, así es como podemos agregar nuevos menús a cualquier tema de WordPress y crear ubicaciones específicas para esos menús.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *