WordPress中添加置顶功能

现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发框架 > WordPress > 正文

RSS

小中大

上篇下篇

WordPress中添加置顶功能

2015年08月15日 11:58:40 ⁄ WordPress ⁄ 共 1808字 ⁄ 暂无评论 ⁄ 被围观 2,558次

现在很多网站或者博客中，都有回到顶部的功能，这样可以让浏览者很方便的回到顶部菜单，选择自己想浏览的其他信息。

当然，刚安装完 WordPress 后是没有该功能的，如何添加置顶按钮呢？这里就以本博客用的 WordPress 自带的主题“Twenty Fourteen”来说明，下面就来说说添加的详细步骤。

第一步，上传资源，包括置顶图片和需要的js文件。

把置顶图片上传到 themes/twentyfourteen/images/ 下，把所需 js 文件上传到 themes/twentyfourteen/js/ 下，资源包括：top-move.png、easing.js、jquery.cslider.js、jquery.min.js 和 move-top.js。如果手头没有的朋友可以在本文最后下载压缩包即可。

第二步，引用上传的 js 资源。

打开 themes/twentyfourteen/header.php 文件，在 <head></head> 中添加下面代码：

Code View Print

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/move-top.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/easing.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.cslider.js"></script>

第三步，在模板中引用上传的图片资源。

打开 themes/twentyfourteen/footer.php 文件，在</footer> 标签之间添加如下代码：

Code View Print

<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop',
containerHoverID: 'toTopHover',
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>