Especialización · CMS headless

Headless WordPress: edición de contenidos familiar, web moderna con Next.js

Su equipo sigue gestionando los contenidos en el WordPress de siempre, y los visitantes ven un sitio web rápido servido con Next.js. Separamos ambas capas con limpieza, trasladamos sus contenidos y configuramos la vista previa, el alojamiento y la protección.

Primera consulta gratuitaPresupuesto transparente, con precio cerrado si lo deseaÁmbito CMS headless
Imagen destacada: Headless WordPress
Breve & claro

Headless WordPress significa que WordPress pasa a ser solo el sistema de edición de contenidos y los facilita a través de la API REST o de WPGraphQL, mientras que un frontend independiente, normalmente con Next.js, sirve el sitio web. Esto combina la gestión de contenidos habitual con tiempos de carga rápidos y una menor superficie de ataque. En Nano Concepts, los sitios web compactos son posibles en el paquete Starter desde 2.500 € y los más amplios suelen encajar en el paquete Professional desde 8.000 €; el presupuesto exacto llega tras la primera consulta gratuita.

Headless WordPress con Nano Concepts

Headless WordPress es la solución para empresas cuyo equipo editorial se maneja bien con WordPress, pero cuyo sitio web es demasiado lento, demasiado vulnerable o ha agotado sus posibilidades de diseño. WordPress sigue siendo el CMS headless: su equipo escribe entradas, gestiona páginas y sube imágenes como siempre. El sitio web público, en cambio, lo sirve un frontend propio que obtiene los contenidos mediante la API REST o WPGraphQL, algo que en nuestro caso suele implementarse como headless WordPress con Next.js.

01

Para los visitantes esto significa páginas rápidas, generadas de antemano y servidas a través de una CDN. Para su departamento de TI significa una menor superficie de ataque, porque el backend de WordPress ya no es el sitio web público y además puede aislarse. Los cambios aparecen, aun así, con rapidez: al guardar en WordPress, un webhook activa la actualización de las páginas afectadas, y una vista previa muestra los borradores con el diseño real antes de publicarlos. Los elementos interactivos como formularios, búsqueda o áreas de miembros los conectamos mediante interfaces propias.

02

Es importante hacer de antemano un inventario sincero. Los page builders como Elementor y muchos plugins que generan contenido directamente en el tema no funcionan en modo headless. Por eso comprobamos cómo se trasladan formularios, datos SEO, contenidos multilingües o una tienda WooCommerce, y volvemos a modelar los contenidos con Advanced Custom Fields o bloques de Gutenberg. También forman parte del trabajo las redirecciones de las URL modificadas y el traslado de los contenidos existentes, para que los enlaces actuales sigan funcionando. El diseño lo creamos con LOMA DESIGN, para que el nuevo sitio no solo sea más rápido, sino también visiblemente mejor.

Story

Headless WordPress en 9 diapositivas

Deslice y descubra qué aporta Headless WordPress, qué hacemos por usted y cómo se benefician otras empresas.

×01 / 09

Especialización · CMS headless

Headless WordPress. Hecho para ser encontrado.

Headless WordPress significa que WordPress pasa a ser solo el sistema de edición de contenidos y los facilita a través de la API REST o de WPGraphQL, mientras que un frontend independiente …

  • Primera consulta gratuita
  • Transparente, también a precio cerrado
  • Respuesta normalmente en 24 horas
lomadesign.de · nanoconcepts.de
×02 / 09

Cómo lo notará

¿Le suena todo esto?

Señales típicas de que Headless WordPress merece la pena:

  1. 01Su sitio WordPress se ha vuelto lento por los page builders y los muchos plugins, y nuevas …
  2. 02Su equipo quiere conservar WordPress como sistema editorial a toda costa: un cambio de sistema …
  3. 03Las actualizaciones de seguridad y los conflictos entre plugins provocan con regularidad caídas …
  4. 04Los contenidos deben aparecer, además de en el sitio web, en una app, un portal o micrositios.
lomadesign.de · nanoconcepts.de
×03 / 09

Su ventaja

Lo que usted gana con ello.

Edición de contenidos sin reaprenderSu equipo sigue trabajando en el backend de WordPress que ya conoce: el esfuerzo de …
Páginas rápidas sin lastre de pluginsLos visitantes reciben páginas generadas de antemano en lugar de resultados de plugins …
Menos superficie de ataqueEl backend de WordPress deja de ser el sitio web público y puede aislarse además, por …
lomadesign.de · nanoconcepts.de
×04 / 09

Alcance de los servicios

Lo que realizamos para usted.

WordPress sigue siendo su sistema editorial y Next.js sirve el sitio web: rápido, protegido y de diseño libre.

  1. Chequeo headless de su sitio WordPress
  2. Modelo de contenidos y API
  3. Frontend con Next.js
  4. Vista previa editorial y webhooks
  5. Datos SEO, formularios e idiomas
  6. Alojamiento y protección
lomadesign.de · nanoconcepts.de
×05 / 09

Ejemplos de uso

Así se ve en la práctica.

Salud y cuidadosUn grupo de clínicas permite que los departamentos médicos gestionen contenidos en WordPress, mientras el propio …
InmobiliariaUn promotor publica promociones de obra nueva con planos y galerías desde WordPress, complementados con datos de …
Finanzas y segurosUn portal financiero con muchos artículos de guía pasa a headless WordPress para integrar calculadoras y comparativas …
lomadesign.de · nanoconcepts.de
×06 / 09

Proceso

Proceso claro. Sin sorpresas.

  1. 01
    InventarioRevisamos contenidos, plugins, formularios e integraciones de su sitio …
  2. 02
    Modelo de contenidos y diseñoLos tipos de contenido y los campos se reestructuran y, en paralelo, LOMA …
  3. 03
    Desarrollo del frontendDesarrollamos el frontend con Next.js, conectamos WordPress mediante la API …
  4. 04
    Traslado de contenidos y pruebasSe trasladan los contenidos existentes, se crean las redirecciones y se …
lomadesign.de · nanoconcepts.de
×07 / 09

Pregunta frecuente

Buena pregunta. Respuesta clara.

¿Qué es headless WordPress?

Nano Concepts

En headless WordPress, WordPress sirve únicamente como backend para la gestión de contenidos.

Todas las preguntas y respuestas
lomadesign.de · nanoconcepts.de
×08 / 09

Paquetes

Tres paquetes. Un plan.

  • Starterdesde 2.500 €Ideal para landing pages, aplicaciones web sencillas y prototipos.
  • Professionaldesde 8.000 €Para aplicaciones web complejas, portales y soluciones de software a …
  • EnterprisePrecio individualPara grandes proyectos, ecosistemas de sistemas y colaboraciones de …

Orientación sin compromiso: recibirá su presupuesto tras la primera consulta gratuita. Ver precios

lomadesign.de · nanoconcepts.de
×09 / 09

Empecemos

Saque el máximo de su potencial.

Cuéntenos su proyecto: normalmente le responderemos en un plazo de 24 horas con una primera valoración.

×

JUNTOS. EN DIGITAL. CON ÉXITO.

lomadesign.de · nanoconcepts.de
01 / 09

Señales típicas de que Headless WordPress merece la pena

  • Su sitio WordPress se ha vuelto lento por los page builders y los muchos plugins, y nuevas optimizaciones apenas aportan ya nada.
  • Su equipo quiere conservar WordPress como sistema editorial a toda costa: un cambio de sistema no es una opción.
  • Las actualizaciones de seguridad y los conflictos entre plugins provocan con regularidad caídas o intervenciones de emergencia.
  • Los contenidos deben aparecer, además de en el sitio web, en una app, un portal o micrositios.
  • Su nuevo diseño solo se puede implementar con el tema actual asumiendo concesiones importantes.
Alcance de los servicios

Lo que realizamos para usted

WordPress sigue siendo su sistema editorial y Next.js sirve el sitio web: rápido, protegido y de diseño libre.

Chequeo headless de su sitio WordPress

Analizamos plugins, page builders, tipos de contenido y formularios, y le mostramos qué se traslada, qué se sustituye y qué se simplifica en modo headless.

Modelo de contenidos y API

Estructuramos los contenidos con Advanced Custom Fields o bloques de Gutenberg y los facilitamos mediante WPGraphQL o la API REST.

Frontend con Next.js

Un frontend de diseño propio con React y Next.js que genera las páginas de forma estática o en el servidor y las actualiza de manera selectiva cuando hay cambios.

Vista previa editorial y webhooks

Los borradores pueden verse con el diseño real antes de publicarse y los cambios guardados actualizan automáticamente las páginas afectadas.

Datos SEO, formularios e idiomas

Títulos, descripciones y datos estructurados del plugin SEO, formularios y versiones de idioma se reproducen íntegramente en el frontend.

Alojamiento y protección

Alojamiento separado para la edición y el frontend, backend de WordPress aislado, si lo desea en centros de datos alemanes, y despliegues automatizados.

Sus ventajas

Por qué las empresas confían en nosotros

Edición de contenidos sin reaprender

Su equipo sigue trabajando en el backend de WordPress que ya conoce: el esfuerzo de formación y las resistencias en la implantación se mantienen bajos.

Páginas rápidas sin lastre de plugins

Los visitantes reciben páginas generadas de antemano en lugar de resultados de plugins compuestos dinámicamente: una buena base para tiempos de carga cortos en cualquier dispositivo.

Menos superficie de ataque

El backend de WordPress deja de ser el sitio web público y puede aislarse además, por ejemplo con un subdominio propio de acceso restringido.

Contenidos para varios canales

Los mismos contenidos alimentan la web, la app o micrositios, sin necesidad de mantenerlos por duplicado.

Ejemplos de uso

Headless WordPress en su sector

Así es Headless WordPress en los sectores típicos: ejemplos concretos del día a día empresarial.

Industria y fabricación

Un fabricante de maquinaria gestiona páginas de producto y fichas técnicas en WordPress y las publica a la vez en el sitio web y en el portal de distribuidores.

Más información

Comercio y e-commerce

Un comercio combina la revista y el universo de marca de WordPress con los datos de producto de su tienda en un frontend Next.js común.

Más información

Logística

Un proveedor logístico gestiona de forma centralizada en WordPress las páginas de muchas sedes, mientras el frontend las sirve con rapidez y de manera uniforme.

Más información

Salud y cuidados

Un grupo de clínicas permite que los departamentos médicos gestionen contenidos en WordPress, mientras el propio backend solo es accesible desde la red interna.

Más información

Inmobiliaria

Un promotor publica promociones de obra nueva con planos y galerías desde WordPress, complementados con datos de inmuebles de su CRM.

Más información

Finanzas y seguros

Un portal financiero con muchos artículos de guía pasa a headless WordPress para integrar calculadoras y comparativas como componentes rápidos del frontend.

Más información

Servicios y consultoría

Un despacho de abogados conserva WordPress para artículos especializados y ofertas de empleo, mientras el sitio web se sirve ligero con Next.js.

Más información

Oficios

Una empresa de oficios sigue gestionando referencias y ofertas de empleo en WordPress, y el nuevo frontend carga sin el page builder anterior.

Más información

Startups

Una startup utiliza WordPress como CMS headless para páginas de marketing y blog, y comparte componentes de diseño con su aplicación web.

Más información

Educación e investiga­ción

Una entidad formativa reúne las descripciones de cursos en WordPress y las muestra a la vez en el sitio web y en la plataforma de aprendizaje.

Más información

Turismo y gastronomía

Una región turística permite que la redacción y los anfitriones gestionen eventos en WordPress y los sirve en varios idiomas a través de un frontend rápido.

Más información

Medios e industrias creativas

Una revista online con un gran archivo de artículos conserva su redacción en WordPress y actualiza en el frontend Next.js solo los artículos modificados.

Más información
Proceso

Así se desarrolla su proyecto

  1. InventarioRevisamos contenidos, plugins, formularios e integraciones de su sitio WordPress y definimos qué se implementa en modo headless.
  2. Modelo de contenidos y diseñoLos tipos de contenido y los campos se reestructuran y, en paralelo, LOMA DESIGN diseña el frontend.
  3. Desarrollo del frontendDesarrollamos el frontend con Next.js, conectamos WordPress mediante la API y configuramos la vista previa y los webhooks.
  4. Traslado de contenidos y pruebasSe trasladan los contenidos existentes, se crean las redirecciones y se prueban la edición, los formularios y los tiempos de carga.
  5. Cambio e instrucciónTras el cambio, formamos a su equipo en la vista previa y en los nuevos bloques y, si lo desea, seguimos atendiendo el sitio web.

Tecnologías y herramientas

WordPressWPGraphQLAPI REST de WordPressAdvanced Custom FieldsNext.jsReactTypeScriptVercelDocker
FAQ

Preguntas frecuentes sobre Headless WordPress

En headless WordPress, WordPress sirve únicamente como backend para la gestión de contenidos. Los contenidos se obtienen mediante la API REST o WPGraphQL y un frontend propio, por ejemplo con Next.js, los sirve como sitio web. La edición de contenidos sigue siendo la de siempre y la presentación se independiza del tema.

Un sitio web corporativo compacto con pocos tipos de contenido puede empezar en el paquete Starter desde 2.500 €. Los proyectos con muchos tipos de contenido, multilingüismo o conexión con una tienda suelen encajar en el paquete Professional desde 8.000 €; los portales grandes los presupuestamos de forma individual como Enterprise. Recibirá el presupuesto exacto tras la primera consulta gratuita.

Next.js obtiene los contenidos de WordPress mediante la API y genera con ellos páginas que se construyen de antemano o se renderizan en el servidor. Cuando el equipo editorial guarda un cambio, un webhook hace que solo se vuelvan a generar las páginas afectadas. Una función de vista previa muestra los borradores con el diseño real antes de publicarlos.

Los plugins que trabajan en el backend, por ejemplo para campos, traducciones o datos SEO, suelen poder seguir utilizándose si facilitan sus datos a través de la API. Los page builders y los plugins que generan contenido directamente en el tema, en cambio, no funcionan y se sustituyen por componentes del frontend. Qué plugins le afectan en su caso lo aclara nuestro chequeo headless.

La edición y el frontend funcionan por separado: WordPress en un servidor clásico, si lo desea en centros de datos alemanes, y el frontend en una plataforma como Vercel o en un servidor Node.js propio. Le recomendamos la combinación según sus requisitos de protección de datos, costes y operación, y documentamos qué servicio trata qué datos.

Para un sitio web corporativo planificamos por lo general unas semanas, según el número de tipos de contenido y de funciones especiales. Mientras tanto, su equipo editorial trabaja con normalidad, porque los contenidos permanecen en WordPress. Recibirá el calendario exacto tras el inventario.

Relacionado

Servicios relacionados

Glosario digital

Términos sobre Headless WordPress, explicados brevemente

Revista

Seguir leyendo

01 · Escenario · aprox. 50 segundos

La web invisible

Markus es el mejor techador de la ciudad, pero en Google aparece en la página 3 y su web tarda 8 segundos en cargar. Así el diseño, una técnica rápida y el SEO y GEO hacen que vuelva a sonar el teléfono.

ServicioDiseño web · SEO y GEOParaOficios y negocios locales
Leer la transcripción

Este es Markus.
El mejor techador de la ciudad.
¿Su problema?
Nadie lo sabe.
Lena busca un techador.
¿Markus?
Está en la página 3.
Ahí no mira nadie.
¿Y si lo encuentra?
8 segundos de carga.
No está hecha para móvil.
Y Lena se va.
Esto es lo que falla.
Y eso le cuesta a Markus encargos cada día.
Entonces Markus llama a LOMA DESIGN
y a NANO CONCEPTS.
El diseño se une al desarrollo.
Diseño que genera confianza.
Tecnología que carga volando.
SEO y GEO para que lo encuentren:
en Google y en la búsqueda con IA.
Mismo trabajo.
Nueva visibilidad.
Y el teléfono suena.

El presupuesto adecuado en 60 segundos

Análisis de necesidades: Headless WordPress

Responda unas breves preguntas: normalmente nos pondremos en contacto con usted en un plazo de 24 horas con una primera valoración.

Solicitar proyecto