WordPress : Registrar Menús en una plantilla

Referencia :  Rafel sanzo - Crear una plantilla en WordPress: menús #3 - Diseño y programación Web  en el minuto 3:47

• La  funcion register_nav_menus→  Registra las ubicaciones de varios menús de navegación para un tema.
• La  funcion register_nav_menu→  Registra una ubicación del menú de navegación para un tema.
• La funcion has_nav_menu  →  Para verificar si el menu se a creado.
• La funcion  wp_nav_menu →  Mostrar Menu creado.

Para registrar un menu usamos la funcion - register_nav_menu 

Registra una ubicación del menú de navegación para un tema.

Sintaxis:

register_nav_menu( string $location, string $description )

Parametros register_nav_menu 

$location 

$location cadena requerido

Identificador de ubicación del menú. con el identificador vamos hacer referencia al menu cuando deseamos mostrarlo con la funcion  wp_nav_menu 

Registramos el Menu

register_nav_menu('bootstrap-menu',__( 'Bootstrap 5 Menu' ));

Mostramos el menu

wp_nav_menu(array('theme_location' => 'bootstrap-menu',

$description

$description  cadena  requerido

Texto descriptivo de la ubicación del menú.  Esta descripción es el que se vera en el administrador de WordPress en Apariencia → Menú, como se aprecia en la imagen ajustes del menú

Para registrar varios menus usamos la funcion -  register_nav_menus  

Para registrar varios menus  debemos poner en el archivo  functions.php el siguiente codigo:

Referencia : Crear una plantilla en WordPress: menús #3 - Diseño y programación Web  en el minuto 3:47

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
	'top'    => __( 'Top Menu', 'mitemplate' ),
	'footer' => __( 'Footer Menu', 'mitemplate' ),
) );

Analizando el codigo

• Estamos registrando las ubicaciones de dos menús  como primer parametro hemos puesto los 2 identificadores del menu ('top' , 'footer' )  que deven ser unicos.   
  
  
• Como segundo parametro agregamos la descripción del menú ( 'Top Menu' , 'Footer Menu' )  , esta descripción es el que se vera en el administrador de WordPress en Apariencia → Menú, como se aprecia en la imagen ajustes del menú

Recuerda :  al poner los __ guiones abajos estamos diciendole que es una cadena de traduccion donde el primer elemento  (Top Menu, Footer Menu) , es la cadena que deseamos traducir  y el segundo elemento viene hacer a que categoria pertenece (mitemplate)  , este formato los reconoce  los plugins de traduccion.

Tambien lo podemos definir asi para hacerlo de un solo idioma:

register_nav_menus( array(
	'top'    =>( 'Top Menu'),
	'footer' =>( 'Footer Menu'),
) );

Una vez registrados los menús, desde nuestro gestor de WordPress,  nos ubicamos en Apariencia -> Menús y ahí los tendremos que ver.

Imagen Ajustes del menú (Apariencia → Menus)

En nombre del menu asignamos un nombre por ejemplo MenuPrincipal  y le asignamos una ubicacion definido en en el archivo functions.php ,  por ejemplo elegiremos Top Menu , para finalizar presionamos el boton crear menu.

Una vez creado el menu debemos asignarle los elementos que se mostraran en el menu (inicio,quienes somos,etc)

Mostrar el menú en el Theme

El menu creado lo podemos llamar desde cualquier plantilla por ejemplo (header.php , footer.php , etc).

Para imprimir el menu utilizaremos la  funcion wp_nav_menu , ejemplo: 

<?php if ( has_nav_menu( 'top' ) ) :
    wp_nav_menu( array( 
    'theme_location' => 'top',
    'container' => 'nav',
    'container_class' => 'container',
    'menu_class' => 'menu-list list-inline'
   ) );
endif; ?>

Analizando el codigo para mostrar menu en el theme

Usamos la función has_nav_menu para verificar si existe el menú y le pasemos como parametro el identificador creado al registrar el menu que seria ('top' , 'footer' ) solo le pasamos un identificador. 

Si existe el menu creado nos da true y pasa a ejecutar la función  wp_nav_menu , que nos muestra el menú.

/*
 * Add classes to main menu
 */
function mytheme_menu_classes($classes, $item, $args) {
  if($args->theme_location == 'top') {
    $classes[] = 'list-inline-item';
  }
  return $classes;
}
add_filter('nav_menu_css_class','mytheme_menu_classes',1,3);

Analizando el codigo agregar unas clases en los elementos 'LI'

 → Primero creamos una funcion 'mytheme_menu_classes' con sus parametros:

• $classes =  Las clases..
• $item     =  El objeto actual
• $args     =  Los argumentos que definen todo le menu.

 → Luego comparamos if($args->theme_location == 'top')  definido con la funcion wp_nav_menu definido en la seccion Mostrar el menú en el Theme.

 → Si la comparacion coincide decimos $classes[] es un array y contiene este elemento  'list-inline-item'; en esta condicion se agrega a los elementos 'LI' la clase 'list-inline-item'. Investigar mas de la funcion $classes[]

 → add_filter('nav_menu_css_class','mytheme_menu_classes',1,3); → nav_menu_css_class es un nombre reservado de wordpress , el numero 1 es la prioridad y el numero 3 son los argumentos que acepta la funcion.

referencia:

Crear una plantilla en WordPress: menús #3 - Diseño y programación Web en el minuto 3:47

¿Cómo agregar Clase en <li> usando wp_nav_menu() en Wordpress?

Ejemplos

Ejemplo de un codigo de menu tradicional sin WordPress que podemos comparar en Analizando el codigo para mostrar menu en el theme , lineas arriba.

 <div class="menu-bar text-xs-right">
        <nav class="container" role="menu">
          <ul class="menu-list list-inline">
              <li class="list-inline-item">
                  <a href="#">Inicio</a>
                </li>
                <li class="list-inline-item">
                  <a href="#">El restaurante</a>
                </li>
                <li class="list-inline-item">
                  <a href="#">La carta</a>
                </li>
                <li class="list-inline-item">
                  <a href="#">Dónde estamos</a>
                </li>
                <li class="list-inline-item">
                  <a href="#">Contacto y reservas</a>
                </li>
            </ul>
        </nav>
      </div>

Añadiendo estilos a los menus y submenus 

Por defecto WordPress a un Li que tiene un Submenu anidado (dropdown)  le pone una clase por defecto que es:  .menu-item-has-children   

/* Menus */
.menu-bar {
	background-color: #ffbc01;
	margin-top: 20px;
}
	.menu-bar a {
		color: #2a1000;
		font-size: 16px;
		font-weight: 500;
	}
	
	.menu-bar a:hover {
		text-decoration: none;
		color: #fff;
	}

.menu-list {
	padding: 12px 0;
	margin-bottom: 0;
}
	.menu-list > li:not(:last-child) {
		margin-right: 40px;
	}

/* Submenus */
.menu-item-has-children {
	position: relative;
}
	.menu-item-has-children .sub-menu {
		display: none;
		position: absolute;
		z-index: 10;
		padding: 0;
		min-width: 120px;
		text-align: left;
		background-color: #ffbc01;
		box-shadow: 0 3px 3px rgba(0,0,0,.5);
	    left: -8px;
	}

		.menu-item-has-children .sub-menu li {
			padding: 5px 10px;
		}

	.menu-item-has-children:hover .sub-menu {
		display: block;
	}

	.menu-item-has-children > a::after {
		    content: '';
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 5px 5px 0 5px;
		    border-color: #000000 transparent transparent transparent;
		    position: relative;
		    top: 13px;
		    margin-left: 9px;
	}

		.menu-item-has-children > a:hover::after {
			border-color: #fff transparent transparent transparent;
		}

Ejemplo :

En este caso productos es menu de tipo dropdown y se le asigna la clase .menu-item-has-children    

referencia: Crear una plantilla en WordPress: menús #3 - Diseño y programación Web