了解如何为 WordPress 网站的主导航创建粘性菜单!粘性菜单使网站访问者更容易使用网站菜单,从而有助于改善用户体验。此外,它还可以帮助改善网站的整体外观。让我们开始吧!

目录

1. 导航至站点编辑器

此过程的第一步是导航到 WordPress 管理区域中的“站点编辑器”。假设您使用的是 WordPress 5.9 或更高版本,则站点编辑器可用于 WordPress 中的“块主题”。

要导航到站点编辑器,请转至 外观>编辑器 (上图中的红色箭头)来自 WP 管理区域的主导航。

单击屏幕右侧的主要内容区域(浅蓝色轮廓,并由上图中的蓝色箭头表示)。这将带您进入站点编辑器内的块编辑器。

在右侧的“页面”选项卡下,您会看到标有“模板”的行(上图中以蓝色框出)。单击模板名称/链接(红色箭头)。然后,单击“编辑模板”(绿色箭头 - 有时“编辑模板”是显示模板名称的下拉列表下方的蓝色小文本链接)。

2. 编辑您的模板

您现在将进入网站主页的模板编辑器。 (如果您的网站没有设置主页,您可以查看 本教程介绍如何为 WordPress 网站设置静态主页).

模板的顶部是页面的主导航 - 也称为网页的“标题”。当您将鼠标悬停在该元素上时,您会看到一个紫色框勾勒出它的轮廓(上图中的红色箭头)。这表明该元素是一个 “同步模式” 这意味着对模式的一个实例进行更改将在站点范围内的所有实例中应用更改。单击此区域可选择标头同步模式。

如果这是您网站的主要标题元素,您现在应该看到同步模式在块工具栏中标记为“标题”。

3. 将标题添加到组中

在所选标题模式的块工具栏中,单击“选项”图标(上图中的红色箭头)并选择“组”(绿色箭头)。这会将同步模式嵌套到组块中。

您会注意到块工具栏现在具有组块图标(上图中的蓝色箭头),并且主导航区域周围的轮廓现在是蓝色而不是紫色(红色箭头)。

请注意,这可能会更改主导航菜单的宽度。要调整宽度,请将鼠标悬停在标题同步图案上,然后单击将其选中(红色箭头)。

在标题同步模式的块工具栏中,单击“对齐”图标(绿色箭头)并将其更改回所需的宽度(蓝色箭头 - 在我的例子中,我选择了“宽宽度”)。

要返回到“组”块,请单击“标题”块工具栏中的“选择组”图标(粉色箭头)。

WordPress 简化:如何构建强大的网站 戴维斯媒体设计课程

4. 将组设置为“粘性”

选择该组后,导航到屏幕右侧“设置”侧栏下的“阻止”选项卡(上图中的红色箭头)。

单击标有“位置”的菜单项(绿色箭头)。现在,您将在此处看到一个标记为“默认”的下拉菜单(粉色箭头)。单击下拉菜单并选择“粘性”选项(蓝色箭头)。

导航到编辑器顶部并单击“保存”按钮(红色箭头),然后再次单击“保存”。现在,您的 WordPress 网站将拥有一个棒菜单主导航!

5. 设置粘性菜单的样式

您可以自定义/设置新粘性菜单的许多元素的样式,但在本教程中,我将简单地在组块后面添加背景,以确保菜单跨越网页的整个宽度。

为此,在选择“组”块的情况下,我将导航到“设置”侧栏的“样式”选项卡(上图中的红色箭头)。

在“颜色”下,我将单击“背景”选项(蓝色箭头),然后选择白色样本将背景颜色设置为白色(绿色箭头)。

我将再次单击“保存”两次以保存更改。

请注意,您始终可以使用“填充”和“边距”滑块在“尺寸”部分下调整网站标题的宽度、高度或间距。

您可以通过单击设备图标(红色箭头)来预览站点,然后单击“查看站点”(绿色箭头)。

您可以滚动您的网站并观察粘性导航菜单保留在顶部(绿色箭头)!

完成编辑粘性菜单后,单击编辑器顶部的“返回”按钮(红色箭头)。这将使您返回到侧面编辑器内的网页。

要返回 WP 管理区域,只需单击左上角的徽标即可。

这就是本教程的内容!如果你喜欢它,你可以 通过我在 Udemy 上的深入课程学习 WordPress。或者,您可以查看其他免费的 WordPress 视频教程WordPress 帮助文章 在我的网站。

戴维斯媒体设计免费创意应用程序电子邮件通讯

订阅DMD新闻通讯

注册即可接收有关您最喜欢的免费创意应用程序的新教程、课程更新和最新消息!

您已成功订阅!

别起来Pinterest上