Resumen

Al crear nuestras propias plantillas en WordPress, tenemos la posibilidad de añadir menús en las mismas, de manera que le otorgemos navegación a nuestro sitio, aquí veremos como añadir nuestros propios menús y editarlos a gusto.

Detalle

Para empezar, debemos saber que todo esto será hecho con código, por lo que se debe tener conocimientos básicos de PHP y a ser posible conocer la estructura de archivos que maneja WordPress.

Ahora conociendo esto, debemos navegar a dos archivos en específico para poder hacer un cambio básico en una plantilla, tanto el archivo functions.php (que encontramos en el tema que tenemos activado o que queremos cambiar), este archivo es el que se utiliza para llamar a diferentes funciones propias de wordpress, en este caso usaremos la función register_nav_menus. 

Registrar menú

Formula de esta función:

function register_my_menu() {

register_nav_menu('tu-menu',__( 'Nombre de tu menú' ));
}


add_action( 'init', 'register_my_menu' );

Explicación: creamos una nueva función llamada register_my_menu (puede ser el que tu elijas), donde dentro tendremos nuestro register_nav_menu, el cual será el que cree el menú y lo registre, esto hará que el menú que tendremos dentro ahora sea visible desde la sección de menú en el personalizar de wordpress, seguidamente dentro vemos un ‘tu-menu‘, este será el identificador de nuestro menú, y dentro el nombre ‘Nombre de tu menú’, será el nombre visible de dicho menú. Por ultimo el add_action, aplica la función antes creada.

Pero con esto no hemos puesto nuestro menú en ningun lugar de nuestro tema, por lo que si añadimos elementos al menú no se verá por ningun lado, por lo que ahora añadiremos otra función, esta vez en el archivo PHP donde querramos que se vea la plantilla, comunmente buscaremos añadir este menú en el archivo header.php, de manera que se vea desde cualquier otro archivo que utilice el header, si solo queremos que se vea en las páginas, lo pondremos en el archivo page.php, y así dependiendo de nuestro gusto, practicamente puede ser en cualquier archivo donde deseemos.

Mostrar menú en el tema

La función es:

<?php wp_nav_menu( array( 'theme_location' => 'tu-menu' ) ); ?>

Explicación: como vemos lo primero es añadir el código con la etiqueta de php <?php  ?>, seguidamente utilizar la función wp_nav_menu y dentro pondremos un array, que busque la localización de algún menú, donde pondremos el identificador de nuestro menú registrado, en este caso tu-menu, por lo que donde hayamos colocado esta línea es donde se verá en nuestro tema.

Personalizar menú

Ahora, si deseamos añadir elementos extras a nuestro menú o personalizarlo un poco, tenemos algunas opciones disponibles, por ejemplo podemos sustituir el código anterior por:

<?php
$menuParameters = array(
'theme_location' => 'navegation',
'menu' => 'navegation',
'container' => 'div',
'container_class' => 'navbar-nav',
'menu_class' => 'navbar-nav',
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
Explicación: funciona de manera similar al anterior, solo que juntaremos un conjunto de parametros para el menú, desde el contenedor, una clase para el contenedor, una clase para para los elementos del menú y el uso del items_wrap, que la variable %3$s, significa que utilice los elementos del menú que le asignaremos, si tienes curiosidad %1$s, se refiere al ID del menú, %2$s se refiere a la clase y %3$s son los items del menú, por lo que buscamos mostrar los items en esta ocasión. Finalmente haremos un echo, que mostrará el menú con los parametros que le establecimos anteriormente, dentro de una etiqueta <a>.
Con esto podremos darle más apariencia y personalización a nuestro menú, con el uso de clases propias que luego le daremos estilo.
Ahora que todo esta configurado, podemos ir a la sección personalizar, de nuestro wordpress y en la pestaña menú debería aparecer el menú que registramos, le añadimos algunos item y ahora ¡adelante con la personalización y vista de los mismos!

servicio@rolosa.com

 


0 comentarios

Deja una respuesta

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