专注国内外云服务器
分享建站技术教程

如何创建WordPress网站浮动固定栏(页眉)

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

导航是具有出色设计的优质WordPress网站的重要方面。因此,值得花一些时间来考虑您网站的访问者如何通过您的导航与您的页面进行交互。一种方法是使用浮动固定栏(固定页眉)。

这是您网站的header部分在用户滚动时保持在屏幕顶部的位置。这提供了无数的好处,但主要优点之一是您的导航元素保持在用户的视线范围内,无论它们在页面上的什么位置。仅出于这个原因,浮动固定栏是一个受欢迎的用户界面 (UI) 元素。

在本教程中,我们将向您展示如何在WordPress中创建浮动固定栏。它将涵盖很多方面,例如网络上的示例、可以帮助您的WordPress插件以及如何开发自己的浮动固定栏的指南。不过,首先让我们更详细地讨论一下什么是浮动固定栏。

  1. 什么是浮动固定栏
  2. 网络上的浮动固定栏示例
  3. 为什么使用浮动固定栏
  4. 浮动固定栏插件推荐
  5. 如何在WordPress中创建浮动固定栏
  6. 浮动固定栏使用技巧

什么是浮动固定栏

Kotaku网站的浮动固定栏

您网站的header页眉部分有点像您网站的信息台。这将是大多数用户首先会发现的东西,并且总是会在他们检查以找出一些关键信息并执行某些操作的地方:

总体而言,您的header是用户的接触点。您会发现它通常是F形阅读模式的“条形图” ,因此它在直观的层面上引起了用户的注意。

您可能已经知道了什么是浮动固定栏,即使在直观意义上也是如此。当您滚动时,它是您网站的页眉部分“固定”到屏幕顶部的位置。与在滚动时保持原位并消失的静态页眉相比,固定页眉是始终可见的元素。

虽然浮动固定栏的典型方法是将其静态版本固定到屏幕顶部,但有几种不同的方法可以使其更可用、屏幕效率更高和动态。接下来,我们将看一些现实世界的例子。

网络上的浮动固定栏示例

您会在整个网络上找到浮动固定栏,最好检查一些以了解您可以实现的范围。周围最基本的例子之一是来自Hammerhead。该站点使用“弹出菜单”和浮动固定栏,并且很简单:它致力于在其静态布局中固定在页面顶部:

Hammerhead网站上的浮动固定栏

另一个简单的实现来自Kin。这使用了一个典型的浮动固定栏,但这次有一些很酷的设计元素。

您会注意到对比度会根据您滚动浏览的网站部分而变化,并且还有一些不错的过渡效果:

Kin网站上的浮动固定栏

这一次,当您向下滚动页面时,您会看到页眉消失。但是,当您向上滚动时,它会重新出现——您可以将其称为“部分持久页眉”。

这里的前提是向下滚动意味着您将时间投入到页面本身,因此可能不需要导航、登录页面或前往其他地方。但是,在您向上滚动时,您更有可能想要前往网站上的另一个页面。在这里,将显示浮动固定栏以节省时间。

正是这些小小的用户体验 (UX) 触动使网站访问者想要返回。对于您自己的固定栏设计,您需要考虑如何制作一个专注于访问者需求的UX和UI。

为什么你应该为你的网站使用浮动固定栏

许多网站都使用浮动固定栏,并且有很多充分的理由说明这种情况。它们可能是您整体网站体验的关键部分,并且对您的用户体验和用户界面有很大影响。

鉴于您将包含在header中的元素是用户始终想要访问的元素,因此始终显示它们是有意义的。对于小屏幕设备和格式尤其如此。

虽然当视口空间非常宝贵时,拥有一个“永远在线”的页眉似乎违反直觉,但这只是一个小小的牺牲。真正的好处是减少了移动用户滚动的理由——这在较小的设备上是必需的。如果您无需滚动即可提供站点导航,则用户可以更轻松地在您的站点中移动。

浮动固定栏的优点和缺点

我们介绍了浮动固定栏的一些优点,所以让我们快速总结一下:

但是,浮动固定栏并不是增加用户体验的灵丹妙药,使用它们也有一些缺点:

但是,如果您考虑您的设计选择、用户需求和站点目标,您可以减轻或消除所有这些缺点,同时保留优点。一种方法是通过WordPress插件。

浮动固定栏插件推荐

在接下来的几节中,我们将展示一些领先的 WordPress浮动固定栏插件。稍后,我们将讨论这种解决方案是否适合您。无论如何,插件可以帮助您实现功能而无需代码,如果您的主题不包含它,这很有价值。

更重要的是,您可以通过插件利用专家的设计和开发经验。开发人员将为您做出一些更重要的技术选择,并将其包装在一个直观且易于使用的UI中。

1. Sticky Menu & Sticky Header

Webfactory的Sticky Menu & Sticky Header插件是一个不错的首选,因为它具有丰富的功能、有用的灵活性和预算友好的价格。

Sticky Menu & Sticky Header插件

这里的吸引力在于,您可以让网站上的任何元素都贴在屏幕上。这可能在很多方面都有帮助,但这意味着实现固定页眉是轻而易举的事。

该插件还附带了一系列强大的选项来帮助您实现顶部固定栏:

Sticky Menu & Sticky Header还包括调试模式,可帮助您修复任何“非固定”元素。动态模式还有助于解决响应式设计的问题。

最好的消息是Sticky Menu & Sticky Header可以免费下载和使用。更重要的是,还有一个高级版本可以带走更多您需要的技术知识。

使用免费版本的插件,您需要知道元素的选择器才能在选项中指定它。然而,高级版(每年49-199美元)提供了一个视觉元素选择器来绕过这一点。

2. Options for Twenty Twenty-One

虽然我们不会为大多数以客户为中心的网站推荐WordPress默认主题,但它们确实有足够的资源用于博客和类似类型的网站。

在我们看来,Twenty Twenty-One是突出的默认主题之一,但缺乏浮动固定栏功能。如果您想添加此功能,Options for Twenty Twenty-One插件的选项可以满足您的需求。

Options for Twenty Twenty-One

此版本的插件是众多插件之一。每个最近的默认主题都有一个版本,但还没有一个 Twenty Twenty-Two的版本。无论如何,插件的核心功能提供了很多额外的功能:

您的导航、内容、页脚和页眉还有许多其他选项。对于后者,您可以将其隐藏,使其全宽,添加背景图像和颜色以及许多其他更改。

虽然核心插件是免费的,但您需要高级升级(25-50美元)才能访问浮动固定栏选项。这使您可以从WordPress定制器调整移动和桌面header的设置:

WordPress定制器显示固定页眉选项

给定这个名字,你不应该期望这个插件可以使用除Twenty Twenty-One以外的任何其他主题(或者你选择的任何“风格”。)但是,如果你确实使用这个默认主题并且不想编码,它将是帮助您向网站添加固定页眉的理想选择。

3. 浮动通知栏、滚动固定菜单和任何主题的固定页眉 – myStickymenu

这是一个将牌摆在桌面上的插件。Premio的myStickymenu插件几乎提供了您想要包含在您自己的固定页眉中的所有内容,并包含大量功能。

myStickymenu插件

它在WordPress插件目录上的正面评价数量惊人——799条五星级评价,平均为4.9。部分原因在于您可以使用的综合功能集:

您还可以使用许多自定义选项来使您的固定栏按您的意愿工作。例如,您可以选择制作部分持久的页眉、更改背景颜色、排版选择等简单方面。

此外,由于您可以通过不同的方式呈现固定页眉(例如菜单和欢迎栏选项),您可以选择它们在您的网站上的显示方式和位置。

尽管 myStickymenu的免费版本可能足以满足您的需求,但还有一个高级版本(每年25-99美元)。这提供了更多方法来禁用您在特定条件下的固定页眉、倒数计时器、添加多个欢迎栏的能力,以及更多的自定义选项。

如何在WordPress中创建固定栏

在本教程的其余部分,我们将向您展示如何在WordPress中创建浮动固定栏。您可以在此处采用几种方法,我们将介绍这两种方法。但是,我们的第一步将帮助您做出决定。

从那里,您将使用您喜欢的方法处理您自己的置顶header,然后应用我们的一些技巧,以使您的方法在未来更加高效和可用。

1.决定如何创建固定页眉

WordPress对各种用户如此灵活的一个原因是其插件生态系统和开源可扩展性。因此,您可以选择现成的解决方案或“自己动手”。

您的首要任务是决定是否要使用插件或挖掘代码来实现您的固定页眉。让我们分解两个解决方案:

我们会说,对于大多数WordPress用户来说,插件将是创建固定页眉的理想解决方案。它可以很好地与平台配合使用,并且如果您遇到问题更容易进行故障排除。但是,在以后的步骤中,我们将介绍编码解决方案以及插件选项。

2. 选择是修改当前主题还是选择专用主题

您要考虑的下一个方面是您是否修改当前主题,或者选择一个已经在其功能集中具有固定页眉功能的主题。如果您的主题没有处理浮动固定栏的功能,这将很重要。

许多主题和页面构建器插件将包括一个浮动固定栏选项,因为它的好处并为您提供设计灵活性。您会发现一些较大的通用主题和插件将其作为标准提供,例如Elementor、Astra、Divi、Avada和无数其他。

Elementor中的固定栏选项

要做出此决定,您需要考虑有关当前主题和网站的一些事项:

根据您在此处给出的答案,您将选择其中一个。如果您需要一个新主题,您不妨选择一个提供固定页眉实现的主题。但是,如果您想保留当前主题,并且它还没有浮动固定栏功能,您需要卷起袖子并按照以下子步骤之一进行操作。

2a. 使用具有特定主题的插件

如果您没有开发经验,我们建议您选择一个插件来为您的网站添加置顶功能。您需要考虑、构建和维护的变量太多。相比之下,插件已经有一个代码库来支持这些元素,因此它将为大多数情况提供几乎理想的选择。

对于本教程的这一部分,我们将使用myStickymenu插件,因为它为大多数用例提供了全面而丰富的功能集。但是,对于您将使用的大多数插件,一般用法是相同的。

安装并激活插件后,您需要前往主题选项所在的任何位置。对于某些插件,这将在WordPress定制器中;对于其他人,一个专门的管理面板。在这里,您将在WordPress中的myStickymenu > Dashboard中使用自定义管理面板:

WordPress中的myStickymenu管理面板

但是,默认屏幕显示了欢迎栏的设置,对于本教程,我们不需要。因此,单击切换按钮以关闭该栏,然后单击进入Sticky menu settings屏幕:

固定菜单设置屏幕

虽然这里有很多选项,但您只需要Sticky Class面板。将sticky header切换为“On”后,在与Other Class or ID下拉菜单一致的相关字段中输入header的相关HTML标记:

更改myStickymenu插件中的HTML选择器标记

保存更改后,这将应用于您的站点。从那里,您可以查看一些样式功能。例如,您设置淡入淡出或滑动过渡效果、设置z-index、使用不透明度、颜色和过渡时间 – 以及许多其他选项。

2b. 编写代码来创建您的固定页眉

几乎不用说,这部分是为那些有开发经验的人准备的。稍后您会看到代码本身非常简单,令人难以置信。但是,考虑到创建自定义置顶页面(固定栏)需要额外的工作、维护和一般维护,您还需要利用其他方面的经验。

但是,在开始之前,您需要以下内容:

值得重申的是,您不想处理实时站点的文件。相反,在暂存环境或本地设置中工作,然后在测试完后将文件上传回您的实时服务器

您还需要为此使用子主题,因为您正在对父主题进行自定义更改。这可以帮助您组织代码,并确保如果主题收到更新,任何更改(字面意思)都会保留。

使用代码实现固定页眉:找到正确的header标签

考虑到这一切,你就可以开始了。第一项工作是为您的导航发现正确的HTML标签。这里的结果将取决于您使用的主题,尽管在大多数情况下header标签是一个安全的选择。找出答案的最佳方法是使用浏览器的开发工具并选择header:

显示站点和标签的检查元素工具

您可能会发现它不像一个标签那么简单,因此我们建议您查看主题的文档(或直接与开发人员交谈),以便在遇到困难时找出您需要的标签。

使用代码实现固定页眉:使用样式表

接下来,您应该在目录中为您的子主题创建或打开一个style.css文件。这会将您的CSS附加到核心安装的CSS中,并在标签重复的地方覆盖它。

在此文件中,添加注册子主题所需的典型元数据:

使用Onivim2创建子主题

接下来,您需要添加代码以启用固定页眉。这将需要一些CSS继承的知识,并且取决于您使用的主题,这可能是一种令人愤怒的体验。

例如,Twenty Twenty-Two主题使用两个header标签,并且很难找到正确的CSS组合以使您的代码在正确的元素上工作。即使使用块编辑器中的模板类对话框也是如此(如果您使用FSE功能):

Brave Inspector显示了Twenty Twenty-Two主题的多个header标签

无论如何,您需要的代码将是相同的:

Akhil Arjun为此提供了两行解决方案:

header {
position: sticky; top: 0;
}

但是,您可能还需要考虑使用position: fixed属性,它使用更多的代码行:

header {
position: fixed;
z-index: 99;
right: 0;
left: 0; 
}

这使用z-index将header带到堆栈的前面,然后使用固定属性使其停留在屏幕顶部。

请注意,您可能需要在此处添加一个新类,以便应用固定页眉。无论哪种方式,这都应该实现固定页眉的骨骼。一旦确定了这一点,您将需要进一步设计设计以使其与您网站的其他部分一起使用。

使您的置顶页眉更有效的提示

一旦有了创建固定页眉的方法,您就会想弄清楚如何完善它。有很多方法可以改进基本设计并确保它满足您网站访问者的需求。

您自己的固定页眉的一个很好的类比是确保它就像一个优秀的体育裁判。大多数时候,你不会知道他们在那里。但是,当球员或教练需要他们时,他们会打电话并出现在场。

你的固定页眉也应该做同样的事情——留在阴影中,或者在用户需要它之前不在意。你可以通过一些经验法则来实现这一点,如果设计需要,你可以选择打破这些经验法则(一如既往):

总体而言,您的固定页眉只会做您需要做的事情,仅此而已。有时您需要尽量减少内容,有时您会使用链接、徽标和注册表单将其打包。无论哪种方式,如果您牢记UX和UI,您将始终做出以用户为中心的决定。

小结

网站的可用性和用户体验非常重要,以至于它们应该是您在设计和构建它时确定的第一、第二和第三件事。您网站的导航只是其中的一个方面,但您需要找出让用户在您的网站上四处走动而不大惊小怪的最佳方式。固定页眉是实现它的好方法。

如果您将header固定在屏幕顶部,则用户将始终可以使用导航元素。这对于需要滚动来移动正文内容但无论外形尺寸如何都能提供好处的设备特别有用。如果您是WordPress用户,您可以选择插件或代码来实现固定页眉。但是,您可能会在自己喜欢的主题中发现该功能,在这种情况下,您可以使用它并降低灵活性。

文章来源于互联网:如何创建WordPress网站浮动固定栏(页眉)

相关推荐: 如何添加WordPress侧边栏悬浮固定小工具?

在WordPress网站中是否有侧边栏是一个百万美元的争论。随着Core Web Vitals、AMP和其他速度的改进,侧边栏正在失去与早期不同的名声。默认的WordPress主题(例如二〇二一和二〇二二)甚至没有附带侧边栏选项。但是,侧边栏小工具是用作号召性…

赞(0)
未经允许不得转载:吾上云 » 如何创建WordPress网站浮动固定栏(页眉)
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们