如何向 WordPress 添加预加载动画(分步)

您想向您的 WordPress 网站添加预加载器吗?预加载器是一个动画，指示后台页面加载的进度.

预加载器向用户保证网站正在加载页面.这有助于改善用户体验并降低整体跳出率.

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

什么是预加载器以及何时应该使用它?

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

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

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

另一方面，如果您的大部分内容是图片、照片和视频嵌入，那么您的用户需要等待一段时间才能真正看到所有内容.

在这些部分下载期间，您的网站可能会感觉很慢.有时用户甚至可能认为它坏了.添加一个预加载器，填补了这个空白，并在页面加载过程中向用户显示一个进度指示器.

您可以在 WordPress 中撰写博客文章时单击"预览"按钮，查看预加载器的现场示例.

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

话虽如此，让我们来看看如何轻松地向 WordPress 网站添加预加载器.

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

推荐使用这种方法，因为它更容易实现并且不需要对您的 WordPress 主题进行任何更改.

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

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

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

之后，您可以通过选中"仅在主页上显示"选项使预加载器仅显示在主页上.

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

您还可以设置加载器完全淡出所需的时间.默认选项是 2500 秒或 2.5 秒.

最后，不要忘记点击"保存更改"按钮来存储您的设置.

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

方法 2.使用 Preloader Plugin 在 WordPress 中添加 Preloader

此方法很灵活，但需要额外的步骤才能在您的 WordPress 网站上正确实施.

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

激活后，您需要访问插件» Preloader 页面来配置插件设置.

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

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

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

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

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

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

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

在离开页面之前，不要忘记点击"保存更改"按钮来存储您的设置.

我们不建议向您的 WordPress 主题添加代码，因为当您更新主题时它会被清除.

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

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

这是您需要添加的代码:

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

注意:这种添加代码的方法仅适用于与 WordPress 5.2 中添加的 wp_body_open() 函数兼容的 WordPress 主题.

这种添加代码的方法可确保即使您更新主题，您的代码也不会丢失.

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

我们希望本文能帮助您了解如何轻松地将预加载器添加到您的 WordPress 网站.您可能还想查看我们最有用的 WordPress 提示、技巧和技巧列表，以获取更多酷点子.