使用jQuery淡入WordPress中的最后一个侧边栏小部件

最近，我们的一位用户向我们询问了如何为边栏中的最后一个小部件添加淡入效果。这种流行的jQuery效果已在许多知名网站和博客上使用。当用户向下滚动页面时，侧栏中的最后一个小部件会淡入并变为可见。动画使小部件醒目且引人注目，从而大大提高了点击率。在本文中，我们将向您展示如何使用jQuery在WordPress的最后一个侧边栏小部件中淡入淡出。

以下是其外观的演示：

在本教程中，您将修改主题文件。建议您先备份主题，然后再继续。

步骤1：添加Fadein效果的JavaScript

首先，您需要将jQuery代码作为单独的JavaScript文件添加到WordPress主题中。首先在文本编辑器（如记事本）中打开空白文件。接下来，将此空白文件另存为wpb_fadein_widget.js您的桌面，并将以下代码粘贴到其中。

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;  
}
}
});
}
});

这段代码中最重要的一行是var sidebarElement = $('div#secondary');。

这是包含侧边栏的div的ID。由于每个主题可能使用不同的侧边栏容器div，因此您需要找出主题用于侧边栏的容器ID。

您可以使用Google Chrome浏览器中的inspect element工具找到答案。只需右键单击Google Chrome中的侧边栏，然后选择“检查元素”。

在源代码中，您将能够看到侧边栏容器div。例如，默认的“二十十二”主题使用secondary，而“二十十三”主题teritary用作侧边栏容器的ID。您需要secondary用侧边栏容器div的ID替换。

接下来，您需要使用FTP客户端将此文件上传到WordPress主题目录内的js文件夹。如果您的主题目录没有js文件夹，则需要通过右键单击并在FTP客户端中选择“创建新目录”来创建它。

步骤2：将您的JavaScript放入WordPress主题

现在您的jQuery脚本已准备就绪，是时候将其添加到主题中了。我们将使用在主题中添加javascript的正确方法，因此只需将以下代码粘贴到主题的functions.php文件中。

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

就是这样，现在您可以在侧边栏中添加一个希望以淡入效果显示的小部件，然后访问您的网站以查看其运行情况。

步骤3：在淡入淡出之后使最后一个小部件具有粘性

淡入淡出通常需要的功能是在用户滚动时使最后一个侧栏小部件滚动。这称为浮动窗口小部件或粘性窗口小部件。

如果您看一下上面的jQuery代码，您会注意到我们wpbstickywidget在淡入淡出之后向小部件添加了CSS类。您可以使用此CSS类使最后一个小部件淡入后保持粘性。您需要做的就是将该CSS粘贴到主题的样式表中。

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

随意修改CSS以满足您的需求。您可以更改背景颜色或字体，以使小部件更加突出。如果愿意，您甚至可以在上一个小部件旁边添加一个平滑滚动到顶部效果，这将允许用户快速向后滚动。

我们希望本文能帮助您在WordPress边栏中的最后一个小部件中添加淡入效果。要获得更多jQuery优势，请查看WordPress最佳jQuery教程。