当你网站上经常出现长篇大论的时候,就有必要添加一个返回顶部的按钮,毕竟建网站需要考虑到用户体验。本文就介绍下如何给一个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个图标,你可以修改图标颜色,但是不能自定义图标。
插件下载地址: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的按钮效果如下图:
插件下载地址:https://wordpress.org/plugins/simple-scroll-to-top-button/
Scroll Top
Scroll Top非常简单,和To Top一样,支持自定义css样式。
功能包括:
无需设置。
自定义目标。
无限的颜色。
视网膜支持(图标字体)。
选择文字或图标字体。
可定制的文字。
位置切换器(左或右)。
改变你喜欢的动画。
自定义CSS区域
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)
暂无评论内容