如何创建WordPress网站的浮动固定栏目(表头)

导航是一个设计优秀的高质量WordPress网站的重要方面。因此，值得花些时间来考虑你的网站的访问者如何通过你的导航与你的页面进行交互。一种方法是使用浮动固定列(固定标题)。

这是当用户滚动时，你的网站的标题部分停留在屏幕顶部的地方。这提供了无数的好处，但是其中一个主要的好处是你的导航元素保持在用户的视线之内，不管它们在页面上的什么位置。仅仅因为这个原因，浮动固定条是一个流行的用户界面(UI)元素。

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

什么是浮动固定杆？

网络上浮动固定条的示例

为什么要用浮动固定杆？

浮动栏插件推荐

如何在WordPress中创建浮动固定栏

浮动条的使用技巧

什么是浮动固定杆？

Kotaku网站的浮动固定栏

你网站的页眉部分有点像你网站的问讯台。这将是大多数用户会发现的第一件事，也将永远是他们查找一些关键信息和执行某些操作的地方:

比如你的logo或者网站名称会出现在这里作为用户的基础。在大多数情况下，他们可以通过单击徽标返回主页。

如果您在网站上运行用户帐户，标题通常会提供登录这些帐户和个人资料页面的链接。

这里可能会有一个搜索功能，特别是如果你有一个大型网站，有很多不同领域的内容。

当然，你网站的导航也是页眉的一个组成部分。

总的来说，你的页眉是用户的接触点。你会发现它通常是F型阅读模式的“条形图”，所以在直观的层面上吸引用户的注意力。

你可能已经知道浮动固定条是什么了，即使是直观意义上的。当你滚动时，它是你的网站的标题部分“固定”在屏幕顶部的位置。与静态标题保持不变并在滚动时消失相比，固定标题始终是可见的元素。

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

网络上浮动固定条的示例

你会发现浮动固定酒吧遍布网络。最好查一些，看看能达到什么效果。一个最基本的例子来自锤头。这个网站使用“弹出菜单”和浮动固定栏，它很简单:它致力于固定在页面顶部的静态布局:

锤头网站上的浮动固定栏

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

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

Kin网站上的浮动固定栏

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

这里的前提是，向下滚动意味着你把时间投入到页面本身，所以你可能不需要导航、登录页面或去其他地方。然而，当你向上滚动时，你更可能想去网站上的另一个页面。这里会显示一个浮动的固定条，以节省时间。

正是这些小的用户体验(UX)触动了网站访问者想要返回。对于你自己的固定栏目设计，你需要考虑如何做出一个以访问者需求为中心的UX和UI。

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

很多网站使用浮动固定栏，这有很多很好的理由。它们可能是你整个网站体验的关键部分，对你的用户体验和用户界面有很大的影响。

因为您将在标题中包含的元素是用户总是想要访问的元素，所以总是显示它们是有意义的。对于小屏幕设备和格式来说尤其如此。

虽然在viewport 空空间非常宝贵的情况下，拥有一个“始终打开”的标题似乎有悖常理，但这只是一个小小的牺牲。真正的好处是它减少了移动用户滚动的理由——这在较小的设备上是必要的。如果你能提供不需要滚动的网站导航，用户可以更容易地在你的网站上移动。

浮动条的优点和缺点

我们介绍了浮动固定条的一些优点，下面我们快速总结一下:

您可以提供用户可以随时访问的导航，这有助于保持您网站上的自然阅读模式。

您可以根据不同的需求调整页眉，例如对比度、配色方案，甚至用户意图。

有机会为用户提供价值，无论是桌面还是小屏。

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

我们简单介绍了一下这个，但是对于各种尺寸的屏幕，你需要为表头分配空个房间。

固定的标题自然会从你的其他内容中脱颖而出，因为它本身的元素会把视线从页面的主体上移开。

有更多的开发工作涉及一个好的固定标题，因为你需要实现它，确保它在不同的浏览器中工作，并在一个较小的屏幕上检查它的错误。

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

浮动栏插件推荐

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

更重要的是，您可以通过插件利用专家的设计和开发经验。开发者会为你做出一些更重要的技术选择，并打包在一个直观易用的UI中。

1.粘性菜单和粘性标题

Webfactory的Sticky Menu & Sticky Header插件是一个很好的首选，因为它功能丰富，有用灵活，价格预算友好。

粘性菜单和粘性标题插件

这里的吸引力在于你可以让网站上的任何元素粘在屏幕上。这可能在很多方面都有帮助，但这意味着很容易实现固定的头。

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

您可以设置所需的“顶部”定位级别。这意味着您可以在页眉上方的区域添加空来满足您的设计目标。

还有其他的定位选项，比如用z-index CSS属性来设计你的网站“从前到后”。

您只能在您选择的页面上启用浮动固定栏，如果您有登录页面或其他不适当的内容，这可能会很有用。

粘性菜单&粘性标题还包括调试模式，可以帮助您修复任何“未修复”的元素。动态模式也有助于解决响应式设计的问题。

最好的消息是粘性菜单和粘性标题可以免费下载和使用。更重要的是，有一个高级版本，可以带走你需要的更多技术知识。

对于插件的免费版本，您需要知道元素的选择器来在选项中指定它。然而，高级版(每年49-199美元)提供了一个视觉元素选择器来解决这个问题。

2.221的选项

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

在我们看来，Twenty Twenty 21是一个出色的默认主题，但它缺乏浮动固定栏功能。如果你想增加这个功能，选项中的选项二十一个插件可以满足你的需求。

221的选项

这个版本的插件是众多插件中的一个。每个最近的默认主题都有一个版本，但是还没有Twenty Twenty 2的版本。不管怎样，插件的核心功能提供了许多附加功能:

有一个完整的网站编辑(FSE)工具，准备全面推出。

您可以更改正文的字体大小，删除超链接下划线和其他简单的自定义设置。

您可以使用容器和元素的最大宽度，而无需代码。

对于你的导航，内容，页脚和页眉还有很多其他的选项。对于后者，你可以隐藏它，使其全幅，添加背景图像和颜色和其他许多变化。

虽然核心插件是免费的，但你需要一个高级升级(25-50美元)来访问浮动固定栏选项。这允许你从WordPress Customizer调整移动和桌面标题的设置:

WordPress customizer显示固定标题选项。

鉴于这个名字，你不应该期望这个插件使用任何其他主题(或任何你选择的“风格”)，除了221。但是，如果你确实使用了这个默认主题，并且不想对其进行编码，那么它将是一个理想的选择，可以帮助你在网站上添加一个固定的标题。

3.浮动通知栏，滚动固定菜单和任何主题的固定标题

这是一个把牌放在桌子上的插件。O Premio的myStickymenu插件几乎提供了你想在自己的固定头中包含的所有东西，并且包含了大量的函数。

MyStickymenu插件

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

它提供了使用的灵活性。例如，您可以创建一个欢迎栏和一个固定的菜单和标题。

该插件将适应你的网站的响应速度。这意味着您不再需要使用代码来实现任何功能。

事实上，插件可以在你不知道如何编码的情况下充分利用它。

MyStickymenu插件兼容很多领先的页面构建器插件，比如Elementor、Beaver Builder、Native Block Editor、Divi Builder等等。

您也可以使用许多定制选项，使您的固定酒吧工作，如您所愿。例如，您可以选择一些简单的方面，比如制作一个部分持久化的标题、更改背景颜色和选择版式。

此外，由于您可以用不同的方式呈现固定标题(如菜单和欢迎栏选项)，您可以选择它们在网站上的显示方式和位置。

虽然myStickymenu的免费版本可能足以满足您的需求，但也有一个高级版本(每年25-99美元)。这提供了更多的方法来禁用您的固定标题，特定条件下的倒计时定时器，添加多个欢迎列的能力，以及更多的定制选项。

如何在WordPress中创建固定栏

在本教程的剩余部分，我们将向你展示如何在WordPress中创建浮动固定栏。这里有几种方法可以使用，我们将介绍这两种方法。然而，我们的第一步将帮助您做出决定。

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

1.决定如何创建固定标题

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

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

插件。这将是WordPress认可的方法，尤其是如果你没有技术知识的话。它将提供灵活性，但是您将受到开发人员认为重要的东西和他们的编码能力的支配。

编码。如果你有一个清晰的愿景，你可能想为你的网站写一个固定的标题。当然，你需要技术专长来完成这项工作(主要是CSS)，但结果正是你想要的。但是，您将有更多潜在的维护要执行，它的成功将取决于您自己的编码能力。

我们会说，对于大多数WordPress用户来说，插件将是创建固定标题的理想解决方案。和平台配合的很好，遇到问题更容易排查。然而，在接下来的步骤中，我们将介绍编码解决方案和插件选项。

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

下一个要考虑的方面是你是否修改当前的主题或者选择一个在它的特性集中已经有固定头函数的主题。如果你的主题没有处理浮动固定列的功能，这将是很重要的。

许多主题和页面生成器插件会包含一个浮动的固定工具栏选项，因为它有很多好处，并为你提供了设计灵活性。你会发现一些更大的通用主题和插件是作为标准提供的，比如Elementor、Astra、Divi、Avada等等。

Elementor中的固定列选项

要做出这个决定，你需要考虑一些关于当前主题和网站的事情:

你的网站是如你所愿，还是需要刷新？

你现在的主题在后台容易定制吗？开发者文档应该会告诉你这些。

您想要复杂的首选固定标头实现还是更简单的实现？

根据你在这里给出的答案，你会选择其中一个。如果你需要一个新的主题，你也可以选择一个提供固定标题实现的主题。然而，如果你想保持当前的主题，而它还没有浮动固定栏功能，你需要卷起袖子，按照下面的一个子步骤。

2a。使用特定主题的插件

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

对于本教程的这一部分，我们将使用myStickymenu插件，因为它为大多数用例提供了全面而丰富的特性集。然而，对于您将要使用的大多数插件来说，一般用法是相同的。

安装并激活插件后，你需要去主题选项所在的地方。对于一些插件，这将在WordPress定制；对其他人来说，是一个专门的管理小组。在这里，你将在WordPress的myStickymenu > Dashboard中使用自定义管理面板:

WordPress中的MyStickymenu管理面板

但是，默认屏幕显示的是欢迎栏的设置，本教程不需要。因此，单击切换按钮关闭工具栏，然后单击进入粘性菜单设置屏幕:

固定菜单设置屏幕

虽然这里有很多选项，但是你所需要的只是粘性类面板。将粘性标题切换到“开”后，在与其他类别或ID下拉菜单一致的相关字段中输入标题的相关HTML标签:

在myStickymenu插件中更改HTML选择器标签

保存更改后，这将应用于您的网站。从那里，你可以检查出一些风格特征。例如，您可以设置淡入淡出或幻灯片过渡效果，设置z索引，使用不透明度，颜色和过渡时间-以及许多其他选项。

2b。编写代码来创建您的固定标题

这部分不用多说，是给有开发经验的人看的。稍后您会看到代码本身非常简单。但是，考虑到创建自定义首页(固定列)需要额外的工作、维护和一般维护，您还需要利用其他经验。

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

一个好的代码编辑器，尽管在这种情况下(取决于实现)，您可以使用默认的操作系统(OS)文本编辑器。

您需要访问您应该备份的站点文件，然后将它们下载到本地WordPress开发环境。

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

为此，您还需要使用一个子主题，因为您正在对父主题进行定制更改。这可以帮助你组织你的代码，并确保如果主题得到更新，任何改变(字面上)将被保留。

使用代码修复标题:找到正确的标题标记。

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

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

你可能会发现它并不是一个标签那么简单，所以我们建议你查阅主题的文档(或者直接和开发者谈)，在遇到困难的时候找出你需要的标签。

使用代码实现固定标题:使用样式表

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

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

用Onivim2创建副标题

接下来，您需要添加代码来启用固定头。这将需要一些CSS继承的知识，根据你使用的主题，这可能是一个令人恼火的经历。

例如，Twenty Twenty 2主题使用了两个header标记，很难找到合适的CSS组合来使您的代码在正确的元素上工作。即使使用块编辑器中的“样板类”对话框(如果使用FSE函数):

勇敢的检查员显示222个主题的几个标题标签。

无论如何，你需要的代码是一样的:

Akhil Arjun为此提供了双线解决方案:

header {position: sticky; top: 0;}

但是，您可能还想考虑使用position: fixed属性，该属性使用更多的代码行:

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

它使用z-index将标题放在堆栈的前面，然后使用固定属性使其停留在屏幕的顶部。

请注意，您可能需要在这里添加一个新的类，以便应用一个固定的头。无论哪种方式，这应该实现固定标题的骨骼。一旦这一点被确定，你将需要进一步设计的设计，以便它可以与您的网站的其他部分一起使用。

让你的顶部标题更有效的技巧

一旦你有了创建一个固定标题的方法，你就会想办法去完善它。有许多方法可以改进基本设计，并确保它满足网站访问者的需求。

对你自己的固定头球的一个很好的类比是确保它像一个好的体育裁判。大多数时候，你不会知道他们在哪里。但是，当球员或教练需要他们的时候，他们就会打电话来，出现。

你的固定头应该做同样的事情——呆在阴影里，或者不关心，直到用户需要它。您可以通过一些经验法则来实现这一点，如果设计需要，您可以选择打破这些经验法则(一如既往):

保持紧凑。屏幕空会很有价值，所以请尽量保持小标题。您可以实现一个解决方案，其中您的页眉根据它显示的站点区域动态缩放。

在小屏幕上使用隐藏标题和菜单。通过扩展，您可以选择隐藏菜单，就像前面的Hammerhead示例一样。这有助于保持标题紧凑并链接到下一点。

确保你没有分心。屏幕上的元素越多，它们争夺的注意力就越多。如果固定标题不需要显示元素，请删除它们——你的正文内容会喜欢，你的指标也会喜欢。

提供一个比较。这是行动号召语言(CTA)脚本中的一项技术。如果你对整个固定标题和它的单个元素使用对比，你可以把注意力吸引到你需要它的地方——或者把它推到别的地方。

总的来说，你的固定头只会做你需要做的事情，仅此而已。有时候你需要把内容最小化，有时候你用链接、logos、注册表单打包。无论哪种方式，如果你把UX和用户界面记在心里，你将永远做出以用户为中心的决定。

总结

网站的可用性和用户体验是如此重要，以至于它们应该是你在设计和建设网站时决定的第一、第二和第三件事。你网站的导航只是一个方面，但你需要找出让用户围着你的网站转而不大惊小怪的最佳方法。固定标题是实现它的一个好方法。

如果你把标题固定在屏幕的顶部，用户就可以一直使用导航元素。这对于需要滚动来移动文本内容的设备特别有用，但是无论整体大小如何，都可以提供好处。如果你是一个WordPress用户，你可以选择一个插件或者代码来实现一个固定的标题。但是，您可能会在您喜欢的主题中发现此功能，在这种情况下，您可以使用它并降低您的灵活性。