WordPress Tutorial – einen Slider bereitstellen

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

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

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

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.

• » WordPress Tutorial: Blog-Beiträge mit Verfallsdatum versehen
• » Schritt für Schritt zum Gastbeitrag
• » WordPress Tutorial: Blog mehrsprachig anbieten mit Global Translator
• » Webworker-Jobbörsen im 3er-Pack - für Blogger, Texter, SEOs!
• » WordPress installieren - so einfach ist das!

Bewerte diesen Artikel: (Noch keine Bewertungen)

 Loading ...