Einblenden des letzten Sidebar-Widgets in WordPress mit jQuery

Kürzlich fragte uns einer unserer Benutzer, wie man einen Einblendungseffekt für das letzte Widget in der Seitenleiste hinzufügen kann. Dieser beliebte jQuery-Effekt wird auf vielen bekannten Websites und Blogs verwendet. Wenn der Benutzer auf der Seite nach unten scrollt, wird das letzte Widget in der Seitenleiste eingeblendet und sichtbar. Durch die Animation wird das Widget zum Blickfang und fällt auf, was die Klickrate drastisch erhöht. In diesem Artikel zeigen wir Ihnen, wie Sie das letzte Sidebar-Widget in WordPress mit jQuery einblenden können.

Unten sehen Sie eine Demo, die zeigt, wie es aussehen würde:

In diesem Tutorial werden Sie die Dateien Ihres Themes ändern. Es wird empfohlen, dass Sie ein Backup Ihres Themes erstellen, bevor Sie fortfahren.

Schritt 1: Hinzufügen von JavaScript für den Einblendeffekt

Zunächst müssen Sie den jQuery-Code als separate JavaScript-Datei zu Ihrem WordPress-Theme hinzufügen. Beginnen Sie damit, eine leere Datei in einem Texteditor wie Notepad zu öffnen. Speichern Sie diese leere Datei als wpb_fadein_widget.js auf Ihrem Desktop und fügen Sie den folgenden Code darin ein.

jQuery(document).ready(function($) {
/**
* Konfiguration
* Der Container für Ihre Seitenleiste z.B. aside, #sidebar etc.
*/

var sidebarElement = $('div#sekundär');


// Prüfen, ob die Seitenleiste existiert
if ($(sidebarElement).length > 0) {

// Abfrage des letzten Widgets in der Seitenleiste und seiner Position auf dem Bildschirm

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Ausblenden des letzten Widgets
$(lastWidget).hide();
	
// Prüfen, ob der Benutzer beim Scrollen den oberen Rand des letzten Widgets erreicht hat und dieses anzeigen
$(document).scroll(function() {

// Wenn das Widget angezeigt wurde, brauchen wir nicht weiter zu prüfen.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

Die wichtigste Zeile in diesem Code ist var sidebarElement = $('div#secondary');.

Dies ist die ID des Divs, das Ihre Seitenleiste enthält. Da jedes Theme unterschiedliche Container-Divs für die Seitenleiste verwenden kann, müssen Sie die Container-ID herausfinden, die Ihr Theme für die Seitenleiste verwendet.

Sie können dies herausfinden, indem Sie das Tool „Element inspizieren“ in Google Chrome verwenden. Klicken Sie einfach mit der rechten Maustaste auf Ihre Seitenleiste in Google Chrome und wählen Sie dann Element inspizieren.

Im Quellcode können Sie das Container-Div Ihrer Seitenleiste sehen. Das Standardthema Twenty Twelve verwendet beispielsweise secondary und Twenty Thirteen verwendet teritary als ID für den Sidebar-Container. Sie müssen secondary durch die ID Ihres Sidebar-Container-Divs ersetzen.

Als Nächstes müssen Sie einen FTP-Client verwenden, um diese Datei in den js-Ordner in Ihrem WordPress-Theme-Verzeichnis hochzuladen. Wenn Ihr Theme-Verzeichnis keinen js-Ordner hat, müssen Sie ihn erstellen, indem Sie in Ihrem FTP-Client mit der rechten Maustaste klicken und „Neues Verzeichnis erstellen“ auswählen.

Schritt 2: Einreihen Ihres JavaScript in das WordPress-Theme

Nun, da Ihr jQuery-Skript fertig ist, ist es an der Zeit, es in Ihrem Theme hinzuzufügen. Wir werden die richtige Methode verwenden , um das JavaScript in Ihr Theme einzufügen. Fügen Sie also einfach den folgenden Code in die Datei functions.php Ihres Themes ein.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

Das war’s. Jetzt können Sie ein Widget in Ihre Seitenleiste einfügen, das mit dem Einblendeffekt erscheinen soll, und dann Ihre Website besuchen, um es in Aktion zu sehen.

Schritt 3: Das letzte Widget nach dem Einblendungseffekt fixieren

Eine oft gewünschte Funktion des Einblendeffekts ist es, das letzte Widget der Seitenleiste beim Scrollen mitlaufen zu lassen. Dies wird Floating Widget oder Sticky Widget genannt.

Wenn Sie sich den obigen jQuery-Code ansehen, werden Sie feststellen, dass wir dem Widget nach dem Einblenden eine CSS-Klasse wpbstickywidget hinzugefügt haben. Sie können diese CSS-Klasse verwenden, um Ihr letztes Widget nach dem Einblenden klebrig zu machen. Fügen Sie einfach dieses CSS in das Stylesheet Ihres Themas ein.

.wpbstickywidget { 
position:fixed;
top:0px; 
}

Sie können das CSS nach Belieben an Ihre Bedürfnisse anpassen. Sie können die Hintergrundfarbe oder die Schriftart ändern, um das Widget noch auffälliger zu machen. Wenn Sie möchten, können Sie sogar einen „smooth scroll to top“-Effekt neben dem letzten Widget einfügen, der es den Nutzern ermöglicht, schnell zurückzuscrollen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, einen Einblendeffekt für das letzte Widget in Ihrer WordPress-Seitenleiste hinzuzufügen. Wenn Sie mehr über jQuery wissen möchten, schauen Sie sich die besten jQuery-Tutorials für WordPress an.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Google+ finden.