Nach­dem ich in der ver­gan­ge­nen Woche die Bil­der­ga­le­rie Next­Gen Gal­le­ry vor­ge­stellt habe, wer­de ich in die­ser ers­ten Woche des neu­en Jah­res das Wor­d­Press-Plugin Smooth Sli­der prä­sen­tie­ren.


Auf mei­nem Blog set­ze ich auch die­sen Sli­der 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 anzu­zei­gen.

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

Download und Installation von Smooth Slider

Das Plugin kön­nen Sie sich ein­mal von der Wor­d­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 Plugins: Ent­zip­pen Sie die ZIP-Datei, laden Sie den Ord­ner in den Plugins-Ord­ner unter wp-con­ten­t/p­lugins auf Ihren Webs­pace hoch und akti­vie­ren Sie das Plugin im Wor­d­Press-Admi­nis­tra­ti­ons­be­reich.

Der Smooth-Sli­der hat einen eige­nen Ver­wal­tungs­be­reich unter Wor­d­Press.

Erstellen eines Sliders

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

Um Ihren Sli­der zu gestal­ten, kli­cken Sie dann auf Set­tings im Sli­der-Admin­be­reich.

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

slider-2

Dar­un­ter schlie­ßen sich die Berei­che Sli­der Tit­le und Post Tit­le an. Hier legen Sie fest, wie der Titel des Sli­ders 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).

Lesen  10 Jahre WordPress - Zahlen und Fakten aus dem ersten Lebensjahrzehnt

slider-3

Im Bereich Thumb­nail Image legen Sie fest, wie das Vor­schau­bild in den im Sli­der 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 ein­fachs­te.

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 aus­wäh­len.

In den zwei letz­ten Berei­chen Sli­der Con­tent und Mis­cel­la­ne­ous 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 sol­len.

Unter Mis­cel­la­ne­ous 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 ange­zeigt.

Artikel zu Slide-Show hinzufügen

Dann soll­ten Sie fest­le­gen, wel­che Arti­kel in Ihrer Sli­de­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-Sli­der. Hier kli­cken Sie das Käst­chen Add this post/​page to [Sli­der­na­me].

Slider in Startseite einbauen

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

Lesen  5 Fehler, die man als WordPress-Blogger vermeiden muss

Fügen Sie fol­gen­den Code

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

ober­halb des Loo­ps (beginnt mit: if (have_​posts()) …) ein (sie­he Screen­shot)).

slider-6

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 Sli­der auf der Start­sei­te zu sehen sein.

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