Kommentare 72

WordPress-Plugins vorgestellt #2: Der Responsive Slider

Der Responsive Slider von DevPress (hier eine Slider-Demo) bietet eine einfache und optisch ansprechende Option, einen Bilder-Slider in ein responsive WordPress-Theme zu integrieren. Es können Bilder mit Bild-Überschriften und Links angelegt werden. Die Integration des Sliders erfolgt entweder direkt über einen PHP-Codeschnipsel in einer Template-Datei (z.B. header.php) oder per Shortcode auf einer Seite oder in einem Artikel.

Responsive Slider WordPress Plugin 01

Der Repsonsive Slider ist eine einfache, schöne Slider-Lösung für responsive WordPress-Themes.

Die Slider-Einstellungen

Nach der Installation des Plugins kannst du über die Plugin-Einstellungen unter Slides/Settings ein paar grundlegende Einstellungen für deinen Slider festlegen.

responsive Slider WordPress Plugin 02

Die Settings des Responsive Slider Plugins.

Hier ist vor allem wichtig, dass du die Maße (der Desktop-Ansicht) deiner Slider-Bilder angibst, bevor du die Bilder hochlädst. Außerdem kannst du bestimmen, ob die Animation der Bilder faden oder sliden soll, wie lange die Animation und die Pause zwischen einem Bilder-Wechsel sein soll und ob die Animation automatisch starten soll.

Slider-Bilder anlegen

Nachdem du deine Einstellungen vorgenommen hast und deine Slider-Bilder vorbereitet sind, kannst du damit beginnen deine Slides anzulegen. Für das Anlegen eines neuen Slides wählst du einfach “Add New Slide”.

Responsive Slider WordPress Plugin 03

Ein neues Slider-Bild anlegen.

Hier trägst du einen Titel für dein Slider-Bild ein (dieses erscheint dann als Bildtitel am rechten oberen Bildrand) und bei Bedarf eine Link-URL um zu bestimmen, wohin das Slider-Bild und der Titel linken soll. Über das Feld “Slide Image” kannst du jetzt dein vorbereitetes Slider-Bild hochladen. Über “Slide-Order” beeinflusst du die Reihenfolge deiner Slider-Bilder. Vergiss nicht auf “Publizieren” zu klicken, um dein angelegtes Slider-Bild zu speichern. Hast du mehrere Slider-Bilder angelegt, kannst du alle über “All Slides” einsehen und bearbeiten.

Den Slider integrieren

Nachdem du alle Slider-Bilder angelegt hast, kannst du deinen Slider entweder direkt in dein Theme integrieren, indem du den folgenden PHP-Codeschnipsel an der gewünschten Stelle (z.B. unterhalb des Headers) einfügst:

<?php do_shortcode( '[responsive_slider]' ); ?>

Alternativ kannst du deinen Slider auch nur auf einer Seite oder in einem Artikel integrieren. Dazu fügst du einfach dein Shortcode [responsive_slider] auf deiner Seite oder in einem Artikel ein.

CSS-Anpassungen

Je nach Theme und Position des Sliders im Theme, benötigst du eventuell noch die ein oder andere CSS-Anpassung, um deinen Slider korrekt anzuzeigen. Ich habe bei meinem Test mit dem Pohutukawa-Theme folgende, zusätzliche CSS-Anpassung in die style.css Datei von Pohutukawa (über die Media-Queries lediglich für die Desktop-Ansicht des Sliders) angegeben:

.responsive-slider.flexslider {
	width:980px;
	margin:30px auto 0 auto !important;
}

So konnte ich den Slider mittig im Browser, mit einem Abstand von 30 Pixel nach oben und einer maximalen Größe von 980px anzeigen. Mit Hilfe der !important Angabe konnte ich bereits vorhandene CSS-Styles des Plugins überschreiben.

Ich hoffe du hilft meine kleine Vorstellung des Responsive Slider-Plugins weiter. Meiner Ansicht nach bietet das Plugin eine leicht umzusetzende Lösung für einen responsive Slider in WordPress. Der Slider hat nicht allzu viele Einstellungs-Optionen, funktioniert aber stabil und war bei meinem Test auch angenehm auf mobilen Geräten bedienbar.

Hast du auch schon Erfahrungen mit dem Responsive Slider-Plugin oder einem andernen responsive Slider-Plugin für WordPress machen können? Wie sind deine Empfehlungen und Tipps? Über dein Feedback freue ich mich sehr!

72 Kommentare

  1. Schöner Artikel!
    Ist es auch möglich, automatisiert den Slider zu aktualisieren? Beispiel: Alle Artikelbilder sollen inkl. Link zu dem Artikel und dem Artikelnamen im Slider auftauchen.
    Wäre was schönes für eine Home-Seite!

  2. Die Slider gefallen mir sehr gut. Ich suche auch wie Dennis ein Plugin, wo Bilder aus dem Upload Pfad ausgelesen werden. Dabei wäre es von Vorteil, wenn nur Bilder mit einer Mindestauflösung z.B. von 800×600 Pixel berücksichtigt werden. Kennt jemand ein solches Plugin?`

    @Ellen
    können auch bestehende Bilder verlinkt werden oder lädt das Programm die Bilder automatisch in den Slider Plugin Ordner?

    • @Ivan: Leider kenne ich selbst kein Slider-Plugin, dass diese Funktion erfüllt. Mit dem responsive Slider können denke ich auch bestehende Bilder aus dem Mediathek bereich benutzt werden. Diese müssten dann nur als “Featured Image” im Slide-Bereich ausgewählt werden. Viele Grüße, Ellen

  3. Danke für den Artikel – schöner Slider!
    @Ellen: Da du es eh schon im Pohutukawa ausprobiert hast: Gäbe es eine Möglichkeit, das Headerbild komplett durch den Silder zu ersetzen? Wär doch auch was für ein evtl. kommendes Theme-Update!
    Danke+Gruß!

    • @Steffen: Ja, das ist möglich. Ich habe es so gelöst, dass ich den PHP-Code unterhalb der mobile-nav einfügt habe. Die benötigten CSS-Styles werden wir in Zukunft für den Slider in unseren Themes unterstützen, so sollte eine Einbindung dann ganz unkompliziert sein :) Viele Grüße, Ellen

      • Hey Ellen, danke für die Nachricht. Soweit war ich allerdings schon. Allerdings kann man den Slider so nur vertikal-unterhalb der Blog-Info / der oberen Menüleiste positionieren, und nicht direkt als eigene Ebene darunterliegend wie das Headerbild. Schöner wär ja, wenn der Slider das Headerbild in derselben Positionierung und 1400px-Grösse ersetzen könnte … ;-) Aber vielleicht kommt das ja mit eurer zukünftigen Theme-Unterstützung?

        • @Ellen
          Mir gehts genauso wie Steffen. Gibt es nun eine Möglichkeit das Headerbild direkt mit einem Slider zu ersetzen im pohutukawa them? Wenn ja wie bzw. gibt es vielleicht ein Update – hab leider meinen download link verloren.
          Grüße Jan

        • Hallo Ellen, hallo Lars,
          habt Ihr da schon eine Lösung gefunden ?
          Genauso wie Lars hätte ich das auch gern :-)

  4. Hallo Ellen,
    vielen Dank für den tollen Beitrag! Er kam gerade zur rechten Zeit :-), das PlugIn ist klasse und Deine Erklärung wieder superklasse. Das PlugIn macht es dem Kunden noch einfacher, seine Slideshow selbst zu aktualisieren – das ist meistens das wichtigste.
    Ich befasse mich – aus Zeitgründen – erst seit 4 Wochen mit WordPress, habe fast immer, wenn ich nicht weiter wusste, auf Euren Blog zurückgegriffen und immer die Antworten auf meine Fragen gefunden. Wenn alles klappt, kann ich nächste Woche bereits die WP-Projekte 2 und 3 launchen, und das auch Dank Deiner Beiträge!
    Viele Grüsse aus España
    Steffen

    • @Steffen: Klasse, es freut mich wirklich riesig, wenn die Blog-Beiträge anderen weiterhelfen können :) Mir gefällt das Slider-Plugin auch sehr gut, da es sehr einfach zu bedienen ist und doch die wichtigsten Anforderungen eines Sliders erfüllt. Und das Styling ist auch sehr schön umgesetzt. Viele Grüße, Ellen

    • @Joerg: Ja, das stimmt, leider können beim Responsive Slider nicht mehrere Slider angelegt werden. Hast du das Styling anpassen müssen oder ist Meteor Slides inzwischen auch standardmäßig responsive? Viele Grüße, Ellen

      • @Ellen: Inzwischen hat es beim Meteor Slides Plugin eine Anpassung auf responsives Design gegeben. Wenn man allerdings ein angepasstes Stylesheet verwendet, merkt man es naürlich nicht gleich. Ich finde diesen Slider nach wie vor empfehlenswert.

  5. Hallo Ellen,

    so ein Slider ist eine tolle Sache. Der von dir vorgestellte Slider gefällt mir gut. Da ich mich erst ca. zwei Wochen mit WordPress beschäftige, ist natürlich eine einfache Handhabung wichtig. Aber das scheint ja relativ simpel zu sei. Das werde ich in den nächsten Tagen auf meiner neuen Seite testen.

    Gruß

    Klaus

    • @Klaus Schiefer: Ja, der Slider ist wirklich einfach umzusetzen, eventuell werden noch ein paar zusätzliche CSS-Styles benötigt. Wenn du dazu Hilfe brauchst, schreibe doch noch einmal auf der Nilmini-Themeseite. Dann stelle ich die Styles zur Verfügung (natürlich auch für unsere anderen Premium-Themes). Viele Grüße, Ellen

      • Hallo Ellen,

        das mit der einfachen Umsetzung war die Theorie. Scheinbar fehlt mir noch das Verständnis für die Zusammenhänge. Ich habe es lediglich geschafft, ein Bild nach deiner Anleitung einzubinden. ;-{
        Da muss ich wohl nochmal drüber nachdenken.

        Gruß

        Klaus

        • Wie bereits vermutet, lag ein Verständnisproblem vor. Ich habe angenommen, dass ich mit dem Slider beispielsweise im Artikel a 5 Bilder zu einen Thema einbetten kann, im Artikel b dann 7 Bilder zu einem anderen Thema usw. Dementsprechend habe ich nach einer Möglichkeit gesucht, in einem neu erstellten Slide mehrere Bilder unterzubringen, so wie ich das bei einer Galerie machen würde.
          Da sich der eigentliche Slide nach meinem jetzigen Verständnis aus mehreren einzelnen Slides zusammensetzt, steht er wohl nur einmal zur Verfügung und würde damit eher auf der Startseite eingesetzt werden.
          Ich suche nach einer Möglichkeit, unterschiedliche Bildserien in der gleichen Art zu animieren. Dabei sollten aber auch Bilder im Hoch- und Querformat richtig angezeigt werden. Bis ich etwas passendes gefunden habe, bleibe ich dann bei der jQuery Lightbox For Native Galleries.

          Gruß

          Klaus

    • FATlui

      Die kleinen Grafiken kommen von der imageclass “wp-post-image”.
      Ich nutze auch Bugis.
      Dort wird die Breite mit 140px definiert.
      Ändern wäre ja schlecht, da ich ja dann bei allen Posts die Größe der Bilder ändern würde!

      Wie kannich das vielleicht mit dem !important in der style.css lösen?

      Danke

      • Hallo FATlui und hallo Ellen,
        im Waipoua habe ich die Breite von 130 auf 800px verändert. Nun werden meine Bilder (800x400px) zwar in den Smartphones ab 240×320 nicht mehr klein dargestellt, die Navigationsbutton sind auch noch immer an der richtigen Position, aber: die Bilder sind nicht wirklich in der Mitte, nicht im Smartphone, Tablet oder Desktop, sondern überall etwas zu weit nach rechts gerückt. Linksbündig, orientiert am Text, würde alles passen, die Navigationsbutton wären in den Bildern an der Position, wo sie sein sollten.

        Vielleicht arbeitet elma ja bereits an einer funktionierenden Integration des Sliders und stellt uns bald für die verschiedenen Themes entsprechende Lösungen zur Verfügung.

        Gern würde ich auch noch den Abstand des Sliders vom Seitentitel reduzieren und den Seitentitel auch noch höher platzieren… Falls jemand dafür eine Idee hat.

        PS Das “Problem” mit elma ist, die Themes werden immer besser. Kaum hatte ich mich mit Yoko vertraut gemacht, kam Piha, Nori und Waipoua…

        Frank

        • FATlui

          Hallo Frank,

          ich kann dir mal den Firebug für Firefox ans Herz legen, wenn du diesen nicht schon (dr)inne hast.
          Dort kann man bequem seine Änderungen eintragen —> WYSIWYG-mäßig
          Das ist natürlich nur ein allgemeiner Vorschlag meinerseits und hat jetzt nicht speziell mit deinem Problem zu tun!

          Grüße
          Flo aka FATlui

  6. FATlui

    Hallo Sebastian,

    wie schon oben erwähnt könnte es mit der “imageclass” zusammenhängen.
    Hast du ein responsive Theme von hier? Wenn ja, Welches?
    Als kleiner Tipp nochmal von mir: Firebug für Firefox.

    Grüße

  7. Olaf

    Werde da auch nicht so ganz schlau draus. Man erstellt einzelne Artikelbilder, die dann die Sliderbilder darstellen? Es werden aber Artikelseiten angezeigt und angelegt dann.

  8. Olaf

    Hallo, hat jetzt doch gefunzt. Eine Frage: Ist es möglich die Textbox rechts oben auszublenden, wenn man keinen Text angezeigt haben möchte? Wenn man keinen Text eingibt erscheint eine transparente graue Box. Danke.

        • Hallo Olaf,

          ich hatte die Lösung hier schon gepostet, ist nur noch nicht freigeschaltet. Ich habe es allerdings mit “transparent” gelöst. ;-)

          Vielen Dank!
          Jasmin

  9. Marit

    Hallo,
    ich habe schon viele tolle Tipps von eurer Seite mitgenommen, vielen Dank! Zu dem Slider habe ich die ganz banale Frage: Wie bekomme ich den auf einer Seite mitten im Text platziert? Sowohl mit diesem Code-Schnippsel als auch mit dem Shortcode landet der immer direkt unter der Nav-Leiste.
    Danke für die Antwort!
    Marit

  10. Jan

    Hallo, die Tipps sind schon Klasse. Ein Problem stellt sich bei mir noch dar. Ich kann max. 10 Slides einbinden. An welcher Stelle kann ich die Anzahl der Slides festlegen. Irgendwie habe ich da eine Denkblockade

  11. Hmm, anscheinend wird doch direkt freigeschaltet, dann wurde meine Lösung irgendwie verschluckt. Man sollte übrigens auch noch
    .slider-wrap .responsive-slider.flexslider .slide-title a:hover
    entsprechend ändern.

        • Sabine

          leider nicht :-(- habe ca. 15 Seiten, Slides hingegen werden nur max. 10 angezeigt – und das ich richtig schade !!!

        • Es geht nicht um die Gesamtzahl Seiten, die du hast, sondern wie viele Beiträge du anzeigen lässt pro Seite.

          Das stellst du ein unter Einstellungen –> Lesen –> Blogseiten zeigen maximal

          Warum das gekoppelt ist, verstehe ich allerdings auch nicht…

        • Sabine

          poh Jasmin – das ist doch mal eine Ansage – tausend Dank :-)))
          zwar sind Beiträge zu den einzelnen Seiten derzeit unterdrückt, aber angedacht – hm ?
          LG

  12. Isa

    Vielleicht hilft das einigen Leuten weiter.
    Ich habe den Shortcode wie oben in index.php eingefügt und wunderte mich, dass kein Slider angezeigt wird.
    Habe dann diesen Code, den ich in dem FAQ von AlienWP gefunden habe, benutzt. Klappt jetzt endlich wunderbar! :)

  13. Hallo Zusammen,

    ich habe mich vor längerer Zeit schon an dem Slider probiert, doch leider klappt das bei mir nicht. Da ich nicht all zu viel Erfahrung habe würde ich mich freuen wenn jemand von euch mir weiterhelfen kann.

    Ich habe folgendes gemacht, CSS-Anpassung in die style.css

    /* Header
    ——————————————— */
    .responsive-slider.flexslider {
    width:1102px;
    margin:30px auto 0 auto !important;

    und den PHP-Codeschnipsel in den header.php

    Was mach ich falsch???

    Gruß Andreas

  14. quarki69

    Habe den Slider in der Baylys Theme eingebunden. Leider werden die Bilder unten abgeschnitten, wenn ich die Größe des Browser-Fensters nicht auf recht klein verkleinere. Dabei habe ich die Grafiken/ Bilder bereits den Dimensionen des Sliders angepasst. :-(

    • quarki69

      Will sagen, ab einer gewissen Bildschirmgröße werden die Bilder so stark mitvergrößert, dass sie nicht mehr in den Sliderbereich passen. Dabei würde mir heute ein Erfolgserlebnis echt noch gut tun…

      • quarki69

        Ich galueb, ich hab’s. Also ich habe noch nicht nachgeschaut, aber eigentlich ist es ja logisch. Der Slider ist responsive, verändert also seine Größe entsprechend der Breite des jeweiligen Screens.
        Ganz klar, dass das Bild, hat es einmal die Breite des Schrims erreicht, nur noch vergrößert werden kann, wobei unten ein Rand abfällt. Wurde das Ding näHmlich auch noch in der Größe wachsen, wäre es ja ziemlich doof. :-)
        Ich werde also die Eigenschaften des DIV, welches den Slider beinhaltet entsprechend anpassen und ihm was; eine feste Breite geben? Nein, eine maximale Breite? Vielleicht. Sonst ist’s ja nicht mehr responsive, wa?
        Wenn ich’s hinbekomme und es funktioniert, poste ich natürlich gerne das Ergebnis, bzw. die Lösung.
        Entschuldigt bitte meinen Monolog hier, aber manchmal muss man einfach nur darüber reden oder laut nachdenken, damit man zur Lösung kommt. :-)
        Ha(ha)t ja eh noch keiner gelesen, bis jetzt….. ;-)

        • dagguet

          Hi!
          Ich habe dasselbe Problem und es stört mich sehr. Ich würde die Slides gerne in einer doppelten Auflösung hochladen, damit sie auch auf retina gut aussehen. Aber leider werden die dann nur abgeschnitten :(
          Hast du eine Lösung gefunden?

  15. Eric

    Mich stört auch die Textbox rechts oben. Meine style.css hat allerdings keine Einträge des Sliders. Firebug verweist auf responsive-slider.css, allerdings finde ich auch dort den Eintrag “.slider-wrap .responsive-slider.flexslider .slide-title a ” nicht. Außerdem ist mir nicht klar, wie ich über das Backend auf CSS-Dateien wie “responsive-slider.css” zugreifen kann. Kann da jemand helfen?

  16. Anne

    Ich benutze das Theme Yoko. Leider kann ich den Slider nicht einbinden. Kann mir jemand helfen oder sagen, warum es nicht klappt? Bei anderen Themes klappt es wunderbar. Danke.

  17. meike

    Bei mir klappt es auch mit yoko. ganz normal mit:

    Hat jemand eine Idee, wie man die Reihenfolge einstellen kann, dass immer das zuletzt hinzugefügte Slide zuerstkommt und nicht das zuerst eingestellte?
    Hab keine Lust, jedesmal die Reihenfolge manuell anzupassen ;)

  18. Pingback: Responsiver Slider | Three-o-one

  19. Hallo,

    erst mal danke für den Beitrag und das Vorstellen der Funktionen. Ich habe den Slider eingebaut und alles ging relativ reibungslos. Ich hatte nur das Problem, dass die Bilder, die ich ausgewählt hatte, nicht übernommen wurden. So wurde dann kein Bild im Slider angezeigt. Nach einer kurzen Suche habe ich dann gefunden, dass man in der functions.php eine Zeile Code einfügen muss:
    add_theme_support( ‘post-thumbnails’, array( ‘post’,'slides’,'page’ ) );

    Danach hat alles super geklappt :-)

    VG
    Christian

  20. Kristina

    Hallo,

    ich möchte zwei Slider einbauen – auf zwei verschiedenen Seiten, mit verschiedenen Bildern und unabhängig voneinander.

    Ist das möglich mit dem Responsive Slider!?

    Danke :)

  21. dagguet

    Ich habe den Banner auf meinem Baylys Theme integriert und bin prinzipiell sehr glücklich darüber, wenn er sich responsive verkleinern soll.
    Allerdings bin ich sehr unglücklich darüber, wenn er sich vergrößert. Obwohl ich die Bilder sogar in 1880*800 Pixel, also doppelt so groß hochlade und die Größe in den Settings angebe, werden sie immer verpixelt wenn die Webseite größer (fullscreen auf großem Monitor) dargestellt wird.
    Dass er die Bilder proprotional beschneidet, damit kann ich ja irgendwie noch leben. Dass er sie verpixelt allerdings nicht (zumal sie ja entsprechend groß vorliegen?)
    Kannst du mir da bitte helfen? Danke!

  22. Sebastian

    Hallo Leute,

    ich habe folgendes Problem:
    Ich nutze das YOKO-Theme und möchte einen Slider dort einbauen, wo das große Bild ist. Das Bild/Slider soll dann nach oben rutschen, damit das Logo links daneben steht.
    Im Header ist quasi nur das Logo (links) und der Slider (mit kleinem Abstand zum Logo) daneben.
    Ich schaffe es nicht…kann mir jemand helfen?
    Vielen Dank ;)

Schreibe eine Antwort