Theme Hamburg anpassen: Slider erweitern (Tutorial)

Slider aus dem Theme Hamburg

Unser Theme Hamburg bietet die Möglichkeit, einen einfachen, schlichten und doch schicken Slider auf der Startseite einzubinden. In diesem Beitrag möchten wir zeigen, wie der Hamburg-Slider mit wenigen Handgriffen erweitert und justiert werden kann.

Als erstes werden wir den Slider mit einem zufälligen Slider-Element starten lassen, dann werfen wir einen Blick auf weitere Slider-Optionen und wie diese aktiviert werden können.

Bevor wir jedoch starten, verraten wir an dieser Stelle ein kleines Geheimnis! Im WordPress-Theme Hamburg wird der FlexSlider 2 von woothemes verwendet. Mit dem FlexSlider steht ein schlanker, responsive Slider zur Verfügung.

Damit der Slider dem Prinzip „keep it simple“ auch gerecht wird, haben wir uns für eine einfache und uns für eine flexible Implementierung über ein Text-Widget entschieden. Möchtet ihr einen Slider in eurem Hamburg WordPress-Theme verwenden, muss im Widget-Bereich Front Page Banner nur ein Text-Widget mit folgendem Beispiel-Inhalt platziert werden.

 

 

Den Hamburg Slider anpassen

Wie oben schon angedeutet werden wir uns jetzt mit folgenden Punkten beschäftigen:

  • Start mit einem zufälligen Slider-Element
  • Weitere Optionen
  • die ganz Neugierigen springen direkt zum fertigen Ergebnis hop

Bevor wir uns in das Tutorial stürzen, noch ein wichtiger Hinweis!
Anpassungen / Veränderungen am Theme “Hamburg” sollten immer in einem Child-Theme geschehen. Denn nur in einem Child-Theme sind eure Änderungen auch nach einem Update von Hamburg weiterhin verfügbar.

 

Start mit einem zufälligen Slider-Element

Schauen wir uns einmal folgende Anforderung an: „Der Slider im Theme Hamburg soll mit einem zufälligem Element starten.“ Bevor wir uns mit dem Festlegen des Zufallswert beschäftigen, werfen wir einen Blick auf die Implementierung des Sliders. In der themes/hamburg/inc/setup.php befindet sich die Funktion hamburg_slider_init(). Diese ist für die Auslieferung des Sliders zuständig, auf Zeile 262 wird ein WordPress Hook aufgerufen, mit dem die Argumente des Sliders verändert werden können.

 

Mit diesem Hook werden wir die Optionen des Sliders nun verändern. Aber Moment! Welche Optionen gibt es denn überhaupt, fragt ihr euch sicher? Am Ende dieses Beitrages haben wir alle Optionen, die verwendet werden können, aufgelistet. Für uns ist jetzt erst einmal nur startAt interessant. In startAt kann die Zahl des Start-Elements festgelegt werden. Was wir nun benötigen, ist eine Funktion die dem Hook hamburg_slider_args die gewünschten Argumente übergibt.

Mit der folgenden Funktion, die in der „hamburg/functions.php“ abgelegt wird, wird ein Filter für die Slider-Argumente implementiert.

 

Diese Funktion macht erst einmal nichts weiter, als die vom Hook übergebenen Argumente in der Variable $slider_args entgegenzunehmen und wieder zurückzugeben. In der Variable $slider_args ist ein Array mit den bereits vordefinierten Argumenten enthalten.

 

Dieses Array können wir nun um startAt erweitern und so manuell ein Start-Element für den Slider festlegen. Dazu muss unsere Basisfunktion von eben um folgende Zeilen erweitert werden:

 

Im Ganzen sieht das nun wie folgt aus:

 

Widgets-Ttitle
Der Slider wird nun immer mit dem zweiten Element starten. Wie war das jetzt mit dem Zufalls Start-Element? Damit wir per Zufall ein Element auswählen können, benötigen wir zuerst aus dem Text-Widget alle Slider-Elemente. Hierzu werden wir mit get_option( 'widget_text' ) zuerst alle vorhanden Text-widgeds abfragen. Eine wichtige Vorraussetzung für weitere Schritte ist, dass dem Text-Widget ein aussagekräftiger Widget-Titel gegeben wurde. Das ist in unserem Beispiel Front Page Slider. Nun muss aus allen Text-Widgets nur noch unser Slider herausgesucht werden. Dazu erweitern wir unsere Funktion um folgende Foreach-Schleife:

 

 

Haben wir unser Slider-Widget gefunden, speichern wir den Inhalt in der Variable $slider_content. Anhand des Inhaltes können wir herausfinden wieviele Elemente unser Slider aktuell hat und mit der rand() Funktion eine Zufallszahl ermitteln. Die ermittelte Zahl speichern wir in der Variable $slider_counted_elements. Wichtig ist es von dem Ergebnis 1 abzuziehen, da dass Slider-Script bei 0 zu zählen anfängt, unser Ergebnis aber mit 1 beginnt.

 

Sollten keine Slider-Elemente gefunden werden oder die Prüfung fehlschlagen, haben wir mit $slider_counted_elements = 0; einen Fallback implementiert und stellen so sicher, dass der Slider immer mit dem ersten Element beginnt.

 

Wenn wir die komplette Funktion testen, werden wir feststellen dass der Widget-Titel mit ausgegeben wird.
Nicht benötigter Widget Title

Dieser kleine Faux Pass lässt sich mit dem WordPress-Hook widget_title beheben. Der Filter kann zum Manipulieren oder auch entfernen des Widget-Title genutzt werden.

 

Diese Funktion wird nun alle Widget-Title entfernen, was ja nicht Ziel unseres Exkurs war! Also werden wir im folgendem Beispiel-Code den Hook nur im Zusammenhang mit der Slider-Funktion aufrufen.

 

Slider, bitte starte automatisch

Es wirkt doch meist recht langweilig, wenn der Slider immer das gleiche Bild zeigt, ohne das der Besucher die Pfeile zum Sliden benutzt. Wäre es nicht toll, wenn der Slider automatisch von allein startet? Ich denke schon, dass dies eine tolle Funktion ist, die wir unbedingt noch in unserem Slider nutzen sollten. Damit er automatisch startet, müssen wir, ähnlich dem Startpunkt, mit folgender Zeile ein neues Argument übergeben.

 

Habt ihr diesen Parameter implementiert und getestet, werdet, ihr festsellen, dass es eine gefühlte Ewigkeit dauert bis der Slider startet. Die Ursache ist in den Default-Einstellungen zu finden. Hier wird die Geschwindigkeit des Sliders mit dem Argument slideshowSpeed auf 7000 Millisekunden gesetzt. Damit der Slider eher startet, müssen wir also nur noch das Argument slideshowSpeed von 7000 auf einen kleineren Wert setzen.

 

Jetzt sollte klar sein, wie die Argumente des Sliders verändert werden können. Als Zusammenfassung folgt unsere Funktion komplett.

 

Child-Theme "Lütte"

 

Child-Theme Lütte
Als kleines Extra gibt es das Child-Theme Lütte hier als Download und unter www.danbo-bilder.de eine Live Demo.

 

 

Felx Silder Options

Und zu allerletzt zeige ich euch noch alle Optionen des FlexSlider 2.

 

Zum Schluss noch eine Verlosung

Mit dieser kleinen Anleitung sollte jeder in der Lage sein, sein Hamburg-Theme individuell zu gestalten. Für all die, die noch nicht die Vorzüge des Hamburg Themes zu schätzen wissen, werden wir unter allen Kommentaren eine Lizenz verlosen.

Teilnahmebedingungen:
Das Kommentar muss im Zeitraum bis 15.03.2014 unter diesem Beitrag abgegeben werden. Verlost wird eine Jahreslizenz des Theme Hamburg. Nach Ablauf des Aktionszeitraum wird ein Gewinner per Zufall aus den unter diesem Beitrag abgegebenen Kommentaren gezogen. Der Gewinner wird per EMail informiert und erhält ca. 2 Tag nach Ablauf Informationen zum Gewinn. Mit der Abgabe eines Kommentares unter diesem Beitrag wird den oben genannten Teilnahmebedingungen und der Datenschutzerklärung zugestimmt.

Beitrag teilen

Author Avatar

Hi ich bin ausgebildeter Mediengestalter für Digital- & Printmedien, mit mehr als nur ein Gefühl für Formen, Farben und Komposition. Ich bin Vater, Ehemann, Webentwickler, Webdesigner, Berater, Ausbilder, Mitglied in der IHK Prüfkommission für Mediengestalter, Fotograf und I ♥ WordPress.

Auch interessant:

Neue Produktfilter WordPress

Plugins angetestet: WooCommerce Products Filter - Erweiterte Produktfilter

von Michael Firnkes

WooCommerce enthält bereits die wichtigsten Funktionen, damit deine Kunden Produkte nach Preis, Kategorie etc. filtern können. Wem diese Möglichkeiten n ...

Weiterlesen
youtube

Neu: Video-Tutorials für German Market

von Michael Firnkes

Du willst wissen, wie sich die einzelnen Module in unserer Rechtssicherheits-Suite German Market für WooCommerce bedienen lassen? Dann helfen wir dir jetz ...

Weiterlesen
woonews20

WooCommerce Wochenrückblick #20: Conversion, Produktkonfigurator und Woo-Argumente

von Michael Firnkes

Wir sammeln Argumente für das führende Onlineshop-System und für Open Source. Und: Einen Produktkonfigurator kannst du auch mit WooCommerce umsetzen. Di ...

Weiterlesen
cyberblog

Cyber Monday Wochenende: 50 % Rabatt auf German Market und unsere Themes

von Michael Firnkes

Rechnungserstellung, Anbindung an deine Buchhaltung, neue Benutzeroberfläche und vieles mehr: Unsere Rechtssicherheits-Suite German Market für WooCommerc ...

Weiterlesen

Kommentare

14 Kommentare

  1. #1

    Ich geh mal davon aus, dass der 15.3.2014 gemeint ist, oder?
    (Dies ist automatisch auch der Kommentar zur Verlosung… 😉 )

  2. #3

    Ui, nett. Hamburg gefällt. Ich frage mich, wie leicht man das Theme selbst an eigene Vorstellungen (bzw. die eines Kunden…) anpassen kann, so dass es etwas weniger schick und dafür altbacken daherkommt 😉

  3. #5

    *** Hamburg-Kommentar nicht nur wg. Verlosung ;-))) ***

    In der Demoansicht gibt es unter Nav “Blog + Bilder” eine Gallerie. Kann im Hamburg-Theme der Klick auf die Bilder mit einem klassischen Lightbox-Effekt versehen werden, um einen Zoom+Hervorholen des Bildes in die Bildschirmmitte zu erhalten (einschl. leichter Abdunkelung des übrigen Hintergrundes während das gezoomte Bild angezeigt wird)?

    So wie das Navigieren durch die Bilder in der Demoseite geschieht, ist das aus Usersicht nicht so schick. Aufgrund des langen Headers muss nach jedem Klick bzw. Bild immer wieder die Webseite geringfügig ein wenig nach unten gescrollt werden.

  4. #6

    @Harmut Danke für das konstruktive Feedback! 🙂
    Wir achten bewusst darauf, möglichst wenig zusätzliche Features in die neueren Themes zu bauen, um sie flexibel und leicht zu halten. Dafür bieten wir (und WordPress selbst) in der Regel gute Schnittstellen, mit deren Hilfe man z.B. ein Lightbox-Script selbst via Child-Theme oder Plugin nachladen kann. Für einen voll konfigurierbaren Slider empfehlen wir grundsätzlich den Einsatz eines separaten Plugins, wobei dann CSS-Anpassungen notwendig werden können.

  5. #7

    Konzept und Code gefällt mir persönlich gut – sehr interessante Idee der Umsetzung! Ich käme bestimmt damit zu recht 🙂
    Nur, meine Kunden haben dafür keine Zeit, wegen einer Bildänderung da im Code rumzuwühlen, selbst die Sorte Kunde, die sich da ausbilden liesse… Da würde ich dann schon ein ordentliches Plugin einsetzen für solche Zwecke, und ja, es gibt auch gut gecodete Slider 🙂

  6. #8

    Danke für diesen Beitrag. Genau was ich noch gesucht habe.

  7. #9

    Echt stark. Auch ich als Anfänger habe meinen Slider in Bewegung gebracht. Vielen Dank für die gute Erklärung.

  8. #10

    Wann habt ihr Zeit den Fehler zu beheben, dass dann bei allen Widgets die Headline fehlen?

  9. #11

    Das Theme Hamburg gefällt mir sehr gut und eine echt tolle Anleitung / Doku. Macht Vertrauen, dass man das auch gut umsetzen kann.
    Danke und Grüße
    Christian

  10. #12

    Da die Einbindung von WooCommerce in meinen Blog geplant ist, würde das Theme Hamburg optimal passen.

  11. #14

    Danke für das Tutorial, sehr hilfreich!

    Was mir jetzt noch fehlt, ist eine Möglichkeit den Flexslider mit Lazyload zu verbinden. Hier ist ein Beispiel dafür.

    Wenn ich versuche das nachzubauen, erhalte ich bei start: function(){} immer einen Syntaxfehler. Könntest Du vielleicht mal ein Beispiel dazu posten?

    Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">