如何将预加载动画添加到 WordPress(逐步)
您想为您的 WordPress 网站添加预加载动画吗?
预加载器是在后台显示页面加载进度的动画。这可以向用户保证网站正在加载,并有助于改善用户体验并降低整体跳出率。
在本文中,我们将逐步向您展示如何将预加载器添加到 WordPress。
![如何向 WordPress 添加预加载动画(逐步) 如何向 WordPress 添加预加载动画(逐步)](https://www.itbook5.com/wp-content/uploads/2022/07/add-preloader-animation-to-wordrpess-og.png)
什么是预加载动画以及为什么将其添加到 WordPress?
预加载器是在后台显示页面加载进度的动画或状态消息。
通常,当您访问网站时,您的浏览器会开始下载网站的不同部分。某些部分加载速度更快,例如文本和代码,而图像、视频和图形可能需要更长的时间。
如果您的大部分内容是带有很少图像和视频的文本,那么您实际上不需要向您的网站添加预加载器。相反,您应该专注于提高网站速度和性能。
另一方面,如果您的大部分内容是图像和视频嵌入,那么您的用户将需要等待一段时间才能看到您的内容。
在这些部分下载期间,您的网站可能会感觉很慢。有时用户甚至可能认为您的网站已损坏。预加载器将填补空白,并在页面加载时向用户显示进度指示器。
您可以通过在 WordPress 中撰写博客文章时单击“预览”按钮来查看预加载器的实时示例。
WordPress 将在新窗口中打开您博客文章的实时预览。它将在显示实时预览之前显示一个预加载器。
![WordPress 预加载器示例 WordPress 预加载器示例](https://www.itbook5.com/wp-content/uploads/2022/07/wordpress-preloader-example.gif)
话虽如此,让我们看看如何轻松地将预加载器添加到您的 WordPress 网站。只需使用下面的快速链接直接跳转到您要使用的方法。
方法 1. 使用 WP Smart Preloader 在 WordPress 中添加预加载器
推荐这种方法,因为它对初学者来说更容易,并且不需要您向 WordPress 添加代码或更改您的WordPress 主题。
您需要做的第一件事是安装并激活WP Smart Preloader插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。
激活后,您需要访问设置»WP Smart Preloader并选择预加载器样式或页面加载动画。
该插件带有六个内置动画可供选择。只需从“选择预加载器”下拉菜单中选择动画。您还可以上传自己的自定义 HTML 和 CSS 来创建自定义预加载器。
接下来,您可以通过选中“仅在主页上显示”选项使预加载器仅出现在主页上。
![WP Smart Preloader 设置 WP Smart Preloader 设置](https://www.itbook5.com/wp-content/uploads/2022/07/wp-smart-preloader-settings.png)
之后,您需要向下滚动到“Duration to show Loader”部分。您可以在此处更改预加载器的持续时间。
默认选项是 1500 毫秒或 1.5 秒,这应该适用于大多数网站,但您可以根据需要更改此设置。
![设置 WP Smart Preloader 持续时间 设置 WP Smart Preloader 持续时间](https://www.itbook5.com/wp-content/uploads/2022/07/wp-smart-preloader-duration.png)
您还可以设置加载器完全淡出所需的时间。默认选项是 2500 秒或 2.5 秒。
完成自定义预加载器设置后,单击“保存更改”按钮以保存设置。
您现在可以访问您的网站以查看运行中的预加载器。
![方法一预加载器示例 方法一预加载器示例](https://www.itbook5.com/wp-content/uploads/2022/07/method-1-preloader-example.gif)
方法 2. 使用 LoftLoader 插件在 WordPress 中添加预加载器
将预加载器动画添加到WordPress 网站的另一种方法是使用LoftLoader插件。
您需要做的第一件事是安装并激活插件。
激活后,您需要进入设置»LoftLoader Lite配置插件设置。
首先,您需要确保单击了“启用 LoftLoader”按钮并带有复选标记。
![启用 Loftloader Lite 插件 启用 Loftloader Lite 插件](https://www.itbook5.com/wp-content/uploads/2022/07/enable-loftloader-lite-plugin.png)
之后,您可以单击“显示在”选项。
然后,选择您是希望预加载器显示在整个网站上还是仅显示在主页上。
![Ser LoftLoader 显示设置 Ser LoftLoader 显示设置](https://www.itbook5.com/wp-content/uploads/2022/07/set-loftloader-display-settings.png)
接下来,单击“返回”箭头返回插件设置页面。
之后,单击“背景”选项。
在这里,您可以通过单击“选择颜色”框中的颜色来选择新的背景颜色。您还可以调整背景不透明度并选择新的结束动画。
![设置 LoftLoader 背景和不透明度设置 设置 LoftLoader 背景和不透明度设置](https://www.itbook5.com/wp-content/uploads/2022/07/loftloader-background-opacity-settings.png)
自定义背景后,再次单击“返回”箭头。
接下来,单击“加载器”菜单选项以更改您的默认预加载器。
您可以在“加载器动画”框中选择新动画。如果要更改颜色或预加载器,只需在“Pick Color”框中选择一种新颜色。
![选择 LoftLoader 动画 选择 LoftLoader 动画](https://www.itbook5.com/wp-content/uploads/2022/07/choose-loftloader-animation.png)
完成后,单击“返回”箭头返回主设置屏幕。
接下来,单击“更多”菜单选项。
在这里,您可以设置预加载器的最长加载时间并显示关闭按钮,以便用户退出加载器。
![LoftLoader 附加设置 LoftLoader 附加设置](https://www.itbook5.com/wp-content/uploads/2022/07/loftloader-additional-settings.png)
单击“最大加载时间”菜单以设置最大加载时间。
然后,以秒为单位设置最大加载时间。
![设置 LoftLoader 加载时间 设置 LoftLoader 加载时间](https://www.itbook5.com/wp-content/uploads/2022/07/loftloader-loading-time-publish.png)
之后,您可以单击“返回”按钮为您的预加载器添加一个关闭按钮。但是,我们将保留默认设置,使其不会出现。
完成自定义预加载器后,请确保单击“发布”按钮以使您的预加载器生效。
现在,您可以访问您的网站以查看您的新预加载器的运行情况。
![LoftLoader 预加载器示例 LoftLoader 预加载器示例](https://www.itbook5.com/wp-content/uploads/2022/07/loftloader-preloader-example.gif)
评论被关闭。