Slider in WordPress einbauen

Zuerstmal muss man die Bilder selbst für den Slider vorbereiten. Erstmal alle auf die gleiche Höhe zuschneiden (weil sonst der Slider von Bild zu Bild in der Höhe springt und das nicht gut aussieht) – die minimale Breite für meine WordPress-Seite sollte 750px – sonst füllt das Bild den Slider-Rahmen nicht aus. Das geht am schnellsten mit Paint. Und dann noch mal die Bilder für’s Web komprimieren.


JSSOR sah für mich erstmal vielversprechend aus. Dort kann man einen Slider online konfigurieren und hosten. Ich habe ihn ausprobiert und bin beim Importieren eines Bildes leider schon gegen einen Fehler gelaufen. Außerdem handhabt sich der Konfigurator doch ziemlich umständlich.

Mein Kollege hat mir inzwischen ein kostenpflichtiges Plugin empfohlen, welche ich beim nächsten Mal ausprobieren werde, weil das mit bootstrap doch irgendwie ein Gefummel war.

Also bleibe ich beim bootstrap carousel. Mit w3schools kann man den Code gleich online editieren, sieht die Änderungen sofort im Fenster rechts. Da das Editieren dort so komfortabel ist, macht man so lange, bis der Slider aussieht wie gewünscht. Die Bilder lädt man dazu in die WordPress-Mediathek und trägt die entsprechenden URLs dann in den HTML-Code ein.

Damit Bootstrap auf Deiner WordPress-Instanz laufen kann, musst Du es einmalig in der functions.php (Sidebar -> Design -> Editor) einbinden, und zwar ganz am Ende der Datei:


wp_register_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap_css');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('bootstrap');

Zu guter letzt copy den kompletten äußersten div-Block vom w3schools-Editor und paste ihn an die gewünschte Stelle Deines WordPress-Post (natürlich im Text-Modus).

CSS-Gefummel

Irgendwie scheint das unvermeidlich – dieses CSS-Gefummel, obwohl doch eigentlich in der Theorie schon alles passen sollte. Bei WordPress muss man den äußersten div noch von container in container-fluid umwandeln, damit er sich in sein umgebendes div einfügt. Auch hat WordPress die dumme Angewohnheit aus Linebreaks im Text-Editor ein br zu machen und aus zwei Linebreaks ein p. Dies führt natürlich zu unerwarteten Layout-Ergebnissen und zu noch mehr CSS-Gefummel. Abstellen kann man die sog. wpautop-Funktion für jede Seite/Post separat mit dem Plugin: toggle-wpautop. Dann noch bei jedem einfügen:
style="display: block; margin: 0 auto;"
damit die Bilder auch schön zentriert sind.

Hier (unter Jury) kann man das Ergebnis begutachten


Veröffentlicht von

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.