【综合原创】只用代码让WordPress添加《回到页首》功能


您如果仔细留意,您可能会发现,我好像不太喜欢安装插件。

这是真的。近几年来,尝试了很多不同的博客和论坛系统平台,请教了江湖大哥,他们都异口同声地告诉我:能够不安装插件,就不要安装。因为,插件会拖慢加载页面的时间。现代人没有耐心等待。当然,我自己也测试,发现结果就如江湖大哥所言,越多插件,速度越慢。

大哥的话要听,尤其是宝贵的经验之谈。因此,在处理WordPress的时候,也时时刻刻牢牢记住,非不得已,不然宁可舍弃插件,也让加载的速度快些。

我们在阅读文章时,尤其是比较长篇的文章,阅读到页尾,如果要返回页首,就要花些时间和精力,让鼠标代劳,一直滚动,有时也很烦恼。如果有个一个返回页首的按钮,一键到位,那该多好。

所以,这个返回页首的按钮,还是要安装的。WordPress的这类插件,琳琅满目,不胜枚举。但是,其实这类功能,是不必安装插件的。只要通过几段代码就可以了。这是江湖大哥告诉我的。我说:那就给我几段代码。他说:自己去找。

于是,我遍寻和遍读中西文章,做了比较和测试。当然,测试是痛苦的,因为测试失败,就要赶快上传备份,让WordPress死去又活回来。哈哈,折腾了一些时间,这个最好,就在这里介绍一位西洋江湖大哥的代码——三段代码就解决了这个问题。

根据这位西洋大哥——是神级人物。他说,要实现这个功能,可以通过页首(wp_head)或者页尾(wp_footer)来调用。这里的代码,他是通过页尾来调用,我测试没有发现什么问题,也就不改了,原文照搬。

我稍微修改了一下文字Back To Top 显示的位置,同时添加了中文“回到页首”(您可以自己决定和修改,或者删除那几个英文的字眼)。把这三段代码,添加在 functions.php。

在functions.php加上一段代码。

以管理员身份,登录您的WordPress,进入控制面板中心(原译为仪表盘),进入主题选项,选择编辑。

右边的面板会出现您目前启用的主题,一般上是替您打开了style.css这个文件。我们不必这个文件,我们要修改的是functions.php文件。在编辑器的右边,您可以看到一大串的文件名。仔细查找,找到 functions.php后,点按一下这个文件。这时,编辑器应该显示这个文嘉的代码。您可以小心的确定一下,在您的编辑器的上头,应该可以看到functions.php这个文件的名称。确定了之后,把鼠标指针安置在这个文件的最尾端。注意:必须在最后一行文字之后空一行,再把下面这段代码复制了粘贴在functions.php里:

[cc lang=”php” nowrap=”false”]

/* 添加back to top的功能 开始代码 */
add_action( ‘wp_footer’, ‘back_to_top’ );
function back_to_top() {
echo ‘回到页首 Back to Top‘;
}

add_action( ‘wp_head’, ‘back_to_top_style’ );
function back_to_top_style() {
echo ‘

‘;
}

add_action( ‘wp_footer’, ‘back_to_top_script’ );
function back_to_top_script() {
echo ‘‘;
}

/* 添加back to top的功能 结束代码 */

[/cc]

上面的代码里:

right: 30px; //文字显示右边距
bottom: 30px; //文字显示底部边距

right是右边距离30px的地方,bottom是底部距离30px的地方,显示“返回页首”的字眼。您可以根据个人需要和喜好修改。

注意粘贴的地方,排列应该是这样的:

1)这是原来functions.php文件的最后一行
2)按回车键空一行
3)把上面的那段代码粘贴在这里

确定粘贴在正确的位置之后,在编辑器的下面,点按保存文件。

回到您的博客站页面,往下滚动,您应该发现《回到页首 Back To Top》按钮已经显示在页面上了。

工作完毕。收工。

就是这么简单。祝您成功。

这个《Wordpress初学记》系列,是我折腾学习Wordpress的学习笔记,是记录我自己的学习历程。资料都是从网络上或者书籍中,大量阅读之后,通过“临床”折腾测试后得到的结果。我是个电脑技术的门外汉,不会写代码更看不懂代码。因此,千万不要问我问题,或者问我为什么,我是无法回答的。文中即使有错误,那也是我的造化,错有错着,竟然可以瞒骗程序过关。

注意:

修改任何文件或者代码,记得事前必须备份。

一般上,我们修改任何文件或者代码,都必须是在主题的子模板(child theme)上修改。不然,主题版本一晋级,就会把您这些苦心修改的部分全部覆盖——没了!

“子模板(child theme)”?知道是什么吧?!

设立网站选择好主题之后,第一件事儿,就是添加自己的“子模板(child theme)”。有任何修改或者添加,都应该修改或者添加在“子模板(child theme)”上。切记。

 

 

资料来自:代码原作者:Tom McFarlin
Create Back To Top Button For WordPress

 

Print Friendly, PDF & Email

有问题或评论?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

文章月度归档