This post is also available in: English

Verwende das Fixed Widget Plugin für WordPress um deine Widgets sticky zu machen und sie im sichtbaren Bildschirmbereich zu fixieren, wenn Nutzer der Webseite hoch- oder runterscrollen. Sticky Widgets werden bedeutend besser wahrgenommen als nicht fixierte Widgets. Sie können deswegen deutlich höhere Klickrate erzielen und eigenen sich daher besonders für Anzeigen oder andere Elemente, mit denen Besucher interagieren sollen.

Viele weitere Platzierungen und zusätzliche Optionen für fixierte Anzeigen bietet das Add-on Sticky Ads.

Verwendung

Diese Anleitung zeigt die wie du sticky Widgets in WordPress erstellen kannst. Die Voraussetzung für diesen extrem effektiven Conversion-Booster ist das kostenlose Plugin Fixed Widgets für WordPress. Du kannst es wie jedes andere WordPress-Plugin herunterladen und installieren.

Voraussetzungen des Themes:

  • jQuery 1.7 ist nötig, jQuery 1.8.3 (oder höher) wird empfohlen
  • Kene JavaScript-Fehler, die durch andere Plugins oder Skripte verursacht werden
  • Die Dateien header.php und die footer.php müssen die Functionen wp_head() and wp_footer() beinhalten.
  • Widgets müssen ein ID-Attribut haben

Nach der Aktivierung des Plugins navigiere zu Design > Widgets. Öffne ein bereits existierendes Widget das du beim Scrollen fixieren möchtest oder füge ein neues hinzu. Aktiviere die Checkbox “Fixed Widget” um es sticky zu machen.

Fixed Widget for WordPress plugin

Anschließend speichere die Änderungen und kontrolliere das Ergebnis im Frontend. Falls du ein Caching-Plugin verwendest, musst du den Cache leeren.

Zusätzliche Optionen für Sticky Widgets

Es gibt einige Zusatzoptionen und erweiterte Einstellungen für das Plugin Fixed Widgets für WordPress.

Es gibt dafür zwei Optionen: “Deaktivierungsbreite” und “Deaktivierungshöhe”. Beide funktionieren gleich. Wenn die Browserbreite oder -höhe kleiner oder gleich dem definierten Wert ist, wird die Funktion deaktiviert. Du kannst außerdem die Besucherbedingungen von Advanced Ads nutzen, um bestimmte Nutzergruppen zu selektieren.

Fixed Widgets Plugin: Optionen

Ja, es ist möglich, an einem definierbaren Punkt die Fixierung wieder zu lösen. Hierfür musst du die ID dieses HTML-Elements kennen. Das sticky Widget wird nicht mehr fixiert sein, so bald bis zu diesem Element gescrollt wurde. Um zu erfahren, wie du diese ID ermitteln kannst, wird einen Blick auf eine einfache HTML-Seitenstruktur in WordPress:

<div class="content">
  <div class="article"></div>
  <div class="sidebar">
    <div class="q2w3-fixed-widget"></div>
  </div>
  <div id="comments" class="comments-section"></div>
</div>

Willst du die Fixierung des Widgets auflösen, so bald es sich auf derselben Höhe wie der Kommentarbereich befindet, musst du die ID des Kommentarblocks ermitteln. Schau dir dafür nochmal das HTML-Beispiel von oben an. Die ID ist in diesem Fall “comments”. Kopiere diese ID und füge sie in das Feld “Stop ID” in den Einstellungen des Plugins ein. Du kannst hierfür jedes existierende HTML-Element verwenden und auch ein eigenes erstellen, dass du in deinem Theme platzierst.

Ja, es ist möglich, mehr als ein Widget zu platzieren; auch wenn sich diese in verschiedenen Sidebars befinden. Aktiviere einfach die “Fixed Widget” Checkbox aller weiteren Widgets, die du sticky machen willst.

Fehlersuche

Es kann mehrere Ursachen haben, warum das Plugin Fixed Widget für WordPress Plugin nicht funktioniert:

  • Javascript-Fehler auf der Webseite. Häufig werden diese durch fehlerhaft programmierte Plugins verursacht. Um dieses Problem zu lösen, öffne die Browser-Konsole. Wenn du solche Fehler findest, versuche sie zu lokalisieren und selbst zu lösen oder nimm mit den Pluginentwicklern Kontakt auf.
  • Die Funktionen wp_head() und wp_footer() sind nicht im Template enthalten. Überprüfe die header.php und footer.php Dateien deines aktiven Themes.
  • Konflikte mit anderen Plugins oder Skripten
  • CSS-Inkompatibilitäten

Wenn das Fixed Widget Plugin mit einem Theme nicht funktioniert, hat dies fast immer denselben Grund. Das Problem ist dann fast immer ein fehlendes ID-Attribut an den Widgets. Wenn die Aktivierung der Checkbox “Automatische Korrektur der Widget ID”, die du in den Plugin-Einstellungen finden kannst, allein dieses Problem noch nicht löst, musst du die Fehlerursache selbst beheben oder deinen Theme-Entwickler kontaktieren.

Für einen Fix musst du die Funktion “register_sidebar” finden (üblicherweise enthalten in der functions.php) und den Parameter “before_widget” anpassen.

Deine Originalversion könnte so aussehen:

register_sidebar( array(
	...
        'before_widget' => '<li class="widget widget-sidebar">',
	...
) );

Sie muss wie folgt angepasst werden:

register_sidebar( array(
        ...
	'before_widget' => '<li id="%1$s" class="widget widget-sidebar">',
	...
) );

Navigiere zu deinem WordPress Dashboard und öffne die Fixed Widget Einstellungen (Design >Fixed Widget Optionen). Hier kannst du einen oberen und einen unteren Abstand festlegen. Definiere für den unteren Abstand einen Wert, der größer oder gleich der Höhe des Footer ist.

Wenn sich die Höhe des Footers auf verschiedenen Seiten unterscheidet, ist es besser, die “Stop ID”-Option zu verwenden. Hierfür muss eine HTML-Tag-ID angegeben werden. Die Position dieses HTML-Elements bestimmt dann den unteren Abstand. Nehmen wir als Beispiel das Twenty Sixteen Standard Theme. Der Container des Theme-Footers had die ID „colophon“. Im Feld der Stop ID Option muss nun nur noch colophon ohne weitere Symbole eingegeben werden.

Versuche das Aktualisierungsintervall in den Plugin-Einstellungen zu deaktivieren. Wähle dazu den Wert “0”.

Um dieses Problem zu beheben, probiere die Option “Verwende jQuery(window).load() hook” zu (de)aktiveren.

Suche in deinen CSS-Dateien nach diesen beiden Regeln:

  • webkit-backface-visibility:hidden;
  • webkit-transform: translate3d(0,0,0);

Wenn du sie gefunden hast, deaktiviere die Regeln und überprüfe das Ergebnis.

Ressourcen