Cree un menú de navegación personalizado en WordPress sin usar complementos

No importa qué tema de WordPress esté utilizando, es casi seguro que proporcionará al menos una ubicación de menú donde puede mostrar su menú (normalmente en el encabezado de su sitio web). Los menús se pueden crear fácilmente desde el interior del área de administración y se pueden agregar rápidamente a estas ubicaciones preestablecidas. Pero, ¿qué hace si necesita otro menú para mostrar en otro lugar de su sitio web? En este tutorial, veremos cómo puede crear su propio menú de navegación que se puede mostrar en una ubicación de su elección sin tener que usar un complemento.

¡Vámonos!

Registre su nueva ubicación de menú personalizado

Lo primero que debemos hacer es registrar la ubicación de su nuevo menú personalizado. Para hacer esto, abra el archivo functions.php de su tema activo con el editor de texto de su elección (como Sublime) y agregue el siguiente código:

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

En este fragmento de código, hemos usado el gancho add_action() para agregar una función de devolución de llamada my_custom_menu() . Esto significa que la función my_custom_menu() se ejecutará junto con las funciones principales predeterminadas que se ejecutan cada vez que se llama a la acción init . La cadena "Mi menú personalizado" es la versión legible que verá en la página de administración.

Dentro de la función, la función central register_nav_menu se usa para registrar una ubicación del menú de navegación para nuestro tema. En caso de que desee registrar varios menús, puede usar register_nav_menus() y definir las ubicaciones de los menús dentro de una matriz como esta:

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

Para confirmar los resultados, vaya a su área de administración en Apariencia > Menús. Notará que la ubicación de su menú personalizado está incluida en la configuración del menú.

Nota: si seleccionamos esta ubicación en este punto, el menú no mostrará nada en la interfaz.

Cómo mostrar nuestro menú personalizado

Digamos que queremos que la nueva ubicación del menú se use para un menú horizontal secundario que se ubicará debajo del "Menú horizontal de escritorio" que ya está presente en nuestro tema.

Para ello insertaremos un código en la plantilla del tema donde queremos que se muestre el menú. En este ejemplo, usamos el tema Twenty Twenty y editamos su archivo header.php para mostrar nuestro menú. Encontrará este archivo en la carpeta del tema.

Abra el archivo header.php con su editor y busque este elemento en el código alrededor de la línea 33.

 <header class="header-footer-group" role="banner">

Justo debajo de esta sección pondremos nuestro código para mostrar nuestra nueva ubicación de menú personalizado: 'mi-menú-personalizado'.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

El valor de ubicación_tema debe ser idéntico al nombre que proporcionaste para tu menú en el código functions.php que pegamos antes. En nuestro caso: 'mi-menú-personalizado'.

Ahora vamos a crear un menú de prueba para ver si esto funciona. Para hacer esto, vaya a Apariencia > Menús y comience a crear un nuevo menú.

Asigne al menú el título "Menú secundario", seleccione "Mi menú personalizado" para una ubicación y luego presione el botón "Crear menú".

Finalmente, agregue algunos elementos al menú (por ejemplo, Elemento de menú 1, Elemento de menú 2, Elemento de menú 3) y luego guarde el menú.

Veamos qué tenemos ahora en el frontend.

Hemos logrado mostrar nuestro nuevo menú, pero es bastante desordenado, ¿no?

Si vemos nuestro código fuente, notaremos que la función wp_nav_menu() creó este fragmento de código HTML

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

Entonces, podemos usar las clases descritas en el código para embellecer nuestro menú. Para hacer esto usaremos algo de CSS. Busque style.css (esto normalmente se encuentra en la misma ubicación que el archivo header.php) y luego ábralo con su editor para agregar este código:

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

El resultado será mucho más ordenado ahora y mucho más acorde con el estilo de nuestro sitio web de demostración.

Personalización adicional del menú

La función wp_nav_menu() que proporciona WordPress para mostrar menús viene con una variedad de opciones que le permiten personalizarla aún más.

' ubicación_tema '

Como describimos anteriormente, este parámetro corresponde a las claves pasadas a la función register_nav_menus() en functions.php

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'clase_menu'

Existe la opción ' menu_class ' que le permite especificar su propia clase para el menú.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

Como ya habrá notado, la clase no reemplaza a ninguna otra clase, sino que se agrega en el elemento ul en su lugar.

'menu_id'

A diferencia de la opción de clase, la opción menu_id reemplaza la identificación del menú actual. El HTML generado para el elemento <ul> será algo como esto.

 <ul class="menu">

Cuando no se usa esta opción, la identificación será el slug del menú, que se incrementará cuando se usen varias instancias.

'envase'

Este parámetro define el tipo de elemento que rodea el menú. El valor predeterminado es 'div'. Si por ejemplo usas este código:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

obtendrá este resultado:

'clase_contenedor'

Esta es una clase que se aplica al elemento principal del menú:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

También puede insertar contenido antes o después de cada enlace de elemento de menú utilizando los parámetros 'antes' y 'después'. Esto es muy útil si desea anteponer un guión o un icono o envolver los elementos del menú en una etiqueta de intervalo. Puede probar el siguiente ejemplo usted mismo para ver esto en acción:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

También puede agregar iconos a los elementos del menú. Intente, por ejemplo, instalar el complemento Font Awesome para incluir su biblioteca de iconos y use la opción de menú 'antes' para aplicar un icono de fuente impresionante a los elementos del menú.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

Puede encontrar el código para cada ícono en la lista de íconos del complemento.

El parámetro del caminante

Por último, pero no menos importante, proporcionaremos un ejemplo de cómo el parámetro del caminante ayuda a personalizar los menús. Si no sabe cuál es la clase de caminante de WordPress, entonces lo siguiente probablemente no tenga mucho sentido. Sugerimos leer primero 'Familiarizarse con WordPress Walker Class'.

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Para demostrar la clase Walker, agregaremos un "Subelemento" en nuestro menú.

Anularemos la clase Walker predeterminada que proporciona WordPress. Este se encuentra en el archivo wp-includes/class-walker-nav-menu.php. Para lograr eso, vaya a su archivo function.php e inserte el código a continuación:

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

Ahora, en su headers.php, reemplace el código de su menú con este (daremos salida a ambas versiones del menú a propósito solo para comparar los resultados):

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

Al comparar este código con la clase Walker_Nav_Menu original, notará que $tree_type y $db_fields permanecieron intactos, pero el resto cambió. Tómese su tiempo y compare el código y las salidas HTML en estas dos versiones del mismo menú e intente experimentar jugando con My_Nav_Menu_Walker Class.

Conclusión

¡Los menús en los sitios web son claramente muy importantes! Ser capaz de tener un control total sobre la ubicación y salida de los menús amplía sus capacidades como desarrollador de temas y abre una gama de nuevas y emocionantes posibilidades al diseñar sitios web sin tener que depender de complementos, lo que siempre es bueno poder hacer.