如何在 WordPress 中创建“粘性”浮动页脚栏 - Javascript

在 WordPress 中，有时候我们需要在网站底部添加一些浮动的内容，比如社交媒体链接、联系方式等。而这些内容通常需要一直展示在用户页面底部，不过当用户向下滚动页面时，这些内容又不能遮挡到页面的其余部分。这时候我们可以使用“粘性”浮动页脚栏，它能让这些内容一直保持在页面底部，当用户向下滚动页面时，页脚栏也会随之滚动。

这篇文章将会教你如何在 WordPress 中创建一个“粘性”浮动页脚栏，使用的是 JavaScript 技术。

准备工作

在开始之前，需要准备一些文件和工具：

1. 一个 WordPress 网站，我们假设你已经搭建好了，知道如何编辑 WordPress 主题文件；
2. 一个文本编辑器，比如 Notepad++、Sublime Text；
3. 一些基本的 HTML、CSS、JavaScript 知识。

步骤

1. 创建 HTML 结构

首先，我们需要创建一个 HTML 结构，用来包含浮动页脚栏的内容。我们假定你已经创建好了 HTML 内容，样式也已经设置好了。

<footer id="sticky-footer">
   <!-- Your content goes here -->
</footer>

这将是我们的浮动页脚栏 HTML 代码，它拥有一个 id 值“sticky-footer”，这个值将会在 JavaScript 中使用到。

2. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码，用来实现“粘性”浮动页脚栏的效果。这里我提供一个简单的实现方法：

<script type="text/javascript">
   jQuery(document).ready(function($){
       var footerHeight = $('#sticky-footer').outerHeight();
       $('body').css('padding-bottom', footerHeight);
       $('#sticky-footer').css('position', 'fixed').css('bottom', 0).css('left', 0).css('right', 0);
   });
</script>

代码解释：

• 首先，我们使用 jQuery 选择器获取到浮动页脚栏的高度，然后设置 body 的 padding-bottom 为这个高度；
• 然后，我们使用 CSS 样式设置浮动页脚栏的位置，让它固定在页面底部。

3. 在 WordPress 主题中添加代码

完成了 JavaScript 代码的编写之后，我们需要在 WordPress 主题中添加这段代码。你可以将代码添加到 functions.php 文件的底部。不过，最好的做法是创建一个新的 js 文件，在其中保存 JavaScript 代码，然后在主题的 functions.php 文件中引入这个 js 文件：

function custom_scripts() {
  wp_enqueue_script( 'sticky_footer', get_stylesheet_directory_uri() . '/js/sticky_footer.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

这段代码将会把“sticky_footer.js”文件添加到 WordPress 主题中，并在网站底部的每个页面中加载。

结论

完成了上述步骤之后，你就能在 WordPress 中创建一个“粘性”浮动页脚栏。它将会一直固定在页面底部，不会随着用户向下滚动而移动。当用户在页面底部时，浮动页脚栏将会完整地展示出来。

码片段：

```javascript
   jQuery(document).ready(function($){
       var footerHeight = $('#sticky-footer').outerHeight();
       $('body').css('padding-bottom', footerHeight);
       $('#sticky-footer').css('position', 'fixed').css('bottom', 0).css('left', 0).css('right', 0);
   });

function custom_scripts() {
  wp_enqueue_script( 'sticky_footer', get_stylesheet_directory_uri() . '/js/sticky_footer.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );