如何在 WordPress 中制作粘性标题

在过去十年左右的时间里，人们越来越重视网站导航。 这与智能手机的广泛使用相吻合，与传统的桌面界面相比，智能手机的导航选项有限。 如果您比较一下 2011 年的网站和现在制作的网站，网站设计的差异就非常明显了。

用于重新配置站点布局的主要方法之一是粘性元素。 恰当地命名，当您在页面周围移动时，这些元素会粘在页面的边框上，即，它们保持其原始位置（想想 Excel 中的冻结窗格，您会很好地了解它是如何工作的）。

上、下、左、右

粘性元素通常保留给菜单、标题和/或状态栏； 这些为访问者带来了极大的灵活性，因为他可以立即从一个页面切换到下一个页面，而无需回溯。 此外，所有这些都位于页面顶部和底部的边框上，这与整个前提很好地配合。 围绕位于页面中心的粘性元素构建页面将非常困难。

很少能在左右边框上找到它们，功能相同，只是布局不同。 在这些情况下，它们将被隐藏，直到您将光标悬停在它们上方或在屏幕上触摸它们。

节省空间

粘性元素的有趣之处在于，它们可以节省页面和整个网站的空间——它们实际上可以用来替换整个页面。 这是因为它们保留了网站的主体，并使边框成为多功能工具，这些工具本身就承担了很多页面的功能。 想一想您的平均网站布局。

顶部保留用于需要通过指定类别和搜索栏排序的页面的菜单。 它们在滚动时都隐藏在栏后面，并在需要时展开。 如果不是这种情况，只有菜单树会占据页面的整个上部，并且在向下滚动时不会“跟随”，因此您的访问者将需要不断上下移动才能浏览页面.

另一方面，粘性底部元素可以很容易地替换整个支持页面 - 只需添加电子邮件和/或号码以及聊天按钮，就可以了。 您正在为您的访问者提供一种与您联系的持续存在的方式。 再一次，实际应用非常棒 - 客户正在滚动浏览您的产品页面，有问题，并且可以通过单击聊天按钮立即找到他/她的需求。

创建粘性元素

当我们谈论 WordPress 时，总是有很多方法可以解决您能想到的任何事情，这里也是如此。 您可以在默认编辑器中手动创建粘性元素，也可以使用一个插件，将编码需求替换为对初学者友好的界面。 最终结果之间的反差很小，但你到达那里的方式会产生很大的不同。 对于我们的示例，我们将使用粘性标题，因为它们是迄今为止最常见的粘性元素。

手动创建粘性标题

在 WordPress 中手动创建粘性标题需要使用 CSS 代码。 无需太技术化，我们可以将 CSS 代码添加到页面上的几乎任何元素中以更改其属性。 手动编码时，这是我们定制的主要方法。 使用 CSS 首先需要页眉出现在页面上，所以首先要确保有一些东西需要自定义。 WordPress 简化了这个过程，因为即使是默认编辑器也提供了通过单击添加它的选项。

一旦你有了一个可以使用的标题，你就需要访问控制台。 只需转到仪表板左侧的外观部分，选择“自定义”，然后单击“附加 CSS”。 现在控制台打开了，您需要输入使标题变粘的代码：

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

上面的代码只是它的一般外观示例，而不是一个万能的最终命令。 请记住，第一行始终特定于每个站点——在返回页面编辑器之前，将#website-navigation 替换为导航标题的 CSS 类或 ID。

在您检查了页面/帖子预览窗口中的功能后，只需发布​​，您就会得到一个粘性标题。 我们必须指出，您可能希望扩展 CSS 代码，使其不仅仅包含像这样的标题的“粘性”属性——建议添加可以在视觉上强调标题的内容，例如颜色字体、大小、缩进等。因为它是页面上的永久固定装置，很容易被忽视，所以你应该尝试让它脱颖而出。

使用插件创建粘性标题

那些需要为其业务或博客建立网站的人与那些根本不具备构建外观和感觉专业的东西的知识的人之间存在巨大的重叠。 幸运的是，有了 WordPress，有很多插件可以让每个人的生活更轻松； 几乎不需要拥有比基本软件知识更多的东西来实现您的目标。 WP Sticky 是一个很好的插件示例，它用任何人都可以快速掌握的用户友好界面替换了我们上面介绍的所有编码。 同时，它提供了与手动创建粘性标题相同数量的功能。 让我们分解一下。

创建元素

就像您在使用 CSS 时需要有一个标题一样，您需要创建一个元素，然后向该元素添加粘性属性。

有两种不同的方式来挑选元素——您可以在必填字段中输入名称，或者您可以通过单击它通过预览窗口选择元素（如果您在找出名称时遇到问题，这很有效） . 在预览窗口中选择元素时，您会在屏幕顶部看到不断变化的名称。

我们发现，在使用该插件一段时间后，您会对它感到非常自在，几乎不会使用视觉选择器。 这些名称将变得熟悉，从而可以简单地手动输入它们，从而节省您的时间。 在您熟悉该范围之前，视觉选择器将是您最好的朋友。 最终，任何一种方法都会让你到达同一个地方——前端的一个粘性标题。

让它看起来不错

并非所有粘性元素都是平等的，你的也不应该是一个普通的例子。 视觉设置部分将为您提供大量自定义选项，您可以使用这些选项使您的粘性标题在各个方面都独一无二。

您需要考虑的第一件事是元素的定位。 由于我们正在制作页眉，这将是一个简单的决定——我们将它贴在页面顶部。 定位是一个好的标题的关键，所以如果你不想让它紧贴页面的顶部，你可以将它向下移动几个像素以获得更好的适合度。 此外，如果您的网站为注册用户使用管理工具栏，您可以让插件自动检查它并相应地调整标题。

我们已经谈到了网站完全响应的必要性，因为潜在访问者必须通过多种方式浏览网络。 为了使您的网站完全自适应，您可以选择在哪些屏幕上粘贴标题。

通常，较小的屏幕从粘性标题中受益最多，而在具有更多导航选项的传统桌面上使用的较大屏幕在没有它们的情况下也可以。 这些尺寸分为四组，涵盖所有主要的屏幕尺寸。

Z-index 是一个可选设置，乍一看可能会让很多人感到困惑。 由于这一点以及它是一个可选功能的事实，许多人可能会挥舞它并忽略它。 如果一切正常，您可能永远不会回头； 但是，如果显示出现问题，Z-index 可能是一个快速修复的解决方案。 从本质上讲，将页面视为堆栈的集合，其中顶部的堆栈数高于底部的堆栈数。 因此，如果有什么东西遮住了您的粘性标题，请尝试提升 Z-index（建议使用 99999 作为有效值）

使用“堆栈顶部”的粘性标题，是时候在向下滚动时通过添加效果来获得更多创意。 当这两个选项都被禁用时，页眉将保持其位置在顶部，就像原始页面的剪切块一样。 您可以使用淡入或向下滑动等效果添加更多耀斑。 在选择这些类型的效果之前，请考虑您网站的整体视觉设计； 然而——通常，少即是多。

视觉效果不仅限于与运动相关的效果。 您还可以自定义标题本身（除了您在创建标题时所做的移动）。 如果您不希望页眉遮挡页面上的任何其他内容，则不透明度很有用。 将其设置为 50% 左右将使标题和下面的内容相对可见。

比不透明度更有用的功能是调整滚动范围。 如果你的页面很长，就像博客通常有的那样，那么在向下导航时，有一个粘性标题就不再有意义了。 在这些时候，在您的访问者向下滚动足够远之后让标题不粘是个好主意。

最后，还有一个选项可以在标题变粘时更改标题的背景颜色，使其更加突出，但当标题不再粘滞时，将其反转为原始值。

可视化编辑的最后一部分让我们回到通过 CSS 手动编辑粘性标题的整个过程。

即使您确实不需要任何以前的编码知识即可成功使用 WP Sticky，但如果您确实使用它，它可以提升您的工作。 该功能是可选的，因此完全取决于您是否要使用它以及在何种程度上使用它。

高级选项

高级选项部分几乎都是关于排除的，即在什么情况下粘性标题将不再粘性并恢复为“原始编程”。

手动设置标题不粘滞的屏幕尺寸是视觉设置部分中显示的四种默认尺寸的一个步骤。 在这里，您可以根据需要进行具体化，因此如果将来出现不适合任何预定尺寸的狂野屏幕，您可以制定适用于它的规则。

使标题不粘人不仅与屏幕大小有关，还与您网站上的内容有关，更具体地说是分类。 您可以使您的标题不粘在指定的页面、帖子和帖子类型、特定类别或带有特定标签的内容上。 所有这些条件都可以混合和匹配，以在使用和不使用粘性标题时制作完美的纲要。

与您在开始时选择粘性元素（在我们的示例中为页眉）的方式类似，您也可以在页面下方选择一个上推元素，您希望在该页上将页眉向上推送。 这实质上将使您的标题移动到该元素的最边界，并且它们之间没有填充或任何类型的空间。

总而言之，当您厌倦并且不再想要您的粘性元素时，总有最终的选择可以完全删除它。 请注意，这是一个永久性操作，您对元素（在本例中为标题）所做的所有自定义都将丢失。

概括

很难说哪种做事方式更好。 使用 CSS，您肯定有更多的选择，但总体而言，这对极少数人来说是一个解决方案。 另一方面，像 WP Sticky 这样的插件结合了易用性和仍然强大的功能，使其成为初学者或仍然不确定从头开始编码的人的完美选择。 制作一个粘性的、有效的标题可能最好的方法是从后者开始，然后自己努力达到前者。

作者： Matej Milohnoja

过去通常写关于游戏和游戏的文章，但后来转向测试和写关于 Web 开发软件的文章。 还是会玩很多游戏，只是为了好玩。