Ein WordPress-Plugin, das ich in häufig benutze (es ist eigentlich fast schon so eine Art Lieblings-Plugin) um Slideshows zu erstellen, ist der Meta Slider. Der Meta Slider bietet recht ansehnliche Einstellmöglichkeiten und ist meiner Meinung nach im Vergleich zu so manch anderem Plugin recht intuitiv und einfach bedienbar.
Mit dem Meta Slider hat man grundsätzlich zwei Möglichkeiten:
- Eine Slideshow beispielsweise für Kopfbereich der Website erstellen – danach wird dann ein Shortcode in das Template (meist in die header.php) kopiert.
- Eine Slideshow innerhalb von anderen Inhalten wie einzelnen Beiträge oder einzelnen Seiten erstellen – dazu wird ein Shortcode in den entprechenden Beitrag/die entsprechende Seite kopiert.
Aber dazu später mehr.
Um eine Slideshow auf die Website zu bekommen, sind folgende 2 Schritte nötig:
- Slideshow erstellen – im WordPress-Backend
- Erstellte Slideshow ins Template oder in den Beitrag / die Seite einfügen
Slideshow im Backend erstellen
Zunächst muss das Plugin installiert werden. Dazu im WordPress-Backend unter Plugins/Installieren nach dem Plugin „Meta Slider“ suchen und installieren:
Den Menüeintrag Meta Slider auswählen.
Auf das Pluszeichen (+) klicken um die erste Slideshow zu erstellen.
Einen Namen für die Slideshow eingeben.
Über Dia hinzufügen können jetzt die Bilder in die Slideshow eingefügt werden.
Die Einstellungen der Slideshow können auf der rechten Seite durchgeführt werden:
Slideshow erstellen: Einstellungen
Je nachdem, welcher Slider ausgewählt wurde (Flex Slider, R. Slides, Nivo Slider, Coin Slider) gibt es unterschiedliche Möglichkeit für die Konfiguration des Sliders. Soll die Slideshow in den Kopfbereich der Website, ist es wichtig darauf zu achten, dass die Angaben bei Breite und Höhe mit dem Platz auf der Website übereinstimmen.
Bei den anderen Einstellungen probiert man am besten mal aus, was einem hier gut gefällt.
Speichern
Slideshow einfügen – in einen Beitrag eine Seite oder in das Template
Jede Slideshow erhält eine interne ID:
Soll die Slideshow in einem Beitrag oder einer Seite erscheinen, wird der generierte Shortcode kopiert und an die entsprechende Stelle im Beitrag / der Seite eingefügt.
Soll die Slideshow beispielsweise im Kopfbereich der Website erscheinen, muss der folgende Befehl in die header.php des Themes kopiert werden:
1 | <?php echo do_shortcode("[metaslider id=3224]"); ?> |
Soll auf jeder Seite eine andere Slideshow erscheinen, müssen zunächst mehrere Slideshows erstellt werden. Die entsprechenden IDs werden dann mit einer if-/else-Abfrage in das Template kopiert:
1 2 3 4 5 6 | <?php if ( is_page ('home')) {echo do_shortcode("[metaslider id=3224]");} else if ( is_page ('ueber-uns')) {echo do_shortcode("[metaslider id=3225]");} else if ( is_page ('leistungen') || '7' == $post->post_parent ) {echo do_shortcode("[metaslider id=3226]");} else {echo do_shortcode("[metaslider id=3227]");} ?> |
Diese Abfrage bewirkt folgendes:
- Die Seite Home bekommt die Slideshow mit der ID 3224.
- Die Seite Über uns bekommt die Slideshow mit der ID 3225.
- Die Seite Leistungen und alle Unterseiten der Seite Leistungen bekommen die Slideshow mit der ID 3226. Hierzu muss die ID der Seite herausgesucht werden (im unserem Beispiel hat sie die ID 7).
- Alle anderen Seiten bekommen die Slideshow mit der ID 3224.
Hallo Tanja,
ich möchte, das der Slider nur auf der HOMESEITE erscheint. Wie lautet dann der Code?
Herzliche Grüße
Werner
Hallo Werner,
dann kopierst Du nur den Shortcode und fügst ihn auf der Home-Seite ein.
Gruß Tanja
Hallo Tanja,
habe mir heute das Plugin runtergeladen und aktiviert. Eine Diashow mit ein paar Bildern eingefügt und das sah schon gut aus. Als ich dann von Flex Slider zu Coin Slider und zurück gegangen bin (da mir das nicht so gefallen hat) funktionierte der Slider nicht mehr, blieb auf dem ersten Bilder aus der Diashow.hängen.
Wie kann ich das wieder so einstellen, dass das wie am Anfang aussah?
Hallo,
ist es möglich unter den slides Bildtitel einzufügen?
ja, das geht!
Hallo Tanja,
noch eine kurze Frage.
Ich versuche den Slider in einer Lightbox zu öffnen, sobald der Anwender auf einen Link klickt.
Wenn man im Backend bei dem Meta-Slider auf Speichern & Vorschau klickt, dann funktioniert es. Ich habe aber noch nicht rausgefunden, wie das funktioniert.
Hast Du vielleicht einen Tipp für mich, wie der Link aussehen muss, damit der Slider in der Lightshow geöffnet wird
Ich verwende die jQuery colorbox.
Viele Grüße
Heiko
Hallo Heiko,
schau mal hier: https://www.metaslider.com/introducing-the-new-meta-slider-lightbox-plugin/
Vielleicht hilft Dir das weiter!
Viele Grüße, Tanja
Hallo Tanja,
tolle Anleitung :-).
Für ein Kundenprojekt habe ich den Slider mal eingebunden. Was mir ganz zum Schluss aufgefallen ist, das man die Dia-Show nicht bearbeiten kann, d.h. ich kann das Bild nicht ändern.
Ich kann nur den kompletten Eintrag löschen und neu erstellen.
Ist das richtig oder habe ich da nur etwas übersehen.
Viele Grüße
Heiko
Hallo Heiko,
doch man kann die Dia-Show bearbeiten. Man kann einzelne Bilder über dieses Mülleimer-Symbol löschen und/oder auch neue Bilder hinzufügen.
Viele Grüße
Tanja
Hallo Tanja,
über dieses Mülleimer-Symbol wird allerdings der gesamte Eintrag gelöscht.
D.h. ich kann nur ein Dia löschen und ein neues erstellen.
Wenn ich aber den eingegebenen Text (Beschreibung, Url etc.) stehen lassen will und nur das Bild austauschen möchte, dann geht das nicht. Oder?
Viele Grüße
Heiko
… achso, jetzt versteh ich! Ja, da hast Du leider Recht! 🙂
Viele Grüße,
Tanja
Tolle Anleitung, vielen Dank.
Ich habe allerdings eine Frage: Wenn ich den Slider auf der Seite und den Unterseiten einfüge, startet dieser immer wieder vom Anfang. Wie kann ich den Slider einbinden, damit auf den Unterseiten das Bild zb Nr.4 am Anfang angezeigt wird?
Hallo Kay! Dass auf der Unterseite automatisch dort weitergemacht wird, wo vorher aufgehört wurde geht so leider nicht. Ich würde entweder die Bildwiedergabe der Slideshow auf „Zufällig“ einstellen, damit man sich nicht alles von vorne ansehen muss oder alternativ zwei unterschiedliche Slideshows erstellen.