Un grupo de campos es una colección de campos que aparecen juntos al editar una entrada o página. Esta sección te guiará a través de la creación de un grupo de campos completo y real desde el principio hasta el final. En lugar de un ejemplo simple, construirás un perfil de “Miembro del Equipo” que una firma de consultoría podría utilizar — con una foto, nombre, título del trabajo, biografía, especialidades y una URL de LinkedIn. Al final, entenderás cada parte del editor de grupos de campos y estarás listo para construir tus propias configuraciones personalizadas.
El Escenario
Imagina que diriges una firma de consultoría llamada Apex Partners. Quieres que cada consultor tenga una página de perfil dedicada en tu sitio web que muestre su foto, nombre completo, título del trabajo, una biografía profesional, una lista de especialidades y un enlace a su perfil de LinkedIn. Tienes un tipo de entrada personalizada llamado “Miembros del Equipo” (tu desarrollador configuró esto), y necesitas los campos para que los editores los completen.
Paso 1: Crear el Grupo de Campos
- Ve a Field Forge > Nuevo Grupo de Campos
- En el campo de título en la parte superior, escribe: Perfil del Miembro del Equipo
- Este título es lo que los editores ven como el encabezado del metabox al editar una entrada de Miembro del Equipo
[Captura de pantalla: el editor de grupos de campos con “Perfil del Miembro del Equipo” ingresado como título y una lista de campos vacía abajo]
Paso 2: Añadir el Campo de Foto
- Haz clic en el botón Añadir Campo — aparece una cuadrícula de tipos de campos disponibles
- Haz clic en Imagen en la cuadrícula
- Configura el campo:
– Nombre: profile_photo (generado automáticamente a partir de la etiqueta — déjalo tal como está)
– Instrucciones: Sube una foto profesional. Tamaño recomendado: 400×400 píxeles, recorte cuadrado.
– Requerido: Sí (activa esto — cada miembro del equipo necesita una foto)
– Formato de Retorno: Array de Imágenes (da acceso a tu desarrollador a múltiples tamaños de imagen)
– Tamaño de Vista Previa: Mediano (esto controla la miniatura de vista previa mostrada en el editor)
– Ancho del Contenedor: 30% (pondremos la foto a la izquierda, con el nombre y el título a la derecha)
Paso 3: Añadir el Campo de Nombre
- Haz clic en Añadir Campo nuevamente, elige Texto
- Configura:
– Nombre: full_name
– Instrucciones: Introduce el nombre completo del consultor tal como debe aparecer en el sitio web.
– Requerido: Sí
– Placeholder: “Jane Doe”
– Límite de Caracteres: 100 (previene pegar accidentalmente un párrafo)
– Ancho del Contenedor: 35%
Paso 4: Añadir el Campo de Título del Trabajo
- Haz clic en Añadir Campo, elige Texto
- Configura:
– Nombre: job_title
– Instrucciones: Su rol en la firma (por ejemplo, Consultor Senior, Socio Director).
– Requerido: Sí
– Placeholder: “Consultor Senior”
– Ancho del Contenedor: 35%
Paso 5: Añadir el Campo de Biografía
- Haz clic en Añadir Campo, elige Textarea
- Configura:
– Nombre: professional_bio
– Instrucciones: Escribe 2-3 párrafos sobre la trayectoria, experiencia y enfoque del consultor. Esto aparece en su página de perfil.
– Requerido: Sí
– Filas: 6 (hace que el área de texto sea lo suficientemente alta para unos pocos párrafos sin desplazamiento)
– Ancho del Contenedor: 100% (ancho completo — las biografías necesitan espacio)
Paso 6: Añadir el Campo de Especialidades
- Haz clic en Añadir Campo, elige Checkbox
- Configura:
– Nombre: specialties
– Instrucciones: Selecciona todas las áreas de especialización que apliquen.
– Opciones: Añade cada especialidad en su propia línea:
– Estrategia
– Operaciones
– Transformación Digital
– Asesoría Financiera
– Capital Humano
– Gestión de Riesgos
– Tecnología
– Sostenibilidad
– Diseño: Horizontal (muestra las casillas de verificación en una fila en lugar de una lista vertical, ahorrando espacio)
– Ancho del Contenedor: 100%
Paso 7: Añadir el Campo de URL de LinkedIn
- Haz clic en Añadir Campo, elige URL
- Configura:
– Nombre: linkedin_profile
– Instrucciones: Pega la URL completa del perfil de LinkedIn (por ejemplo, https://linkedin.com/in/janedoe).
– Requerido: No (no todos los miembros del equipo pueden tener uno)
– Placeholder: “https://linkedin.com/in/username”
– Ancho del Contenedor: 50%
Paso 8: Establecer Reglas de Ubicación
- Desplázate hacia abajo, debajo de los campos, hasta la sección de Reglas de Ubicación
- Establece el primer desplegable en Tipo de Entrada
- Establece el operador en es igual a
- Establece el valor en Miembro del Equipo (o como se llame tu tipo de entrada de equipo)
- Esto significa que cada entrada de Miembro del Equipo en tu sitio mostrará el metabox “Perfil del Miembro del Equipo”
Paso 9: Guardar y Probar
- Haz clic en Guardar Grupo de Campos (o presiona Cmd+S / Ctrl+S)
- Ve a tu tipo de entrada de Miembros del Equipo en la barra lateral de administración
- Abre una entrada de miembro del equipo existente o crea una nueva
- Desplázate hacia abajo del editor de contenido — verás el metabox “Perfil del Miembro del Equipo”
- Nota que el campo Foto de Perfil (30% de ancho) está a la izquierda, con Nombre Completo (35%) y Título del Trabajo (35%) a la derecha en la misma fila
- Rellena algunos datos de prueba: sube una foto, introduce un nombre, título y biografía, marca algunas especialidades, pega una URL de LinkedIn
- Haz clic en Publicar o Actualizar para guardar
- Reabre la entrada para confirmar que todos los datos se han preservado
[Captura de pantalla: una entrada de Miembro del Equipo en el editor mostrando el metabox “Perfil del Miembro del Equipo” con todos los campos llenos — foto a la izquierda, nombre y título a la derecha, biografía abajo, casillas de verificación para especialidades, y un campo de URL de LinkedIn]
Más Ejemplos de Grupos de Campos que Podrías Crear
| Grupo de Campos | Campos | Regla de Ubicación | Caso de Uso |
|---|---|---|---|
| Sección Hero | Título (texto), Subtítulo (texto), Imagen de Fondo (imagen), Texto del Botón (texto), URL del Botón (url) | Tipo de Entrada = Página | La mayoría de las páginas en un sitio de marketing necesitan un héroe |
| Detalles del Producto | Precio (número), SKU (texto), Peso (número), Disponibilidad (seleccionar), Galería (galería) | Tipo de Entrada = Producto | Información del producto de comercio electrónico |
| Detalles del Evento | Fecha del Evento (selector de fecha), Hora de Inicio (selector de tiempo), Lugar (texto), Dirección (textarea), URL de Ticket (url), Incrustación de Mapa (textarea) | Tipo de Entrada = Evento | Sitio de listado de eventos |
| Testimonio | Cita (textarea), Nombre del Autor (texto), Foto del Autor (imagen), Empresa (texto), Calificación (rango 1-5) | Tipo de Entrada = Testimonio | Sección de reseñas de clientes |
| Proyecto de Portafolio | Nombre del Cliente (texto), URL del Proyecto (url), Galería (galería), Categoría (seleccionar), Descripción (wysiwyg) | Tipo de Entrada = Portafolio | Portafolio de agencia creativa |
Consejos para Organizar Campos
- Arrastra campos para reordenarlos — el orden en el editor es el orden que los editores ven en las entradas
- Haz doble clic en una etiqueta de campo para renombrarla en línea sin abrir el panel de configuración completo
- Usa Ancho del Contenedor para crear diseños de múltiples columnas. Dos campos al 50% se sitúan uno al lado del otro. Tres al 33% crean una fila de tres columnas
- Añade un campo Tab (bajo tipos de diseño) para dividir un gran grupo de campos en secciones con pestañas. Coloca campos de contenido en una pestaña, campos de SEO en otra, y configuraciones en una tercera
- Usa un campo Mensaje para añadir instrucciones, advertencias o notas que los editores verán al completar campos. Por ejemplo: “Las imágenes deben ser de al menos 1920×1080 píxeles para la sección hero.”
- Mantén los nombres de los campos cortos y descriptivos —
hero_titlees mejor quethe_title_for_the_hero_section_at_the_top
> Bueno saber: El Nombre del campo (como full_name) es lo que tu desarrollador utiliza en el código del tema para mostrar los datos. Una vez que un grupo de campos está en uso de producción, evita cambiar los nombres de los campos — rompe la conexión entre los datos guardados y el tema. Cambiar la Etiqueta (lo que ven los editores) siempre es seguro y no afecta a los datos o al código.
> Error común: Los nuevos usuarios a veces crean un grupo de campos pero olvidan establecer las reglas de ubicación. Los campos existen pero nunca aparecen en ningún lugar. Siempre desplázate hacia abajo a Reglas de Ubicación antes de guardar y asegúrate de que al menos una regla esté configurada.