WordPress加载动画插件:Preloader「页面动画提升体验」

本文主要讲述了使用Preloader插件,生成正在加载动画,从而减少用户在等待过程中跳出网站。

用户访问网站时,经常由于页面加载缓慢,误以为网页打不开,从而退出网站,使用加载动画来提示用户,网站正在加载,请客户等待,这是很多大型网站的使用手法,能够有效降低用户跳出率。

WordPress也可以实现这样的效果,从而提升用户的体验。

WordPress加载动画插件:Preloader「页面动画提升体验」

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

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

Preloader插件就是一款为加载动画而开发的WordPress插件

轻松将预加载器添加到您的网站,与所有主要浏览器兼容。

Preloader

插件安装

首选需要是安装并激活Preloader插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

在WordPress后台>插件>安装插件>搜索“Preloader

WordPress加载动画插件:Preloader「页面动画提升体验」

点击【现在安装】然后在点击【启用】

或者是手动到WordPress官网下载Preloader插件:https://wordpress.org/plugins/the-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网站。

如果你觉得还需要添加代码比较困难,可以查看下面这篇文章,无需添加代码。

文章标题:WordPress加载动画插件:Preloader「页面动画提升体验」,本文链接:https://www.siwihs.com/7496.html。未经允许,禁止转载。

发表评论

登录后才能评论
分享本页
返回顶部