您是否要在WordPress中创建粘性浮动页脚栏？我们使用网站上的浮动页脚栏已有很多年了，因为它可以帮助我们降低跳出率并增加用户浏览的页面。你们中的许多人都问过我们如何创建类似的浮动条，就是这样。在本文中，我们将向您展示如何在WordPress中创建粘性浮动页脚栏。

什么是浮动页脚栏？

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

您可以使用浮动页脚栏执行以下操作：

• 吸引更多点击到其他博客文章
• 建立您的电子邮件清单
• 注意特价/销售

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

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

此方法要求您在WordPress文件中添加代码。如果您不熟悉添加代码，请查看我们的指南，该指南介绍了如何将Web中的摘要粘贴到WordPress中。

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

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

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

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

<div class="fixedbar">
<div class="boxfloat">

<ul id="tips">
<li><a href="https://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文件中，也可以使用Simple Custom 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后，您可能看不到网站上的更改。这是因为我们将列表中项目的显示设置为“无”。

接下来，我们将使用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 );

完成后，需要将该文件另存为桌面上的floatbar.js。

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

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

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

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

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

将此代码粘贴到主题的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优惠券：WPB10获得任何OptinMonster计划的10％折扣。

购买OptinMonster（Plus或Pro计划）后，您可以在网站上使用OptinMonster WordPress API插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

该插件仅充当WordPress网站和OptinMonster之间的连接器。

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

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

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

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

这将带您进入OptinMonster网站上的“创建新的Optin”页面。

首先，您需要为Optin Campaign提供一个标题，然后选择一个将使用此optin的网站。如果您的网站未列出，请单击“添加新网站”链接。

接下来，您可以单击“选择您的optin类型”下方的浮动栏，以使用可用作浮动栏的模板。

您可以根据自己的喜好自定义所有这些模板。选择最接近您所想的那个。

选择模板后，OptinMonster将启动其设计定制器。这是一个点击生成器，您可以在其中配置optin的外观和设置。

配置完optin的外观后，请确保单击“保存”按钮。

虽然这些被称为optins，但并非总是如此。您可以使用“是/否”功能添加按钮来查看博客文章或享受特别折扣。

首次创建浮动条时，默认情况下已暂停。

完成配置后，将鼠标悬停在顶部菜单的状态栏中，然后选择“启动广告系列”。

您的浮动条现在准备添加到WordPress网站。

返回WordPress网站的管理区域，然后访问OptinMonster»Optins。您将在此处看到您的optin。如果看不到，请单击“刷新选项”按钮，插件将显示它。

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

在下一页上，选中“在站点上启用optin”选项旁边的框，然后单击保存设置。

您还可以使用“高级”选项仅在特定帖子，页面，类别和其他区域上显示浮动栏。

仅此而已，浮动页脚栏选项已在您的WordPress网站上发布。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！