如何在 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，我们的使命是为开发人员提供提示、技巧和资源，以帮助您确保您的网站始终保持最佳状态。今天详细了解我们的计划！