如果你正在寻找一种快速的方法来让你的网站更加用户友好，一个很好的想法是创建一个 WordPress 粘性标题栏。这样，你的菜单项（和其他标题栏元素）始终可见且易于访问。不过，你可能担心这个功能设置起来很困难。⚙️
幸运的是，在 WordPress 中构建粘性标题栏的方法有很多，所以你一定能找到适合你的技能水平和可用时间的选项。初学者可以安装插件或使用全站编辑器 (FSE) 来简化这个过程。更有经验的用户可以使用 CSS 创建自定义粘性标题栏。
在本文中，我们将仔细研究粘性标题栏并讨论一些最佳实践。然后我们将向你展示在 WordPress 中创建粘性标题栏的四种方法。让我们直接开始吧！🦘
📚 目录：
什么是粘性标题栏（为什么应该使用它）？
粘性标题栏也被称为“固定标题栏”，因为即使访问者向下滚动页面，标题栏仍然可见。这样，即使人们在与你的网站互动时，他们仍然可以访问导航菜单。
因此，粘性标题栏是改善网站用户体验 (UX) 的好方法，因为它使你的网页易于访问。这使得人们能够快速找到他们想要的内容，这可以帮助你降低跳出率并增加网站停留时间。
更好的方法是，粘性标题栏鼓励访问者探索你网站的其他区域。例如，如果你经营一个电子商务商店，客户可能会在标题栏中看到有趣的产品或类别。这是一个增加收入的宝贵机会。
同时，你可以在粘性标题栏中包含各种元素。例如，你可能会放置一个行动号召 (CTA) 按钮，如果它始终可见，可能会提高转化率。你还可以添加你的 Logo、社交媒体链接、购物车图标或营业时间。
在 WordPress 中创建粘性标题栏的最佳实践
由于粘性标题栏应该改善你网站的用户体验，重要的是考虑一些最佳实践以确保它尽可能用户友好。以下是需要记住的关键因素：
- 🤏 让它小一点。如果你的顶部导航栏始终可见，你肯定不希望它占用太多屏幕空间，从而干扰你的主要内容。
- 😎 保持简洁。虽然添加一些有用的元素（如行动号召按钮和标志）是个好主意，但要避免在顶部导航栏中塞入过多可能导致干扰的组件。
- 🎨 应用你的品牌颜色。为了让顶部导航栏与网站的其他部分协调，选择能体现品牌特色的字体和颜色至关重要。
- 🎯 聚焦价值。由于你不想让顶部导航栏过于拥挤，最好选择与访问者最相关（也最有用）的菜单项。例如，如果你经营一个电商商店，优先考虑购物车图标和搜索栏是个好主意。
- 📱 为移动设备创建单独的菜单。由于移动屏幕比桌面电脑小得多，你可以创建一个单独的（更小的）固定顶部导航栏，使用更小的字体和更多隐藏的菜单项。这样可以提供更好的移动端体验。
- 🎬 添加悬停动画。为了让顶部导航栏不那么突兀，一个好主意是在首次加载时让它透明。当访问者将鼠标悬停在顶部导航栏上时，你可以将背景改为纯色，这样菜单项更容易看清。
关键在于创建一个有效的固定顶部导航栏，同时不分散你对主要内容的注意力。可能需要一些尝试才能达到适当的平衡，但以下方法将有助于简化这一过程。
如何在 WordPress 中创建固定顶部导航栏（4 种方法）
既然你已经知道创建固定顶部导航栏是个好主意，这里有四种在 WordPress 中实现的方法。每种方法都有其优缺点，所以我们建议在选择最适合你网站的方法之前，先通读所有四种方法。
1. 使用 Sticky Menu & Sticky Header 这样的插件
创建固定顶部导航栏最简单的方法是使用插件。这是一种对初学者友好的方法，因为你不需要编写代码。而且，Sticky Menu & Sticky Header 插件几乎适用于任何 WordPress 主题。
首先，你需要通过 WordPress 仪表盘安装该插件。转到 插件 → 安装新插件，然后使用搜索栏找到该插件。接着点击 立即安装 → 启用：
要使用插件设置固定顶部导航栏，请转到 WordPress 侧边栏中的 设置，然后选择 Sticky Header（或其他任何内容）。由于该插件允许创建各种固定元素，你需要在 固定元素 框中输入主题顶部导航栏的 ID 或类。
如果你不知道顶部导航栏的 ID 或类，请在新的标签页中打开你的网站。然后，右键点击顶部导航栏区域，点击 检查元素。
该插件的某些设置仅在高级版中可用。例如，如果你想为固定顶部导航栏应用背景颜色、更改透明度并添加其他效果，则需要升级。
但是，你可以使用 基础 设置来定义页面顶部和固定顶部导航栏之间的间距。此外，你可以在可能无法正常显示的超大或超小屏幕上禁用固定顶部导航栏。
然后，点击 保存更改 并在前端测试你的固定顶部导航栏。
向下滚动页面，观察页眉如何响应。它在您移动到其他位置时是否保持在视野内？它是否有流畅的移动？如果是这样，您就成功了！
2. 使用全站点编辑器 (FSE) 添加粘性页眉
如果您使用块主题，可以使用全站点编辑器 (FSE)提供的内置功能创建粘性页眉。
如果您还没有块主题，应该先安装一个像Neve FSE这样的块主题。这个主题提供现代、简约的设计，适合多种类型的网站，如博客、作品集或电商商店。
然后，在仪表板中，进入 Appearance** >* ***Editor，找到您主题的页眉模板。这可能存储在 Templates 或 Patterns 下，但这取决于您选择的主题。
在Neve中，您可以在 Patterns** → **Header** → **Header 中找到它。然后点击模板旁边的铅笔图标开始编辑。
打开右上角 Save 按钮旁边的设置。在编辑器中选择页眉，然后点击工具栏中的 Group。
或者，在块设置中，您可以点击组图标，将所有页眉项目收集到一个容器中。
现在，向下滚动并打开 Position 选项卡。使用下拉菜单选择 Sticky 选项。
页眉在滚动时会显示为透明，因此您可能需要添加背景颜色。为此，请切换到 Styles 选项卡。您还可以在那里更改页眉的排版和尺寸。
最后，点击 Save 并在您网站的前端预览您的粘性页眉！您可以随时返回进行进一步修改，直到您的页眉看起来恰到好处。
3. 使用 CSS 创建粘性页眉
对于更有经验的用户，他们不想依赖插件（或想要更完整的控制），可以使用 CSS 手动创建粘性页眉。要开始使用，请通过 Appearance** → **Customize 打开 WordPress 自定义器。然后找到 Additional CSS 选项卡。
将以下代码输入到 CSS 框中：
#site-navigation {
background:#00000;
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;
}Code language: CSS (css)
您需要将 "#site-navigation" 替换为您网站头部的 CSS 类或 ID。如果您不确定如何查找，请参阅方法 1 中的相关说明。
您还可以通过在 "background" 后面输入不同的十六进制代码来更改头部颜色。此外，您可以通过调整代码的相关部分来自定义高度、宽度和其他显示设置。然后，点击 发布 使您的新头部生效。
4. 安装带有内置粘性头部的优质主题
构建粘性头部的最后一种方法是安装具有此功能的主题。虽然这是较昂贵的选项，但它使您无需依赖插件或使用代码即可添加此功能。如果您正在创建新网站且尚未确定主题，这将非常相关。
有很多优秀的主题都带有现成的粘性菜单（或允许您将现有菜单设为粘性）。一个例子是 Neve PRO。
即使使用免费版的 Neve，您也可以使用直观的拖放编辑器构建自定义头部和底部。但是，使用高级主题您将获得更多设置，例如高级样式选项和新组件。这样，您就可以构建移动端头部、透明头部和粘性头部。
安装并激活后，在 WordPress 仪表板中转到 外观 > 自定义。选择 头部 选项。
Neve Pro 允许您设置网站上的多个头部并对其进行自定义。要使头部粘性，请选择它并选择 固定到顶部 选项。
在该选项的右侧，确定您希望头部在桌面设备、移动设备或两者上保持粘性。只需选择相关图标即可。
之后，点击 发布，或继续使用 Neve Pro 的内置工具和选项自定义您的头部。
结论 🧐
粘性头部使访问者可以从网站的任何页面查看和访问菜单项。更重要的是，您可以包含 CTA 和商业标志等元素，以提高品牌认知度和促进转化。
👉 总而言之，以下是创建粘性头部的四种方法：
- 安装插件如 Sticky Menu & Sticky Header。
- 在全站编辑器 (FSE) 中添加粘性头部，使用像 Neve FSE 这样的块主题。
- 使用自定义 CSS 创建粘性头部。
- 安装带有内置粘性头部的优质主题，例如 Neve PRO。
您正在为您的网站构建哪种类型的 WordPress 粘性头部？请在下方评论中告诉我们！
…
别忘了参加我们的 WordPress 网站加速速成课程。了解更多详情：
如何加速您的 WordPress 网站
通过一些简单的修复，您可以将加载时间减少甚至50-80% 🚀
新闻简报表单 – 侧边栏
名字 *
您的邮箱 *
立即订阅！
如果您是人类，请留空此字段。
Δ
通过输入您的邮箱，即表示您订阅了我们的每周新闻简报。您可以随时更改您的决定。我们尊重您的收件箱和隐私。
