Tutorial: Erstellen einer mehrsprachigen Immobilien-Website mit WordPress, wpCasa und WPML

Achtung! Dieses Tutorial ist nicht mehr aktuell, da es zwischenzeitlich eine neue, pluginbasierte Version von WPCasa veröffentlicht wurde. Die grundlegende Vorgehensweise ist aber nach wie vor ähnlich.

In diesem Tutorial lernst du, wie du mit minimalem Aufwand eine professionelle, mehrsprachige Immobilien-Website inkl. OpenImmo-Import-Schnittstelle erstellen kannst. Hierfür kommen die folgenden Komponenten zum Einsatz:

immonex OpenImmo2wpcasa by inveris - WPML Compatible

Systemvoraussetzungen:

  • WordPress-kompatibler Webspace
  • PHP >= 5.3
  • eine MySQL-Datenbank (im Idealfall leer)

WordPress installieren

Los geht’s! Wir starten mit dem Herunterladen von WordPress von der offiziellen Website.

Screenshot: de.wordpress.org-Startseite

Entpacke das WordPress-ZIP-Archiv, lade die Dateien in den hierfür vorgesehenen Webspace hoch und gib die zugehörige URL in der Browser-Adressleiste ein. Die WordPress-Installation geht ziemlich unkompliziert vonstatten. Der Auswahl der Sprache folgen lediglich zwei einfache Schritte:

Zunächst müssen die Infos zur Datenbank übermittelt werden. (Aus Sicherheitsgründen sollte hier auch ein frei wählbares Tabelle-Präfix angegeben werden.)

Screenshot: WordPress-Installation

Nach einer erfolgreichen Überprüfung der Datenbank-Verbindung sind zum Abschluss der Installation nur noch der Website-Titel sowie die Administrator-Zugangsdaten einzugeben (hier bitte nicht „admin” als Benutzername verwenden). Melde dich anschließend mit diesen Daten an.

Aktualisiere nun die Permalink-Einstallungen (Einstellungen > Permalinks) wie folgt:

Screenshot: Permalink-Einstellungen

wpCasa-Framework und Child-Theme installieren

Sofern noch nicht verfügbar, kannst du die benötigten wpCasa-Komponenten (Framework, Ushuaia-Child-Theme und WPML-Kompatibilitäts-Plugin) auf wpCasa.com erwerben bzw. herunterladen.

Rufe die Theme-Übersichtsseite unter Design > Themes auf. Klicke hier auf Installieren > Theme hochladen und wähle das wpCasa-ZIP-Archiv zum Installieren aus. Wechsle anschließend zurück zur Übersichtsseite, installiere das Ushuaia Child-Theme auf die gleiche Weise und aktiviere dieses. Die nicht benötigten Standard-Themes (Twenty Fourteen, Twenty Fifteen…) können übrigens gelöscht werden (Theme-Screenshot > Löschen).

Screenshot: Themes Overview Page

Kontaktpersonen („Agenten”) für Immobilien hinzufügen

Die Kontaktpersonen werden den Immobilien beim Import automatisch zugewiesen. Seitens des wpCasa-Frameworks wird hierbei auf reguläre WordPress-Benutzer zurückgegriffen, daher werden diese via Benutzer > Neu hinzufügen als „Listing Agent” or „Listing Admin” ergänzt.

Screenshot: Hinzufügen einer Kontaktperson

WPML installieren und konfigurieren

Eine Lizenz von „Multilingual CMS” ist Voraussetzung für die Verwaltung der mehrsprachigen Inhalte, diese kann unter wpml.org erworben werden. Für dieses Projekt benötigen wir zwei Plugins aus dem WPML-Regal: „WPML Multilingual CMS” und „WPML String Translation”.

Screenshot: WPML Downloads  

Rufe nach dem Herunterladen dieser Dateien Plugins > Installieren > Plugin hochladen auf und installiere diese sowie das bereits erwähnte wpCasa-WPML-Unterstützungs-Plugin. Klicke anschließend auf WPML in der Haupt-Navigation des WordPress-Backends, um die Installation abzuschließen:

  • Schritt 1: Lege die Hauptsprache der Website fest – das sollte immer Englisch sein, auch wenn Sie das Angebot hauptsächlich an deutschsprachige Nutzer wendet.
  • Schritt 2: Wähle zusätzlich Sprachen aus (in diesem Tutorial: Deutsch und Spanisch).
  • Schritt 3: Wir belassen es hier bei den Standard-Vorgaben mit einer Ausnahme:
    • Was im Sprachumschalter enthalten sein soll (What to include in the language switcher): nur nur „Name der Muttersprache” („Native language name”)
  • Schritt 4: Gib den WPML Site Key ein, klicke dann auf registrieren (register) und anschließend auf abschließen (finish).

WPML bietet viele smarte Funktionen und Optionen für die individuelle Anpassung, wir konzentrieren uns in diesem Tutorial aber auf einige grundlegende Einstellungen:

  • Sprach-URL-Format
    Diese Option hängt von deiner individuellen Webspace/Domain-Konfiguration ab: Wenn keine Subdomains für die Sprachauswahl zum Einsatz kommen, ist die Auswahl von „Verschiedene Sprachen in Verzeichnissen” hier eine gute Wahl.
  • Umleitung anhand der Browser-Sprache
    Bevor deine neue Immobilien-Website online geht, solltest du hier  „Besucher nur anhand ihrer Browser-Sprache umleiten, wenn Übersetzungen vorhanden sind” einstellen.

Schauen wir uns mal den aktuellen Stand an: Mittlerweile können wir uns immerhin schon die Standard-wpCasa-Startseite in drei verschiedenen Sprachen anzeigen lassen.

immonex-Plugins installieren

Wir nutzen zwei immonex-Plugins für den Import und die Verarbeitung von mehrsprachigen Inhalten, die auf dem OpenImmo-XML-Standard basieren: OpenImmo2wpCasa (alternativ: die auch mit anderen Themes kompatible Variante immonex OpenImmo2WP) und OpenImmo2WP Multilang. OpenImmo wird von den meisten Softwarelösungen für Immobilienmakler sowie Immobilienportalen in den deutschsprachigen Ländern unterstützt.

Als Ergänzung kann immonex Energy Scale Pro für die automatisierte Erstellung ansprechender Energieklassen-Farbskalen anhand der Gebäude-Energieeffizienzdaten (bspw. in einem Energieausweis gem. EnEV 2008 oder EnEV 2014) eingesetzt werden.

Energieeffizienz-Skala  

Installiere und aktiviere die immonex-Plugins (gleiche Vorgehensweise wie bereits beschrieben) in dieser Reihenfolge:

  1. OpenImmo2wpCasa
  2. OpenImmo2WP Multilang
  3. Energy Scale Pro (optional)

Die Einrichtung dieser Plugins nehmen wir später vor!

Elemente der Start- und Immobilien-Detailseite zusammenstellen

Die Erstellung der Start- und Exposéseiten ist mit wpCasa ein Kinderspiel, hierfür müssen lediglich die passenden Widgets unter Design > Widgets ausgewählt und konfiguriert werden. Die folgende Auswahl haben wir für unser Beispielprojekt getroffen:

Wie du sehen kannst, wurde das immonex-Widget „Benutzerdefinierte Eigenschaften″ gleich mehrfach hinzugefügt. Mit diesem Widget werden OpenImmo-Daten angezeigt, deren Ausgabe nicht von den wpCasa-Widgets abgedeckt wird. Natürlich gibt’s noch eine Menge anderer wpCasa- und immonex-Widgets, die beliebig kombiniert und angeordnet werden können.

Bitte beachten: Die Widget-Titel werden hier in der Hauptsprache der Website – also Englisch – hinterlegt, die Übersetzung erfolgt in einem späteren Schritt.

Immobilien-Listen-Seite erstellen

In diesem Tutorial legen wir nur eine einzelne „echte” Seite (in drei Sprachen) an, die zur Anzeige der Immobilien-Übersichtslisten verwendet wird. Die Hauptversion ist die englische Variante, also klicke auf Seiten > Erstellen und wähle Englisch als Sprache. Gib nun „Properties” als Seitentitel ein, wähle „Listings (latest)” als template and klicke dann den the Button Veröffentlichen.

Screenshot: Neue Immobilien-Listenseite  

Lege anschließend die deutschen und spanischen Übersetzungen der Seite an. Außer dem Titel in der jeweiligen Sprache musst du keinerlei Inhalte erfassen. Das war’s schon!

Screenshot: Deutsche Übersetzung der Immobilien-Listenseite

Strings übersetzen

Es sind noch einige Textfragemente zu übersetzen, die nicht zu einem bestimmten Beitrag oder zu einer Seite gehören. Das ist der Punkt an dem die Erweiterung WPML String Translation ins Spiel kommt (WPML > String-Übersetzung). Wähle hier „Alle Strings” und erfasse die Übersetzungen der Reihe nach.

Screenshot: WPML String Translation

Navigation einrichten

Unter Design > Menüs richten wir grundlegende Navigationsstrukturen für jede Sprache ein. Als erstes ist das englische Menü dran, danach die deutsche und die spanische Übersetzung.

OpenImmo-Import einrichten

WordPress ist ein erstklassiges System für die Präsentation von Immobiliendaten, aber nicht das beste Werkzeug für deren Erfassung und Verwaltung. Daher ist die Verwendung einer speziellen Software hierfür eine bessere Lösung. Unterstützt diese Software den Export und Transfer von Immobiliendaten im OpenImmo-XML-Format, können diese Inhalte ganz einfach in die WordPress/wpcasa-Website übertragen werden.

Zu diesem Zweck haben wir bereits zwei Plugins installiert, die wir nun unter Einstellungen > OpenImmo Import einrichten:

  • Tab „Allgemeine Einstellungen”
    Hier werden grundlegende Optionen festgelegt, die meisten davon selbsterklärend. „Mapping-Type” steht hierbei für die CSV-Datei, die eine Tabelle für die Zuordnung der OpenImmo-XML-Inhalte zu den jeweiligen WordPress/wpCasa-Feldern enthält. Eine direkt einsatzbereite Mapping-Tabelle für die Standard-wpCasa-Konfiguration ist bereits im Plugin enthalten. (Die Mapping-Tabellen können übrigens ganz einfach mit OpenOffice/LibreOffice Calc bearbeitet werden.)
  • Tab „Script-Ressourcen”
    Dieser Tab enthält spezielle Einstellungen für die Optimierung des Importvorgangs in Hosting-Umgebungen mit begrenzten Ressourcen (Script-Laufzeit, Speicher…).
  • Tab „Verzeichnisse / Manueller Import”
    Dieser Tab enthält eine Liste der Verzeichnisse, in denen aktuelle Importdateien (siehe nächster Abschnitt) sowie Archiv- und Protokolldateien abgelegt werden. Darüber hinaus kann hierüber auch der Importvorgang manuell gestartet werden.
  • Tab „Lizenz”
    Hier kann der Lizenzschlüssel des Plugins hinterlegt und die Lizenz aktiviert werden, was Voraussetzung für den automatisierten Bezug der neusten Plugin-Aktualisierungen ist.
  • Tab „Mehrsprachige Import”
    Wähle hier „WPML Multilingual CMS”, um die Übersetzungs-Unterstützung via WPML im Rahmen des Importvorgangs zu aktivieren. Hinterlege hier ebenfalls den Lizenzschlüssel des Erweiterungsplugins (immonex OpenImmo2WP Multilang) und aktiviere diese Lizenz.

Screenshot: immonex OpenImmo2wpCasa Einstellungen

Export-Software einrichten

Nun, da die Website für den Import von OpenImmo-Daten vorbereitet ist, muss noch das Exportsystem eingerichtet werden. Wie das im Detail aussieht hängt natürlich von der jeweiligen Software ab, die für die Verwaltung der Immobiliendaten eingesetzt wird. Zum Glück beschränkt sich die Einrichtung in den meisten Fällen auf die Auswahl des Exportformats und die Angabe der FTP-Zugangsdaten.

Apropos FTP: Ein bestehender Zugang kann ohne weiteres für die Übertragung der OpenImmo-ZIP-Archive (enthalten XML- und Bilddateien) in den Webspace-Ordner verwendet werden. In diesem Fall muss das entsprechende Zielverzeichnis in der Export-Konfiguration angegeben werden (…/wp-content/uploads/immonex-openimmo-import). Alternativ ist es auch möglich, einen separaten FTP-Zugang einzurichten, der auf dieses Verzeichnis zeigt.

Jeder Immobilien-Datensatz in der XML-Datei repräsentiert eine Sprachversion, d. h. es werden – in unserem Fall – jeweils drei Datensätze pro Immobilie übertragen (englische, deutsche und spanische Version). Diese Datensätze können entweder in einer einzelnen Datei oder aufgeteilt in mehrere Dateien übertragen werden (z. B. ein Exportarchiv pro Sprache). Jeder XML-Immobilien-Datensatz sollte eine Sprachangabe wie diese hier enthalten (als Unterelement von ...immobilie->verwaltung_techn):

<sprache>de-DE</sprache>

Unterstützt die exportierende Software diese Definition nicht, kann sie während des Imports über eine Filter-Hook-Funktion anhand von anderen Daten dynamisch ergänzt werden. (immonex OpenImmo2wpCasa stellt diverse Hooks für die Manipulation der Importdaten bereit).

Hier ein Beispiel-Konfgurations-Dialog für eine OpenImmo-Export-Schnittstelle (OpenEstate-ImmoTool):

Screenshot: OpenImmo-Export-Dialog

Jetzt wird’s spannend… Wir haben den ersten Transfer gestartet und warten auf die automatische Verarbeitung der Daten (sofern die entsprechende Option in der Plugin-Konfiguration aktiviert wurde). Alternativ können wir den Importprozess auch manuell starten (Einstellungen > OpenImmo Import > Verzeichnisse / Manueller Import).

Screenshot: Tab "Verzeichnisse / Manueller Import"

Das Ergebnis

Ok, hier kommt das fabelhafte Ergebnis unserer Arbeit: Wir haben eine voll funktionsfähige, professionell gestaltete, mehrsprachige Immobilien-Website mit automatisiertem Datenimport in weniger als einer Stunde erstellt!