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

您想在 WordPress 中创建粘性浮动页脚栏吗？多年来，我们一直在网站上使用浮动页脚栏，因为它可以帮助我们降低跳出率并增加用户查看的页面。很多人问我们如何创建一个类似的浮动栏，所以就在这里。在本文中，我们将向您展示如何在 WordPress 中创建粘性浮动页脚栏。

什么是浮动页脚栏？

粘性浮动页脚栏可让您向用户突出显示重要内容。该栏始终对用户可见，因此他们更有可能点击它并发现更多有用的内容。

您可以使用浮动页脚栏来：

为其他博客文章带来更多点击
建立您的电子邮件列表
关注特别优惠/促销

在本文中，我们将向您展示两种在 WordPress 网站上添加粘性浮动页脚栏的方法。一种是使用插件，另一种是我们在 WPBeginner 上使用的代码方法。您可以选择您认为更容易使用的一个。

方法1：在WordPress中手动创建粘性浮动页脚栏

此方法需要您在 WordPress 文件中添加代码。如果您不熟悉添加代码，请查看我们的指南，了解如何将网页中的片段粘贴到 WordPress 中。

首先，您需要使用cPanel 中的FTP 客户端或文件管理器连接到您的 WordPress 站点。

在 FTP 客户端中，您需要在 WordPress 主题文件夹中找到该footer.php文件并将其下载到桌面。它将位于这样的路径：

/wp-content/themes/your-theme-folder/

接下来，您需要在记事本等纯文本编辑器中打开 footer.php 文件，并在标记之前添加以下代码</body>。

12345678910 <divclass="fixedbar"><divclass="boxfloat"><ulid="tips"><li><ahref="https://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li><li><ahref="http://www.wordpress.org/">WordPress.org is the Second Item</a></li></ul></div></div>

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

您可以根据需要添加任意数量的列表项。我们将向您展示如何在每次页面加载时随机旋转它们。

下一步是添加CSS样式。

您可以将 CSS 添加到 WordPress 主题style.css文件或使用简单自定义 CSS插件。

123456789101112131415161718192021222324252627282930313233343536373839404142434445 /*WPBeginner Footer Bar*/.fixedbar {background: #000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px00; opacity: 0.95; font-weight: bold;}.boxfloat {text-align:center; width:920px; margin:0auto;}#tips, #tips li {margin:0; padding:0; list-style:none}#tips {width:920px; font-size:20px; line-height:120%;}#tips li {padding: 15px0; display:none;}#tips li a{color: #fff;}#tips li a:hover {text-decoration: none;}

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

添加 CSS 后，您可能无法在网站上看到更改。这是因为我们已将列表中的项目的显示设置为无。

接下来，我们将使用 jQuery 在每次页面加载时随机显示列表中的一项。

您需要在计算机上打开纯文本编辑器（例如记事本）并将以下代码添加到空白文件中：

1234567891011 (function($) {this.randomtip = function(){ varlength = $("#tips li").length; varran = Math.floor(Math.random()*length) + 1; $("#tips li:nth-child("+ ran + ")").show();};$(document).ready(function(){ randomtip();});})( jQuery );

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

完成后，您需要将此文件另存为 floatbar.js 在桌面上。

现在打开您的 FTP 客户端并连接到您的 Web 服务器。转到您的主题文件夹并找到 js 文件夹。它会是这样的路径：

/wp-content/themes/your-theme-folder/js

如果你的主题目录中没有js文件夹，那么你需要创建一个。

现在您需要将之前创建的 floatbar.js 文件上传到刚刚创建的 js 文件夹。

下一步是将 JavaScript 文件排入（加载）您的 WordPress 主题中。

将此代码粘贴到主题的functions.php文件或特定于站点的插件中。

1234	`functionwpb_floating_bar() {` `wp_enqueue_script(` `'wpb-footerbar', get_stylesheet_directory_uri() .` `'/js/floatingbar.js',` `array(` `'jquery') );}add_action(` `'wp_enqueue_scripts',` `'wpb_floating_bar');`