Start Navigation Button

Ein WordPress-Plugin, das einen Gutenberg-Block für Navigation zu einer Adresse bereitstellt. Der Button öffnet auf Android Google Maps Navigation, auf iOS Apple Maps und auf dem Desktop Google Maps in einem neuen Tab.

Features

• 🗺️ Intelligente Geräte-Erkennung: Automatische Weitergabe an das richtige Navigations-Tool je nach Gerät
• 📱 Mobile-optimiert: Android (Google Navigation), iOS (Apple Maps), Desktop (Google Maps web)
• 🎨 Vollständig anpassbar: CSS-Klassen für Custom-Styling
• 🛠️ Gutenberg-Block: Einfache Verwaltung im WordPress Block-Editor
• ✏️ Flexible Beschriftung: Mehrere Ebenen von Label-Optionen mit HTML-Support
• 📦 Leichte Installation: Keine zusätzlichen Abhängigkeiten

Installation

1. Ordner wordpress_start-navigation-button in /wp-content/plugins/ ablegen
2. Im WordPress Admin unter Plugins aktivieren
3. Im Block-Editor nach "Start Navigation" suchen und verwenden

Verwendung

Block im Editor hinzufügen

1. Im Gutenberg-Editor auf das Plus-Symbol klicken
2. Nach "Start Navigation" suchen
3. Block einfügen
4. In den Block-Einstellungen (rechte Seite):
   • Adresse/Koordinaten eingeben (erforderlich)
   • Free text optional: Text der anstelle der Adresse angezeigt wird
   • Override label optional: Beschriftung mit HTML-Support (<b>, <br>)

Attribute erklärt

Priorität: Override label > Free text > Adresse

Styling & Customization

Standard-CSS-Klassen

.wsnb-start-navigation-wrap    /* Wrapper um den Button */
.wsnb-start-navigation         /* Haupt-Button */
.wsnb-start-navigation-label   /* Anzeigetext */
.wsnb-start-navigation-meta    /* "Start Navigation" Label */
.wsnb-start-navigation-icon    /* Navigations-Icon */

Hover-Effekt anpassen

In deinem Gewis/Custom CSS:

.wsnb-start-navigation:hover {
    background: #f0f0f0;
    border-color: #333;
}

Button vollständig restylen

.wsnb-start-navigation {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
}

.wsnb-start-navigation:hover {
    background: #0056b3;
}

Layout-Beispiel

.wsnb-start-navigation {
    flex-direction: column;
    align-items: flex-start;
}

.wsnb-start-navigation-label {
    font-size: 18px;
}

Browser-Support

• ✅ Chrome/Chromium (Android, Desktop)
• ✅ Safari (iOS, macOS, Desktop)
• ✅ Firefox (Desktop)
• ✅ Edge (Desktop)

Dateistruktur

wordpress_start-navigation-button/
├── wordpress_start-navigation-button.php    # Haupt-Plugin-Datei
├── assets/
│   ├── block.js                             # Block-Editor JavaScript
│   ├── frontend.js                          # Frontend-Navigation-Logik
│   └── style.css                            # Styling
└── README.md                                # Diese Datei

Technische Details

Geräte-Erkennung

• Android: google.navigation:q=ADDRESS (App-Link, native Navigation)
• iOS: maps:// oder http://maps.apple.com (Maps-App)
• Desktop: https://www.google.com/maps/dir/?api=1&destination=ADDRESS (Browser)

Sicherheit

• Adressen werden mit encodeURIComponent() sicher kodiert
• Server-seitig: wp_kses() filtert HTML zu nur <b> und <br>
• XSS-Schutz durch WordPress-Funktionen

Troubleshooting

Block wird nicht angezeigt

• Plugin ist aktiviert? (Plugins → Start Navigation Button)
• Seite aktualisieren (F5) oder Browser-Cache leeren
• Gutenberg-Editor nutzen

Navigation startet nicht

• Browser/App-Berechtigungen für Maps prüfen
• Adresse-Format testen (z.B. "Marienplatz 1, München" oder "48.1372, 11.5819")
• Unterschiedliche Geräte testen

Styling funktioniert nicht

• Custom CSS im Theme-Editor verwenden
• Wichtig: CSS-Spezifität erhöhen mit !important falls nötig
• Browser-Cache leeren

Version

v1.0.0

Support

Für Fragen oder Probleme bitte in den WordPress-Foren oder bei der Plugin-Dokumentation nachfragen.