Creamos una WebApp de Lista de Tareas
En este artículo te muestro cómo desarrollé una pequeña WebApp dentro de mi sitio en WordPress para ayudar a padres y madres a organizar las tareas de sus hijos. Todo está construido con funciones nativas de WP, AJAX, jQuery y un poco de magia con Bootstrap.
No es cierto, obvio tuve apoyo de ChatGPT
El reto: convertir WordPress en una WebApp ligera
Un sitio WordPress es mucho más que un blog. En este caso, el objetivo era crear una pequeña aplicación que permitiera a un adulto crear una lista de tareas con tiempo límite y compartirla con un niño o niña. (esto porque mi hija me mostró un video donde los niños reaccionan a los relojes en cuenta regresiva para realizar sus tareas y al menos con mi hija si funcionó)
El stack: lo que ya tenía en Adanzilla.com
- WordPress con un tema creado desde cero usando WP CLI
- Bootstrap 4, jQuery, SASS
- WP Bakery para administración de contenidos
- Swiper.js y LightGallery.js como parte del stack visual
- Sin plugins extra. Todo se resolvió desde el theme.
La lógica de la app
- Un formulario validado con «jquery-validate»
- Título, duración (en minutos) y lista de tareas
- Envío vía AJAX al backend de WordPress
- Se guarda como un «Custom Post Type»
- El «post_name» es un «token aleatorio»
- Se genera una URL única que el padre/madre puede copiar
La vista pública: lo que ve el niño o niña
- Se carga el CPT por el «post_name» (token)
- Se muestra la lista en pantalla de forma visual
- Al hacer click en «Iniciar», comienza una cuenta regresiva
- Todo funciona sin necesidad de login ni cookies
Buenas prácticas técnicas
- No se hardcodearon rutas, textos ni IDs
- Se usaron funciones nativas (wp_insert_post, admin-ajax.php, wp_localize_script)
- El formulario es accesible y responsive
- Se separó la lógica en JS y PHP sin abusar del DOM
Cosas que podrían mejorarse en siguientes versiones
- Guardar progreso en `localStorage`
- Permitir edición del contenido
- Exportar como PDF
- Crear una versión offline (PWA)
Conclusión
Este tipo de pequeños experimentos muestran lo flexible que puede ser WordPress si se respeta su arquitectura y se conoce su API. No todo tiene que ser un plugin.
¿Quieres ver cómo funciona? Pruébala dando click aquí