🏍️ Chopper-Datenbank Widget – Einbindung

1 Seite oder Beitrag öffnen

Öffne den Editor deiner Plattform und erstelle eine neue Seite oder einen neuen Beitrag.

• WordPress: Gutenberg-Editor oder Classic-Editor
• Joomla: Artikel-Editor im HTML-Modus
• phpBB: Pages-Erweiterung im HTML-Modus
• Reine HTML: Beliebiges HTML-Dokument

📸 Screenshot: Neue Seite anlegen

(Beispiel: WordPress → Seiten → Neu hinzufügen)

2 HTML-Block / Editor öffnen

Füge einen HTML-Block ein oder wechsle in den HTML/Text-Modus deines Editors.

3 Widget-Code einfügen

Kopiere den folgenden Code und füge ihn in den HTML-Block ein (funktioniert auf allen Plattformen!):

<!-- Chopper-Datenbank Widget -->
<div id="chopper-widget-container"></div>
<script 
  src="https://www.chopper-motorrad.de/biker-widget/chopper-datenbank/widget.js" 
  data-main-color="#8A6D4B" 
  data-text-color="#333333" 
  data-bg-color="#f9f9f9">
</script>

4 Farben anpassen (optional)

Du kannst die Farben des Widgets ganz einfach an dein Design anpassen:

Beispiele für Farbvarianten:

5 Veröffentlichen

Klicke auf “Veröffentlichen” oder “Speichern” und deine Seite ist online!

📸 Screenshot: Fertiges Widget

(Das Widget zeigt jetzt Hersteller, Modelle und Details an)

⚡ Shortcode-Variante (nur WordPress)

Füge in deine functions.php folgenden Code ein:

<?php
// Chopper-Datenbank Widget Shortcode
function chopper_widget_shortcode($atts) {
    $atts = shortcode_atts(array(
        'main_color' => '#8A6D4B',
        'text_color' => '#333333',
        'bg_color' => '#f9f9f9'
    ), $atts);

    return '<div id="chopper-widget-container"></div>
    <script src="https://www.chopper-motorrad.de/biker-widget/chopper-datenbank/widget.js" 
            data-main-color="' . $atts['main_color'] . '" 
            data-text-color="' . $atts['text_color'] . '" 
            data-bg-color="' . $atts['bg_color'] . '">
    </script>';
}
add_shortcode('chopper_widget', 'chopper_widget_shortcode');
?>

Danach kannst du den Shortcode [chopper_widget] in jedem Beitrag oder jeder Seite verwenden.

[chopper_widget main_color="#c0392b" text_color="#ffffff" bg_color="#2c3e50"]

📌 Plattform-spezifische Hinweise

🔧 Fehlerbehebung

🎯 Vorteile des Widgets

📌 Nutzungsbedingungen

• ✅ Die Nutzung ist für private, nicht-kommerzielle Websites, Blogs und Foren kostenlos.
• ✅ Der Link “Bereitgestellt von chopper-motorrad.de” muss sichtbar bleiben.
• ✅ Die Weiterleitung darf nicht verändert werden.
• ✅ Bei kommerzieller Nutzung bitte vorher anfragen.

💬 Fragen oder Probleme?

Wenn du Hilfe beim Einbau benötigst oder eine andere Variante möchtest, melde dich einfach im Forum oder per E-Mail über unser Impressum. Wir helfen gerne!