如何將預加載器動畫添加到WordPress(逐步)


您要向您的WordPress網站添加預加載器嗎? 預加載器是一種動畫,指示後台頁面加載的進度。

預加載器可確保用戶網站正在加載頁面。 這可以幫助改善用戶體驗並降低總體跳出率。

在本文中,我們將向您展示如何輕鬆地將預加載器添加到WordPress。

將預加載器添加到您的WordPress網站

什麼是預加載器以及何時應使用它?

預加載器是動畫或狀態消息,指示後台頁面加載的進度。

通常,當您訪問網站時,瀏覽器會開始下載內容的不同部分。 網站的某些部分加載速度較快(例如,文本,HTML代碼,CSS),而其他部分的加載速度較慢(即,圖像和視頻)。

如果您的大部分內容是帶有很少圖像和視頻的文本,那麼您實際上不需要向網站添加預加載器。 相反,您應該專注於提高網站速度和性能,以加快頁面加載速度。

另一方面,如果您的大部分內容是圖像,照片和視頻嵌入,那麼您的用戶需要等待一段時間才能真正看到所有內容。

在這些部分下載期間,您的網站可能會變慢。 有時用戶甚至可能認為它已損壞。 添加一個預加載器,可以填補這一空白,並在頁面加載期間向用戶顯示進度指示器。

您可以通過在WordPress中撰寫博客文章時單擊“預覽”按鈕來查看預加載器的實時示例。

WordPress將在​​新窗口中打開博客文章的實時預覽,並且它將在實際顯示實時預覽之前顯示一個預加載器。

WordPress帖子預覽預加載器

話雖如此,讓我們看一下如何輕鬆地將預加載器添加到WordPress網站。

方法1.使用WP Smart Preloader在WordPress中添加預加載器

建議使用此方法,因為它易於實現,並且不需要對WordPress主題進行任何更改。

您需要做的第一件事是安裝並激活WP Smart Preloader插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 設置»WP Smart Preloader 頁面以配置插件設置。

WP Smart Preloader設置

首先,您需要選擇預加載器樣式或頁面加載動畫。 該插件帶有六個內置動畫供您選擇。 您還可以上傳自己的自定義HTML和CSS來創建自定義預加載器。

之後,您可以通過選中“僅在主頁上顯示”選項,使預加載器僅出現在主頁上。

接下來,您需要向下滾動到“顯示加載程序的持續時間”部分。 您需要指定預加載器的持續時間。 默認選項是1500毫秒(1.5秒),適用於大多數站點,但是您可以根據需要進行更改。

設置預加載器持續時間並淡出

您還可以設置加載程序完全消失所需的時間。 默認選項是2500秒或2.5秒。

最後,不要忘記單擊“保存更改”按鈕來保存您的設置。

現在,您可以訪問您的網站以查看預加載器的運行情況。

WP Smart Preloader預覽

方法2.使用預加載器插件在WordPress中添加預加載器

此方法很靈活,但需要其他步驟才能在您的WordPress網站上正確實施。

您需要做的第一件事是安裝並激活Preloader插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 插件»預加載器 頁面以配置插件設置。

預加載器設置

首先,您需要輸入要用於加載屏幕的背景色的十六進制代碼。 默認選項是#FFFFFF(白色)。 您可以使用在線顏色選擇器工具查找要使用的顏色的十六進制代碼。

接下來,您需要提供要使用的預加載器映像的URL。 該插件帶有默認的動畫圖像。

如果要使用其他動畫,則將找到一個鏈接,用於從第三方網站下載動畫的預加載器圖像。 然後,您可以將該圖像上傳到wp-content文件夾,並將URL粘貼到此處。

接下來,您需要選擇要顯示預加載器的位置。

選擇預加載器位置

您可以選擇在網站的所有頁面上顯示它,也可以選擇一個特定部分。

最後,您將看到將以下代碼添加到WordPress主題的header.php文件中的說明。

在離開頁面之前,請不要忘記單擊“保存更改”按鈕來保存設置。

我們不建議在您的WordPress主題中添加代碼,因為在您更新主題時它會被刪除。

如果您使用的是子主題,則可以將代碼添加到子主題的header.php文件中。

更好的解決方案是使用單獨的代碼段插件或特定於站點的插件添加此代碼。

這是您需要添加的代碼:

function wpb_add_preloader() {
echo '
'; } add_action( 'wp_body_open', 'wpb_add_preloader' );

注意: 這種添加代碼的方法僅適用於與WordPress 5.2中添加的wp_body_open()函數兼容的WordPress主題。

這種添加代碼的方法可以確保即使更新主題,代碼也可以保留在那裡。

添加代碼後,您可以訪問您的網站以查看預加載器的運行情況。

預加載器預覽

我們希望本文能幫助您學習如何輕鬆地將Preloader添加到WordPress網站。 您可能還希望查看我們的最有用的WordPress技巧,竅門和技巧列表,以獲得更酷的想法。

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