WordPress 网站如何添加“返回顶部”按钮?4 款主流插件评测与提速建议

wordpress-back-to-top-button

做外贸独立站或者内容丰富的博客,我们经常会设计很长的页面。当客户好不容易滑到网页最底部,如果想回到顶部查看导航栏或购物车,难道还要让他们用手指在手机屏幕上狂滑几十次吗?

这种糟糕的体验会直接导致跳出率飙升。一个简单的“返回顶部(Back to Top)”悬浮按钮,就能完美解决这个体验痛点。

今天就带你横向对比目前 WordPress 插件库里最常用的 3 款“返回顶部”插件。

如果你目前的 WordPress 主题本身不支持返回顶部功能,可以通过以下三款免费插件来实现。它们在后台安装插件搜索名字就能找到。
如果你还不会安装插件可以参考:WordPress 插件安装教程

1. WPFront Scroll Top(功能最全,老牌霸主)

这是目前安装量最大、知名度最高的返回顶部插件。

  • 实测体验: 它的后台设置面板非常详系,几乎把你能想到的功能都做进去了。你可以用文字、用它自带的几十种箭头图标,甚至可以上传你自己设计的图片作为按钮。

  • 优点: 支持设置滚动多少像素后才显示按钮。

    • 支持在手机端、平板端隐藏(对移动端排版很友好)。

    • 支持自动隐藏(鼠标不移动时按钮消失,不遮挡内容)。

  • 缺点: 因为功能太多,对于只需要一个简单箭头的站长来说,它的代码稍微显得有点“重”。

安装WPFront Scroll Top后需要去插件设置里面启用,操作非常简单。

插件下载地址:https://wordpress.org/plugins/wpfront-scroll-top/

2. To Top(极其轻量,所见即所得)

相比于 WPFront 的复杂,To Top 走的是极简路线,非常适合新手。

  • 实测体验: 这款插件最大的亮点是它完美接入了 WordPress 的“外观 -> 自定义”面板。这意味着你在调整按钮颜色、大小、位置的时候,可以在右侧实时看到预览效果,不需要反复刷新前台页面。

  • 优点:代码极其轻量,基本都是纯 CSS 绘制,不加载多余的图片资源。

    • 实时预览,对不懂代码的新手极其友好。

  • 缺点: 样式比较固定,不能像 WPFront 那样随心所欲上传极其复杂的自定义图片。

插件下载地址:https://wordpress.org/plugins/to-top/

3. Smooth Back To Top Button(主打平滑滚动,体验细腻)

这款插件的名字和它的功能一样,把所有的核心精力都放在了“Smooth(平滑)”这个词上。很多老旧的插件或主题,点击返回顶部时页面是瞬间“闪现”上去的,视觉极其生硬。这款插件完美解决了这个问题。

  • 实测体验: 这是我以前经常给客户用的一款“小而美”的插件。它的平滑滚动动画非常丝滑,而且你可以在后台精准设置滚动的持续时间(比如设置 800 毫秒,滑上去的速度就不快不慢刚刚好)。

  • 优点:动画体验全场最佳,且不会因为动画拖慢网页加载。

    • 极其轻量化,没有乱七八糟的冗余功能。

    • 支持在文章、页面、特定文章类型中单独开启或关闭。

  • 缺点:后台设置界面基本是纯英文,对完全不懂英文的新手有那么一点点门槛。(当然你可以用浏览器页面翻译功能)

    • 如果你的 WordPress 主题本身自带了平滑滚动代码,同时开启可能会出现代码冲突导致按钮失效。

插件下载地址:https://wordpress.org/plugins/smooth-back-to-top-button/

4. HR Scroll Top(中规中矩,简单粗暴)

名字最直接的一款插件,功能介于前三款之间。

  • 实测体验: 提供了一些基础的圆形、方形箭头样式选择,支持更改颜色。设置页面非常传统,属于“装上就能用,不用怎么管”的类型。

  • 优点: 简单易懂,没有什么复杂的逻辑。

  • 缺点: 样式略显老旧,部分主题兼容性偶尔会出现小瑕疵(比如在某些页面被页脚遮挡),需要自己微调 Z-index 层级。

插件下载地址:https://wordpress.org/plugins/scroll-top/

避坑与终极建议:真的需要装插件吗?

这里我要说句掏心窝子的话。虽然上面这 3 款插件都能解决问题,但在我经手优化的数百个 WordPress 外贸站中,我通常的建议是:能不装插件,就坚决不装插件。

每一个额外的插件,都会向你的网站头部插入额外的 CSS 和 JS 文件,这会增加服务器的请求次数,拖慢页面的 TTFB(首字节时间)和整体加载速度。

现在优秀的 WordPress 主题,早就把这个功能内置了。

以我个人极其推崇且正在使用的 Blocksy 主题 为例,你完全不需要安装上述任何插件,直接免代码一键开启:

  1. 进入 WordPress 后台,点击 [外观] -> [自定义]。

  2. 在左侧菜单找到 [常规 (General)]。

  3. 点击 [返回顶部 (Scroll to Top)] 选项。

  4. 直接开启开关!你可以在这里随意更换图标样式、调整形状(圆形/方形)、修改颜色,甚至设置它只在手机端或电脑端显示。

零插件,零额外负担,完美契合网站本身的性能优化。

网站还是慢?

如果你的网站即便精简了插件,前端页面加载依然卡顿,那问题大概率出在底层网络节点和缓存机制上。与其在一个个小插件里抠速度,不如从底层解决。

如果你想彻底攻克页面打开缓慢的问题,可以了解一下我这边提供的 WPHOS Edge™ 独家底层优化引擎,通过全球 CDN 节点分发,给你的外贸站来一次脱胎换骨的提速体验。[➔ 免费获取网站提速诊断报告]

发表评论

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


滚动至顶部