Einbindungsbeispiel · WordPress

Beispiel: immoSoR-Widget in WordPress einbinden.

Diese Beispielseite zeigt einen vollständigen Musteraufbau für WordPress. Sie können daran ablesen, welcher Code global gehört und welcher Code auf die konkrete Immobilienseite gesetzt wird.

Musterwerte: Objekt-ID 100XVBK, Widget-Schlüssel wgt_100xvbk_e9aa89a0, öffentliche Adresse https://app.dreifisch.com/w/wgt_100xvbk_e9aa89a0.

Für Maklerbüro und Redaktion

Der einfache Ablauf.

  1. Objekt-ID und Widget-Schlüssel aus der immoSoR-Objektakte übernehmen.
  2. Mastercode einmalig in WordPress einfügen.
  3. Objekt-Marker auf die konkrete Immobilienseite setzen.
  4. Seite speichern, Cache leeren und Test-Anfrage auslösen.

Backend-Anleitung · WordPress

Administrator-Anleitung: Widget in WordPress einbauen.

Diese Schritte richten sich an Administratoren, Redakteure und betreuende Agenturen. Sie zeigen den Backend-Weg vom globalen Mastercode bis zum objektbezogenen Marker auf der Immobilienseite.

Schritt für Schritt

Saubere Reihenfolge der Einrichtung.

Die Reihenfolge trennt Verwaltung, Technik, Objektzuordnung und Prüfweg. Erst wenn die öffentliche Seite die richtige Objektakte trifft, ist die Einbindung abgeschlossen.

01

Backend anmelden

Melden Sie sich als Administrator in WordPress an und prüfen Sie, ob Sie Plugins, Theme-Dateien oder Custom-Code-Bereiche bearbeiten dürfen.

02

Globales Codefeld öffnen

Öffnen Sie ein Header-/Footer-Code-Plugin, den Customizer oder das Theme. Dort wird ausschließlich der immoSoR-Mastercode eingetragen.

03

Mastercode speichern

Fügen Sie den Mastercode ein, speichern Sie die Änderung und prüfen Sie, ob Optimierungsplugins JavaScript verzögern oder zusammenfassen.

04

Immobilienseite bearbeiten

Öffnen Sie den Beitrag, die Seite oder das Page-Builder-Layout der konkreten Immobilie. Arbeiten Sie nicht im globalen Template, wenn Sie den Objekt-Marker setzen.

05

HTML-Block einsetzen

Fügen Sie im Gutenberg-Editor einen HTML-Block ein. In Elementor, WPBakery oder ähnlichen Baukästen verwenden Sie ein HTML- oder Code-Element.

06

Objekt-Marker eintragen

Kopieren Sie den Objekt-Marker aus immoSoR in diesen Block. Prüfen Sie, dass Objekt-ID und Widget-Schlüssel zum Objekt passen.

07

Cache und Frontend prüfen

Aktualisieren Sie die Seite, leeren Sie WordPress-Cache und Page-Builder-Cache und testen Sie die Anfrage im öffentlichen Frontend.

Modulcode · WordPress

Backend-Modul sauber vorbereiten.

Die folgenden Muster sind als technische Vorlage gedacht. Vor produktiver Nutzung prüft die betreuende Person Sicherheitsregeln, Ausgabeformat, CSP und Projektstandard.

WordPress: Mastercode im Header/Footer-Plugin

Einmalig im Pluginfeld für Footer-Code oder eigenes HTML hinterlegen.

WordPress: HTML-Block auf Objektseite

Auf der konkreten Immobilienseite in einen Gutenberg-HTML-Block oder Page-Builder-Codeblock einfügen.

Prüfung

Der Backend-Einbau endet erst im öffentlichen Frontend.

Speichern im CMS ist nur der Zwischenschritt. Entscheidend ist die öffentliche Objektseite, die mobile Ansicht und die Test-Anfrage in der richtigen immoSoR-Objektakte.

Codeblöcke · WordPress

Muster-Code sichtbar kopieren.

Diese Beispielseite zeigt alle vier Einbindungsvarianten mit kopierbaren Codefeldern. Der Mastercode bleibt allgemein; der Objekt-Marker gehört zur konkreten Immobilienseite.

1. Mastercode

Einmalig global hinterlegen.

2. Objekt-Marker

Auf die konkrete Immobilienseite setzen.

3. Komplettcode

Für einfache HTML-/Codefelder, wenn alles zusammen eingefügt wird.

4. iframe-Fallback

Für Fälle, in denen JavaScript oder Meta-Zeilen entfernt werden.

Nach dem Einfügen

So erkennt das Maklerbüro, ob die Einbindung stimmt.

Öffnen Sie die öffentliche Objektseite. Das Widget muss sichtbar sein oder die Exposé-Anforderung öffnen. Danach lösen Sie eine Test-Anfrage aus. In immoSoR muss der Vorgang in der Objektakte 100XVBK erscheinen.

Weiter prüfen

Öffnen Sie die Anleitung, die FAQ oder den Zugang zur App, wenn echte Objektwerte eingesetzt werden sollen.

Zugang

Testzugang oder Zugang öffnen.

Der Testzugang zeigt E-Mail-Adresse, E-Mail-Bestätigung, Zugangsdaten und Übersichtsseite.