您想向您的 WordPress 网站添加预加载动画吗?

预加载器是在后台显示页面加载进度的动画。这可以让访问者知道页面正在加载,从而可以改善用户体验并降低跳出率。

在本文中,我们将向您展示如何逐步向 WordPress 添加预加载器。

什么是预加载动画,为什么将其添加到 WordPress?

如果页面需要很长时间才能加载,那么访问者可能会认为您的网站已损坏并放弃您的内容。阻止这种情况的一种方法是添加预加载器,它是显示页面加载进度的动画或状态。

在 WordPress 中添加新帖子时,您可以看到预加载器动画的实时示例。只需单击帖子编辑器中的“预览”按钮,WordPress 将在加载预览时显示预加载动画。

如果您的大部分内容这是带有很少图像和视频的文本,那么您通常不需要向您的网站添加预加载器。相反,最好专注于提高网站的速度和性能,或者升级到更好的 WordPress 托管提供商。

另一方面,如果您的网站有大量图像或视频嵌入,那么添加预加载动画可能是有意义的。

话虽如此,让我们看看如何轻松地将预加载器添加到您的 WordPress 网站。只需使用下面的快速链接即可直接跳至您要使用的方法:

  • 方法1:使用WP Smart Preloader在WordPress中添加预加载器(简单方法)
  • 方法2:使用LoftLoader在WordPress中添加预加载器(更可定制)

方法 1:使用 WP Smart Preloader 在 WordPress 中添加预加载器(简单方法)

在 WordPress 中添加预加载器的最简单方法是使用 WP 智能预加载器。该插件有六个内置的预加载器动画可供您使用,或者您可以使用自定义 HTML 和 CSS 创建自己的动画。

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

激活后,转到“设置”»“WP 智能预加载器”,然后打开“智能预加载器”下拉列表。这显示了您可以使用的所有不同动画。

该插件将显示您选择的动画的预览,因此您可以选择不同的预加载器来查看您最喜欢的。

默认情况下,动画将出现在您的 WordPress 网站上,但如果您愿意,则可以仅在主页上使用它。只需选中“仅在主页上显示”框即可。

如果您想创建自己的 CSS 动画,只需在“自定义 CSS”框中输入代码即可。

另一个o选项是通过将代码添加到“自定义动画”框中来创建自定义 HTML5 动画。

选择动画后,滚动到“显示加载程序的持续时间”部分。您可以在此处更改预加载器的播放时间。

默认选项为 1500 毫秒或 1.5 秒。这应该适用于大多数网站,但如果您愿意,您可以输入不同的数字。

默认情况下,动画需要 2500 毫秒或 2.5 秒才能完全淡出。要更改此设置,只需在“要淡出的加载程序”字段中输入更大或更小的数字即可。

当您对预加载器的设置感到满意时,只需单击“保存更改”按钮即可存储您的设置。

您现在可以访问您的 WordPress 博客来查看预加载器的运行情况。

方法2:使用LoftLoader在WordPress中添加预加载器(更多内容可拆分)

向 WordPress 网站添加预加载动画的另一种方法是使用 LoftLoader。该插件带有内置动画,可让您以多种不同的方式自定义预加载器。

您需要做的第一件事是安装并激活 LoftLoader 插件。有关更多详细信息,请参阅有关如何安装 WordPress 插件的初学者指南。

激活后,转到“设置”»LoftLoader Lite 以配置插件设置。 LoftLoader Lite 与 WordPress 主题定制器集成,因此此屏幕看起来应该很熟悉。

要开始使用,请点击“显示于”。在此屏幕上,您可以选择是要在整个 WordPress 博客上使用相同的预加载器,还是仅在主页上使用。

例如,如果您的主页与网站的其他部分相比有大量图像和视频,那么仅在自定义主页上显示预加载器可能是有意义的。

马克之后做出决定后,单击“后退”箭头返回主设置页面。

接下来,单击“背景”选项。

在这里,您可以通过单击“选择颜色”框来更改背景颜色。您还可以更改背景的不透明度并选择新的结束动画,例如“淡入淡出”或“上下滑动”。

当您进行更改时,预览将会更新,因此您可以尝试不同的设置以查看最佳效果。当您对背景设置感到满意时,请单击“后退”箭头。

接下来,您可以通过单击“加载程序”选项来更改动画。

您可以通过单击“加载器动画”框中的不同缩略图来选择新动画。要更改预加载器的颜色,只需在“选择颜色”框中选择一种新颜色即可。

完成后,单击“返回”箭头

接下来,单击“更多”菜单选项。在这里,您可以通过选择“最大加载时间”来更改动画播放的时间。

然后您可以输入预加载器应持续多长时间。

接下来,您可能希望为用户提供一种关闭动画的方法,特别是当您使用较长的最大加载时间时。要添加退出按钮,请单击“关闭按钮”,然后使用设置来配置您的按钮。

当您对按钮的设置感到满意时,只需单击“发布”按钮即可启用预加载器。

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

我们希望本文能帮助您了解如何向 WordPress 添加预加载动画。您可能还想查看我们关于如何使用 WordPress 创建登陆页面的指南,或者查看我们的专家精选的最佳拖放 WordPress 页面构建器。

如果你喜欢这篇文章,那么p租赁订阅我们的 YouTube 频道以获取 WordPress 视频教程。您还可以在 Twitter 和 Facebook 上找到我们。

By

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注