Webdesign mit WordPress, SEO, Social Media

WordPress Tutorial – einen Slider bereitstellen

Von am 26. Jan 2012 in WordPress, WordPress Plugins | 23 Kommentare

In diesem Beitrag möchte ich zeigen, wie man den WordPress-Blog mit einem Slider ausstatten kann, der dann für die Anzeige ausgewählter Beiträge oder für die Anzeige von Bildern genutzt werden kann. Der Beitrag entstand im Rahmen der Aktion “Frag dich schlau”. Herzlichen Dank an Margit Nowotny von nowotny-training.de für ihre Frage zu diesem Thema.

Was wir erreichen wollen, seht ihr bei mir auf der Startseite oben im Bereich “Unsere Highlights”. Hier habe ich derzeit die letzten Beiträge als Slideshow. Zu sehen ist jeweils ein Text-Auszug mit einem dazugehörigen Bild.

Manche Themes stellen so einen Slider zur Verfügung, so auch meines (Theme Suffusion). Oft wird dieser Bereich nicht Slider genannt, sondern “Featured Content”. Für die Slideshow gibt es allerdings auch Plugins. Ich selbst nutze derzeit eines davon, da ich mit dem Theme-internen Slider ein paar Probleme hatte. Ich habe lange nach einem kostenlosen Plugin gesucht, das meine Anforderungen erfüllt und bin letztendlich bei Smooth Slider gelandet.

Featured Content mit dem Smooth Slider Plugin

Wordpress Tutorial

Nach der Installation des Plugins über den WordPress Dashboard finden wir dort den Menüpunkt “Smooth Slider” mit den Untereinträgen “Sliders” und “Settings”. Es ist möglich mit diesem Plugin mehrere Slider zu generieren, und die an unterschiedlichen Stellen im Blog einzubinden. Allerdings sind schon die Einstellungen für einen Slider nicht ganz ohne. Ich werde mich hier auf einen beschränken und verweise für multiple Slider auf die Beschreibung auf der Plugin-Seite.

Artikel zum Slider hinzufügen und wieder löschen

Dies gestaltet sich verhältnismäßig einfach. Und zwar finden wir beim Bearbeiten eines Artikels unterhalb des Editors ein paar Einstellungsmöglichkeiten, wie man im folgenden Bild sehen kann:

Artikel zum Slider hinzufügen

Artikel zum Slider hinzufügen

Den ersten Haken setzen, wenn der Beitrag im Slider zu sehen sein soll, die zweite Einstellung ist für css-Profis. Wichtig ist noch der Link zu dem Bild, das evtl. mit angezeigt werden soll. Anschließend kann man noch angeben, wohin die Verweise im Slider zeigen sollen. Ich lasse diese Option leer, dann wird der jeweilige Artikel verlinkt.

Zum Entfernen eines Beitrages aus dem Slider geht man entweder über oben genannte Einstellungen vor oder einfacher, da man nicht jeden Artikel zum Bearbeiten öffnen muss, über den Menüpunkt “Smooth Slider”=> “Sliders”. Dort können Beiträge entfernt oder deren Anzeigereihenfolge geändert werden.

Optionen für den Slider festlegen

Einstellungen für den Smooth Slider

Slider-Einstellungen auf vanvox.de

Kommen wir nun zum schwierigeren Teil. Das Aussehen des Sliders kann praktisch beliebig angepasst werden. Hierzu gehen wir zum Menüpunkt “Smooth Slider” => “Settings”, wo uns eine Menge Optionen erwarten. Hier sollte man ein bisschen Zeit zum Ausprobieren mitbringen, damit sich der Slider auch gut in das Design des Blogs integriert. Schön finde ich, dass man hier auch eine Vorschau für den Slider bekommt.

Einstellen lassen sich u.a.:

  • Slider Box: Slider-Geschwindigkeit, automatisches oder manuelles Sliden, Anzahl der Posts in der Show, Farbe, Höhe, Breite, Rahmen, Navigationselemente
  • Slider Title: Überschrift, Schriftart, Schriftgröße, fett/kursiv/italic/
  • Post Title: Schriftart, Schriftgröße, fett/kursiv/italic/
  • Thumbnail Image: welches Bild verwenden, Position, Größe, Rahmen, nur Bild anzeigen oder Bild und Textauszug
  • Slider Content: Schriftart, Schriftgröße, fett/kursiv/italic/, welchen Inhalt verwenden, Länge des Textes
  • Miscellaneous: weiterlesen-Text, Reihenfolge der Slides zufällig oder wie im Menüpunkt “Sliders” vorgegeben, Integration über Shortcode aktivieren, multiple Slider aktivieren

Wer meine Einstellungen einsehen möchte, klickt auf das Thumbnail rechts. Eventuell muss die Ansicht vergrößert werden.

Den Smooth Slider einbauen

Der Slider kann auf zwei verschiedene Arten eingebaut werden. Zum einen über einen Shortcode. Dies empfiehlt sich z.B., wenn der Slider in einem Beitrag eingefügt werden soll. Man fügt hierzu an der entsprechenden Stelle folgendes ein:

[ smoothslider id='2' ]

Für id trägt man die id des Sliders ein, in diesem Beispiel die 2. Bitte dabei noch die Leerzeichen nach “[" und vor "]” entfernen.

Für den Einbau direkt im Code fügt man folgenden Codeschnipsel an der gewünschten Stelle ein:

if ( function_exists( 'get_smooth_slider' ) ) {
     get_smooth_slider(); }

In der Regel will man den Slider auf der Startseite direkt über den Beiträgen anzeigen. Dann gehört der Code direkt vor dem WordPress-Loop. D.h. die index.php öffnen und wir suchen nach

if(have_posts()) : while(have_posts()) : the_post();

Dies ist der Beginn des Loops. Das Endergebnis sieht dann wie folgt aus:

<?php if ( function_exists( 'get_smooth_slider' ) ) {
  get_smooth_slider(); }
if(have_posts()) : while(have_posts()) : the_post();
   ....(rest of the loop code)
?>

Allerdings muss ich noch anmerken, dass nicht in jedem Theme der WordPress-Loop so eindeutig erkennbar ist. Das ist auch bei meinem Theme Suffusion der Fall. Unter Umständen braucht man etwas Erfahrung, um erkennen zu können, wo der Code eingefügt werden muss …

Smooth Slider ist ein kostenloses Plugin und erfüllt so einigermaßen den Zweck. Wer noch mehr haben möchte, der kann sich einmal die kostenpflichtige “Slidervilla” anschauen, wofür die Entwickler von Smoothslider unübersehbar werben. Einen schönen Beitrag dazu gibt es hier bei den Blogprofis.


Das könnte dich auch interessieren:

» 13 Must-Have-Plugins für deinen WordPress-Blog

» WordPress Tutorial: dofollow Kommentare

» Bloggen mit WordPress - Blogger werden leicht gemacht!

» Eine Website mit WordPress auch ohne Blog

» WordPress Tutorial: Pings und Trackbacks

    23 Kommentare

  1. Tolle Anleitung, den Slider hier find ich auch sehr cool und vor allem sehr praktisch, hab jetz schon öfter draufgeklickt. Werd ich mir irgendwann auch mal einbauen.

    Papillon-Texte

    26. Januar 2012

  2. Schön zu wissen, dass der auch genutzt wird. Schade nur, dass ich dazu keine Statistiken habe.

    vanvox

    26. Januar 2012

  3. also ich schätz mal, jeder, der neu (ach ne: jede, die..) auf die Seite geht, guckt erstmal im Slider nach den wichtigsten Artikeln. Man muss quasi einfach..

    Papillon-Texte

    26. Januar 2012

  4. ENDLICH!! Dankeschön:) Nach dem hab ich schon so lang gesucht:) dankedankedanke

    Jasmin

    26. Januar 2012

  5. Liebe Christina,
    das hat wunderbar funktioniert. Die Beschreibung ist hervorragend! Beim Theme “Coraline” versteckt sich
    dieser Abschnitt

    if(have_posts()) : while(have_posts()) : the_post();

    im loop.php

    Er beginnt mit:

    <?php
    // Start the Loop.

    Vielleicht hilft es noch jemand weiter.

    Also nochmal: ein ganz dickes Dankeschön!
    Herzlichst
    Margit

    Margit Nowotny

    26. Januar 2012

    • @Margit Das freut mich! Ich habe es mir auch schon angeschaut und es sieht gut aus. Nur die Bilder brauchen etwas lange zum laden. Und zwar liegt es daran, dass die Bilder, die du für den Slider bereitstellst sehr groß sind. Das eine (teambuilding) habe ich mir angeschaut und das hat alleine schon 600KB. Zum Vergleich, meine sind etwa 5KB. Ich skaliere die Bilder für den Slider auf die Größe, wie sie tatsächlich angezeigt werden sollen (bei mir 150×150 Pixel) und nutze diese dann auch als Artikelbild (musst du aber nicht). Also die Bilder kleiner machen, dann wird das ganze flotter.
      Libe Grüße,
      Chrisina

      vanvox

      27. Januar 2012

      • @Christina, hab mir das angeschaut mit dem Verkleinern. Ich habe allerdings das Gefühl, dass ich mich noch nicht von den großen Bildern auf dem Blog trennen will….vielleicht wenn es mal ganz viele sind und die Seite tatsächlich nicht mehr schnell genug lädt.
        Liebe Grüße
        Margit

        Margit Nowotny

        28. Januar 2012

        • Um ehrlich zu sein, ich habe mich auch erst vor ein paar Wochen dazu durchringen können :-)
          LG und ein schönes Wochenende
          Christina

          vanvox

          28. Januar 2012

  6. Hallo Christina,
    danke für die Erklärung. Ich hab immer überall diesen Slider gesehen und wollte so gern auch einen haben, doch leider hat das Plugin bei mir nicht funktioniert. Kein Wunder, denn wie ich jetzt dank Dir weiß, muss man ja noch etwas im Code ändern.
    Danke nochmals und viele Grüße,
    Hans-Joachim

    Hans-Joachim

    20. Februar 2012

  7. Die Anleitung ist top. Ist genau das was ich für meinen Blog, übrigens auch mit Suffusion-Theme gesucht habe. Vielen Dank.

    Martin

    29. Februar 2012

    • Danke! Suffusion hat ja einen eigenen Slider, nur hatte ich Probleme mit dem Blättern.

      vanvox

      29. Februar 2012

  8. Hallo Christina,
    danke für die Beschreibung zum Einbau des Sliders … ;)
    Ich habe mir das Suffusion mal angeschaut, finde die Stelle zum Einbau (loop) des Codes leider nicht :(
    Kannst Du mir sagen wo ich den finde?
    Danke Dir und Gruß
    Frank

    Frank

    30. Mai 2012

    • Hallo Frank
      in der index.php suchst du nach dem div mit dem id “main-col” und darunter muss stehen:

      < ?php suffusion_before_begin_content();
      /* smooth slider */
      if ( function_exists( 'get_smooth_slider' ) ) {
      get_smooth_slider(); }
      ?>

      vanvox

      30. Mai 2012

  9. Ich habe den Smooth Slider so wie Du beschrieben hast eingestellt. Wenn Du auf die Seite gehst, siehst Du, dass der text falsch angezeigt wird. Ich habe schon alles ausprobiert um den Text passend im Fenster zu bekommen, leider vergebens. Wie/wo muss ich Änderungen vornehmen?

    Viele Grüße
    Uli.

    Uli

    28. Februar 2013

    • Was ist denn falsch?

      vanvox

      3. März 2013

  10. Wieder eine tolle Anleitung von dir, vielen Dank, so einen Slider habe ich gesucht!
    Das Plugin habe ich erfolgreich runtergeladen und aktiviert, auch das Einrichten ging Dank deiner Anleitung wunderbar.
    Mein Problem ist der Einbau des Codes im Editor – das funktioniert nicht :(
    Kannst du mir sagen, wo genau ich den Code einbauen muss?
    Ich nutze das Yoko Theme, die index.php sieht so aus:

    max_num_pages > 1 ) : ?>

    dieTestfamilie

    22. Juli 2013

    • Hi Christina,

      so sieht es bei mir aus:

      welchen Code muss ich da wie und wo einfügen? Habe sowhohl den kompletten Code probiert zwischen die beiden zu setzen, als auch den Shortcode – beides funktioniert nicht.
      Ich hätte den Slider gerne auf der Startseite an der Stelle, an der bisher der festgepinnte Beitrag von mir ist.

      dieTestfamilie

      22. Juli 2013

      • Hallo die Testfamilie, ich sehe leider hier den Code nicht, aber das Theme ist ja frei verfügbar. Probiere es mal den Code direct unter

        in der index.php einzufügen.
        Ich muss allerdings gestehen, dass ich das Plugin irgendwann mal bei mir entfernt habe, weil es nicht mehr ging aber vielleicht hat sich da inzwischen was getan.
        vanvox

        22. Juli 2013

  11. hallo Christina, dein Slider ist ja weg! Ich hab grad überlegt, ob ich einen einbauen sollte. Aber da gibt es sicherlich wieder Probleme wegen der Fotorechte, ein Slider wirkt ja nur mit schönen Fotos toll und man kann die ja dann nicht mit den Lizenzangaben versehen. Weiß da jemand was drüber? An sich is es ja schon klar, da muss man dann die Artikel nach unbedenklichen Fotos auswählen und nich nach gutem Inhalt..

    J. Florence

    9. August 2013

    • Ja, der ist schon länger weg aber nicht wegen den Fotos, eher wegen der Performance… Puuh, da habe ich gar nicht darüber nachgedacht, dass man ja auch wegen dem Slider abmahnfähig wäre. Man kann ja nicht auf der Seite wo er erscheint die Urheberrechtsangabe machen. Da müsste man mit Fotos arbeiten, wo die Angabe im Impressum genügt.

      vanvox

      10. August 2013

  12. Moin!
    Das war meine Rettung!!! Vielen Dank für deine Arbeit, hat meinem Kopfzerbrechen erheblicher Verkürzung gebracht.
    Allerdings: Ich habe mich vor kurzem entschieden mit einem Child-Theme zu arbeiten, um die Originaldateien nicht zu beschädigen. Aber vor allem, um nach einer Aktualisierung nicht ohne eingebaute Feature da zu stehen.
    Ähnlich wie mit der function.php (leere Datei gleichen Namens in Child-Theme-Ordner, und da dann lediglich die Änderung eintragen)wollte ich es auch mit der index.php machen. Hab aber leider keine Anleitung gefunden.
    Bin dann einem Tipp im Forum gefolgt, einfach die gesamte Index.php zu kopieren. Ist natürlich nicht so schön, da ich dann sinnvolle Aktualisierungen ggf. nicht mehr mit bekomme.
    Eine Idee?
    Many THX

    weltklang

    26. Oktober 2013

    • Da habe ich leider keien Idee. Ich befürchte, es gibt keine andere Lösung.

      vanvox

      26. Oktober 2013

  13. Hallo liebe Christina, Hallo alle zusammen,

    die Anleitung war sehr hilfreich. Allerdings ist es bei mir etwas anders. Ich benutze statt der smooth slide das Plugin Slideshow Gallery. Nun konnte ich den Code von dir nicht so übernehmen und einbauen(habe natürlich statt get_smooth_slide, get slideshow daraus gemacht). Es wurde bei mir keine Slideshwo auf der Homepage angezeigt, nur der Code.

    Ich habe dann den Hardcode meiner fertig erstellten Gallery kopiert und einfach an die Stelle, welche du nennst, eingebaut. Das hat zum Glück funktioniert.

    Allerdings habe ich nun das Problem, das der erste Beitrag auf meiner Startseite, direkt unter der Slideshow ist, ohne Abstand. Hast du eine Lösung für mich, wie ich das ändern kann? Dei Seite heißt: myschoolpad.de

    Viele Grüße Jessica

    J

    13. November 2013

Kommentare sind geschlossen.