Estoy construyendo una aplicación que conecta directamente con WordPress para analizar y optimizar artículos usando modelos de IA. La meta es sencilla: detectar oportunidades de mejora, generar sugerencias y aplicar cambios automáticos de forma controlada. Este texto recoge la idea, las decisiones técnicas, los problemas reales que surgieron y cómo los resolví o los estoy resolviendo.
Tabla de contenidos
- 🔍 Visión general: qué hace la app y por qué
- ⚙️ Cómo funciona internamente la app
- 🧩 Decisiones técnicas y por qué las tomé
- 🐞 Errores comunes y cómo depurarlos
- 💾 Persistencia y ahorro de tokens: local storage y estado
- 🔁 Buenas prácticas de UX: duplicar antes de editar y aplicar cambios parciales
- 🔄 Cache, recarga forzada y trucos para no atascarse
- 🛰️ Elección de modelos: Gemini Flash vs Gemini 3.1 Pro
- 🧰 Herramientas y recursos mencionados
- 🔐 Application Password en WordPress: cómo crear y usar
- 🛠️ Ejemplo práctico: flujo de trabajo para debug
- 📈 Métricas y cómo medir mejoras
- 📦 Despliegue y hosting
- 📝 Lecciones aprendidas y próximos pasos
- 💬 Conclusión y recursos finales
- 📸 Capturas clave
🔍 Visión general: qué hace la app y por qué
La app analiza artículos publicados, detecta oportunidades (resúmenes rápidos, cambios de año, puntos clave, preguntas frecuentes) y genera una vista previa con los cambios propuestos. El objetivo no es reescribir todo a lo bruto, sino aplicar solo los ajustes que realmente mejoran la experiencia y el SEO.
Puntos clave:
- Conexión directa a WordPress: la app lee y escribe contenido mediante la REST API.
- Análisis con IA: usa modelos como Gemini Flash y Gemini 3.1 Pro según la necesidad.
- Preview y cambios selectivos: solo las partes marcadas en verde se aplican automáticamente.
- Persistencia local: guardar el análisis en local storage para evitar costos innecesarios y ahorrar tokens.
⚙️ Cómo funciona internamente la app
La arquitectura es bastante directa pero con decisiones clave en cada capa. Aquí te explico el flujo de datos desde que seleccionas un artículo hasta que intentas guardarlo en WordPress.
1. Conexión y listado de artículos
La app se conecta a WordPress usando la REST API para listar posts. En el panel se muestran los sitios conectados y los artículos publicados. Desde ahí seleccionas el artículo que quieres analizar.
2. Análisis con IA
Al hacer clic en «analizar contenido», la app envía el texto del artículo al modelo de IA. Puedes elegir profundidad del análisis (por ejemplo, medium opportunities). La respuesta incluye recomendaciones: resumen, correcciones de metadatos (año), optimizaciones estructurales, sugerencias para FAQ y puntos clave.
3. Vista previa y edición selectiva
La parte que más me gusta: la app genera un modo previsualización que muestra el artículo como está y cómo quedaría con los cambios. Los fragmentos que la IA sugiere se marcan en verde; la intención es permitir aplicar únicamente esas modificaciones y dejar intactos bloques que no deban tocarse (galerías, bloques personalizados, etc.).
Esta estrategia reduce el riesgo de romper diseño o contenido esencial. Además, facilita revertir cambios porque solo modificas lo imprescindible.
🧩 Decisiones técnicas y por qué las tomé
Al diseñar la app tuve que balancear latencia, coste y calidad de las respuestas de la IA. Estas son las consideraciones principales:
- Modelos: uso Gemini Flash (rápido y barato) para tareas cotidianas y Gemini 3.1 Pro cuando la tarea es más compleja y requiere mayor «inteligencia».
- Tokens y costes: cada petición consume tokens; por eso decidí guardar análisis en local storage para no repetir llamadas innecesarias.
- Operaciones atómicas: el guardado en WordPress debe ser explícito y seguro. No sobreescribir todo el post; aplicar cambios parciales.
- UX: duplicar el artículo en borrador antes de probar guardados peligrosos para prevenir pérdida de contenido.
🐞 Errores comunes y cómo depurarlos
Al implementar escritura sobre WordPress aparecen errores típicos. Compartiré los más relevantes y cómo los abordé.
Error 401 o «Not authorized to update»
Uno de los errores más frecuentes al intentar actualizar un post desde la app es una respuesta 401 indicando que el usuario no tiene permisos para editar el post. Las causas más habituales:
- Credenciales inválidas o método de autenticación mal configurado.
- El usuario autenticado no tiene rol con permisos suficientes (por ejemplo, autor frente a administrador).
- Un plugin de seguridad bloquea la solicitud o elimina datos (como la password de la aplicación) antes de que llegue al servidor.
Para depurar esto utilicé las herramientas del navegador (F12) y copié la salida de la consola para revisar el error exacto.
Recomendaciones prácticas:
- Comprobar la cabezera Authorization en la petición (si usas Basic Auth con Application Password de WordPress).
- Verificar el usuario que genera la application password y que sea administrador o tenga capacidades para editar posts.
- Probar la llamada a la REST API con curl para aislar si el problema es de la app o del servidor de WordPress.
Probar con curl: ejemplo de actualización de un post
curl -X POST "https://tusitio.com/wp-json/wp/v2/posts/POST_ID" \
-u "usuario:application_password" \
-H "Content-Type: application/json" \
-d '{"content":"Contenido actualizado por la app"}'Si esto falla con 401, el problema está en las credenciales o en la configuración del servidor / plugin de seguridad.
Plugins de seguridad que interfieren
En mi caso sospeché de Wfence u otros firewalls. A veces estos plugins eliminan datos sensibles o bloquean solicitudes REST. Temporalmente desactivar el plugin para probar la integración ayuda a confirmar si ese es el origen del problema.
Si la desactivación resuelve el error, hay dos opciones:
- Configurar una excepción en el plugin para permitir las rutas REST necesarias.
- Usar un método alternativo de autenticación que no dispare las reglas del firewall.
💾 Persistencia y ahorro de tokens: local storage y estado
Cada análisis con la IA consume tokens y puede implicar costes. La solución que implementé fue:
- Guardar el resultado del análisis en local storage para evitar repetir la misma petición si el usuario vuelve a abrir el post.
- Guardar también el estado de optimización (por ejemplo, «analizado», «optimizado» o «publicado») para mantener la UX coherente entre recargas.
- Implementar una estrategia de recarga inteligente: si el usuario fuerza limpiar cache y hacer refresh, la app puede re-evaluar; de lo contrario, utiliza lo guardado.
Ejemplo simple para guardar en localStorage
// Guardar análisis
localStorage.setItem('analisis_post_123', JSON.stringify({
timestamp: Date.now(),
resultado: resultadoIA,
estado: 'analizado'
}));
// Recuperar análisis
const data = JSON.parse(localStorage.getItem('analisis_post_123'));Con esto evitas costear una nueva llamada si el contenido no cambió y mejoras la velocidad de la app para el usuario.
🔁 Buenas prácticas de UX: duplicar antes de editar y aplicar cambios parciales
Antes de intentar guardar cambios automáticos en posts publicados, la app hace una copia del artículo como borrador. Esto protege el contenido original y permite comparar resultados sin riesgos.
- Duplicar post: crea un borrador con el contenido actual.
- Mostrar preview: visualizar cómo quedaría el post tras aplicar los cambios sugeridos.
- Aplicación selectiva: solo los bloques marcados en verde se actualizan.
Es una pequeña inversión de tiempo que evita sentencias tipo «rompí la web» y además facilita rollback manual.
🔄 Cache, recarga forzada y trucos para no atascarse
El «refresh» normal del navegador no siempre carga cambios recientes en aplicaciones SPA. Para evitar pantallas obsoletas, recomiendo usar «Clear Cache and Hard Reload» (clic derecho sobre el botón de recarga). Esto fuerza la descarga de todos los recursos desde el servidor y evita estados fantasma.
También es útil añadir lógicas de reload controladas en la app: comprobaciones de versión del bundle y revalidaciones automáticas para notificar al usuario si su panel está desfasado.
🛰️ Elección de modelos: Gemini Flash vs Gemini 3.1 Pro
Hay un tradeoff clásico entre rapidez y capacidad. Gemini Flash es extremadamente rápido y, para tareas sencillas o masivas, es una opción excelente. Para análisis profundos o cuando la coherencia contextual importa, Gemini 3.1 Pro da mejores resultados, aunque puede ser más lento y costoso.
Mi enfoque:
- Usar Gemini Flash para resúmenes rápidos, detección de metadatos erróneos y cambios menores.
- Subir a Gemini 3.1 Pro para reescrituras complejas, generación de FAQ robustas y reestructuración de secciones.
Otra observación práctica: la latencia de Gemini 3.1 Pro a veces puede ralentizar el flujo de trabajo del usuario. Por eso implementé una cola de tareas y feedback visual para que el usuario sepa que la petición está en proceso.
🧰 Herramientas y recursos mencionados
Estos son los recursos y enlaces que utilizo y recomiendo para alojar, aprender o acceder a herramientas exclusivas:
- Plataforma de la comunidad y recursos exclusivos: https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
- Hosting donde publico mis apps y páginas de prueba: https://hostinger.com/rodrigo
- Maratón de videos con procesos y tutoriales: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
- Herramienta exclusiva para miembros mencionada: PrimeraApp.com
- Enlace al proyecto principal: https://www.youtube.com/watch?v=PbExtG8biqg
🔐 Application Password en WordPress: cómo crear y usar
WordPress permite crear «application passwords» para autenticar aplicaciones externas. El flujo básico:
- Ir al perfil de usuario en WordPress.
- Añadir un nombre para la aplicación y generar la contraseña.
- Copiar la contraseña una sola vez: WordPress no la muestra de nuevo.
- Usarla con Basic Auth en la REST API: Authorization: Basic base64(user:password).
Aun así, si el servidor o un plugin de seguridad bloquea el envío de esa password, la llamada fallará con 401. Si sospechas de esto, intenta generar la password con un usuario administrador y prueba la llamada por curl como en el ejemplo anterior para validar.
🛠️ Ejemplo práctico: flujo de trabajo para debug
Cuando algo falla, sigo estos pasos ordenados:
- Duplicar el post a borrador para no tocar el original.
- Reintentar la operación desde la UI y abrir la consola (F12) para ver errores en la red y en la consola.
- Copiar la respuesta de la API y analizar el payload (por ejemplo, un 401 suele tener un mensaje útil).
- Probar la petición con curl para aislar la capa (cliente vs servidor).
- Revisar plugins de seguridad y logs del servidor; si es necesario, desactivarlos temporalmente para reproducir el flujo.
- Si la solución implica código, aplicar cambios en la app (por ejemplo, persistir análisis en local storage o mejorar manejo de errores) y desplegar una nueva versión.
📈 Métricas y cómo medir mejoras
Optimizar contenido no es solo estética: hay métricas cuantificables. Algunas que recomiendo rastrear después de aplicar optimizaciones:
- CTR en resultados orgánicos: si cambias títulos y descripciones.
- Tiempo medio en página: si mejoras la lectura y la estructura.
- Tasa de rebote: si el contenido se vuelve más relevante para la intención de búsqueda.
- Posicionamiento en SERP: keywords objetivo que se benefician de la optimización.
Implementar etiquetas de seguimiento y comparar antes/después en ventanas de 2 a 6 semanas ofrece una visión real del impacto.
📦 Despliegue y hosting
Para publicar la aplicación y sus endpoints, uso un hosting que me permita desplegar la app y que tenga certificados SSL robustos (obligatorio para autenticaciones seguras). Hostinger es una opción que uso y recomiendo para proyectos personales y pruebas.
Hosting: https://hostinger.com/rodrigo
📝 Lecciones aprendidas y próximos pasos
Construir esta app me ha dejado varias lecciones claras:
- Testear desde el primer día: las integraciones con WordPress tienden a fallar por permisos o seguridad; prueba pronto para evitar dolores mayores.
- Empieza simple: implementar cambios parciales y previsualización reduce riesgos.
- Controlar costes: guardar análisis en local storage y evitar llamadas repetidas limita gastos en APIs.
- Progressive enhancement: funciones básicas con Gemini Flash y escalado a Gemini 3.1 Pro cuando tenga sentido.
- Documentación y UX: explicar al usuario qué se cambia y por qué incrementa la confianza.
Próximos pasos técnicos en mi roadmap:
- Persistir el estado de optimización en local storage y en backend para evitar perder etapas entre recargas.
- Agregar manejo robusto de errores específicos (401, 403) con guías de solución para el usuario.
- Implementar excepciones en plugins de seguridad y pruebas automatizadas para el flujo REST API.
- Refinar prompts y cadenas de instrucciones para mejorar la calidad de las sugerencias de la IA.
💬 Conclusión y recursos finales
Construir una app real que edite contenido en WordPress con IA implica retos técnicos y decisiones de producto: autenticación, costo de modelos, persistencia local, UX segura y depuración. Aplicar cambios parciales y mantener al usuario en control son principios que reducen el riesgo y mejoran la adopción.
Si quieres seguir el proceso más a fondo o acceder a recursos exclusivos y herramientas que uso:
- Comunidad y recursos: https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
- Hosting para publicar tus apps: https://hostinger.com/rodrigo
- Playlist con maratones y tutoriales: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
- Herramienta exclusiva para miembros: PrimeraApp.com
Gracias por leer. Si implementas algo parecido, guarda siempre un respaldo y prueba en un borrador primero. Y recuerda: la IA es una herramienta poderosa, pero su integración segura y responsable es la que marca la diferencia.
📸 Capturas clave
Algunas pantallas relevantes del proceso:
