DE
EN
Custom-WordPress-Theme für ein Nordsee-Ferienhaus — Das blaue Haus in Friedrichskoog
Vollständige Eigenentwicklung der Website für ein privat vermietetes Ferienhaus an der Nordsee: ein maßgeschneidertes WordPress-Theme ohne Page-Builder und ohne Framework, mit eigenem Buchungsanfrage-Modul, Bildergalerie mit Lightbox, Live-Wetter- und Gezeiten-Widgets (DWD & BSH), vollständiger SEO-/JSON-LD-Schicht und einer ruhigen, maritimen Designsprache.
Projekt im Überblick
blaue-haus.de ist die Website des „blauen Hauses“ — eines blaugrauen Nurdachhauses (A-Frame) in Friedrichskoog-Spitze direkt an der Nordsee. Ziel war eine ruhige, hochwertige und persönliche Seite, die das Haus emotional in Szene setzt und gleichzeitig Buchungsanfragen erzeugt. Umgesetzt als komplett eigenes WordPress-Theme — ohne Framework, ohne Page-Builder — inhaltsoffen und für die Vermieter selbst pflegbar.
Kurzfassung: Maßgeschneiderte WordPress-Website für ein Nordsee-Ferienhaus auf Basis eines eigenen Themes (kein Page-Builder) — mit Buchungsanfrage-Modul inkl. Belegungskalender, Masonry-Bildergalerie mit Lightbox, Live-Wetter aus DWD-Daten und Gezeiten aus dem BSH-Tidenkalender, vollständiger SEO-/JSON-LD-Schicht, DSGVO-konformem Kontaktformular mit Klick-zum-Laden-Karte sowie einer ruhigen, maritimen Designsprache mit lokal eingebundenen Schriften.
Technologie-Stack
Bewusst schlanker, wartbarer Stack ohne Framework- oder Page-Builder-Overhead — alles, was die Seite braucht, und nichts darüber hinaus:
Backend
Frontend
Daten & Schnittstellen
Infrastruktur & Workflow
Umgesetzte Funktionen
Alle Bausteine wurden eigens für das Theme entwickelt — modular, defensiv und ohne Abhängigkeit von schweren Plugins:
Buchungsanfrage & Belegungskalender
Eigene Custom Post Types für Belegung und Anfragen. flatpickr-Datepicker mit gesperrten Zeiträumen, Live-Preisberechnung, DSGVO-Pflichtfeld, Honeypot + Zeit-Falle. Anfragen werden gespeichert und per E-Mail an Gastgeber und Gast verschickt.
Bildergalerie mit Lightbox
Masonry-Grid (CSS columns) und eine barrierearme Lightbox: Pfeiltasten, Esc, Fokus-Falle, Bildunterschriften und Swipe-Gesten auf Mobilgeräten. JavaScript wird nur geladen, wenn die Galerie auch erscheint.
Wetter-Widget (DWD)
Aktuelle Lage, Wind, Sonnenauf-/-untergang, Tagesverlauf und 5-Tage-Vorschau aus offiziellen DWD-Daten über die BrightSky-API — ohne API-Key, stündlich serverseitig gecacht. Eigene farbige Inline-SVG-Wettersymbole.
Gezeiten-Widget (BSH)
Hoch- und Niedrigwasserzeiten aus dem BSH-Tidenkalender, aufbereitet als Jahresdatensatz. Das jeweils nächste Ereignis wird automatisch markiert — wichtig für Strand- und Wattenmeer-Gäste.
„Nordsee heute“ im Banner
Ein Status-Panel mit aktuellem Wetter und nächstem Hoch-/Niedrigwasser liegt über jedem Seiten-Banner. Auf Mobilgeräten als robuste Vollbreite-Leiste statt schwebendem Panel.
DSGVO-Kontaktformular + Karte
Eigenes Kontaktformular mit Spam-Schutz und Bestätigungs-Mail. Die Google-Maps-Anfahrtskarte lädt erst nach bewusstem Klick — vorher werden keine Daten an Google übertragen.
SEO & JSON-LD
Plugin-freies SEO-Modul: Meta-Titel/Description je Seite, Open Graph, Geo-Meta und strukturierte Daten (LodgingBusiness, FAQPage, BreadcrumbList). Physische robots.txt und llms.txt im Webroot.
Redaktionell pflegbar (ACF)
Texte, Bilder, Belegungszeiträume und Eckdaten sind über ACF und den Customizer pflegbar. Das Theme funktioniert auch ohne ACF mit sinnvollen Fallbacks („inhaltsoffen“).
Design & Besonderheiten
Das Haus selbst gibt die Gestaltung vor: die markante Giebelform, Blaugrau und Cremeweiß, Naturholz und ein sparsames Strandkorb-Rot als Akzent.
| Aspekt | Umsetzung |
|---|---|
| Designsprache | Ruhig, maritim, warm: eigenes Farbsystem (Nordsee-Blau, Sand, Salbeigrün, Strandkorb-Rot als Akzent), Serifen-Headline Fraunces + humanistische Mulish. |
| Maritime Motive | Feine Linien-Illustrationen (Anker, Muschel, Seestern, Knoten, Netz u. a.) als Abschnitts-Trenner, dezente Watermarks und Listen-Marker. |
| A-Frame-Leitmotiv | Die Giebel-/Dreiecksform des Hauses kehrt als Logo-Marke und gestalterisches Leitmotiv über die ganze Seite wieder. |
| Mobile-Feinschliff | Off-Canvas-Menü, Sticky-CTA, „Nach-oben“-Button, Vollbreite-Status-Leiste; iOS-spezifische Layout-Quirks gezielt gelöst. |
| Barrierefreiheit | Sichtbarer Fokus-Stil, Tastatur-bedienbare Lightbox, prefers-reduced-motion, klare semantische Struktur (eine H1 pro Seite). |
| Performance | Lokale Webfonts, schlankes Vanilla-JavaScript, serverseitiges Caching der Wetter- und Gezeitendaten, responsive Bilder per srcset. |
Performance, SEO & Auffindbarkeit
Performance
- Lokal eingebundene Webfonts (kein externer Font-Request)
- Schlankes Vanilla-JavaScript, modul-spezifisch nur bei Bedarf geladen
- Serverseitiges Caching der Wetter- und Gezeitendaten (1 Abruf/Stunde für die ganze Site)
- Responsive Bilder über natives
srcset, Lazy-Loading prefers-reduced-motionrespektiert
SEO-Maßnahmen
- Je Seite genau eine H1 und eine klare H2/H3-Hierarchie
- Eigene Meta-Titel und -Descriptions je Seite, sprechende Slugs
- Open Graph + Twitter Cards für ansprechende Link-Vorschauen
- Strukturierte Daten (JSON-LD): LodgingBusiness, FAQPage, BreadcrumbList
- Physische
robots.txtundllms.txtim Webroot - Lokales SEO auf Friedrichskoog / Nordsee-Urlaub, natürliche Keyword-Verwendung
Häufige Fragen zum Projekt
Bewusst so formuliert, dass die Antworten für Featured Snippets und KI-Antworten direkt übernehmbar sind:
Womit wurde die Website von Das blaue Haus umgesetzt?
Mit einem vollständig eigenentwickelten WordPress-Theme („blaue-haus“) auf WordPress 7.0 und PHP 8.5 — ohne Page-Builder und ohne Framework. Inhalte sind über Advanced Custom Fields und den Customizer pflegbar.
Wie funktioniert die Buchungsanfrage?
Über ein eigenes Anfrage-Modul mit Datepicker, in dem belegte Zeiträume gesperrt sind, einer Live-Preisanzeige, DSGVO-Einwilligung und Spam-Schutz (Honeypot + Zeit-Falle). Anfragen werden gespeichert und per E-Mail an Gastgeber und Gast verschickt.
Woher kommen die Wetter- und Gezeitendaten?
Das Wetter stammt aus offiziellen DWD-Daten über die BrightSky-API (ohne API-Key, stündlich gecacht). Die Gezeiten kommen aus dem BSH-Tidenkalender. Beides wird serverseitig zwischengespeichert, sodass nur ein Abruf pro Stunde für die gesamte Site nötig ist.
Ist die Website DSGVO-konform?
Ja. Das Kontaktformular nutzt Honeypot und Zeit-Falle statt Tracking, die Google-Maps-Karte lädt erst nach bewusstem Klick, und ein Cookie-Banner (Complianz) ist eingebunden. Personenbezogene Daten werden nur zur Bearbeitung der Anfrage verarbeitet.
Wie ist die Seite für Suchmaschinen optimiert?
Über ein eigenes SEO-Modul mit Meta-Tags, Open Graph, Geo-Daten und strukturierten Daten (LodgingBusiness, FAQPage, BreadcrumbList) sowie einer physischen robots.txt. Je Seite gibt es genau eine H1 und sprechende URLs; die Texte sind auf lokale Suchbegriffe rund um Friedrichskoog ausgerichtet.
Kann die Vermieterin Inhalte selbst pflegen?
Ja. Texte, Bilder, Belegungszeiträume und Eckdaten lassen sich über ACF und den Customizer pflegen. Das Theme ist „inhaltsoffen“ gebaut und funktioniert auch ohne ACF mit sinnvollen Fallback-Inhalten.
Was macht das Design besonders?
Eine ruhige, maritime Designsprache mit eigenem Farbsystem, lokal eingebundenen Schriften (Fraunces + Mulish) und feinen maritimen Linien-Motiven. Die markante A-Frame-Giebelform des Hauses wird als Logo-Marke und Leitmotiv über die ganze Seite aufgegriffen.
Sie planen eine eigene Website?
Ob Ferienunterkunft, kleines Unternehmen oder Marke — wir entwickeln maßgeschneiderte WordPress-Seiten, die schnell laden, gut auffindbar sind und gestalterisch eigenständig wirken. Diese Referenz zeigt, dass ein schlankes Custom-Theme ohne Page-Builder-Ballast genau zur Aufgabe passen kann. Sprechen Sie uns gerne an.
Live-Referenz
WordPress-Custom-Theme · Ferienhaus an der Nordsee · Eigenentwicklung 2026.
Sei der Erste, der einen Kommentar hinterlässt!