如何在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>
标记之前添加以下代码。
<div > <div > <ul > <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
文件或使用简单自定义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 );
完成后,您需要将此文件另存为floatingbar.js on你的桌面。
现在打开您的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的一个功能是浮动页眉和页脚栏,您可以使用它来显示电子邮件optin表单以及促进单个链接/优惠。
使用此方法的好处是:
- 易于安装(无代码)
- 您可以在网站的不同页面/类别上显示自定义浮动条。
- 您可以使用它来构建您的电子邮件列表以及促进优惠。
唯一的缺点是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的网站。如果您的网站未列出,请点击“添加新网站”链接。
接下来,您可以单击“选择您的optin类型”下的浮动栏,以使用可用作浮动栏的模板。
您可以根据自己的喜好自定义所有这些模板。选择与您的想法最接近的那个。
只要您选择模板,OptinMonster就会启动他们的设计定制器。它是一个点击式构建器,您可以在其中配置optin的外观和设置。
配置好optin的外观后,请务必单击“保存”按钮。
虽然这些被称为optins,但它们并不总是必须如此。您可以使用“是/否”功能添加按钮以查看博客帖子或声明特殊折扣。
首次创建浮动栏时,默认情况下它已暂停。
一旦你已完成配置,将鼠标悬停在顶部菜单中的状态栏并选择Start Campaign。
您的浮动栏现在已准备好添加到您的WordPress站点。
返回WordPress网站的管理区域并访问 OptinMonster»Optins 。你会在这里看到你的optin。如果您没有看到它,则单击Refresh Optins按钮,插件将显示它。
单击“编辑输出设置”链接继续。
在下一页上,选中“在网站上启用optin”选项旁边的框,然后单击保存设置。
您还可以使用“高级”选项仅在特定帖子,页面,类别和其他区域显示浮动条。
这就是全部,浮动页脚栏optin现在可以在您的WordPress上使用现场。
我们希望本文能帮助您为WordPress网站添加浮动页脚栏。您可能还希望看到这些可操作的提示,以增加您的WordPress网站的流量。
你想在WordPress中创建一个粘性浮动页脚栏吗?我们多年来一直在我们的网站上使用浮动页脚栏,因为它可以帮助我们降低跳出率并增加用户查看的页面。很多人问我们如何创建一个类似的浮动条,所以在这里。在本文中,我们将向您展示如何在WordPress中创建粘性浮动页脚栏。
什么是浮动页脚栏?
粘性浮动页脚栏允许您突出显示您的重要内容给用户。用户始终可以看到此栏,因此他们更有可能点击它并发现更多有用的内容。
您可以使用浮动页脚栏:
- 为其他博客帖子提供更多点击次数
- 构建您的电子邮件列表
- 关注特别优惠/销售
在本文中,我们将向您展示在WordPress站点上添加粘性浮动页脚栏的两种方法。一个使用插件,而另一个是我们在WPBeginner上使用的代码方法。您可以选择更容易使用的那个。
方法1:在WordPress中手动创建粘滞浮动页脚栏
此方法要求您在WordPress文件中添加代码。如果您不熟悉添加代码,请查看我们的指南,了解如何将网页上的代码段粘贴到WordPress中。
首先,您需要使用cPanel中的FTP客户端或文件管理器连接到您的WordPress站点。
在您的FTP客户端中,您需要在WordPress主题文件夹中找到 footer.php
文件并将其下载到您的桌面。它将位于如下路径:
/ wp-content / themes / your-theme-folder /
接下来,您需要以纯文本格式打开footer.php文件编辑器如记事本,并在&lt; / body&gt;
标记之前添加以下代码。
<div > <div > <ul > <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
文件或使用简单自定义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 );
完成后,您需要将此文件另存为floatingbar.js on你的桌面。
现在打开您的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的一个功能是浮动页眉和页脚栏,您可以使用它来显示电子邮件optin表单以及促进单个链接/优惠。
使用此方法的好处是:
- 易于安装(无代码)
- 您可以在网站的不同页面/类别上显示自定义浮动条。
- 您可以使用它来构建您的电子邮件列表以及促进优惠。
唯一的缺点是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的网站。如果您的网站未列出,请点击“添加新网站”链接。
接下来,您可以单击“选择您的optin类型”下的浮动栏,以使用可用作浮动栏的模板。
您可以根据自己的喜好自定义所有这些模板。选择与您的想法最接近的那个。
只要您选择模板,OptinMonster就会启动他们的设计定制器。它是一个点击式构建器,您可以在其中配置optin的外观和设置。
配置好optin的外观后,请务必单击“保存”按钮。
虽然这些被称为optins,但它们并不总是必须如此。您可以使用“是/否”功能添加按钮以查看博客帖子或声明特殊折扣。
首次创建浮动栏时,默认情况下它已暂停。
一旦你已完成配置,将鼠标悬停在顶部菜单中的状态栏并选择Start Campaign。
您的浮动栏现在已准备好添加到您的WordPress站点。
返回WordPress网站的管理区域并访问 OptinMonster»Optins 。你会在这里看到你的optin。如果您没有看到它,则单击Refresh Optins按钮,插件将显示它。
单击“编辑输出设置”链接继续。
在下一页上,选中“在网站上启用optin”选项旁边的框,然后单击保存设置。
您还可以使用“高级”选项仅在特定帖子,页面,类别和其他区域显示浮动条。
这就是全部,浮动页脚栏optin现在可以在您的WordPress上使用现场。
我们希望本文能帮助您为WordPress网站添加浮动页脚栏。您可能还希望看到这些可操作的提示,以增加您的WordPress网站的流量。