如何在WordPress中创建一个固定浮动的Footer bar

你想在 WordPress 中创建一个粘性浮动页脚栏吗？我们已经在我们的网站上使用浮动页脚栏多年，因为它可以帮助我们减少跳出率和增加用户浏览的页面。许多人问我们如何创建一个类似的浮动条，所以在这里。在本文中，我们将向您展示如何在 WordPress 中创建一个粘性浮动页脚条。

什么是浮动页脚?

一个粘性浮动页脚条允许您突出显示您的重要内容给用户。此栏仍然可以让用户随时看到，所以他们更有可能点击它并发现更多有用的内容。

您可以使用浮动页脚栏：

吸引更多点击到其他博文
构建您的电子邮件列表
引起关注特价/销售

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

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

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

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

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

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

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

<div class="fixedBar">
<div class="boxfloat">

<ul id="tips">
<li><a href="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>
<li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>
</ul>

</div>
</div>

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

下一步是添加 CSS 样式。

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

/*WPBeginner Footer Bar*/

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

添加 CSS 后，您可能无法看到您网站上的更改。这是因为我们将列表中的项目的显示设置为 none 。接下来，我们将使用 jQuery 从每个页面加载的列表中随机显示一个项目。您需要在计算机上打开纯文本编辑器（如记事本），并将此代码添加到空白文件中：

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

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

完成后，您需要将该文件保存为桌面上的 floatingbar.js 。现在打开您的 FTP 客户端并连接到您的 Web 服务器。去你的主题文件夹，找到 js 文件夹。这将是一条路：

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

如果您的主题目录中没有 js 文件夹，则需要创建一个。现在，您需要将您之前创建的 floatbar.js 文件上传到刚刚创建的 js 文件夹。下一步是在 WordPress 主题中排列（加载）JavaScript 文件。

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

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

就这样，您现在可以访问您的网站，查看浮动页脚栏。重新加载页面几次，以便从列表中随机显示不同的项目。使用此方法的好处是，您可以随意旋转浮动页脚栏中的多个链接，就像我们正在做的那样。但是难度在于您需要添加代码。此外，您不能将此浮动条用于其他事情，而不必进行太多的 CSS 自定义。

方法 2：使用 OptinMontser 在 WordPress 中添加浮动页脚条

OptinMonster 是一款受欢迎的线上代码插件，适用于所有网站。它可以帮助您将网站访问者转换为订阅者和客户。 OptinMonster 的其中一个功能是浮动页眉和页脚条，您可以使用它来显示电子邮件选择窗体以及促进单链接/优惠。

使用这种方法的好处是：

易于安装（无代码）
您可以在您网站的不同页面/类别上显示自定义浮动条。
您可以使用它来构建您的电子邮件列表以及促销优惠。

唯一的缺点是 OptinMonster 是付费服务。但是，您可以使用我们的 OptinMonster Coupon：WPB10，以获得任何 OptinMonster 计划的 10％折扣。购买 OptinMonster（Plus 或 Pro 计划）后，您可以在您的网站上使用 OptinMonster WordPress API 插件。有关详细信息，请参阅我们关于如何安装 WordPress 插件的逐步指南。这个插件只是您的 WordPress 站点和 OptinMonster 之间的连接器。

激活后，该插件将在您的 WordPress 管理栏中添加一个标有 OptinMonster 的新菜单项。点击它将带您到插件的设置页面。

您将被要求提供您的 OptinMonster API 用户名和密钥。您可以从 OptinMonster 帐户获取这些密钥。

将密钥复制并粘贴到插件设置中，然后单击 “连接到 OptinMonster” 按钮。该插件现在将您的 WordPress 网站连接到您的 OptinMonster 帐户。

接下来，您需要点击 “创建新的 Optin” 按钮。

这将带您进入 OptinMonster 网站上的 “创建新 Optin” 页面。首先，您需要为您的 Optin Campaign 提供一个标题，并选择一个将使用此选项的网站。如果您的网站未列出，请点击 “添加新网站” 链接。

接下来，您可以单击 “选择您的选择类型” 下的 “浮动” 栏，使用可用作浮动条的模板。您可以根据自己的喜好自定义所有这些模板。选择一个最接近你所想的东西。一旦您选择了一个模板，OptinMonster 就会启动他们的设计定制工具。它是一个点击式构建器，您可以在其中配置您的选择的外观和设置。

完成配置外观的 optin 后，请确保点击保存按钮。虽然这些称为 optins，但并不总是必须的。您可以使用是/否功能添加按钮来查看博客文章或声明特别折扣。当您首次创建浮动条时，默认为暂停。完成配置后，将鼠标悬停在顶部菜单中的状态栏中，然后选择启动广告系列。您的浮动条现在已准备好添加到您的 WordPress 网站。返回到 WordPress 网站的管理区域，并访问 OptinMonster»Optins 。你会看到你的选择列在这里。如果没有看到，请点击刷新 Optins 按钮，插件将显示。

点击 “编辑输出设置” 链接继续。