在使用 WordPress 块主题设计网站时,您可能已经注意到网站的主导航的样式选项有限。例如,当您单击主导航中的页面链接来访问网站上的页面时,活动页面的链接不会更改主导航中的颜色。换句话说,没有任何指示向用户表明他们当前所在的页面。

良好的用户体验表明网站访问者应该始终有某种指示他们在您的网站上的位置 - 这有助于防止他们迷路。

在本教程中,我将向您展示如何在 WordPress 块主题中快速自定义站点导航,以显示活动页面的自定义颜色。我将在本次演示中使用“二十二十四”主题。

第 1 步:导航到块编辑器

从 WordPress 仪表板中,转到“外观”>“编辑器”(上图中的红色箭头)。这将带您进入站点编辑器。

单击菜单右侧的主要内容区域。这将带您进入块编辑器。

第 2 步:添加自定义 CSS

接下来,单击块编辑器右上角的“样式”图标。

单击“更多”图标(垂直三点图标),然后单击“其他 CSS”。

将以下 CSS 代码粘贴到“附加 CSS”文本框中:

.current-menu-item {
  color: #e23f1b;
}

替换“#”符号和“;”之间的值带有您想要使用的任何颜色的十六进制代码的符号(您可以通过编辑具有颜色值的任何内容,或使用诸如颜色工具之类的颜色工具在 WordPress 中获取颜色十六进制代码值 顺化薄荷 or Coolors).

单击块编辑器顶部的“保存”按钮,然后再次单击“保存”。

第三步:查看页面

保存更改后,您现在可以单击“查看页面”图标,以主导航中活动页面的新颜色预览您的网站。

故障排除

如果上述代码不适合您,您可能使用的主题对活动菜单项使用不同的类,或者您可能在导航块中使用自定义链接而不是页面链接。

非块主题或第三方块主题

要解决前一个问题,您必须使用浏览器中的“检查”工具,并找出主导航中的活动页面链接使用的类(您也可以尝试谷歌搜索“____主题用于活动页面的类是什么”)。主导航中的页面链接”)。

对于后一个问题,只需将自定义链接更改为站点编辑器内的页面链接即可。要在块编辑器中执行此操作,请单击编辑器左上角的徽标(将是 WordPress 徽标或您网站的徽标)。

然后,单击“导航”。单击站点主菜单名称旁边的“编辑”图标。

单击导航菜单进行编辑。然后,如果默认情况下未转到块设置侧栏中,请单击“转到父导航块”。

在“块设置”侧栏中的“菜单”标题下,您将看到主导航中所有页面的列表。如果导航中有任何网站页面被列为自定义链接(例如示例照片中的底部条目),则必须删除该条目并将其重新添加为页面(如果可能)。

为此,请单击该条目旁边的“选项”图标,然后单击“删除____”。接下来,单击页面列表底部的“+”图标。

接下来,点击“页面链接”,然后找到您要添加的页面。添加页面后,单击“保存”,然后再次单击“保存”。这个问题应该得到解决。