如何在WordPress中添加加载动画效果

WPJAM TOC

预加载器是一种动画，指示后台页面加载的进度。预加载器可确保用户网站正在加载页面。这可以帮助改善用户体验并降低总体跳出率。在本文中，我们将向你展示如何轻松地将预加载器添加到WordPress。

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

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

通常，当你访问网站时，浏览器会开始下载内容的不同部分。网站的某些部分加载速度较快（例如，文本，HTML 代码，CSS），而其他部分的加载速度较慢（图像和视频）。如果你的大部分内容是带有很少图像和视频的文本，那么你实际上不需要在网站上添加预加载器。相反，你应该专注于提高网站速度和性能，以加快页面加载速度。

另一方面，如果你的大部分内容是图像，照片和视频嵌入，则你的用户需要等待一段时间才能实际看到所有内容。在这些部分下载期间，你的网站可能会变慢。有时用户甚至可能认为它已损坏。添加一个预加载器，可以填补这一空白，并在页面加载期间向用户显示进度指示器。

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

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

建议使用此方法，因为它易于实现，并且不需要对 WordPress 主题进行任何更改。你需要做的第一件事是安装并激活 WP Smart Preloader 插件。激活后，你需要访问设置»WP Smart Preloader页面以配置插件设置。

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

首先，你需要选择预加载器样式或页面加载动画。该插件带有六个内置动画供你选择。你还可以上传自己的自定义 HTML 和 CSS 来创建自定义预加载器。之后，你可以通过选中“仅在主页上显示”选项，使预加载器仅出现在主页上。

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

你还可以设置加载程序完全消失所需的时间。默认选项是 2500 秒或 2.5 秒。最后，不要忘记单击“保存更改”按钮来保存你的设置。现在，你可以访问你的网站以查看预加载器的运行情况。

方法2.使用预加载器插件在 WordPress 中添加预加载器

此方法很灵活，但需要其他步骤才能在 WordPress 网站上正确实现。你需要做的第一件事是安装并激活 Preloader 插件。

激活后，你需要访问“插件»Preloader”页面来配置插件设置。

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

接下来，你需要提供要使用的预加载器映像的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 主题。这种添加代码的方法可以确保即使更新主题也可以将代码保留在那里。

文章转载自：https://www.wpbeginner.com/plugins/how-to-add-a-preloader-animation-to-wordpress/