如何在 WordPress 中添加頁面加載動畫（預加載器）

已發表: 2023-02-12

頁面速度在您網站的性能中起著至關重要的作用。 如果頁面完全加載需要超過一兩秒的時間，這會使用戶感到沮喪，足以讓他們離開您的網站。 但是，如果訪問者在頁面完成加載時有一些吸引人的東西要看，它會有所幫助。

頁面加載動畫或“預加載器動畫”有助於告知訪問者頁面正在加載（未卡住），並增加他們留在網站上的可能性。 這樣，它可以改善用戶體驗 (UX) 並降低跳出率。

在這篇文章中，我們將解釋預加載器動畫的好處以及何時使用它。 然後我們將引導您完成添加 WordPress 頁面加載動畫的選項。 讓我們開始吧！

目錄
1.什麼是預加載動畫？
2.什麼時候應該使用預加載器？
3.為 WordPress 添加頁面加載動畫的 2 個選項
3.1. 選項 1：使用插件添加預加載器動畫
3.1.1. 第 1 步：下載 WP 智能預加載器
3.1.2. 第 2 步：選擇您的風格
3.1.3. 第 3 步：預覽預加載器動畫
3.2. 選項 2：手動添加預加載器動畫
3.2.1. 第 1 步：頭腦風暴你的動畫
3.2.2. 第 2 步：開發或下載您的動畫
3.2.3. 第 3 步：創建子主題
3.2.4. 第 4 步：將 HTML 代碼添加到主題的 header.php 文件中
3.2.5. 第 5 步：將 CSS 代碼添加到您的樣式表
3.2.6. 第 6 步：添加 jQuey 代碼使動畫工作
4.從 WP Engine 中找到更多提示和指南

什麼是預加載器動畫？

預加載器動畫向用戶發出頁面正在加載的信號。 這是一個簡單的動畫，可用作一次僅加載特定內容的頁面的進度指示器。

WordPress 預加載器讓訪問者在等待整個頁面完成加載的幾秒鐘內看到一些更愉快和有趣的東西。 在某些情況下，他們甚至可以估計還剩多少時間。

我什麼時候應該使用預加載器？

當您的 WordPress 網站以視頻或圖像為主，加載時間比正常情況要長一些時，預加載器是一個明智的選擇。 這樣，訪問者就會確信您的網站正在按預期運行，並且沒有損壞。

但是，如果您的網站主要是基於文本的，則可能不需要預加載器動畫。 相反，專注於提高頁面速度會更有意義。

向 WordPress 添加頁面加載動畫的 2 個選項

您可以使用兩種主要方法將 WordPress 預加載器動畫添加到您的站點。 您可以使用更簡單的插件，也可以手動執行任務。 讓我們來看看如何開始使用這兩種方法。

選項 1：使用插件添加預加載器動畫

對於大多數用戶來說，通過插件添加預加載器動畫是更快更容易的選擇。 您可以使用一些插件，但我們推薦 WP Smart Preloader：

這是一個免費的、高度可定制的插件。 它使用 CSS 和最少的 HTML 標記來幫助降低用戶在內容加載時離開您的網站的風險。 在以下步驟中，我們將向您展示它是如何工作的。

第 1 步：下載 WP 智能預加載器

您可以通過 WordPress 插件目錄下載 WP Smart Preloader 插件。 然後您可以將.zip文件上傳到您的 WordPress 站點，方法是轉到管理儀表板中的插件 > 添加新 > 上傳插件：

另一種選擇是通過插件 > 添加新屏幕上的搜索欄搜索插件：

無論哪種方式，安裝插件後，單擊“激活”按鈕。 然後，您可以在Settings > WP Smart Preloader下找到它的選項。

第 2 步：選擇您的風格

在 WP Smart Preloader設置頁面上，首先要做的是為預加載器選擇一種樣式。 在“選擇預加載器”部分下，將有一個下拉菜單讓您從六個樣式選項中進行選擇，以及一個自定義動畫選項：

選擇樣式後，您可以在下面的窗口中進行預覽。 如果您想添加自己的自定義動畫，您可以在自定義動畫部分下包含您的 HTML 代碼：

在此屏幕的末尾，您可以設置加載程序本身的持續時間和“淡出”效果：

如果將這些字段留空，默認值將分別設置為 1500 毫秒（1.5 秒）和 2500 毫秒（2.5 秒）。 完成後，單擊“保存更改”按鈕。

第 3 步：預覽預加載器動畫

完成設置配置後，在新的瀏覽器選項卡中訪問您的 WordPress 站點以預覽預加載器動畫。 您可以根據需要返回進行任何樣式更改。 一旦您對預加載器感到滿意，它就會被設置好並準備就緒。

選項 2：手動添加預加載器動畫

如果您對使用插件不感興趣，您仍然可以手動將此功能添加到您的網站。 創建自定義預加載器的主要優點是您可以更靈活地設計它。

當然，這也是一個更艱難的過程。 接下來，我們將向您介紹如何為您的 WordPress 網站創建、上傳和格式化自定義預加載器動畫。

第 1 步：頭腦風暴你的動畫

第一步是決定要使用哪種動畫。 您可以研究其他預加載器動畫工具以了解您喜歡的樣式。 您可以在 Codepen 上使用和探索一些免費動畫，這是獲得一些想法的好方法。

第 2 步：開發或下載您的動畫

要製作動畫，您可以使用 Photoshop 等工具創建 GIF 或旋轉的預加載器動畫。 您還可以參考我們關於使用 CSS 創建 WordPress 動畫的資源。

我們推薦後一種方法，因為將 GIF 預加載器添加到您的 WordPress 網站最好使用插件。 除了 Codepen（上面提到的）之外，您還可以從 Spinkit 和 LoadLab 等網站下載動畫。

對於本教程，我們將使用 Spinkit 的預加載器動畫。 無論您從哪裡獲得動畫，您都需要其 CSS 源代碼來手動將其添加到您的 WordPress 站點：

大多數免費的預加載器動畫都會包含一個源鏈接，您可以在其中找到它的 HTML 和 CSS：

請記住，您還可以使用預加載器動畫中的 CSS 源代碼，然後根據自己的喜好對其進行自定義。

第 3 步：創建子主題

一旦你有了你的動畫，你可以將它添加到你的 WordPress 網站。 最安全的方法是設置一個子主題。 如果您不確定如何操作，可以查看我們關於如何創建 WordPress 子主題的教程。

第 4 步：將 HTML 代碼添加到主題的header.php文件中

下一步是為您的 WordPress 主題找到header.php文件。 您可以通過 WordPress主題編輯器屏幕執行此操作：

您還可以使用 FileZilla 等 FTP 客戶端編輯文件。 該文件將位於站點根目錄的wp-content > themes文件夾中。

找到並打開文件後，在正文標記下方插入以下 HTML 代碼：

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

調整或添加特定 WordPress 預加載器動畫所需的任何 HTML 代碼，然後保存文件。

第 5 步：將 CSS 代碼添加到您的樣式表

現在是時候添加 CSS 來設置動畫的樣式了。 找到您的 WordPress 主題的 CSS 樣式表 ( style.css )，然後復制並粘貼動畫的 CSS 源代碼。 在我們的例子中，我們將添加以下內容：

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

在保存更改之前，刪除此部分：“margin: 100px auto;”。 在其位置，複製並粘貼以下內容：

 position: absolute; top: 48%; left: 48%;

然後你可以保存文件。

第 6 步：添加 jQuey 代碼使動畫工作

為了使微調器預加載器動畫正常工作，您需要添加一些 jQuery。 為此，您可以導航回header.php文件，並在結束 body 標記之前插入以下內容：

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

然後保存您的文件，並預覽您的站點以確保 WordPress 預加載器動畫按預期工作。

從 WP Engine 中查找更多提示和指南

將 WordPress 預加載器動畫添加到您的站點有助於吸引訪問者並降低跳出率。 此外，您還有多種選擇可以快速完成工作。

在 WP Engine，我們的使命是為開發人員提供提示、技巧和資源，以幫助您確保您的網站始終保持最佳狀態。 今天詳細了解我們的計劃！