Entregar una web bonita es la mitad del trabajo. La otra mitad es que, un mes después, el cliente pueda cambiar el titular de la portada o la foto de un producto sin escribirte, y sin descolocar media página.
En un tema a medida, esa autonomía depende de cómo diseñes los campos editables. Esta guía explica cómo hacerlo con Secure Custom Fields.
Qué es Secure Custom Fields
Secure Custom Fields (SCF) es el plugin gratuito del directorio oficial de WordPress para añadir campos personalizados a páginas, entradas y opciones. Nació en octubre de 2024 como continuación de Advanced Custom Fields bajo el mantenimiento del equipo de WordPress.org, y usa la misma forma de trabajar: defines grupos de campos, los asignas a una plantilla o tipo de contenido y los lees desde el tema.
Para el cliente, SCF se traduce en formularios dentro del editor: un campo para el titular, otro para la imagen, otro para el texto del botón. Para ti, en contenido estructurado que el tema coloca siempre en su sitio.
Por qué campos y no un editor visual
Con un editor visual, el cliente edita el contenido y la maqueta a la vez. Puede cambiar un texto, pero también arrastrar una columna, borrar un contenedor o cambiar un color. Es flexible, pero cualquier edición puede romper el diseño.
Con campos, separas las dos cosas:
- El contenido (textos, imágenes, enlaces, listas) lo edita el cliente en formularios.
- La maqueta (orden de las secciones, espaciados, colores, tipografías) vive en el tema y no se toca desde el escritorio.
El cliente puede cambiar todo lo que tiene sentido cambiar, y la web sigue igual que el día de la entrega.
Cómo organizar los campos de una página
La diferencia entre campos útiles y campos que nadie entiende está en la organización. Estas pautas funcionan bien:
Un grupo por sección visible
Si la portada tiene un hero, una sección de servicios y unos testimonios, crea un grupo o una pestaña por cada uno, con el mismo nombre que el cliente ve en la web: «Portada», «Servicios», «Testimonios». Así encuentra cada campo mirando la página.
Etiquetas en el idioma del cliente
«Titular», «Texto del botón principal» o «Foto destacada» se entienden. hero_title o «CTA primario» no. Deja los nombres técnicos para el código y usa etiquetas en lenguaje normal.
El tipo de campo adecuado para cada dato
| Contenido | Tipo de campo | Por qué |
|---|---|---|
| Titular corto | Texto | Una línea, sin formato |
| Párrafo | Área de texto | Varias líneas, sin riesgo de formato roto |
| Botón | Enlace | Texto y URL juntos, con opción de abrir en otra pestaña |
| Foto | Imagen | Se elige de la biblioteca de medios con su texto alternativo |
| Lista de elementos iguales (servicios, precios, testimonios) | Repetidor | El cliente añade, quita y reordena elementos |
| Dato con varias partes (cifra y su descripción) | Grupo | Mantiene juntas las piezas que van juntas |
Límites razonables
Si el diseño aguanta un titular de unas 60 letras, ponle ese límite al campo. Si la galería está pensada para 3 elementos, limita el repetidor a 3. Los límites evitan que un texto largo descoloque la sección.
Valores iniciales con contenido real
Entrega los campos rellenos con el contenido del diseño. El cliente edita lo que ya ve en la web, en lugar de enfrentarse a formularios vacíos.
Qué dejar fuera del alcance del cliente
No todo debe ser editable. Normalmente conviene dejar en el tema:
- El orden de las secciones y su estructura.
- Colores, tipografías y espaciados.
- Iconos decorativos que forman parte del diseño.
- El header y el footer como maqueta, aunque sus textos y enlaces sí sean editables.
Los menús son un caso aparte: lo mejor es usar los menús nativos de WordPress, en Apariencia → Menús, que el cliente ya conoce.
Header y footer: editables una sola vez
El header y el footer se repiten en todas las páginas. Si sus campos estuvieran en cada página, el cliente tendría que cambiar el teléfono de contacto diez veces. Ponlos en un único lugar compartido por todas las plantillas y conecta la navegación a los menús de WordPress.
Cómo lo resuelve Design2Press
Al generar una plantilla desde las capturas del diseño, Design2Press crea los campos de Secure Custom Fields junto con la maqueta, siguiendo estas mismas pautas:
- Un grupo por sección del diseño, con etiquetas en lenguaje normal.
- Repetidores para las listas, como tarjetas, precios o testimonios.
- Los campos rellenos con el contenido del diseño como punto de partida.
- Header y footer globales con sus propios campos, compartidos por todas las plantillas, y menús nativos de WordPress.
En el Studio puedes revisar en la pestaña «Campos SCF» qué campos se crearon para cada sección antes de exportar el sitio.
Preguntas frecuentes
¿Secure Custom Fields es compatible con Advanced Custom Fields?
Sí. SCF parte del mismo código, así que los grupos de campos y la forma de leerlos desde el tema son los mismos.
¿El cliente necesita aprender algo nuevo?
Muy poco. Los campos aparecen en el editor de la página como un formulario con etiquetas claras. Con una sesión corta durante la entrega suele bastar.
¿Qué pasa si el cliente necesita una sección nueva?
Añadir una sección nueva es un cambio de diseño, así que pasa por el tema. Si es una sección repetible, como un nuevo testimonio o un nuevo servicio, el cliente la añade desde el repetidor sin ayuda.