如何使用jQuery淡入WordPress中的最後一個側邊欄小部件


最近,我們的一位用戶向我們詢問瞭如何為側邊欄中的最後一個小部件添加淡入效果。 這種流行的jQuery效果已在許多知名網站和博客上使用。 當用戶向下滾動頁面時,側欄中的最後一個小部件會淡入並變為可見。 動畫使小部件醒目且引人注目,從而大大提高了點擊率。 在本文中,我們將向您展示如何使用jQuery在WordPress的最後一個側邊欄小部件中淡入淡出。

以下是其外觀的演示:

淡入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中的側邊欄,然後選擇“檢查元素”。

在源代碼中查找側邊欄容器ID

在源代碼中,您將能夠看到側邊欄容器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教程。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Google+。