Kennen Sie das?: Sie haben ein schönes Layout für Ihre Webseite geplant, aber ein bestimmtes Element bereitet Ihnen Kopfschmerzen. Der Slider!. Kein anderes Stilmittel für Webseiten ist so umstritten wie der Slider. Die Einen hassen den Einsatz von Slidern, weil sie Stress verursachen und die Conversion Rate senken. Die Anderen lieben den Slider um möglichst viele Bilder an eine Position der Webseite zu platzieren.
Meist wird der Einbau eines Sliders über große, schwere Plugins realisiert, die dann die gesamte Seite lahm legen und die Performance in den Keller ziehen. Das muss aber nicht sein, denn man kann auch mit einer relativ schlanken Lösung einen Slider implementieren und diesen auch nur auf bestimmten Seiten laden lassen, wenn man unbedingt einen WordPress Slider einsetzen möchte.
Ein schlanker Gutenberg Slider
Gemeinsam mit der GeneratePress Community haben wir uns für einen Slider entschieden, den man ruhigen Gewissens weiterempfehlen kann. Nach der Anfrage, welcher Slider für WordPress wohl der Beste sei kamen die üblichen Verdächtigen wie Revolution Slider, Nivo Slider oder Smart Slider 3. Alle drei sind als „Premium Plugins“ bekannt, die nicht unbedingt als Leichtgewichte gelten. Alle drei Plugins laden die Seite voll und verlangsamen im schlimmsten Fall den Internetauftritt. Aus diesem Grund habe ich mich für den Slick Slider entschieden. Auf der einen Seite sind die Anforderungen an den Slider minimal und auf der anderen Seite kann man damit alles umsetzen, was i.d.R. benötigt wird.
Der Slick Slider lässt sich hier herunter laden.
Schritt 1: Slick CSS an den Header anhängen
Mit GeneratePress haben Sie die Möglichkeit die „Elements“ zu nutzen. Man ist also in der Lage bestimmte Aktionen an bestimmte Hooks zu hängen. Für dieses Beispiel wird das CSS via CDN eingebunden und nicht lokal geladen, das Vorgehen ist dabei aber identisch.
Dieses Hook-Element für den Gutenberg Slider benennt man nun so, dass man auch später noch nachvollziehen kann, was es tut. In diesem Fall also „Slick CSS an den Header anhängen“
Als nächstes wird der Code zum Einbinden des CSS in den Editor kopiert:
Wer sich die Arbeit nicht machen möchte, den Code abzutippen, hier noch einmal zum kopieren:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>Wichtig im nächsten Step ist natürlich, den Code an das richtige Element zu hängen, da wir CSS im Headbereich der Seite laden nutzen wir den Hook „wp_head“. Execute Shortcodes oder Execute PHP wird an dieser Stelle nicht benötigt und kann außer Acht gelassen werden. Lediglich an der Priorität schrauben wir ein bisschen. Um sicherzustellen, dass das Script am Ende aller Scripte geladen wird vergebe ich eine hohe Zahl damit das CSS erst nach den anderen geladen wird.
Kurze Randinfo zum Gutenberg Slider CSS von Slick
Natürlich muss ich das CSS nur einhängen, wenn ich auch vorhabe dies zu benutzen. Solltet ihr lieber euren eigenen Code verwenden, so könnt ihr diesen natürlich an der gleichen Stelle mittels <style></style> in den Editor schreiben.
Das Problem, dass wir an dieser Stelle jetzt haben ist ja: Wir binden das CSS auf jeder Seite ein, auch auf denen, die wir gar nicht benötigen. Und das ist ja nicht im Sinne der Erfindung. Zum Glück bietet das Element Modul die Möglichkeit eine Bedingung für die Ausgabe mit anzugeben.
Unter „Display Rules“ kann man die Location angeben, auf der dieses Element ausgeführt werden soll. In meinem Fall ist das die Front Page. Natürlich kann man hier jede beliebige Seite oder Seitengruppe angeben auf der man das CSS für den Gutenberg Slider einbinden möchte. Außerdem kann man via Exclude auch einfach Seiten ausschließen, auf denen das CSS nicht geladen werden soll. Oder alternativ über die User. Die Einstellungsmöglichkeiten sind hier sehr vielfältig. Allerdings reicht für meine Zwecke die Location -> Front Page.
Wenn ihr das Element gespeichert hat können wir uns an den nächsten Schritt wagen.
Schritt 2: Slick Javascript an den Footer hängen
Genau wie beim CSS erstellen wir nun ein weiteres Hook-Element. Und auch hier sollte man wieder auf die einmalige Bezeichnung achten, wenn man irgendwann mehrere Hooks im System hat, kann es passieren, dass man den Überblick verliert.
Der Part der in den Editor kopiert wird, ist in diesem Fall das Javascript des Slick Sliders. Der Part darunter ist verantwortlich für das Verhalten des Sliders und welche Optionen ich ihm zugestehen möchte und welche nicht. Da ich nur einen einfachen Textslider benötige reicht es an dieser Stelle die Einstellungen direkt mit an den Code zu hängen. Alternativ, bei mehreren Versionen des Sliders würde man die Settings in separaten Hooks einhängen.
Hier ist nur darauf zu achten, dass der Hook dieses Mal der wp_footer ist und auch hier muss eine höhere Priorität gewählt werden, um sicherzustellen, dass der Slick Slider NACH jQuery geladen wird. Da jQuery eine Voraussetzung für den Gutenberg Slider ist.
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
jQuery('.slidyslide').slick({
dots: true,
arrows: false,
infinite: true,
slidesToShow: 1
});
</script>Die Einstellungen für die Display Rules sind identisch mit denen aus dem CSS Hook, da wir den Slider nur auf der Startseite brauchen. Wenn diese Settings erledigt sind, ist der Gutenberg Slider quasi scharf gestellt und kann getrost verwendet werden.
Der Einbau als solches ist dabei denkbar einfach. Dem Übergeordneten Element wird nur noch die Klasse vergeben, die vorher im Slick JS festgelegt worden ist (.slidyslide) und die Child-Elemente werden sich genau so verhalten, wie man es von einem Slider erwartet.
Gutenberg Slider – Fazit
Wie Sie selbst sehen können, ist das Integrieren eines Sliders keine große Sache.
Und dennoch werden immer wieder die großen, schwerfälligen Slider Plugins genutzt, die das gesamte System lahmlegen können. Mit der oben beschriebenen Methode ersparen Sie sich sehr viel Ärger. Und wer es nachkontrollieren möchte:
Hier wird der Slider wird nur auf der Homepage geladen, da ich nirgendwo anders ein Slide Element verbaut habe.