Modo headless con un front end propio

PLUS WP-ImmoMakler no solo puede mostrar sus inmuebles por sí mismo, sino también cedérselos a un sitio web propio. En el modo headless, WordPress con WP-ImmoMakler sigue siendo el back end: recibe las transferencias de su software CRM, gestiona imágenes y personas de contacto y atiende las solicitudes de contacto. La presentación corre a cargo de un front end propio, por ejemplo un sitio web creado con Astro o con un constructor de sitios web con IA, que lee los datos a través de una interfaz JSON.

Para qué sirve el modo headless

Sitios web rápidos y compatibles con los motores de búsqueda. Un front end generado de forma estática o renderizado en el borde de la red entrega páginas HTML ya listas, sin el desvío por PHP y la base de datos.
Crear el front end con IA. Con constructores de sitios web con IA como Lovable, Bolt, v0 o Base44, usted describe su sitio web con sus propias palabras y el constructor crea el front end. WP-ImmoMakler aporta la base técnica: la importación desde su software CRM, los datos de los inmuebles a través de la interfaz, las solicitudes de contacto con protección contra el spam y su reenvío a su software CRM. Cómo conectar un constructor de sitios web con IA a la interfaz se explica en la referencia de la API.
Diseño propio sin los límites de un tema. El front end diseña libremente el listado y la vista de detalle; WP-ImmoMakler proporciona los datos en el orden y con las denominaciones de su configuración.
WordPress sigue siendo la administración. Su equipo sigue gestionando textos, páginas y entradas en el back end habitual; las importaciones, la protección contra el spam y el reenvío de solicitudes a su software CRM funcionan sin cambios.

Qué ofrece la interfaz

La interfaz entrega los mismos inmuebles que su sitio web de WordPress. Los inmuebles de referencia, los inmuebles archivados, los inmuebles ocultos por superar el límite de la licencia y los proyectos de obra ocultos quedan fuera, salvo que los solicite expresamente. Cada inmueble incluye:

los campos de datos, las superficies, los precios y el certificado energético con denominación, texto de visualización y valor sin formato, en el orden de su configuración del Customizer,
los textos descriptivos como HTML y como texto sin formato,
imágenes y planos en todos los tamaños de imagen, documentos, vídeos y visitas virtuales,
estado, tipo de comercialización, tipo de inmueble y todas las demás categorías,
dirección y coordenadas, en la medida en que estén autorizadas,
la persona de contacto con los campos de su configuración,
título SEO, metadescripción y los datos schema.org de la vista de detalle,
los enlaces al inmueble en su front end, así como a la vista de impresión en PDF y al código QR en WordPress.

Además se incluyen sus páginas y entradas del editor de bloques como estructura de bloques, tres ubicaciones de menú para el front end y las directrices de branding de los ajustes.

La descripción completa de todos los endpoints está en la referencia de la API.

Requisitos

WP-ImmoMakler PLUS o superior
Una instalación de WordPress que siga siendo accesible en su propia dirección, aunque en el futuro los visitantes vean los inmuebles en el front end
Un front end que lea la interfaz JSON, por ejemplo un sitio web Astro o un sitio web creado con un constructor de sitios web con IA

Configuración

En el back end de su sitio web (wp-admin), en WP-ImmoMakler → Integraciones → Headless:

Active Activar la interfaz headless y guarde. Solo después responden los endpoints.
Anote la URL base de la interfaz y la clave de API de la sección “Credenciales de acceso”. La clave la necesitan las aplicaciones de servidor que llaman a la interfaz; con el botón “Generar nueva clave de API” invalida la clave anterior.
En Dirección de su frontend introduzca la dirección pública del sitio web que muestra sus inmuebles. Todos los enlaces que emite la interfaz apuntarán entonces a ese front end.
Si es necesario, adapte Ruta de un inmueble y Ruta del listado de inmuebles a la estructura de URL de su front end. Dispone de los marcadores {archive_slug}, {slug}, {objektnr_extern}, {post_id} y {locale}.
En Orígenes permitidos (Origins) introduzca las direcciones desde las que los formularios de su front end podrán enviar solicitudes de contacto. La dirección del front end está permitida automáticamente.

Navegación y branding

Además de los inmuebles, su front end necesita sus páginas, menús y su aspecto:

Páginas y entradas: sigue gestionándolas en el editor de bloques. La interfaz las entrega como estructura de bloques, excepto las páginas de plantilla de WP-ImmoMakler.
Menús: en el backend de su sitio web (wp-admin), en Apariencia → Menús, asigne sus menús a las tres ubicaciones “Headless-Frontend: Hauptnavigation”, “Headless-Frontend: Footer” y “Headless-Frontend: Rechtliches” (etiquetas en alemán, aún sin traducir). La sección Navegación de la pestaña headless muestra qué ubicación ya está asignada.
Branding: en la sección Branding de la pestaña headless, indique el nombre, el eslogan, el logotipo, la miniatura predeterminada y el color primario y el de acento; la interfaz los entrega a cualquier front end. Para el starter de Astro, elija además la plantilla de diseño, la combinación tipográfica y el redondeo de las esquinas en la sección Starter de Astro; otro front end solo los usa si su desarrollador lo contempla. Su front end adopta los valores en la siguiente compilación.

Proteger las solicitudes de lectura

Los endpoints de lectura son públicos de forma predeterminada, ya que solo entregan datos que su sitio web muestra de todos modos a cualquier visitante. Mientras su sitio web aún no sea público, o si desea restringir el acceso a su propio front end, active Exigir la clave de API también para las solicitudes de lectura. Su front end enviará entonces la clave en la cabecera HTTP X-ImmoMakler-Key o como token Bearer en la cabecera Authorization.

Cómo utiliza un front end la interfaz

Un front end generado de forma estática consulta primero, durante la compilación, el resumen en /properties/manifest. Este indica, para cada inmueble visible, el número de objeto, el nombre del enlace permanente y el momento de la última modificación. Al compararlo con la compilación anterior se sabe qué páginas de detalle hay que renderizar de nuevo y cuáles desaparecen. Los datos de un inmueble los entrega /properties/{objektnr_extern}; el listado de inmuebles y las páginas de categorías se crean a partir de /properties y /taxonomies.

Utilice siempre el número de objeto (objektnr_extern) como identificador de un inmueble. El ID de WordPress de un inmueble cambia con cada actualización desde su software CRM, porque la importación vuelve a crear el inmueble.

En los sitios web multilingües con WPML o Polylang, cada inmueble indica su idioma en locale y, en translations, el número de objeto, el ID de WordPress, el nombre del enlace permanente y la dirección del front end del mismo inmueble en los demás idiomas, de modo que un front end puede crear a partir de ello enlaces hreflang y selectores de idioma. /site enumera en languages todos los idiomas con código, locale, nombre y el directorio bajo el que el front end sirve el idioma (prefix: / para el idioma predeterminado, /en/ para otro). El directorio refleja las URL de idioma de WordPress: si la página de inicio en inglés de su sitio web de WordPress está en /en/, la dirección del front end de cada inmueble, categoría o página en inglés también empieza por /en/, y el listado de inmuebles en inglés está en /en/immobilien/. Un idioma sin directorio propio en WordPress (un dominio por idioma, idioma como parámetro) recibe su código como directorio. Si el patrón de ruta de un inmueble contiene el marcador {locale}, se deja sin cambios, porque entonces es usted quien define la estructura de idiomas.

El parámetro locale devuelve designaciones, nombres de categorías y formatos en otro idioma, por ejemplo locale=en_GB. Esto requiere que el idioma esté instalado en WordPress y pueda seleccionarse en el backend de su sitio web (wp-admin) en Ajustes → Generales → Idioma del sitio; WordPress solo cambia a un idioma instalado; de lo contrario, la respuesta permanece en el idioma del sitio web. WP-ImmoMakler incluye sus propias traducciones para inglés, español y francés.

La interfaz se describe a sí misma: en /openapi.json entrega un documento OpenAPI para herramientas de desarrollo y en /llms.txt una descripción breve para constructores de sitios web con IA, véase Descripción legible por máquina.

Las respuestas a las solicitudes de lectura incluyen un ETag y cabeceras de caché. Un front end que devuelva el ETag en la cabecera If-None-Match en la siguiente consulta recibe un 304 Not Modified si no ha cambiado nada. A un front end que se ejecuta en el navegador le conviene dejar esto en manos de la caché del navegador.