So blenden Sie das letzte Sidebar-Widget in WordPress mit jQuery ein

Kürzlich fragte uns einer unserer Benutzer, wie man einen Fade-In-Effekt für das letzte Widget in der Seitenleiste hinzufügt. Dieser beliebte jQuery-Effekt wird auf vielen bekannten Websites und Blogs verwendet. Wenn der Benutzer nach unten auf der Seite scrollt, blendet das letzte Widget in der Seitenleiste ein und wird sichtbar. Die Animation macht das Widget auffällig und bemerkenswert, was die Klickrate dramatisch erhöht. In diesem Artikel zeigen wir Ihnen, wie Sie das letzte Seitenleisten-Widget in WordPress mit jQuery einblenden.

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

In diesem Tutorial werden Sie Ihre Theme-Dateien ändern. Es wird empfohlen, dass Sie Ihr Theme sichern, bevor Sie fortfahren.

Schritt 1: Hinzufügen von JavaScript für den Fade-In-Effekt

Zuerst 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 dann als wpb_fadein_widget.js auf Ihrem Desktop und fügen Sie den folgenden Code ein.

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

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 Werkzeug „Element untersuchen“ in Google Chrome verwenden. Klicken Sie einfach mit der rechten Maustaste auf Ihre Seitenleiste in Google Chrome und wählen Sie dann „Element untersuchen“ aus.

Im Quellcode können Sie Ihren Sidebar-Container-Div sehen. Zum Beispiel verwendet das Standard-Theme Twenty Twelve secondary und Twenty Thirteen tertiary 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 innerhalb Ihres WordPress-Theme-Verzeichnisses hochzuladen. Wenn Ihr Theme-Verzeichnis keinen js-Ordner hat, müssen Sie ihn erstellen, indem Sie mit der rechten Maustaste klicken und in Ihrem FTP-Client 'Neues Verzeichnis erstellen' auswählen.

Schritt 2: Ihr JavaScript in WordPress-Theme registrieren

Jetzt, da Ihr jQuery-Skript fertig ist, ist es an der Zeit, es in Ihr Theme einzufügen. Wir werden die richtige Methode zum Hinzufügen von Javascript in Ihr Theme verwenden. Fügen Sie einfach den folgenden Code in die functions.php-Datei Ihres Themes ein.

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

Das ist alles. Jetzt können Sie ein Widget in Ihre Seitenleiste einfügen, das mit dem Fade-In-Effekt erscheinen soll, und dann Ihre Website besuchen, um es in Aktion zu sehen.

Schritt 3: Den letzten Widget mit dem Fade-In-Effekt fixieren

Eine oft gewünschte Funktion mit dem Einblendeffekt ist, das letzte Sidebar-Widget beim Scrollen des Benutzers mitscrollen zu lassen. Dies wird als schwebendes Widget oder Sticky-Widget bezeichnet.

Wenn Sie sich den obigen jQuery-Code ansehen, werden Sie feststellen, dass wir der Widget nach dem Fade-In-Effekt eine CSS-Klasse wpbstickywidget hinzugefügt haben. Sie können diese CSS-Klasse verwenden, um Ihr letztes Widget nach dem Einblenden klebrig zu machen. Alles, was Sie tun müssen, ist, dieses CSS in die Stylesheet Ihres Themes einzufügen.

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

Fühlen Sie sich frei, das CSS nach Ihren Bedürfnissen anzupassen. Sie können die Hintergrundfarbe oder Schriftarten ändern, um das Widget noch hervorzuhebender zu machen. Wenn Sie möchten, können Sie sogar einen Smooth-Scroll-to-Top-Effekt neben Ihrem letzten Widget hinzufügen, der es den Benutzern ermöglicht, schnell zurückzuscrollen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, einen Fade-In-Effekt zum letzten Widget in Ihrer WordPress-Seitenleiste hinzuzufügen. Für weitere jQuery-Güte, schauen Sie sich die besten jQuery-Tutorials für WordPress an.

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