Einen Blog erstellen mit WordPress – Teil 13: Den Blog visuell aufwerten mit Smooth Slider

/Einen Blog erstellen mit WordPress – Teil 13: Den Blog visuell aufwerten mit Smooth Slider

Einen Blog erstellen mit WordPress – Teil 13: Den Blog visuell aufwerten mit Smooth Slider

Nachdem ich in der vergangenen Woche die Bildergalerie NextGen Gallery vorgestellt habe, werde ich in dieser ersten Woche des neuen Jahres das WordPress-Plugin Smooth Slider präsentieren.

Auf meinem Blog setze ich auch diesen Slider ein, und zwar auf der Startseite. Ich verwende ihn, um meine persönlichen Artikel-Empfehlungen aus meinem Blog gut sichtbar oberhalb der chronologischen Artikelauflistung anzuzeigen.

Ich werde in diesem Artikel zeigen, wie Sie einen Slider auf Ihrer Seite einfügen können.

Download und Installation von Smooth Slider

Das Plugin können Sie sich einmal von der WordPress-Seite herunterladen  oder auch von der Clickonf5.org-Seite . Auch hier ist der Installationsvorgang wie bei den meisten anderen Plugins: Entzippen Sie die ZIP-Datei, laden Sie den Ordner in den Plugins-Ordner unter wp-content/plugins auf Ihren Webspace hoch und aktivieren Sie das Plugin im WordPress-Administrationsbereich.

Der Smooth-Slider hat einen eigenen Verwaltungsbereich unter WordPress.

Erstellen eines Sliders

Um einen Slider zu erstellen, können Sie den schon standardmäßig vorhandenen Smooth-Slider verwenden. Das heißt, Sie müssen unter Create New Slider keinen neuen Slider anlegen.

Um Ihren Slider zu gestalten, klicken Sie dann auf Settings im Slider-Adminbereich.

Im Bereich Slider Box legen Sie sozusagen die Hülle oder die Box des Sliders fest. Hier können Sie bestimmen, wie lange ein Slider angezeigt wird, wie viele Posts eingefügt werden können (ich habe fünfzehn in meinem Slider), die Hintergrundfarbe, Slider-Höhe und -breite in Pixel, Rahmendicke und -farbe sowie Einstellungen für die Navigationsbuttons.

slider-2

Darunter schließen sich die Bereiche Slider Title und Post Title an. Hier legen Sie fest, wie der Titel des Sliders aussehen und lauten soll und wie der Titel des jeweiligen Beitrags gestaltet ist (Schriftart, -größe, -farbe und -schnitt).

Lesen  Buchbesprechung des Monats - Weblog mit WordPress 3 (Autorin: Gabriele Frankemölle)

slider-3

Im Bereich Thumbnail Image legen Sie fest, wie das Vorschaubild in den im Slider angezeigten Posts dargestellt werden soll. Ich zeige in meinem Beispiel die Originalgröße des ersten Artikelbildes an. Aber es gibt noch andere Einstellungen, wie beispielsweise über ein Custom Field (siehe Video am Ende des Artikels). Meine gewählte Einstellungsweise ist die einfachste.

Dann können Sie noch u. a. die Bildausrichtung, Bildrahmen, -farbe und -dicke  sowie die Bildgröße auswählen.

In den zwei letzten Bereichen Slider Content und Miscellaneous legen Sie einmal das Aussehen des angerissen Artikeltextes fest (Schriftart, -größe, -farbe, -schnitt) und ob Sie den Textauszug aus dem Content entnehmen oder aus dem Post Excerpt, den man ja bei jedem erstellten Artikel noch zusätzlich schreiben kann (Feld Auszug im Artikelerstellungsbereich). Oder Sie legen wieder ein Custom Field fest. Die einfachste Variante ist auch hier From Content. Dann können Sie auch noch bestimmen, wie viele Zeichen oder Wörter vom Artikel angezeigt werden sollen.

Unter Miscellaneous können Sie zum Beispiel noch entscheiden, wie der Weiterlesen-Link genau lauten soll und dies entsprechend ändern. Ihre Änderungen speichern Sie mit dem Button ganz unten ab.

Ihre Änderungen werden unter Settings ganz oben unter Preview angezeigt.

Artikel zu Slide-Show hinzufügen

Dann sollten Sie festlegen, welche Artikel in Ihrer Slideshow zu sehen sein sollen.  Dafür gehen Sie in die jeweiligen Artikelbearbeitungsansicht und dort finden Sie ganz unten einen Bereich für den Smooth-Slider. Hier klicken Sie das Kästchen Add this post/page to

[Slidername].

Slider in Startseite einbauen

Um nun noch den Slider auf Ihrer Startseite einzufügen, müssen Sie einen PHP-Codeschnipsel in die index.php einfügen.

Lesen  WordPress online lernen: WordPress-Schulungen im Internet

Fügen Sie folgenden Code

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

oberhalb des Loops  (beginnt mit: if (have_posts()) …) ein (siehe Screenshot)).

slider-6

Ihre index.php können Sie über Design — Editor aufrufen. Sie finden Sie unter Editor auf der rechten Spalte unter Templates. Einfach drauf klicken und die Datei öffnet sich.

Wenn Sie den Code eingefügt und die Änderungen abgespeichert haben, sollte Ihr Slider auf der Startseite zu sehen sein.

Viel Spaß beim Erstellen Ihrer persönlichen Slideshow mit Smooth-Slider.Weitere Informationen zum Smooth-Slider finden Sie auf www.clickonf5.org/smooth-slider, allerdings auf Englisch.

Hier ist auch noch das Video-Tutorial, das auf Clickonf5 dazu zu finden ist und in dem Ihnen noch weitere Einstellungsmöglichkeiten wie das Custom Field vorgeführt werden.

(Bildquelle Artikelanfang: © Alexandr Mitiuc #29601827/Fotolia.com)

2017-04-26T08:44:15+00:00 3. Januar 2011|Kategorien: WordPress|Tags: , |3 Kommentare

Über den Autor:

Auf meinem Geld-online-Blog schreibe ich über alle Themenbereiche, die die Selbständigkeit online sowie erfolgreiches Arbeiten und Geldverdienen im Internet betreffen.

3 Kommentare

  1. […] habe in meinem Blog schon die beiden kostenlosen Slideshow-Plugins  Smooth Slider und ShowTime Slideshow näher vorgestellt und jedem von ihnen einen Artikel […]

  2. Sascha 7. Juni 2011 um 21:52 Uhr

    Das Smooth Slider Plugin ist ne tolle Sache, aber leider nicht W3C valide. Ich habe deswegen ein bisschen im Plugin Code gepfuscht und hier ein Tutorial dazu veröffentlicht:

    http://www.blogverdiener.de/2011/03/wordpress-plugin-smooth-slider-w3c-valide-kleiner-eingriff-ins-plugin/

    Dort kann man das Plugin auch direkt W3C valide herunterladen, sofern man nicht selber coden mag, oder kann. Ich hoffe Du nimmst mir den Link nicht übel.
    LG Sascha

  3. WordPress-Artikelserie 28. September 2011 um 09:38 Uhr

    […] 13. Einen Blog erstellen mit WordPress – Teil 13: Den Blog visuell aufwerten mit Smooth Slider […]

Hinterlasse einen Kommentar