Einblenden des letzten Seitenleisten-Widget in WordPress mithilfe von jQuery

Kürzlich hat uns einer unserer Benutzer gefragt, wie ein Einblendeffekt für das letzte Widget in der Seitenleiste hinzugefügt werden kann. Dieser beliebte jQuery-Effekt wird auf vielen bekannten Websites und Blogs verwendet. Wenn der Benutzer auf der Seite nach unten blättert, wird das letzte Widget in der Seitenleiste eingeblendet und wird sichtbar. Die Animation macht das Widget auffällig und spürbar, was die Klickrate drastisch erhöht. In diesem Artikel zeigen wir Ihnen, wie Sie das letzte Sidebar-Widget in WordPress mithilfe von jQuery einblenden.

Unten ist eine Demo, wie es aussehen würde:

In diesem Lernprogramm ändern Sie Ihre Designdateien. Es wird empfohlen, dass Sie ein Backup Ihres Designs erstellen, 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-Design hinzufügen. Beginnen Sie mit dem Öffnen einer leeren Datei in einem Texteditor wie Notepad. Als nächstes speichern Sie diese leere Datei als wpb_fadein_widget.js auf Ihrem Desktop und fügen Sie den folgenden Code ein.

 jQuery (document) .ready (Funktion ($) / ** * Configuration * Der Container für Ihre Seitenleiste, z. B. Seite, #Seitenleiste usw.) * / var sidebarElement = $ ('div # sekundär'); // Überprüfen Sie, ob die Seitenleiste angezeigt wird existiert, wenn ($ (sidebarElement) .length> 0) // Das letzte Widget in der Seitenleiste und seine Position auf dem Bildschirm abrufen var widgetDisplayed = false; var lastWidget = $ ('. widget: last-child', $ (sidebarElement) )) var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Das letzte Widget ausblenden $ (lastWidget) .hide (); // Überprüfen Sie, ob der Bildlauf des Benutzers den oberen Bereich des letzten Widgets erreicht und angezeigt hat it $ (document) .scroll (function () // Wenn das Widget angezeigt wurde, müssen wir nicht weiter 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 # sekundär');.

Dies ist die ID des Div, das Ihre Seitenleiste enthält. Da für jedes Thema unterschiedliche Seitenleisten-Container-Divs verwendet werden, müssen Sie die Container-ID ermitteln, die Ihr Thema für die Seitenleiste verwendet.

Sie können dies anhand des Werkzeugs inspect element in Google Chrome feststellen. Klicken Sie einfach mit der rechten Maustaste in Ihre Seitenleiste in Google Chrome und wählen Sie dann Inspect Element.

Im Quellcode können Sie den Seitenleistencontainer div sehen. Beispielsweise wird das Standardthema Twenty Twelve verwendet sekundär, und zwanzig dreizehn verwendet hygienisch als ID für den Sidebar-Container. Sie müssen ersetzen sekundär mit der ID Ihres Sidebar-Containers div.

Als Nächstes müssen Sie einen FTP-Client verwenden, um diese Datei in den Ordner js im WordPress-Designverzeichnis hochzuladen. Wenn Ihr Design-Verzeichnis keinen Ordner "js" hat, müssen Sie ihn erstellen, indem Sie mit der rechten Maustaste klicken und "Create New Directory" in Ihrem FTP-Client auswählen.

Schritt 2: Einreihen Ihres JavaScript in das WordPress-Theme

Jetzt, da Ihr jQuery-Skript fertig ist, können Sie es in Ihr Design einfügen. Wir werden die richtige Methode zum Hinzufügen des Javascript in Ihrem Design verwenden. 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 ein Widget in Ihrer Sidebar hinzufügen, das mit dem Fadein-Effekt angezeigt werden soll, und dann Ihre Website besuchen, um es in Aktion zu sehen.

Schritt 3: Das letzte Widget nach dem Einblendeffekt klebrig machen

Eine häufig gewünschte Funktion beim Einblenden ist, das letzte Sidebar-Widget beim Scrollen des Benutzers zum Blättern zu bringen. Dies wird als Floating-Widget oder Sticky-Widget bezeichnet.

Wenn Sie sich den jQuery-Code oben ansehen, werden Sie feststellen, dass wir a hinzugefügt haben wpbstickywidget CSS-Klasse für das Widget nach dem Einblenden. Sie können diese CSS-Klasse verwenden, um das letzte Widget nach dem Einblenden festzuhalten. Alles, was Sie tun müssen, ist dieses CSS in das Stylesheet Ihres Themes einzufügen.

 .wpbstickywidget position: fixed; oben: 0px;  

Fühlen Sie sich frei, das CSS an Ihre Bedürfnisse anzupassen. Sie können die Hintergrundfarbe oder die Schriftarten ändern, um das Widget noch deutlicher hervorzuheben. Wenn Sie möchten, können Sie sogar einen sanften Bildlauf nach oben neben dem letzten Widget hinzufügen, sodass Benutzer schnell zurückblättern können.

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, dem letzten Widget in Ihrer WordPress-Seitenleiste einen Effekt hinzuzufügen. Weitere Informationen zu jQuery finden Sie in den besten jQuery-Tutorials für WordPress.

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