如何将预加载器动画添加到WordPress（逐步）

您要向您的WordPress网站添加预加载器吗？预加载器是一种动画，指示后台页面加载的进度。

预加载器可确保用户网站正在加载页面。这可以帮助改善用户体验并降低总体跳出率。

在本文中，我们将向您展示如何轻松地将预加载器添加到WordPress。

预加载器是动画或状态消息，指示后台页面加载的进度。

通常，当您访问网站时，浏览器会开始下载内容的不同部分。网站的某些部分加载速度较快（例如，文本，HTML代码，CSS），而其他部分的加载速度较慢（即，图像和视频）。

如果您的大部分内容是带有很少图像和视频的文本，那么您实际上不需要在网站上添加预加载器。相反，您应该专注于提高网站速度和性能，以加快页面加载速度。

另一方面，如果您的大部分内容是图像，照片和视频嵌入，则用户需要等待一段时间才能实际看到所有内容。

在这些部分下载期间，您的网站可能会变慢。有时用户甚至可能认为它已损坏。添加一个预加载器，可以填补这一空白，并在页面加载期间向用户显示进度指示器。

您可以通过在WordPress中撰写博客文章时单击“预览”按钮来查看预加载器的实时示例。

WordPress将在新窗口中打开博客文章的实时预览，并且它将在实际显示实时预览之前显示一个预加载器。

话虽如此，让我们看一下如何轻松地将预加载器添加到WordPress网站。

建议使用此方法，因为它易于实现，并且不需要对WordPress主题进行任何更改。

您需要做的第一件事是安装并激活WP Smart Preloader插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»WP Smart Preloader页面以配置插件设置。

首先，您需要选择预加载器样式或页面加载动画。该插件带有六个内置动画供您选择。您还可以上传自己的自定义HTML和CSS来创建自定义预加载器。

之后，您可以通过选中“仅在主页上显示”选项，使预加载器仅出现在主页上。

接下来，您需要向下滚动到“显示加载程序的持续时间”部分。您需要指定预加载器的持续时间。默认选项是1500毫秒（1.5秒），适用于大多数站点，但是您可以根据需要进行更改。

您还可以设置加载程序完全消失所需的时间。默认选项是2500秒或2.5秒。

最后，不要忘记单击“保存更改”按钮来存储您的设置。

现在，您可以访问您的网站以查看预加载器的运行情况。

此方法很灵活，但需要其他步骤才能在WordPress网站上正确实现。

您需要做的第一件事是安装并激活Preloader插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问“ 插件»预加载器”页面来配置插件设置。

首先，您需要输入要用于加载屏幕的背景色的十六进制代码。默认选项是#FFFFFF（白色）。您可以使用在线颜色选择器工具查找要使用的颜色的十六进制代码。

接下来，您需要提供要使用的预加载器映像的URL。该插件带有默认的动画图像。

如果要使用其他动画，则将找到一个链接，用于从第三方网站下载动画的预加载器图像。然后，您可以将该图像上传到wp-content文件夹，并将URL粘贴到此处。

接下来，您需要选择要显示预加载器的位置。

您可以选择在网站的所有页面上显示它，也可以选择一个特定部分。

最后，您将看到将以下代码添加到WordPress主题的header.php文件中的说明。

<divid="wptime-plugin-preloader"></div>

离开页面之前，请不要忘记单击“保存更改”按钮来保存设置。

我们不建议在您的WordPress主题中添加代码，因为在您更新主题时它会被删除。

如果您使用的是子主题，则可以将代码添加到子主题的header.php文件中。

更好的解决方案是使用单独的代码段插件或特定于站点的插件添加此代码。

这是您需要添加的代码：

functionwpb_add_preloader() {echo'<div id="wptime-plugin-preloader"></div>';}add_action( 'wp_body_open', 'wpb_add_preloader');

注意：这种添加代码的方法仅适用于与WordPress 5.2中添加的wp_body_open（）函数兼容的WordPress主题。

这种添加代码的方法可以确保即使更新主题，代码也可以保留在那里。

添加代码后，您可以访问您的网站以查看预加载器的运行情况。

我们希望本文能帮助您学习如何轻松地将Preloader添加到WordPress网站。您可能还希望查看我们的最有用的WordPress技巧，窍门和技巧列表，以获取更酷的想法。