GeneratePress Gutenberg Slider – Die einfachste Lösung

Ihr kennt das sicher: Da hat man ein schönes Layout zur Umsetzung bekommen, schaut es sich genauer an und findet dann das Element, das bereits für so viel Diskussionen gesorgt hat. Der Slider! Von den Einen gehasst, von den anderen hoch geschätzt. Ich persönlich gehöre zur ersten Gattung Internetmenschen, aber das tut ja nichts zur Sache.

Natürlich kann man sich die Arbeit leicht machen und einfach ein PlugIn installieren das den Gutenberg Slider integriert. Aber wer meinen Beitrag “ungenutzte JS und CSS Files aus WordPress entfernen” gelesen hat wird gleich merken, dass das eventuell keine gute Idee ist. Denn wir können ja auf der einen Seite nicht anfangen Scripte und Styles zu entfernen um die Seite performanter zu machen und auf der anderen Seite müllen wir das System wieder zu.

Ein schlanker Gutenberg Slider muss her

Wie cool wäre es, einen Slider zu verwenden, der nur auf den Seiten geladen wird, auf denen er auch eingesetzt wird? Hammer oder? und wie ich das für mich umgesetzt habe, zeige ich euch jetzt hier:

Die Wahl des Sliders habe ich mit der GeneratePress Community gemeinsam entschieden. Als ich eine Anfrage schicke, welche Gutenberg Slider sich zum Einsatz lohnen würden kamen unter anderem der Revolution Slider, der Nivo Slider und der Smart Slider 3. Alle samt Premium Plugins, die nicht gerade als Leichtgewichte bekannt sind. Alle drei zecken sich in den Code ein und laden unnötig viele Ressourcen. Die Wahl viel dann auf den Slick Slider, da die Anforderungen an einen Slider meinerseits minimal sind und ich damit alles umsetzen kann was ich brauche. Den Slick Slider bekommt ihr hier.

Und richtig: Es ist kein WordPress Plugin. Was einige Vorteile mit sich bringt. Denn unser Gutenberg Slider soll ja nur auf Seiten geladen werden, auf denen er auch zum Einsatz kommt.

Step 1: Slick CSS an den Header anhängen

Mit GeneratePress habe ich die Möglichkeit auf das Modul “Elements” zuzugreifen. Ich habe mich dazu entschieden, das CSS via CDN zu laden und nicht lokal einzubinden. Die Vorgehensweise ist dabei aber identisch.

Zunächst wählt man unter Design -> Elements ein Hook Element

Dieses Hook-Element für den Gutenberg Slider benenne ich so, dass ich auch später noch nachvollziehen kann, was es tut. In meinem Fall “Slick CSS an den Header anhängen”

Als nächstes wird der Code zum Einbinden des CSS in den Editor kopiert:

Mehr braucht es an dieser Stelle nicht

Wer sich die Arbeit nicht machen möchte, den Code abzutippen oder an anderer Stelle zu ziehen hier nochmal 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.

Hook richtig gewählt? Priorität eingestellt? Perfekt

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.

Es kommt auf die Bedingung an!

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.

Step 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>

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.

Step 3: Slider auf der Seite verbauen

Basis MarkUp für den Slider

Als erstes baut ihr euch ein Standard HTML Gerüst für die Elemente, die Ihr sliden lassen wollt.

Inhalte hinzufügen

Dann integriert ihr Eure Inhalte, die ihr anzeigen lassen wollt.

Fertig ist das!

Und zum Schluss habt ihr nen super performanten Gutenberg Slider.

Gutenberg Slider – Fazit

Wie ihr selbst seht, ist das Intergrieren 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 erspart ihr euch sehr viel Ärger. Und wer es nachkontrollieren möchte: Der Slider wird nur auf dieser Beitragsseite geladen, da ich nirgendwo anders ein Slide Element verbaut habe (aus Gründen).

Ich hoffe ihr konntet den ein oder anderen Anreiz mitnehmen und wie immer gilt: Bei Fragen schreibt mich einfach an, via E-Mail oder Facebook.

Schreibe einen Kommentar