Kürzlich hat uns einer unserer Benutzer gefragt, wie man einen Einblendeffekt 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 auf der Seite nach unten scrollt, wird das letzte Widget in der Seitenleiste eingeblendet und sichtbar. Die Animation macht das Widget auffällig und auffällig, was die Klickrate dramatisch erhöht. In diesem Artikel zeigen wir Ihnen, wie Sie das letzte Sidebar-Widget in WordPress mit jQuery einblenden.
Unten ist eine Demo, wie es aussehen würde:
In diesem Tutorial ändern Sie Ihre Designdateien. Es wird empfohlen, dass Sie Ihr Design sichern, bevor Sie fortfahren.
Schritt 1: Hinzufügen von JavaScript für den Fadein-Effekt
Zuerst müssen Sie den jQuery-Code als separate JavaScript-Datei zu Ihrem WordPress-Theme hinzufügen. Öffnen Sie zunächst eine leere Datei in einem Texteditor wie Notepad. Speichern Sie als nächstes diese leere Datei unter wpb_fadein_widget.js
auf Ihrem Desktop und fügen Sie den folgenden Code darin 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 Sidebar-Container-Divs verwenden kann, musst du die Container-ID herausfinden, die dein Theme für die Sidebar verwendet.
Sie können dies herausfinden, indem Sie das Inspect-Element-Tool in Google Chrome verwenden. Klicken Sie einfach mit der rechten Maustaste auf Ihre Seitenleiste in Google Chrome und wählen Sie dann Element prüfen.
Im Quellcode sehen Sie Ihr Sidebar-Container-Div. Zum Beispiel verwendet das Standardthema Twenty Twelve secondary
, und Twenty Thirteen verwendet teritary
als ID für den Sidebar-Container. Sie müssen ersetzen secondary
mit der ID Ihres Sidebar-Container-Div.
Als nächstes müssen Sie einen FTP-Client verwenden, um diese Datei in den js-Ordner in Ihrem WordPress-Themeverzeichnis hochzuladen. Wenn Ihr Themenverzeichnis 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: Einreihen Ihres JavaScripts in das WordPress-Theme
Nun, da Ihr jQuery-Skript fertig ist, ist es an der Zeit, es in Ihr Design einzufügen. Wir werden die richtige Methode zum Hinzufügen von Javascript in Ihrem Theme verwenden, also fügen Sie 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 ist alles, jetzt können Sie in Ihrer Seitenleiste ein Widget hinzufügen, das mit dem Einblendeffekt angezeigt werden soll, und dann Ihre Website besuchen, um es in Aktion zu sehen.
Schritt 3: Das letzte Widget nach dem Einblenden klebend machen
Eine häufig gewünschte Funktion mit dem Einblendeffekt besteht darin, das letzte Seitenleisten-Widget scrollen zu lassen, während der Benutzer scrollt. Dies wird als Floating-Widget oder Sticky-Widget bezeichnet.
Wenn Sie sich den obigen jQuery-Code ansehen, werden Sie feststellen, dass wir a . hinzugefügt haben wpbstickywidget
CSS-Klasse zum Widget nach dem Einblendeffekt. Sie können diese CSS-Klasse verwenden, um Ihr letztes Widget nach dem Einblenden festzuhalten. Alles, was Sie tun müssen, ist dieses CSS in das Stylesheet Ihres Themes einzufügen.
.wpbstickywidget { position:fixed; top:0px; }
Fühlen Sie sich frei, das CSS an Ihre Bedürfnisse anzupassen. Sie können die Hintergrundfarbe oder Schriftarten ändern, um das Widget noch auffälliger zu machen. Wenn Sie möchten, können Sie neben Ihrem letzten Widget sogar einen reibungslosen Bildlauf nach oben hinzufügen, mit dem Benutzer schnell zurückscrollen können.
Wir hoffen, dieser Artikel hat Ihnen geholfen, dem letzten Widget in Ihrer WordPress-Seitenleiste einen Einblendeffekt hinzuzufügen. Weitere Informationen zu jQuery finden Sie in den besten jQuery-Tutorials für WordPress.