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!

The post Personalizando Menús en WordPress appeared first on HERNANDO J. CHAVES | DESARROLLADOR WORDPRESS.

• Largos tiempos de espera para ver cambios: Cada vez que se realiza una modificación en el código es necesario recargar manualmente el navegador lo que consume tiempo y corta el flujo de trabajo.
• Errores difíciles de detectar: Sin recarga en caliente es fácil pasar por alto pequeños errores que podrían haberse solucionado rápidamente al ver los cambios instantáneamente.
• Perdida de productividad: La necesidad de recargar constantemente el navegador no solo es frustrante, sino que también disminuye la eficiencia del desarrollo.

¿Cómo Funciona?

Cuando realizas un cambio en tu código, Vite automáticamente detecta la modificación y actualiza solo la parte afectada de la página. Esto es posible gracias a los módulos ES nativo del navegador, que permiten una integración más rápida y eficiente. En lugar de reconstruir todo el proyecto byte solo recopila el módulo específico que ha cambiado y lo inyecta en la página.

Hot Reload de Vite en el desarrollo de temas de WordPress

Configurando el archivo vite.config.js

Lo primero que vamos a hacer es configurar el archivo vite.config.js de Vite para que detecte los archivos .php y envie una señal al servidor y recargue la página, para eso debes agregar las siguientes lineas de código en la sección de plugins:

        //Archivo vite.config.js
	plugins: [ // Define un array de plugins que Vite utilizará
            {
				name: 'php', // Nombre del plugin 
				handleHotUpdate({ file, server }) { // maneja la actualización en caliente
					if (file.endsWith('.php')) { // Comprueba si el archivo que ha cambiado termina en '.php'
					server.ws.send({ type: 'full-reload' }); // Envía una señal al servidor para recargar completamente la página si es un archivo PHP
					}
				}
            }
        ]

Configurando el archivo funtions.php

En el archivo functions.php de tu tema de WordPress, vamos a definir algunas constantes, la primera nos servirá para detectar si estamos en un entorno de producción o de desarrollo:

        if ( ! defined( 'DEV' ) ) define( 'DEV', false );
        define('URL_FILE', get_template_directory_uri() . '/dist');
        const URL_ASSETS = DEV ? 'http://localhost:5173/src' : URL_FILE;

Entonces cuando DEV sea igual a true significa que estamos en un entorno de desarrollo y los archivos seran tomados de la carpeta «src/» y cuando DEV sea false, estaremos en un entorno de producción y encolaremos los archivos que estan en la carpeta «dist» así:

        const URL_ASSETS = DEV ? 'http://localhost:5173/src' : URL_FILE . '/dist';

Aquí el puerto 5173 es el que abre vite cuando ejecutamos en la consola:

        npm run dev

Ahora vamos a encolar nuestros archivos teniendo en cuenta esta estructura de archivos:

src
└── assets
    ├── js
    │   └── scripts.js
    └── css
        └── custom.js

Nuestra función de encolamiento dentro de tu archivo functions.php se veria así:

    function hch_scripts() {
        if( DEV ):
            wp_enqueue_script('vite-reload', 'http://localhost:5173/@vite/client', [], null, false);
        endif;

        wp_enqueue_script('scripts', URL_FILES . '/js/scripts.js', [], '1.0.0', true );
        wp_enqueue_style('custom', URL_FILES . '/css/custom.css', [], '1.0.0', 'all');
    }
    add_action( 'wp_enqueue_scripts', 'hch_scripts' );

Dos cosas importantes a considerar, la primera es que aquí la variable URL_FILES es dinámica en función del entorno de desarrollo en que nos encontremos, y la segunda es que hemos encolado un archivo javascript de vite que es el que hará la magia de la recarga y solo se encolará si estamos en desarrollo:

    if( DEV ):
        wp_enqueue_script('vite-reload', 'http://localhost:5173/@vite/client', [], null, false);
    endif;    

En estos momentos en tu consola debe estar saliendo el siguiente error:

    Uncaught SyntaxError: Cannot use import statement outside a module

Este error ocurre cuando intentas usar la declaración «import» en un archivo javascript que no está configurado como un módulo ES. Para solucionarlo necesitas asegurarte que tu archivo JavaScript esté siendo tratado como un módulo ES, y eso lo conseguimos con estas lineas de código:

    
    function hch_script_loader_tag( $tag, $handle )
    {
        if( $handle === 'vite-reload' ):
            return str_replace(' src', ' type="module" src', $tag);
        endif;
        return $tag;
    }
    add_filter('script_loader_tag', 'hch_script_loader_tag',10, 2);   

Aquí lo que hacemos es verificar que el archivo sea el que encolamos de Vite y luego reemplazamos el atributo «src» por el atributo «type» que es el que soluciona el problema.

Y listo!

Implementar la recarga en caliente con Vite revoluciona el flujo de trabajo de desarrollo web. Eliminar la necesidad de recargar manualmente el navegador cada vez que se realiza un cambio ahorra tiempo y mejora significativamente la productividad. Además, al ver los resultados de los cambios en tiempo real, los desarrolladores podemos detectar y corregir errores de manera más eficiente, lo que lleva a un producto final de mayor calidad.
Al incorporar Vite en tu desarrollo, no solo optimizas el tiempo y esfuerzo, sino que también enriqueces la experiencia de desarrollo, haciéndola más fluida y gratificante.

The post Cómo optimizar tu Flujo de Trabajo en WordPress aprovechando la Recarga en Caliente de Vite appeared first on HERNANDO J. CHAVES | DESARROLLADOR WORDPRESS.

Aquí es donde Vite puede ser una solución efectiva. Vite es un builder de módulos de desarrollo rápido que aprovecha la potencia de los módulos ES nativos del navegador para ofrecer una experiencia de desarrollo fluida y rápida. En este artículo, vamos a aprender una forma de utilizar empaquetadores como Vite para optimizar el flujo de trabajo en la creación de temas para WordPress.

Importancia del Uso de Empaquetadores

Los empaquetadores son herramientas esenciales en el desarrollo moderno de sitios web. Nos permiten:

• Combinar y minimizar archivos CSS y JavaScript para mejorar el rendimiento del sitio.
• Utilizar módulos ES6 y otras funcionalidades modernas del lenguaje que no son nativamente soportadas por todos los navegadores.
• Automatizar tareas repetitivas como la recarga del navegador, preprocesado de CSS (Sass, Less), y la optimización de imágenes.
• Garantizar un código más limpio y estructurado, facilitando el mantenimiento y la colaboración en equipos.

1. Instalación de Vite

Lo primero que necesitas para instalar Vite, es tener Node.js instalado en tu máquina. Luego, puedes crear un nuevo proyecto con Vite siguiendo estos pasos:

    // Inicia un nuevo proyecto
    cd my-wordpress-theme
    npm install -D vite       
    

2. Estructura del Proyecto

Organiza tu proyecto para facilitar el desarrollo. Aquí tienes una estructura básica:

src
└── assets
    ├── js
    │   └── scripts.js
    └── css
        └── custom.js

3. Integración con WordPress

Asegúrate de que WordPress cargue los archivos generados por Vite. En el archivo functions.php de tu tema, añade el siguiente código:

    function enqueue_vite_assets() {
        wp_enqueue_script('vite-js', get_template_directory_uri() . '/dist/assets/scripts.js', array(), null, true);
        wp_enqueue_style('vite-css', get_template_directory_uri() . '/dist/assets/custom.css', array(), null);
    }
    add_action('wp_enqueue_scripts', 'enqueue_vite_assets');
    

En este caso hemos vinculado los archivos finales compilados en la carpeta «dist/», pero si aún estas en étapa de desarrollo debes reemplazar la ruta de los archivos encolados en «dist/» por «src/».

4. Configurando Vite en un tema de WordPress

1. Importación de Módulos

Para empezar, necesitas importar las herramientas básicas que utilizarás en tu configuración de Vite.

        // Importa el método "resolve" del módulo "path"
        import { resolve } from 'path';

        // Importa el método "defineConfig" de "vite"
        import { defineConfig } from 'vite';
    

2. Configuración Básica de Vite

Aquí es donde definimos la configuración principal de Vite y la exportamos. Esta configuración básica es crucial para que Vite reconozca y aplique los ajustes que queremos.

        // Exporta la configuración del proyecto Vite usando "defineConfig", lo que permite a Vite reconocer y aplicar esta configuración.
        export default defineConfig({
            // Define la base pública del proyecto.
            base: '/',
        });
    

3. Opciones de Construcción

Para optimizar y gestionar los recursos de manera eficiente, configuramos Rollup, el bundler que Vite utiliza por debajo, con opciones específicas:

      build: { // Configuración de las opciones de construcción 
        rollupOptions: { // Opciones específicas para Rollup, el bundler que utiliza Vite por debajo
          input: { // Define las entradas del bundle
            custom: resolve(__dirname, 'src/css/custom.css'), // Especifica la ruta del archivo CSS personalizado como una entrada
            scripts: resolve(__dirname, 'src/js/scripts.js') // Especifica la ruta del archivo JavaScript como una entrada
          },
          output: { // Configuración de la salida del bundle
            entryFileNames: 'js/[name].js', // Define el formato de los nombres de los archivos de entrada
            assetFileNames: infoFile => { // Función para definir los nombres de los archivos de activos (como CSS y otros)
              const name = infoFile.names && infoFile.names.length > 0 ? infoFile.names[0] : 'default'; // Obtiene el nombre del archivo, o usa 'default' si no hay nombres
              if (name.endsWith('.css')) { // Si el nombre del archivo termina en '.css'
                return `css/${name}`; // Almacena los archivos CSS en la carpeta 'css'
              }
              return name; // De lo contrario, devuelve el nombre tal cual
            }
          }
        }
      },
      
    

4. Definir la Raíz del Proyecto

Este paso es crucial para establecer la raíz del proyecto correctamente, utilizando resolve para obtener la ruta absoluta del directorio actual:

        // Define la raíz del proyecto utilizando "resolve" para obtener la ruta absoluta del directorio actual (__dirname)
        root: resolve(__dirname),

    

5. Plugins

Para una mayor flexibilidad y funcionalidad, puedes incluir plugins. Por ejemplo, podrías necesitar un plugin para manejar la recarga de archivos PHP, para el manejo de imágenes etc:

        plugins: [ // Define un array de plugins que Vite utilizará
             ]
      
    

Conclusión

Implementar Vite en el desarrollo de un tema para WordPress puede mejorar significativamente la experiencia de desarrollo. Desde la optimización de la carga de recursos hasta la gestión eficiente de dependencias y la actualización en tiempo real, Vite ofrece herramientas poderosas que pueden solucionar muchos de los problemas comunes que enfrentan los desarrolladores. Con esta configuración básica, puedes empezar a disfrutar de un entorno de desarrollo más rápido y eficiente.

The post Cómo usar Vite JS en un tema de WordPress Paso a Paso appeared first on HERNANDO J. CHAVES | DESARROLLADOR WORDPRESS.