WordPress中添加置顶功能
2015年08月15日 11:58:40 WordPress ⁄ 共 1808字 暂无评论 ⁄ 被围观 2,355次

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

当然,刚安装完 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   ViewPrint
  1. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>
  2. <script src="<?php echo get_template_directory_uri(); ?>/js/move-top.js"></script>
  3. <script src="<?php echo get_template_directory_uri(); ?>/js/easing.js"></script>
  4. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.cslider.js"></script>

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

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

Code   ViewPrint
  1. <!-- scroll_top_btn -->
  2. <script type="text/javascript">
  3.     $(document).ready(function() {
  4.         var defaults = {
  5.             containerID: 'toTop',
  6.             containerHoverID: 'toTopHover',
  7.             scrollSpeed: 1200,
  8.             easingType: 'linear'
  9.         };
  10.         $().UItoTop({ easingType: 'easeOutQuart' });
  11.     });
  12. </script>
  13. <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
  14. <!--end scroll_top_btn -->

第四步,修改主题样式文件。

打开 themes/twentyfourteen/style.css,在最后添加如下样式:

Code   ViewPrint
  1. /*****toTop*****/
  2. #toTop {
  3.     displaynone;
  4.     text-decorationnone;
  5.     positionfixed;
  6.     bottombottom10px;
  7.     rightright10px;
  8.     overflowhidden;
  9.     width44px;
  10.     height:44px;
  11.     bordernone;
  12.     text-indent: 100%;
  13.     backgroundurl(images/top-move.png) no-repeat rightright top;
  14. }
  15. /*****toTop*****/

第五步,访问博客查看是否添加成功。

访问博客,滚动博客页面,可以看到右下角会出现添加的置顶按钮。如果没有效果,清理浏览器的缓存文件,再次尝试。

资源下载:百度云共享下载 | 360云盘下载(提取码:fb0a)

Good Luck!

给我留言

留言无头像?