spot_img
HomeDTC品牌出海独立站教程如何为任何网站类型制作 WordPress 预加载器

如何为任何网站类型制作 WordPress 预加载器

JasperAI 10000字免费额度试用

如果您的网站上有视频或图像内容,则需要 WordPress 预加载器。 预加载器显示“正在加载”图像,通常是动画,让访问者知道内容正在加载。

一些主题包括这些元素,但我将向您展示如何向任何 WordPress 网站添加预加载器。 因此,如果您的主题没有提供预加载图像,在本教程结束时,您可以准备好一个。

如果您的内容在某些连接上加载速度较慢,则使用网站预加载器尤为重要。 如果没有某种视觉指示符,访问者可能会看到您的媒体所属的空白区域,他们可能会认为存在错误。 预加载器让他们知道有东西在路上。

要显示媒体或视频预加载器,我们将使用 WP Smart Preloader 插件。 它适用于大多数主题、框架和插件,包括 WooCommerce。

安装 WP Smart Preloader 插件

登录到您的 WordPress 管理面板。

WordPress divi主题

在左栏导航中,将鼠标悬停在“插件”链接上,然后单击“添加新”链接。

鼠标悬停在

在“搜索插件……”框中,输入“WP Smart Preloader”。

搜索 WordPress WP Smart Preloader 插件

找到插件后,单击“立即安装”按钮。

点击安装 WordPress WP Smart Preloader 插件

单击“激活”按钮。

单击以激活 WordPress WP Smart Preloader 插件

配置 WP Smart 预加载器

在左栏导航中,将鼠标悬停在“设置”链接上,然后单击“WP Smart Preloader”链接。

点击

谷歌SEO优化服务

选择预加载器 – 此处的下拉菜单允许您在提供的预加载器动画之间进行选择。 下拉菜单下方的窗口显示了预加载器的预览。

仅在主页上显示 – 如果您希望预加载器仅显示在您的主页上,请选中此框。

选择预加载器配置

自定义动画 – 如果您有自定义 HTML5 动画,此黑框用于输入您自己的代码。 该代码超出了我们在这里所做的范围,但您可以在此处输入它。

自定义 CSS – 与“自定义动画”一样,这也是一个代码输入框,但它是针对 CSS 的。 您可以使用 CSS 更改提供的预加载器的外观,或添加自定义 HTML5 动画所需的 CSS。 (当然,前提是您将其添加到“自定义动画”框中。)

H10的年终大促

在哪里输入自定义代码和CSS

显示加载程序的持续时间. 这是一个以毫秒为单位的值。 如果您未在此处输入任何内容,则默认值为 1500 毫秒或一秒半。

将此值降低到默认值以下不会有任何影响。 在图像或视频加载之前,动画仍将显示。 但是,提高它会增加显示预加载器动画的时间 通过它自己.

这意味着如果您将此值增加到 10000(十秒)并且您的图像或视频在五秒钟内加载,预加载器仍将单独显示十秒钟,然后图像或视频将被显示。

加载程序淡出 – 以毫秒为单位的预加载器淡入淡出时间。

效果持续时间设置

在配置页面上进行任何更改后,单击“保存更改”按钮。

运行中的 WP Smart WordPress 预加载器

我已经激活了一个预加载器,并将默认主题标题图像替换为需要几秒钟加载的超过 5MB 的图像。 您可以看到加载图像时显示预加载器动画。

页面上的预加载器动画

有一个很好的平滑过渡,预加载器会随着图像加载而淡出。 如上所述,淡入淡出的时间由“Loader to Fade Out”值控制。

高质量外链购买

页面上的预加载器转换

如果您的网站使用视频标题,访问者的体验大致相同。

视频页面上的预加载器动画

视频页面上的预加载器转换

我在这里有点不利,试图使用静止图像演示动画,但你明白了。 😉

writesonic

如果卸载插件会发生什么

如果您卸载插件,使用它的页面和帖子将不会受到影响。

使用动画就绪主题

似乎大多数流行的 WordPress 主题都使用大(或全角)标题。 该标头可以包含图像或视频,WP Smart Preloader(和大多数其他预加载器)将使用它。 但是,如果您的主题没有使用大型主页标题进行布局,那么这里有一些专为这项工作而设计的主题。

印第安纳州

印第安纳主题

Indiana 是一个免费、灵活、可扩展、多用途的主题,适用于商业、公司和商业网站。 Indiana 反应灵敏且充满活力,其清新优雅的布局和易用性使其成为热门选择。 您可以自定义页眉、菜单、页脚、主页和侧边栏。 它也是 SEO 友好的,并带有 WooCommerce 集成。

高程精简版

Elevation Lite 主题

Elevation Lite 是一个免费的视差主题,具有精心设计的主页,包括三列服务部分、全角 Nivo 滑块、欢迎部分和功能区域。 您将拥有全屏或方框布局以及页眉、页脚和侧边栏的小部件。 它还具有响应式设计并且对 SEO 友好。

超级主题

超主题

最后,Ultra Theme 是高级(付费)主题。 但它带来了许多高级功能,如全区滚动、动画颜色变化、图像过滤器等。 Ultra 提供了许多创建动画效果和(多个)引人注目的、随时可用的布局所需的工具。 与印第安纳州一样,Ultra 已为 WooCommerce 做好准备。

如果 WP Smart Preloader 不适合你,试试这些替代品

并非每个插件都与每个网站(或网站所有者)兼容。 如果您正在寻找 WP Smart Preloader 的替代品,这里有一些其他的 WordPress 预加载器插件可供查看。

预加载器

预加载器插件

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

预加载器支持 Retina,并带有自定义背景颜色和多个预加载器显示选项。 它使用 jQuery 和 CSS3,使其与 Chrome、Firefox、Opera、Safari、IE9+ 和大多数现代移动设备兼容。 您还可以查看现场演示以查看实际效果。

页面加载效果

页面加载效果插件

Page Loading Effects 是一款轻量级、易于使用的插件,可在页面完全加载之前显示动画加载图形。 这个还有一个现场演示可以看到它的工作原理。

阁楼装载机

LoftLoader插件

LoftLoader 具有增强的设置选项和 WordPress 定制器。 它带有适用于所有现代浏览器的 CSS3 动画。 它为您提供无限的背景和加载器颜色,包括更改预加载器不透明度的能力。 它在缩小 CSS 和 JS 的同时具有响应能力和视网膜就绪。

让您的访客知道发生了什么

今天的网站用户对页面加载速度有很高的期望。 考虑到这一点,在等待另一个或视频加载时显示图像似乎有悖常理。

但是 WP Smart Preloader 不使用图像,它使用 CSS 在浏览器中创建其预加载器“图像”。 所以加载额外的图像不是问题。 大多数预加载器插件都以类似的方式工作,使用 CSS 和/或 HTML5 动画。

当然,CSS 或 HTML5 动画需要代码,您可能会争辩说加载和解析额外代码也是一个带宽问题。 从技术上讲,它是。 但与普通 WordPress 页面的整体大小相比,它的代码量是如此之小,以至于它并没有真正导致页面加载速度出现可测量的差异。

即使是这样,最好还是向页面添加一个小元素,而不是向访问者展示一个空白空间,而且没有任何迹象表明它是否会被填充。 这对用户体验不利,并且在您的网站上反映不佳。

您的 WordPress 主题是否提供预加载动画? 您是否还有我们未在此处介绍的预加载器的任何其他建议? 在评论中让我知道。

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES