• 欢迎来到小爱博客,一个分享互联网IT技术的网站,喜欢就收藏吧!

教你给wordpress主题添加返回顶部的功能按钮

other 小爱 4周前 (10-03) 170次浏览 已收录 2个评论 扫描二维码

当我们使用wordpress开发主题的时候,通常需要注意一些用户体验小功能,返回顶部的按钮对于成熟的网站来说至关重要,那今天大挖就给大家分享下在开发wordpress主题时,添加返回顶部按钮的功能,且提供出现成的代码供大家直接复制粘贴就可以完成。执行起来超简单,相信每个人都能学会,无论你是否有代码基础,只要你了解wordpress主题的标准构架就可以完成。

一、找到wordpress的样式表文件style.css中添加如下代码

其中,bottom和right属性可以控制按钮图片在右下角的位置,background属性可以修改返回顶部的图片。

二、找到主题的底部文件footer.php在里面添加如下动效代码:

三、添加返回顶部图片按钮的图片

这里需要注意一下,在css里面有写明图片的位置在images/top02.png,即images文件夹内。大家可以根据具体的情况进行位置调整。


小爱博客 , 版权所有
转载请注明原文链接:教你给wordpress主题添加返回顶部的功能按钮
喜欢 (19)
【你的支持, 我的动力】
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 鼠标点击的天女散花 看着头疼。 :grin:   UP功能 大多数主题都自带了。
    八点半博客2020-10-03 18:37 回复