Personalizando Menús en WordPress

A lo largo de mi carrera como desarrollador WordPress, una de las necesidades más recurrentes que he enfrentado ha sido personalizar los menús de navegación. Ya sea para agregar clases CSS específicas, mostrar íconos junto a los elementos del menú o incluso filtrar ciertos enlaces dependiendo del rol de usuario, estas tareas han sido esenciales para ofrecer experiencias personalizadas y funcionales.

Recuerdo un proyecto específico en el que un cliente necesitaba mostrar un ícono de «nuevo» junto a las páginas recién agregadas en su sitio web. Mi primer intento fue modificar directamente el HTML generado, pero pronto me di cuenta de que esto no era ni eficiente ni escalable. Fue entonces cuando me topé con la función mágica de WordPress: wp_nav_menu_objects.

¿Qué es wp_nav_menu_objects y cómo puede ayudarte?

En este artículo, quiero hablarte sobre cómo esta función puede ser tu mejor aliada para transformar un menú de navegación estándar en algo verdaderamente dinámico y adaptado a las necesidades de tus proyectos. wp_nav_menu_objects te permite modificar los elementos de un menú justo antes de que se rendericen, dándote control total sobre cada aspecto de ellos.

Vamos a ver muchos de sus usos, acompañados de ejemplos prácticos para que puedas implementarlos fácilmente en tus proyectos.

Personalizando Menús con wp_nav_menu_objects

1. Filtrar Elementos del Menú según el Rol del Usuario

Una de las aplicaciones más comunes es mostrar ciertos enlaces solo a usuarios con roles específicos. Por ejemplo, un enlace al panel de administración para los administradores.

	add_filter('wp_nav_menu_objects', 'filtrar_menu_por_rol', 10, 2);

	function filtrar_menu_por_rol($items, $args) {
		// Recorremos cada elemento del menú
		foreach ($items as $key => $item) {
			if ($item->title === 'Admin Panel' && !current_user_can('administrator')) {
				unset($items[$key]); // Eliminamos el elemento si no es admin
			}
		}
		return $items;
	}

Explicación:

• El filtro se engancha a wp_nav_menu_objects.
• Iteramos cada elemento del menú, comprobamos si el usuario tiene permisos y eliminamos los elementos según corresponda.

2. Agregar Clases CSS Dinámicamente

Supongamos que queremos agregar una clase especial a los elementos del menú que están marcados como «destacados».

 

	add_filter('wp_nav_menu_objects', 'agregar_clases_a_menu', 10, 2);

	function agregar_clases_a_menu($items, $args) {
		foreach ($items as $item) {
			if (get_post_meta($item->object_id, 'menu_destacado', true)) {
				$item->classes[] = 'destacado'; // Añadimos la clase
			}
		}
		return $items;
	}

Explicación:

• Aquí verificamos si una meta clave personalizada (menu_destacado) está activa en la página o entrada asociada al enlace del menú.
• Agregamos dinámicamente una clase CSS llamada destacado.

3. Añadir Íconos a los Elementos del Menú

Los íconos son una gran manera de mejorar la experiencia visual de los menús.

	add_filter('wp_nav_menu_objects', 'agregar_iconos_a_menu', 10, 2);

	function agregar_iconos_a_menu($items, $args) {
		foreach ($items as $item) {
			if ($item->title === 'Inicio') {
				$item->title = '<i class="fas fa-home"></i> ' . $item->title;
			}
		}
		return $items;
	}

Explicación:

• En este ejemplo, añadimos un ícono de Font Awesome al enlace que tiene el título «Inicio».
• La clave está en modificar el valor del título (title) del elemento del menú.

4. Mostrar Etiquetas Personalizadas

¿Quieres añadir una etiqueta como «Nuevo» junto a los enlaces de las páginas recientes? Aquí tienes:

	add_filter('wp_nav_menu_objects', 'mostrar_etiqueta_nuevo', 10, 2);

	function mostrar_etiqueta_nuevo($items, $args) {
		foreach ($items as $item) {
			$fecha_creacion = get_the_date('U', $item->object_id);
			if (time() - $fecha_creacion < 30 * DAY_IN_SECONDS) { 
                  $item->title .= ' <span class="etiqueta-nuevo">Nuevo</span>';
			}
		}
		return $items;
	}

Explicación:

• Comparamos la fecha de creación del contenido con la fecha actual. Si fue creado hace menos de 30 días, añadimos una etiqueta «Nuevo».

5. Crear Menús Condicionales por Ubicación

Podemos aplicar personalizaciones diferentes dependiendo del lugar donde se utilice el menú.

	add_filter('wp_nav_menu_objects', 'personalizar_por_ubicacion', 10, 2);

	function personalizar_por_ubicacion($items, $args) {
		if ($args->theme_location === 'header-menu') {
			foreach ($items as $item) {
				$item->classes[] = 'menu-header';
			}
		}
		return $items;
	}

Explicación:

• Comprobamos si el menú pertenece a una ubicación específica (theme_location) y añadimos clases personalizadas a sus elementos.

6. Ordenar Elementos del Menú Programáticamente

En lugar de depender del orden manual, podrías ordenarlos por título, fecha o cualquier otra lógica.

	add_filter('wp_nav_menu_objects', 'ordenar_menu', 10, 2);

	function ordenar_menu($items, $args) {
		usort($items, function ($a, $b) {
			return strcmp($a->title, $b->title); // Orden alfabético
		});
		return $items;
	}

Explicación:

• Usamos usort para reordenar los elementos según el título, aunque puedes cambiar la lógica de comparación según tu necesidad.

Conclusión

La función wp_nav_menu_objects es una herramienta poderosa para personalizar menús en WordPress. Desde agregar clases dinámicas hasta filtrar elementos por rol de usuario o mostrar etiquetas personalizadas, las posibilidades son prácticamente ilimitadas. Lo mejor de todo es que te permite mantener tu código organizado y reutilizable, cumpliendo con las mejores prácticas de desarrollo.

Si estás buscando ofrecer experiencias únicas a tus clientes o usuarios, no dudes en explorar esta función. ¡Los menús de navegación dejarán de ser un simple listado de enlaces y se convertirán en un elemento clave de la interfaz de tus proyectos!