WordPress: In 5 Schritten einen Slider ohne Plugin einrichten

Es gibt unzählige Slider-Plugins für WordPress. Die Auswahl ist wirklich riesig und für nahezu alle Anforderungen ist etwas dabei. Aber manchmal findet man doch nicht das richtige oder man möchte einfach nicht noch ein zusätzliches Plugin installieren, dann ist slick genau das Richtige. Mit dem slick-Slider hat man unendliche Möglichkeiten einen Slider genau auf seine Anforderungen und Bedürfnisse anzupassen. Und das ist gar nicht so schwer wie man denken könnte.

1. Inhalte einfügen

Zunächst einmal fügst du auf einer Seite oder in einem Beitrag die Inhalte ein, die später im Slider erscheinen sollen. Keine Sorge, du kannst zunächst auch Dummy-Bilder oder -texte einfügen, der Inhalt lässt sich später immer wieder anpassen. Das ganze muss aber mit einem speziellen HTML-Markup geschehen, deswegen musst du dafür den HTML-Block nutzen. Bist du noch nicht auf den Gutenberg-Editor umgestiegen bzw. nutzt du noch den Classic Editor, dann muss der Inhalt in der Textansicht des TinyMCE eingefügt werden.

<div class="deine-klasse">
  <div>dein Inhalt</div>
  <div>dein Inhalt</div>
  <div>dein Inhalt</div>
</div>

Hinweis: dieser Schritt kann natürlich auch ganz am Ende erfolgen. Aber ich “beobachte” gerne und füge die Elemente schon vorher ein. So kann ich sehen, wie meine Arbeit “wirkt”.

2. Dateien hochladen

Als nächstes solltet ihr euch den slick-Ordner herunterladen und in euer eigenes Projekt, evtl. in den (Child-)Themes-Ordner hochladen. In dem Ordner befinden sich verschiedene CSS und JS-Dateien, die euren Slider später ans Laufen bringen werden.

3. CSS-Dateien laden

Damit die richtigen CSS-Dateien geladen werden, müssen diese in den header eingebunden werden. Dafür ladet ihr mit Hilfe eines FTP-Programms die header.php eures Child-Themes herunter und ergänzt die folgenden Zeilen.

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Je nachdem wo ihr die Dateien speichert, müsst ihr noch den Pfad ändern. In meinem Fall habe ich den Pfad zum Theme mit Hilfe einer function ergänzt.

<link rel="stylesheet" type="text/css" href="<?php bloginfo ('template_directory') ?>/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="<?php bloginfo ('template_directory') ?>/slick/slick-theme.css"/>

Ladet die Datei anschließend wieder hoch – denkt bitte daran vorher ein Backup der Datei zu machen, so dass ihr problemlos wieder den Ursprungszustand herstellen könnte, falls etwas nicht wie gewünscht funktioniert.

4. Javascripte laden

Damit der Slider funktioniert, müssen noch die Javascripte geladen werden. Auch hier müsst ihr die entsprechende Theme-Datei per FTP herunterladen und nach dem Berbeiten wieder auf den Server spielen. Die Script werden in vor dem schließenden body-Tag eingefügt, das ist in der Regel in der footer.php.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo ('template_directory') ?>/slick/slick.min.js"></script>

Auch hier müsst ihr den Code evtl. durch den Pfad zur Datei slick.min.js anpassen.

Der Aufruf der jQuery-Version ist evtl. nicht zwingend notwendig, falls ihr schon eine andere Funktion nutzt, die auch jQuery benötigt. Sollte dies der Fall sein, seht ihr einen entsprechenden Eintrag in der footer.php und könnt dann den Aufruf hier weglassen. Wichtig ist, dass mindestens jQuery 1.7 geladen wird.

Der Code muss noch ergänzt werden um den Aufruf eurer Javascript-Datei , in der ihr den Slider initialisiert und anpasst. (Was die enthält, erkläre ich euch in Punkt 5.) Bei mir sah das dann so aus:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/slick/mein-slider.js"></script>

Alternative

Wenn Du nicht in den Dateien deines Themes arbeiten möchtest, gibt es auch Wege dies zu umgehen. Zum einen bieten manche Themes von Haus aus an, dass man im Backend der Seite bzw. in den Optionen des Themes Ergänzungen eintragen kann, die dann in der header.php bzw. der footer.php geladen werden.

Zum anderen kann man dafür aber auch auf Plugins zurückgreifen, wie z. B. Insert Headers and Footers. Es gibt da sicherlich mehrere, die empfehlenswert sind.

5. Slider initialisieren und anpassen

Nun muss der Slider noch initialisiert werden bzw. eurer HTML-Markup muss vom Javascript interpretiert werden. Dazu benötigt ihr eine Javascript-Datei mit dem folgenden Minimal-Code:

$(document).ready(function(){
  $('.deine-klasse').slick({
    setting-name: setting-value
  });
});

Der Name der Datei in meinem Fall mein-slider.js.

Bei einem meiner Projekte hat dieser Aufruf allerdings zu einer Fehlermeldung geführt und der Slider hat nicht funktioniert. Als Alternative zum Aufruf der Funktion solltet ihr also folgendes ausprobieren:

jQuery(document).ready(function($){
  $('.deine-klasse').slick({
    setting-name: setting-value
  });
});

Und nun fängt das große Anpassen an 😉 Der Slick-Slider bietet eine Fülle von Möglichkeiten, um genau den Slider darzustellen, den ihr wollt und braucht. Ihr findet auf der Website viele Beispiele und eine ausführliche Darstellung aller Optionen.

Neben den Standard-Optionen:

Wie viele Elemente sollen angezeigt werden?
Wie viele Elemente sollen beim Weiterklicken gescrollt werden?
Soll es nur Navigationspfeile geben oder auch Punkt unterhalb des Sliders?
Sollen die Elemente autorotieren?
Mit welcher Geschwindigkeit findet die Rotation statt?
Soll der Slider als Karussell funktionieren?

Gibt es u. a. auch die folgenden Möglichkeiten:

Der Slider zeigt die Elemente in mehr als einer Reihe (grid mode).
Der Slider wird für bestimmte Bildschirmgrößen “ausgeschaltet”.

Ich bin sicher, dass die Bastler unter euch ihre helle Freude haben werden 😁

Doch ein Plugin

Wem das alles doch zu viel Code ist, für den gibt es slick auch als Plugin.

Image(s) licensed by Ingram Image/adpic.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.