之前每次听说要嵌入js文件,觉得很头疼,今天发现使用的主题没有backtotop按钮,需要引入外部js文件来实现这一功能,才觉得要硬着头皮上了,也许没想象中难呢。

首先研究了下上次小陈师兄帮ZH站写的404页面文件,因为那次的js文件的功能只需对404单个页面生效,因此js引入代码也只需写在404页面,那这次是需要整站调用js功能,则需要把js代码写在footer或header文件。逻辑清了,步骤如下:

step1

17素材网搜索“返回顶部”代码,找到一款简约轻便的模板。

模板的文件如下:

step2

修改参数。从demo可以看到,按钮的提示文字为中文“返回顶部”,可以把它修改为任意想要提示的文字。我把它修改为“back to top”。

第二个要修改的是要调用的图片位置。根据上传图片文件的位置来修改图片位置。

修改后是这样的:

step3

上传文件。分别把js文件上传到模板的js文件夹,图片文件上传到images文件夹。

step4

添加引用代码。引用js文件代码如下:

<script type="text/javascript" src="/wp-content/themes/fasto/js/jquery-1.4.2.min.js"></script>
<script src="/wp-content/themes/fasto/js/scrolltopcontrol.js"></script>

找到footer.php文件,在body内部添加如下引用代码:

保存后刷新查看效果。