Question

我建立了一个教堂网站，当导航栏在启动页面上显示时只显示几页，然后在网站的其他地方显示更多链接。我使用CSS选择器来引用WordPress页面ID和菜单链接号。但随着网站的增长，这是无法管理的。有人可以建议一个有效的方法吗？

.page-id-2 .nav-primary #menu-item-1193,
.page-id-2 .nav-primary #menu-item-855,
.page-id-2 .nav-primary #menu-item-857,
.page-id-2 .nav-primary #menu-item-856,
.page-id-2 .nav-primary #menu-item-863,
.page-id-2 .nav-primary #menu-item-916,
.page-id-2 .nav-primary #menu-item-1116,
.page-id-2 .nav-primary #menu-item-15433,
.page-id-2 .nav-primary #menu-item-16122,
.page-id-2 .nav-primary #menu-item-15658 {
    display:none;
}

site with the live code here...

Answer 1

通过查看网站上的源代码，您可以使用以下选项：

.nav-primary > div > ul#menu-primary-navigation > li

shortly ul#menu-primary-navigation > li

Answer 2

如果你有权访问php文件，你可以使用is_home（）函数，为主页显示一个菜单，为内部页面显示另一个菜单。

您可以在这里阅读更多内容 https://developer.wordpress.org/reference/functions/is_home/

如果您无法访问php文件而只需要使用css，则可以将其切换

您可以隐藏首页上的所有链接，只显示您想要的链接，例如：

.page-id-1 .nav-primary .menu-item{
    display:none;
}

.page-id-1 .nav-primary #menu-item-1193,
.page-id-1 .nav-primary #menu-item-855,
.page-id-1 .nav-primary #menu-item-857,
.page-id-1 .nav-primary #menu-item-856{
    display:block;
}

假设page-id-1是主页。

Answer 3

您无法在CSS中模拟逻辑。

您应该创建两个单独的菜单。

菜单-A 将包含您希望在主页上的几个链接。
菜单-B 将在所有其他网页上包含您想要的项目。

完成此操作后，请将菜单-A 的默认display设置为none。

然后，您可以使用CSS中的.home选择器将菜单A 的display设置为Block或其他

然后在主页上将菜单-B 设置为display:none。

这里是我的意思的快速摘要

.menu-a {
  display: none
}

.home .menu-a {
  display: block
}

.home .menu-B {
  display: none;
}

这将为您提供更多控制权。

如果您不确定如何注册第二个菜单，请参阅本指南。

How to Add More Navigation Menus to your WordPress Theme

如何在CSS选择器中模拟逻辑

3 个答案: