Was sind Vor- und Nachteile einer Slider -Lösung ohne Plugin auf meiner WordPress-Website?
Plugins in WordPress scheinen zunächst komfortabel, sind aber oft ressourcenintensiv und machen Websites langsamer. Wer ein überschaubares Projekt hat und sich die Flexibilität wünscht, kann stattdessen auf eine schlankere JavaScript-Lösung wie Owl Carousel setzen.
Vor- und Nachteile eines Slider ohne Plugin
- Vorteile:
- Volle Kontrolle über Design und Funktionen
- Keine unnötigen Ressourcen
- Geringere Abhängigkeit von externen Plugins
- Nachteile:
- Erfordert etwas Einarbeitung in HTML, CSS und JavaScript
- Keine automatischen Updates wie bei einem Plugin
Vorschau: Slider ohne Plugin in WordPress auf Tablet, Desktop und Mobil
Wie setze ich einen responsiven Slider ohne Plugin auf meiner WordPress Website um?
Um den Owl Carousel Slider ohne Plugin direkt in deine Webseite einzusetzen, verwenden wir einfach das hier bereitgestellte HTML, CSS und JavaScript. In 5 Schritten zur Plugin-freien Implementierung:
Schritt 1: HTML für den Container und die Items
Achte darauf, die erforderlichen IDs und CSS-Klassen für die Container-Elemente im WordPress-Editor hinzuzufügen. In der folgenden Grafik siehst du den Aufbau des Carousels: Der äußere Container hat die ID #pakete, darin befindet sich die Elemente mit den CSS-Klassen.carousel-wrap umfasst die .owl-item-Karten.
Abbildung 1: Aufbau und Struktur der CSS Klassen und IDs der Slider-Container Elemente
--> Eine HTML-Vorlage als Starthilfe liegt hier zum Kopieren & Einfügen bereit.
Schritt 2: CSS für das Design und die Responsivität
Im zweiten Schritt wollen wir die Elemente des Sliders anpassen, indem wir den relevanten CSS-Code im Customizer der WordPress Seite einfügen:
Abbildung 2: Customizer - Platz für zusätzliches CSS
--> Das CSS liegt hier zum Kopieren & Einfügen bereit.
Schritt 3: JavaScript für Owl Carousel aktivieren
JavaScript sorgt dafür, dass der Slider interaktiv bedienbar wird. Achte hier darauf, dass die die richtige ID #pakete einbaust. Hier ist der Code, um Owl Carousel zu initialisieren. Diesen kannst du direkt in der footer.php deines WordPress-Themes einfügen oder als Element in GeneratePress dem wp_footer zuweisen:
Abbildung 3: JavaScript als Element hinterlegt
--> Das JS-Snippet liegt hier zum Kopieren & Einfügen bereit.
Schritt 4: CSS für das Owl Carousel einbinden
Anschliessend verlinken wir relevante Bibliotheken für das Owl Carousel. Die relevanten Verzeichnisse kannst du direkt in der header.php deines WordPress-Themes einfügen oder als Element in GeneratePress dem wp_head zuweisen:
Abbildung 4: Hinterlegung der Bibliotheken für das Owl Carousel auf dem Server
Schritt 5: Bibliotheken vom eigenen Webserver bereitstellen
Zuletzt müssen wir noch die Bibliotheken für das Owl Carousel im Child-Theme der WordPress Webseite ablegen:
Abbildung 5: Verzeichnis auf dem Webserver mit den Bibliotheksdateien
Pro-Tip: In diesem Chat gibt David weitere Hinweise, um Containern in GenerateBlocks eine dynamische Positionen zuzuweisen, um eine optimale Darstellung des Sliders auf Endgeräten mit Zwischengrößen zu erreichen.