WordPress Widgets beim Scrollen fixieren

Wer auf seiner Seite eine Sidebar mit Widgets hat kennt das Problem, dass es – bei längeren Artikel – relativ schnell „leer“ wird. Und das, obwohl das ein oder andere Widget vermutlich relativ wichtig ist. Wie geil wäre es denn, wenn sich ein Widget deiner Wahl beim Runterscrollen an den oberen Browserrand andockt und immer sichtbar ist? Richtig geil wäre das, also lass es uns tun.

Wer Ahnung von JavaScript und CSS hat, kann sich selbst eine kleine Funktion bauen, sodass sich ein Widget nach Scrollen von XXX px an den Browser-Rand andock und mit läuft. Wer das nicht kann oder nicht will, der verwendet das kostenlose Q2W3 Fixed Widget Plugin.

Fixed Widget Optionen

Einmal aktiviert findet man unter Design » Fixed Widget Optionen ein kleines Options-Panel mit folgenden Einstellungsmöglichkeiten:

Oberer Abstand: Hier kannst du in Pixel (px) angeben, wie weit der Abstand zwischen oberem Browser-Rand und dem Widget sein soll. Im Normalfall machen hier 10-30px sinn, damit es nicht zu weit unten hängt, aber auch nicht direkt am oberen Browser-Rand.

Unterer Abstand: Das gleiche wie „oberer Abstand“, nur eben nach unten. D.h. wenn du z.B. einen Footer am Ende hast und verwendest nicht die (nachfolgende) Stop ID, solltest du hier ein paar Pixel angeben, damit das Widget sich nicht über den Footer leigt (sieht nicht schön aus).

Stop ID: Mit Hilfe der Stop ID, weiß das Plugin ab wann das Widget nicht mehr mitlaufen soll. Zum Beispiel könntest du es stoppen lassen, wenn du einen relativ hohen Footer hast und nicht möchtest, dass sich das Widget über den Footer legt. Wichtig hierbei ist, dass in dem Fall der Footer (oder eben jenes andere Element) eine ID über den HTML Parameter id="" gesetzt hat.

Aktualisierungs-Intervall: Diese einstellung ist eigentlich nur relevant, wenn du extrem alte Browser unterstützen willst. Hier wird in ms angegeben, wann sich das Widget eine neue Position nimmt

Disable Width: Hier kannst du in Pixel angeben, ab welcher Browser-Breite die „fixed Widget“ Funktion nicht greifen soll. Ein Beispiel wären 767px (und kleiner), damit sich bei mobilen Geräten das Widget nicht über deinen Content legt. Die genaue Breite musst du selbst feststellen, je nach dem ab wann dein Theme die Sidebar unter dem eigentlichen Content-bereich darstellt.

Disable Height: das gleiche wie „disable Width“ nur eben mit der Höhe.  Macht z.B. Sinn, wenn dein Widget relativ hoch ist und jemand mit einem Tablet im Landscape Modus auf deine Seite geht und dann nur die Hälfte des Widgets sieht.

Die weiteren Einstellungen bei Compatibility sind für die normale Verwendung des Plugins nicht wirklich relevant, da sie Entwicklern z.B. Debug-Informationen anzeigen lassen oder bei der Behebung von Fehlern helfen können.

Anwendung am Widget

Nachdem du nun alle Einstellungen getroffen hast, gehst du unter Design » Widgets und wählst dort das Widget aus, welches beim Scrollen fixiert werden soll. Hier einfach nur den Haken bei „Fixed Widget“ setzen, auf speichern klicken und schon können wir uns unser Werk auf der Frontpage anschauen.


Fazit

Ein kleines aber hilfreiches Plugin, wenn es darum geht dem Nutzer auch bei längeren Inhalten wichtige Widgets immer anzuzeigen. Speziell für Widgets die ein Call to Action beinhalten (Kaufen eines Produkts, Eintragung in deinen Newsletter) etc. macht es Sinn, das Q2W3 Plugin zu verwenden. Aber auch in Verbindung mit einem Inhaltsverzeichnis (TOC) ist dieses Plugin extrem nützlich.

Schreibe einen Kommentar

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