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

WordPress-Plugins

Lesedauer: 3 Minuten
Artikel zuletzt aktualisiert: 12. Oktober 2023

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).

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.

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.

Teile diesen Beitrag:


WordPress Cookie Hinweis von Real Cookie Banner