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

Inhalt zuletzt aktua­li­siert: 5. August 2019

Nach­dem ich in der ver­gan­ge­nen Woche die Bil­der­ga­le­rie Next­Gen Gal­lery vor­ge­stellt habe, wer­de ich in die­ser ers­ten Woche des neu­en Jah­res das Word­Press-Plug­in Smooth Slider präsentieren.

Auf mei­nem Blog set­ze ich auch die­sen Slider ein, und zwar auf der Start­sei­te. Ich ver­wen­de ihn, um mei­ne per­sön­li­chen Arti­kel-Emp­feh­lun­gen aus mei­nem Blog gut sicht­bar ober­halb der chro­no­lo­gi­schen Arti­kel­auf­lis­tung anzuzeigen.

Ich wer­de in die­sem Arti­kel zei­gen, wie Sie einen Slider auf Ihrer Sei­te ein­fü­gen können.

Download und Installation von Smooth Slider

Das Plug­in kön­nen Sie sich ein­mal von der Word­Press-Sei­te her­un­ter­la­den oder auch von der Click​on​f5​.org-Sei­te . Auch hier ist der Instal­la­ti­ons­vor­gang wie bei den meis­ten ande­ren Plug­ins: Ent­zip­pen Sie die ZIP-Datei, laden Sie den Ord­ner in den Plug­ins-Ord­ner unter wp-con­ten­t/­plug­ins auf Ihren Web­space hoch und akti­vie­ren Sie das Plug­in im WordPress-Administrationsbereich.

Der Smooth-Slider hat einen eige­nen Ver­wal­tungs­be­reich unter WordPress.

Erstellen eines Sliders

Um einen Slider zu erstel­len, kön­nen Sie den schon stan­dard­mä­ßig vor­han­de­nen Smooth-Slider ver­wen­den. Das heißt, Sie müs­sen unter Crea­te New Slider kei­nen neu­en Slider anlegen.

Um Ihren Slider zu gestal­ten, kli­cken Sie dann auf Set­tings im Slider-Adminbereich.

Im Bereich Slider Box legen Sie sozu­sa­gen die Hül­le oder die Box des Sliders fest. Hier kön­nen Sie bestim­men, wie lan­ge ein Slider ange­zeigt wird, wie vie­le Posts ein­ge­fügt wer­den kön­nen (ich habe fünf­zehn in mei­nem Slider), die Hin­ter­grund­far­be, Slider-Höhe und ‑brei­te in Pixel, Rah­men­di­cke und ‑far­be sowie Ein­stel­lun­gen für die Navigationsbuttons.

Dar­un­ter schlie­ßen sich die Berei­che Slider Title und Post Title an. Hier legen Sie fest, wie der Titel des Sliders aus­se­hen und lau­ten soll und wie der Titel des jewei­li­gen Bei­trags gestal­tet ist (Schrift­art, ‑grö­ße, ‑far­be und ‑schnitt).

Im Bereich Thumb­nail Image legen Sie fest, wie das Vor­schau­bild in den im Slider ange­zeig­ten Posts dar­ge­stellt wer­den soll. Ich zei­ge in mei­nem Bei­spiel die Ori­gi­nal­grö­ße des ers­ten Arti­kel­bil­des an. Aber es gibt noch ande­re Ein­stel­lun­gen, wie bei­spiels­wei­se über ein Cus­tom Field (sie­he Video am Ende des Arti­kels). Mei­ne gewähl­te Ein­stel­lungs­wei­se ist die einfachste.

Dann kön­nen Sie noch u. a. die Bild­aus­rich­tung, Bild­rah­men, ‑far­be und ‑dicke sowie die Bild­grö­ße auswählen.

In den zwei letz­ten Berei­chen Slider Con­tent und Mis­cel­la­neous legen Sie ein­mal das Aus­se­hen des ange­ris­sen Arti­kel­tex­tes fest (Schrift­art, ‑grö­ße, ‑far­be, ‑schnitt) und ob Sie den Text­aus­zug aus dem Con­tent ent­neh­men oder aus dem Post Excerpt, den man ja bei jedem erstell­ten Arti­kel noch zusätz­lich schrei­ben kann (Feld Aus­zug im Arti­kel­er­stel­lungs­be­reich). Oder Sie legen wie­der ein Cus­tom Field fest. Die ein­fachs­te Vari­an­te ist auch hier From Con­tent. Dann kön­nen Sie auch noch bestim­men, wie vie­le Zei­chen oder Wör­ter vom Arti­kel ange­zeigt wer­den sollen.

Unter Mis­cel­la­neous kön­nen Sie zum Bei­spiel noch ent­schei­den, wie der Wei­ter­le­sen-Link genau lau­ten soll und dies ent­spre­chend ändern. Ihre Ände­run­gen spei­chern Sie mit dem But­ton ganz unten ab.

Ihre Ände­run­gen wer­den unter Set­tings ganz oben unter Pre­view angezeigt.

Artikel zu Slide-Show hinzufügen

Dann soll­ten Sie fest­le­gen, wel­che Arti­kel in Ihrer Slide­show zu sehen sein sol­len. Dafür gehen Sie in die jewei­li­gen Arti­kel­be­ar­bei­tungs­an­sicht und dort fin­den Sie ganz unten einen Bereich für den Smooth-Slider. Hier kli­cken Sie das Käst­chen Add this post/​page to [Slider­na­me].

Slider in Startseite einbauen

Um nun noch den Slider auf Ihrer Start­sei­te ein­zu­fü­gen, müs­sen Sie einen PHP-Code­schnip­sel in die index.php einfügen.

Fügen Sie fol­gen­den Code

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

ober­halb des Loops (beginnt mit: if (have_​posts()) …) ein (sie­he Screenshot)).

Ihre index.php kön­nen Sie über Design — Edi­tor auf­ru­fen. Sie fin­den Sie unter Edi­tor auf der rech­ten Spal­te unter Tem­pla­tes. Ein­fach drauf kli­cken und die Datei öff­net sich.

Wenn Sie den Code ein­ge­fügt und die Ände­run­gen abge­spei­chert haben, soll­te Ihr Slider auf der Start­sei­te zu sehen sein.

Viel Spaß beim Erstel­len Ihrer per­sön­li­chen Slide­show mit Smooth-Slider.Wei­te­re Infor­ma­tio­nen zum Smooth-Slider fin­den Sie auf www​.click​on​f5​.org/​s​m​o​o​t​h​-​s​l​i​der, aller­dings auf Englisch.