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

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

Floating Footer Bar

什么是浮动页脚栏?

粘性浮动页脚栏允许您突出显示您的重要内容给用户。用户始终可以看到此栏,因此他们更有可能点击它并发现更多有用的内容。

WPBeginner Footer Bar

您可以使用浮动页脚栏:

  • 为其他博客帖子提供更多点击次数
  • 构建您的电子邮件列表
  • 关注特别优惠/销售

在本文中,我们将向您展示在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的新菜单项。单击它将转到插件的设置页面。

Connect your WordPress site to OptinMonster

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

OptinMonster API keys

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

接下来,您需要点击“创建新选项”按钮。

Create a new optin

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

首先,您需要为您的Optin广告系列提供标题,然后选择您将使用此optin的网站。如果您的网站未列出,请点击“添加新网站”链接。

Optin Settings

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

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

只要您选择模板,OptinMonster就会启动他们的设计定制器。它是一个点击式构建器,您可以在其中配置optin的外观和设置。

Optin customizer

配置好optin的外观后,请务必单击“保存”按钮。

虽然这些被称为optins,但它们并不总是必须如此。您可以使用“是/否”功能添加按钮以查看博客帖子或声明特殊折扣。

首次创建浮动栏时,默认情况下它已暂停。

一旦你已完成配置,将鼠标悬停在顶部菜单中的状态栏并选择Start Campaign。

您的浮动栏现在已准备好添加到您的WordPress站点。

返回WordPress网站的管理区域并访问 OptinMonster»Optins 。你会在这里看到你的optin。如果您没有看到它,则单击Refresh Optins按钮,插件将显示它。

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

Optin output settings

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

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

这就是全部,浮动页脚栏optin现在可以在您的WordPress上使用现场。

Floating bar added with OptinMonster

我们希望本文能帮助您为WordPress网站添加浮动页脚栏。您可能还希望看到这些可操作的提示,以增加您的WordPress网站的流量。

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

Floating Footer Bar

什么是浮动页脚栏?

粘性浮动页脚栏允许您突出显示您的重要内容给用户。用户始终可以看到此栏,因此他们更有可能点击它并发现更多有用的内容。

WPBeginner Footer Bar

您可以使用浮动页脚栏:

  • 为其他博客帖子提供更多点击次数
  • 构建您的电子邮件列表
  • 关注特别优惠/销售

在本文中,我们将向您展示在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的新菜单项。单击它将转到插件的设置页面。

Connect your WordPress site to OptinMonster

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

OptinMonster API keys

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

接下来,您需要点击“创建新选项”按钮。

Create a new optin

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

首先,您需要为您的Optin广告系列提供标题,然后选择您将使用此optin的网站。如果您的网站未列出,请点击“添加新网站”链接。

Optin Settings

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

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

只要您选择模板,OptinMonster就会启动他们的设计定制器。它是一个点击式构建器,您可以在其中配置optin的外观和设置。

Optin customizer

配置好optin的外观后,请务必单击“保存”按钮。

虽然这些被称为optins,但它们并不总是必须如此。您可以使用“是/否”功能添加按钮以查看博客帖子或声明特殊折扣。

首次创建浮动栏时,默认情况下它已暂停。

一旦你已完成配置,将鼠标悬停在顶部菜单中的状态栏并选择Start Campaign。

您的浮动栏现在已准备好添加到您的WordPress站点。

返回WordPress网站的管理区域并访问 OptinMonster»Optins 。你会在这里看到你的optin。如果您没有看到它,则单击Refresh Optins按钮,插件将显示它。

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

Optin output settings

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

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

这就是全部,浮动页脚栏optin现在可以在您的WordPress上使用现场。

Floating bar added with OptinMonster

我们希望本文能帮助您为WordPress网站添加浮动页脚栏。您可能还希望看到这些可操作的提示,以增加您的WordPress网站的流量。

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-10-05 14:30:20
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: