Introducción En WordPress, la función body_class() es una herramienta sencilla pero extremadamente poderosa para condicionar estilos y comportamientos en JavaScript según la página que se esté viendo. Este artículo explica en detalle cómo aprovechar las clases que genera WordPress en el elemento ltbodygt y cómo añadir clases personalizadas para controlar la carga o inicialización de […]
Persistir preferencias de usuario en localStorage desde JavaScript en WordPress — guía completa Este artículo explica en detalle cómo guardar y recuperar las preferencias de usuario en el navegador usando localStorage, integrarlo correctamente en WordPress y, opcionalmente, sincronizar esas preferencias con el servidor (user meta) para usuarios autenticados. Incluye consideraciones de seguridad, privacidad, degradación elegante […]
Introducción Este artículo explica paso a paso cómo implementar un selector claro/oscuro en WordPress y cómo guardar la preferencia del usuario mediante JavaScript para que persista entre páginas y sesiones. Se incluyen buenas prácticas: uso de variables CSS, detección de la preferencia del sistema, prevención del parpadeo (FOIT), accesibilidad y la integración correcta dentro de […]
Introducción Este tutorial explica, paso a paso y con todos los detalles prácticos, cómo añadir la funcionalidad de copy-to-clipboard a los bloques de código en un sitio WordPress usando JavaScript. Cubriremos la forma recomendada moderna (Clipboard API), la copia por compatibilidad (execCommand), integración correcta en WordPress (enqueue de scripts y localización), compatibilidad con diferentes plugins/formatos […]
Introducción Un acordeón es un patrón de interfaz muy común para ocultar y mostrar contenido. Utilizar las etiquetas semánticas ltdetailsgt y ltsummarygt proporciona una base accesible y con comportamiento nativo en navegadores modernos. Sin embargo, para ofrecer una experiencia completa (animaciones suaves, soporte para lectores de pantalla más antiguos, control por teclado avanzado y respeto […]
Introducción Los modales son componentes frecuentes en temas y plugins de WordPress: confirmaciones, formularios rápidos, selectores de medios, etc. Un aspecto crítico que con frecuencia se pasa por alto es la gestión del foco. Un modal accesible debe imitar el comportamiento nativo: cuando se abre, el foco debe ir al modal mientras está abierto, el […]
Este tutorial explica de forma detallada y práctica cómo crear un menú accesible en WordPress usando ARIA y manejo por teclado en JavaScript. Incluye la estructura HTML recomendada, reglas ARIA clave, estilos mínimos CSS para visibilidad y un script JavaScript que implementa gestión de foco, comportamiento por teclado (incluyendo flechas, Escape, Home/End y tipeo para […]
Introducción Un modal (diálogo) bien implementado mejora la experiencia del usuario, pero si no se hace con criterios de accesibilidad puede impedir la navegación a personas que usan lector de pantalla o sólo el teclado. Este tutorial muestra cómo crear un modal accesible usando JavaScript nativo y cómo integrarlo correctamente en WordPress (sin jQuery), con […]
Introducción En este tutorial detallado veremos cómo añadir autocompletado al buscador de un sitio WordPress utilizando la etiqueta HTML5 datalist combinada con JavaScript. Presentaré dos enfoques: (1) llenado del datalist desde PHP en el servidor (opción simple y sin AJAX) y (2) llenado dinámico mediante una petición al REST API de WordPress (en tiempo real, […]
Introducción Este artículo explica paso a paso cómo implementar una búsqueda instantánea en WordPress usando la REST API, fetch y un debounce para evitar llamadas excesivas. Cubriremos la creación del endpoint REST personalizado, el encolado del script, la implementación en JavaScript con cancelación de peticiones (AbortController) y debounce, un pequeño CSS para presentar resultados, y […]
