返回顶部

简单给WordPress网站添加返回顶部按钮

当你网站上经常出现长篇大论的时候,就有必要添加一个返回顶部的按钮,毕竟建网站需要考虑到用户体验。本文就介绍下如何给一个WordPress网站添加一个返回顶部按钮。

插件版方法

使用WordPress插件属于开袋即食的方法,非常简单,适合新人朋友使用。

WPFront Scroll Top

WPFront Scroll Top插件可以让你轻松添加一个go to top的返回顶部按钮,具用可自定义的选项和多种返回顶部图案。WPFront Scroll Top插件具有以下功能。

特征
用户向下滚动页面时显示按钮。
使用动画将页面滚动到顶部。
链接到页面中的元素。
使用URL链接到其他页面。
创建文本,图像或字体真棒按钮。
设置您想要的任何图像。
在小型设备上隐藏。
隐藏在iframe上。
页面/帖子过滤器。
自动隐藏。
异步JavaScript。

WPFront Scroll Top自带了非常多的按钮效果,并且支持自定义图片,如下图:

返回顶部按钮

安装WPFront Scroll Top后需要去设置里面启用才可使用,支持js异步加载。

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

To Top

To Top的设置比较简单,支持的特性如下:

特征
用户向下滚动页面时显示图标
通过Customizer实时预览
使用动画将页面滚动到顶部
设置图标/图像不透明度
设置图标(仪表板)或图像到顶部按钮
对于图标,设置背景颜色,图标颜色,图标大小和图标形状(从正方形到圆形)
设置您想要的任何图像
设置图像宽度
设置图标的位置
在管理页面中显示/隐藏顶部按钮。
自动隐藏
在小型设备上隐藏

界面默认只有3个图标,你可以修改图标颜色,但是不能自定义图标。

to top

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

Simple Scroll to Top Button

Simple Scroll to Top Button的设置也比较简单,默认带了10中返回顶部按钮图案,不支持自定义图片,可以设置按钮形状、颜色大小等。

特征

轻巧快速
使用清晰的编码标准保护代码
具有许多设置的直观界面
跨浏览器兼容(在任何现代浏览器中顺畅工作)
兼容所有WordPress主题
兼容RTL(从右到左)
准备好翻译

主要功能包括

Retina显示支持
FontAwesome集成(可用40个图标组合)
背景换色器(无限颜色)
符号换色器(无限颜色)
可更改的按钮背景和符号
可更改的按钮大小
滚动持续时间可变
启用/禁用按钮的选项
选项仅在完整网站或主页中显示按钮
网页顶部的自动隐藏按钮
实时预览

Simple Scroll to Top Button的按钮效果如下图:

Simple Scroll to Top Button

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

Scroll Top

Scroll Top非常简单,和To Top一样,支持自定义css样式。

功能包括:
无需设置。
自定义目标。
无限的颜色。
视网膜支持(图标字体)。
选择文字或图标字体。
可定制的文字。
位置切换器(左或右)。
改变你喜欢的动画。
自定义CSS区域

Scroll Top的效果如下图:

Scroll Top

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

在WordPress插件库里面搜索got to top或者back to top还可以发现更多的返回顶部的插件,功能都是大同小异的,选一个能用的就行。

接下来是代码版的WordPress网站添加返回按钮方法。

代码版方法

代码版网上搜索会有很多种方法,这里只分享奶爸网站上正在用的这种。

首先,新建一个名为back-to-top.js的文件,内容如下:

jQuery( document ).ready(function($){
  var offset = 100,
      speed = 250,
      duration = 500,
      scrollButton = $('#topbutton');
  
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() < offset) {
      scrollButton.fadeOut( duration );
    } else {
      scrollButton.fadeIn( duration );
    }
  });
  
  scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
      scrollTop: 0
    }, speed);
  });
});

你也可以点击这里从github直接下载(可能需要袋里才能打开)

新建好之后,把js文件上传到你主题文件的js目录下。

然后引用这个js文件,方法有两种,一种是主题函数里面引用,另外一种是自己添加到网站主题页脚文件(奶爸使用的这种)

主题函数引用的话,在函数文件functions.php里面插入下面这串代码。

/**
 * 引用JS文件
 */
function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );

/**
 * 网页添加返回按钮
 */
function themeslug_add_scroll_button() {
  echo '<a href="#" id="topbutton"></a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

你可以使用Code Snippets添加上面代码,一方面是安全,另外一方面是更换主题的话代码可以依然起作用,不需要重新添加。(不过要注意更换主题后把js文件传上去,或者自己修改到一个绝对地址。)

修改页脚文件引用的话,在footer.php里面,插入下面的代码。

<a href="#" id="topbutton"></a>
<script type='text/javascript' src="https://blog.naibabiji.com/wp-content/themes/twentytwelve/js/back-to-top.js "></script>

上面代码中的https://blog.naibabiji.com/wp-content/themes/twentytwelve/js/back-to-top.js请修改成你自己的实际地址。

最后是添加css样式

在主题的css文件style.css里面,添加下面的代码

#topbutton {
  position: fixed;
  display: none;
  height: 40px;
  width: 40px;
  line-height: 40px;
  right: 15px;
  bottom: 15px;
  z-index: 1;
  background: #000000;
  border-radius: 2px;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}

#topbutton:after {
  content: "\2191";
}

一切搞定后,前台刷新就可以看到效果了。

可能你的按钮是一个“↑”符号,如果要变成▲就把\2191修改为\25B2就好了。

4.5/5 - (2 votes)
滚动至顶部