Pervanic Gebäudetechnik

Pervanic Gebäudetechnik ist ein Meisterbetrieb für Heizung und Sanitär in Sindelfingen im Landkreis Böblingen. Für den Betrieb habe ich 2025 die Website pervanic-gebaeudetechnik.de aufgebaut und sie 2026 optisch komplett neu aufgesetzt. Design und Entwicklung stammen von mir; das Impressum nennt mich unter „Technische Umsetzung und Webdesign“.

Die Aufgabe

Ein Handwerksbetrieb braucht keine verschachtelte Seitenstruktur, sondern eine Visitenkarte, die auf dem Smartphone funktioniert und den Anruf auslöst. Die Startseite sollte als One-Pager Leistungen, Galerie, Über uns und Kontakt zeigen. Daneben war eine eigene Landingpage für den Notdienst gefordert, weil ein Notfall andere Inhalte braucht als eine Angebotsanfrage.

Alle Texte, Telefonnummern und Listen sollten im Backend pflegbar sein, ohne den Builder zu öffnen. Google-Bewertungen sollten auf der Startseite erscheinen; der Instagram-Abschnitt sollte erst sichtbar werden, wenn ein Konto verbunden ist und Beiträge vorliegen, ohne leere Platzhalter. Das Kontaktformular brauchte einen Spamschutz, der über den Honeypot des Formulars hinausgeht.

Die Umsetzung

Aufbau in Oxygen: Template und Components

Die Seite läuft auf Oxygen 6.2 mit dem Oxygen Zero Theme. Die Startseite ist ein One-Pager mit Sprungnavigation zu #leistungen, #galerie, #ueber-uns und #kontakt. Die Notdienst-Landingpage liegt unter /notdienst/; dazu kommen AGB, Datenschutzerklärung, Impressum und Cookie-Richtlinie, insgesamt sechs Seiten. Es gibt ein einziges Oxygen-Template, „Inhaltsseiten“. Wiederkehrende Elemente sind zehn Components: Leistung Karte, Notdienst Merkmal, ND Notfall Karte, ND Soforthilfe Schritt, ND Ort Chip, ND FAQ Eintrag, ND Vertrauen Karte, ND Erreichbarkeit Punkt, Footer Zahlungsmethode und Footer Social Icon. Die Components nehmen die Inhalte aus den Feldgruppen in Secure Custom Fields auf.

Inhalte in Secure Custom Fields

Secure Custom Fields 6.9.6 hält die Inhalte der Startseite, der Notdienst-Seite und die Website-Einstellungen in drei Feldgruppen mit 95 Feldern. „Startseite“ enthält den Hero mit Titel, Untertitel, Text und Bild, Über uns, den Leistungen-Repeater, die Notdienst-Merkmale als Repeater, ein Galerie-Feld, Kontakt, den Bewertungen-Titel und die Instagram-Sektion. „Notdienst-Seite“ bildet die Landingpage ab: Kicker, H1, Intro, Warnhinweis, Erreichbarkeit mit Punkte-Repeater, Notfälle-Repeater, Soforthilfe-Schritte, Einsatzgebiet mit Orte-Repeater, Vertrauen-Repeater, FAQ-Repeater und CTA. Die Optionsseite „Website-Einstellungen“ bündelt Logo, zwei Telefonnummern mit Wählformat, E-Mail, Notdienst-Hinweis, Socials-Repeater, Zahlungsmethoden-Repeater und Copyright. Das Wählformat liegt getrennt vom Anzeigeformat vor, damit die Nummer am Smartphone direkt gewählt werden kann.

Eigener Code: drei Must-Use-Plugins

Der projektspezifische PHP-Code liegt in drei Must-Use-Plugins; pgu-antispam.php folgt im Abschnitt zum Formular. pgu-schema.php gibt im Hook wp_head eine einzige autoritative Business-Entität vom Typ Plumber und HVACBusiness aus: PostalAddress, GeoCoordinates, OpeningHoursSpecification, ContactPoint, das Einsatzgebiet als AdministrativeArea plus 20 City-Knoten sowie Service und Offer; für die Notdienstseite kommen FAQPage und BreadcrumbList dazu. Eine einzige Entität verhindert, dass Adresse und Öffnungszeiten an zwei Stellen auseinanderlaufen. pgu-instagram.php blendet den Instagram-Abschnitt der Startseite über body_class erst ein, sobald ein Konto verbunden ist und Beiträge vorliegen, also keine leeren Platzhalter-Kacheln.

Formular, Spamschutz und Consent

Das Kontaktformular basiert auf Breakdance Forms for Oxygen; Einsendungen werden im Backend gespeichert. pgu-antispam.php hängt sich an breakdance_form_validate_field, breakdance_form_honeypot_triggered und wp_footer und ergänzt den Honeypot des Formulars um einen JS-Zeitstempel, eine Plausibilitätsprüfung und ein Rate-Limit. Die Plausibilitätsprüfung erkennt zu viele Links, sechs gleiche Zeichen hintereinander und absurd lange Zeichenketten ohne Leerzeichen; URLs und E-Mail-Adressen werden dabei ausgeklammert, damit eine Anfrage mit Website-Adresse nicht als Spam landet. Die Einwilligung zu Cookies verwaltet Real Cookie Banner 5.4.

Instagram-Feed, Google-Bewertungen und SEO

Die Instagram-Beiträge liefert mein eigenes Plugin „Instagram Feed für Oxygen“ 1.2.2. Es verbindet ein Instagram-Business- oder Creator-Konto per Instagram-Login und stellt die neuesten Beiträge als Oxygen-Element, Dynamic Data, Shortcode und SCF-Repeater bereit. Die Google-Bewertungen auf der Startseite kommen aus Widgets for Google Reviews 14.2. SEOPress 10.3 übernimmt die Suchmaschinen-Grundlagen, die Sitemap ist aktiv.

Performance, Medien und Betrieb

Die Galerie enthält 99 lazy geladene Bilder. Auf dem Server sitzt ein nginx-Cache vor WordPress. Seit Oktober 2026 liegt das Logo als vereinfachte SVG-Vektordatei vor, ergänzt um Site-Icon und Favicon. Die Schrift ist Manrope. WPvivid Backup Pro übernimmt die Backups, Imgoptim die Bildoptimierung und Staging die Testkopie der Seite. Two Factor sichert die Anmeldung; Agent Connector for WP ist ebenfalls installiert.

Technik im Detail

• WordPress 7.1.3, PHP 8.4
• Oxygen 6.2 mit Oxygen Zero Theme, 1 Template „Inhaltsseiten“, 10 Components
• Secure Custom Fields 6.9.6: 3 Feldgruppen („Startseite“, „Notdienst-Seite“, Optionsseite „Website-Einstellungen“), 95 Felder
• 6 Seiten: Startseite als One-Pager, /notdienst/, AGB, Datenschutzerklärung, Impressum, Cookie-Richtlinie
• Must-Use-Plugins: pgu-schema.php (Plumber/HVACBusiness, FAQPage, BreadcrumbList), pgu-antispam.php, pgu-instagram.php
• Eigenes Plugin „Instagram Feed für Oxygen“ 1.2.2
• SEOPress 10.3, Sitemap aktiv
• Breakdance Forms for Oxygen, Einsendungen im Backend gespeichert
• Real Cookie Banner 5.4
• Widgets for Google Reviews 14.2
• WPvivid Backup Pro mit Imgoptim und Staging, Two Factor, Agent Connector for WP
• Galerie mit 99 lazy geladenen Bildern, nginx-Cache, SVG-Logo, Schrift Manrope

Design und Rollen

Design und Entwicklung stammen von mir, Tomislav Zecevic. Der Erstaufbau war 2025, der komplette optische Neuaufbau folgte 2026.

Das Ergebnis

Entstanden ist eine schnelle, wartungsarme Visitenkarte, die vom Smartphone wie vom Schreibtisch funktioniert. Die Inhalte liegen in Secure Custom Fields; Schema, Spamschutz und die Instagram-Einblendung in drei Must-Use-Plugins. Mehr dazu unter Websites sowie SEO und Performance.