Desarrollo dinámico en web con Kodavio (2/3)

Campos Dinámicos, SEO Y Experiencia Editorial En WordPress

Una parte central del trabajo realizado en Plásticos Cantabria fue crear una capa de campos dinámicos que permitiera editar productos y familias desde WordPress sin tener que entrar constantemente en Bricks.

El objetivo fue que el usuario Editor pudiera modificar textos, imágenes, datos técnicos, llamadas a la acción y contenido SEO desde una interfaz clara y ordenada.

Campos Dinámicos Para Productos

Para el CPT producto se definieron campos personalizados que alimentan la plantilla individual de producto.

Entre los principales campos creados se encuentran:

• Descripción corta
• Descripción larga
• Material
• Medidas
• Impresión
• Usos
• Opciones sostenibles
• Teléfono
• Galería
• Productos relacionados
• Textos de formulario
• Imagen hero
• Imagen de características
• Imagen de fondo de sustentabilidad

También se crearon campos para bloques repetitivos, como beneficios, proceso de trabajo e items de sustentabilidad.

Por ejemplo:

• Beneficio 1 título
• Beneficio 1 texto
• Beneficio 1 icono
• Proceso 1 paso
• Proceso 1 título
• Proceso 1 texto

Esto permite que cada producto tenga una ficha completa y diferenciada, sin tener que crear una plantilla distinta para cada caso.

Campos Dinámicos Para Familias

Las familias de producto también recibieron su propia estructura de campos.

Cada familia puede editar:

• Keywords principales
• Meta título SEO
• Meta descripción SEO
• Etiqueta superior del hero
• H1 del archive
• Texto introductorio
• Imagen de fondo del hero
• Imagen visual del producto
• Título del listado
• Texto del listado
• Bloque de sustentabilidad
• Items de sustentabilidad
• Proceso
• Contacto
• Teléfono visible
• Imagen/card de familia

Esto permite que cada archive de familia funcione como una landing dinámica con contenido propio, no sólo como un listado automático.

Integración Con Rank Math SEO

Se añadieron campos específicos relacionados con Rank Math SEO.

En las familias se incorporaron campos como:

• rank_math_title
• rank_math_description
• Keywords principales

Esto permitió definir títulos SEO y metadescripciones de forma controlada, alineadas con la intención de búsqueda de cada familia.

La redacción SEO se trabajó evitando duplicar textos entre productos y familias. Cada producto y cada familia recibieron textos específicos, adaptados a su contexto comercial.

Interfaz Visual Para El Usuario Editor

No se dejaron los campos como una lista técnica sin estructura. Se creó una presentación visual agrupada por bloques dentro del editor de WordPress.

Los campos se organizaron en secciones como:

• SEO y estrategia
• Hero
• Listado de productos
• Sustentabilidad
• Proceso
• Contacto

Esto facilita que el usuario Editor entienda qué parte de la plantilla está editando.

También se añadieron mejoras editoriales como:

• Selectores de imagen.
• Vista previa de imágenes.
• Botones para usar fallback.
• Contadores de caracteres SEO.
• Etiquetas descriptivas.
• Agrupación visual de campos.
• Limpieza de campos antiguos que no tenían uso real.

Imagen/Card De Familia

Se mantuvo el campo Imagen/card familia porque será útil para futuros loops de familias de productos.

Originalmente era un campo numérico donde había que introducir manualmente el ID de un medio. Se mejoró para que funcione de forma parecida a una imagen destacada.

Ahora el editor puede:

• Seleccionar una imagen desde la biblioteca de medios.
• Ver una preview.
• Quitar la imagen.
• Ver la miniatura en la tabla de familias.

Este campo queda preparado para usarse en futuros listings, cards o bloques de navegación por familias.

Limpieza De Campos Obsoletos

Durante el proceso se detectaron campos antiguos creados en fases iniciales del modelo de contenido.

Algunos no estaban conectados a la plantilla actual y podían confundir al editor. En lugar de eliminarlos de la base de datos, se ocultaron de la interfaz.

Se ocultaron campos como:

• Título hero familia
• Descripción corta antigua
• Descripción larga SEO antigua
• CTA título
• CTA texto
• Orden destacado

También se resolvió una duplicidad relacionada con la imagen hero de familia, priorizando el campo más moderno, que incluye selector visual y preview.

Fallbacks Y Seguridad

Se implementaron fallbacks para evitar que una página quede rota si un campo está vacío.

Por ejemplo:

• Si una imagen no está definida, se mantiene una imagen por defecto.
• Si un texto dinámico está vacío, se puede usar un fallback.
• Si un campo de icono no tiene valor, se usa una clave por defecto.
• Si un dato de imagen no existe, no se fuerza una URL inválida.

Además, los datos se sanitizan según su tipo:

• Texto normal.
• HTML inline permitido.
• URLs.
• IDs de medios.
• SVGs.

Esto permite ofrecer flexibilidad editorial sin comprometer la seguridad del sitio.

Resultado Editorial

El resultado es una interfaz más clara para el usuario Editor.

Ahora los productos y familias pueden editarse desde WordPress con una lógica más parecida a un sistema de contenido profesional:

• El contenido está separado del diseño.
• Las plantillas son reutilizables.
• El SEO está integrado.
• Las imágenes son gestionables visualmente.
• Los campos que no se usan no confunden al usuario.
• El sistema queda preparado para crecer.