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.
Hallole… ich versuche auf der Titelseite meiner Webseiten die Meta Slide Show einzubinden. Dasfunktioniert auch. Allerdings ist das Fenster so groß, dass der Besucher scrollen muss, um alles zu sehen. Durch verändern der Anzahl der Pixel für die Breite und die Höhe erreiche ich nur, dass die Bilder unschärfer oder schärfer werden, das Fenster verändert sich dabei nicht. Können Sie da helfen?
Mit besten Grüßen, Udo
Die Web-Seite ist derzeit PW geschützt. Per eMail würde ich Ihnen gerne das PW schicken, damit Sie das Resultat sehen. DANKE!!!
ja, kann ich gerne machen. 👍
Hallo Tanja,
ich verstehe die Funktion mit der Breite und Höhe noch nicht so genau. Wenn ich es rechjt verstehe ist die Auswahl für alle Fotos der jeweiligen Show gesetzt. Was aber, wenn ich Fatos im Hoch und Querformat gemischt habe? Dann schneidet es mir immer etwas ab…
Vielen Dankj
Hallo Klaus, es ist nicht günstig in einer Slideshow Bilder im Hoch- und Querformat zu mischen. Hier wäre es am besten sich für ein Format zu entscheiden oder ggf. dann 2 Slideshows zu erstellen.
Hallo Tanja Volk,
es war ein kleiner Kampf alles so einzurichten wie ich es wollte, habe es nun aber geschafft und bin happy 🙂
Vielen Dank für die Erklärung.
Eine Frage noch: Kann ich irgendwo das Tempo ändern? Ich finde den Slider aktuell doch etwas arg schnell.
LG
Sabrina
Hallo Sabrina,
ja, die Geschwindigkeit kannst du ändern. Einfach unten bei „Erweiterte Einstellungen“ die Anzeigedauer verlängern.
LG
Tanja
Ein Traum, Dankeschön 🙂
LG
Sabrina
Liebe Tanja
Danke für die super Erklärung. Ich schaffe es jedoch nicht, dass die Fotos in der Slideshow richtig angezeigt werden. Wie kann ich die Grösse der Fotos so anpassen das das komplette Bild angezeigt wird?
Herzlichen Dank für deine Antwort.
Holla! Geht doch noch nicht. Die Slideshow ist nur in der Customizer- Ansicht an der richtigen Stelle, im Frontend wieder unterhalb der Menüleiste. Wenn ich ein zweites Headerbild einfüge, dann sind das Bild und die Slideshow auch im Frontend oberhalb der Menüleiste.
Hmm komisch… Kann es nicht testen, weil ich das Theme nicht nutze. Und wenn Du es noch weiter hochsetzt?
Danke, jetzt ist sie an der richtigen Stelle!
Hallo Tanja,
Ich bin WP-Einsteiger. In welche Zeile der Header – php muss ich denn den Befehl eingeben. Ich habe verschieden Zeilen ausprobiert, die Slightshow erscheint aber immer unterhalb der Menüleiste anstatt oberhalb (bei twentyfourty.)
Danke,
Peter
Hi Peter,
wenn es oberhalb der Navigation erscheinen soll, müsstest du es bei TwentyFourteen als erstes in den den header-Tag schreiben.
LG Tanja
Liebe Tanja,
ich bin neu bei WordPress und brauche noch ziemlich viele Infos. Ich habe mir bereits eine HP eingerichtet, mit einem schönen Theme, in dem auch ein Slider integriert ist, dieser ist jedoch statisch. Ich möchte dass die Sliderbilder und dazugehörigen Headlines und Links aber automatisch wechseln. Kann ich das auch mitHilfe Deiner Beschreibung hier schaffen? Muss ich da etwas Besonderes beachten? Wie gehe ich am Besten vor? Ich habe ein Bisschen Schiss, alles wieder zu zerstören ;-D
Hier die besagte Homepage: http://www.monamental.design
Danke Dir vorab für die Info darüber.
Viele Grüße, die Mona
Liebe Mona,
bei einem fertigen Theme würde ich eher versuchen, das mit dem bestehenden Slider hinzubekommen. Mit dem Meta Slider geht das zwar auch aber die Formatierungen (von Schriften,…) werden auf jeden Fall anders sein als jetzt. Das dann wieder genauso hinzugekommen ist als Neuling eher schwieriger, denke ich. Schau mal in den Einstellungen von dem Slider, bestimmt gibt es irgendwo eine Möglichkeit einzustellen, dass die Bilder automatisch wechseln sollen.
Viel Erfolg!
Liebe Tanja, ja das dachte ich mir auch, aber ich finde keine solche Einstellung. Es ist wirklich merkwürdig. Wäre es möglich, dass Du per teamviewer mal draufschaust?
Hallo Tanja,
vielen Dank für die Anleitung. Leider läuft die Slideshow sofort los, wenn die Seite geöffnet wird. Ich hätte gerne, dass der Betrachter sie starten muss. Geht das? Wenn ja, wie?
Viele Grüsse, Christa
Hallo Tanja, vielen Dank für die Anleitung. Leider werden meine Bilder nicht komplett eingefügt, an was kann das denn liegen? Es wird z.B. rechts und links etwas abgeschnitten…
Hallo Ulla, hast Du die richtige Größe für die Bilder angegeben? Oder ist der Container in dem die Bilder drin sind vielleicht zu kein?
Hallo Tanja,
ist es möglich einem Redakteur über den UserRoleEditor die Rechte zur Bearbeitung zuzuweisen?
Und wenn ja – wie?
Guten Tag,
kann man auch auf die E-Mail-Maske weiterleiten statt eine URL?
Ein sehr informativer Beitrag! Hier kann man viel lernen. Danke für die Mühe, die Sie gemacht haben, um das alles zusammenzutragen und aufzuschreiben. Viele Grüße und macht weiter so.
Lg Tren
Gerne 😉
Hallo Tanja,
ich habe mehrere Slideshows erstellt und die entsprechenden IDs in die Seiten kopiert.
Es wird aber an allen Positionen immer ein und dieselbe Show angezeigt.
Wie kann man das verhindern? Im Augenblick setze ich die unerwünschte immer auf Privat,
das kann es ja aber nicht sein.
Hallo Peter, das kann eigentlich nicht sein 😉 Da muss irgendwo anders der Fehler liegen. Da bin ich ganz sicher, weil ich das mit den IDs auch immer so mache. Habe gerade keine Idee an was es liegen könnte. Hast Du sicher den richtigen Shortcode kopiert? Und dann die Seite auch gespeichert?
Servus Tanja, ist es möglich ein Bild oder einen Text mit einer Meta Slider Gallery zu verlinken, ? Hab mir schon einen daran abgebrochen aber finde keine Lösung.
Hi Dirk, mit dem Meta Slider direkt nicht, aber vielleicht wenn Du das Plugin Meta Slider Lightbox dazu installierst…!?
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?
Das Problem habe ich auch gerade. Gibt es eine Lösung? Ist das ein Bug? Muss ich eine neue Diashow erstellen?
Ich hab’s gefunden: die Einstellungen verändern sich…
GlG
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.