Wordpress -选择/加载子菜单项页面时突出显示父菜单项

5gfr0r5j  于 2023-04-05  发布在  WordPress
关注(0)|答案(8)|浏览(252)

我有一个基本的菜单和一些菜单项有子菜单.我有很少的经验与wordpress和没有时间深入到细节现在.所以我的问题是,当用户导航到子菜单页之一时,突出显示顶部菜单项的最简单方法是什么?(我尝试使用javascript和纯css来通过元素id和使用“current-cat-parent”类设置color属性,但都不起作用)。
任何帮助都将不胜感激。
注意:我使用的主题称为变色龙。

pxiryf3j

pxiryf3j1#

你可以将当前菜单项类赋给.current-menu-ancestor类,如

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

它将突出显示父页面菜单
请参阅this page

hl0ma9xz

hl0ma9xz2#

您可以在主题的footer.php文件中的结束body标记之前插入以下代码。

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

它的美妙之处在于它是在PHP中编写的,所以代码是动态的。它所做的只是添加另一个本地WordPress导航类,使当前页面的链接处于活动状态。
我在这里写了一篇简短的文章来解释它是如何工作的:快!
如果你有任何问题,请随时告诉我。

btqmn9zl

btqmn9zl3#

我在编辑这个时遇到了一点问题,但找到了一个简单的解决方案。我使用的是WordPress的店面主题,只需将此粘贴到您的子主题的style.css文件中:

li.current-menu-parent >a {
  color:red !important;
}
kzmpq1sx

kzmpq1sx4#

有意思。你的解决方案突出了父母而不是现在的孩子。但它让我走上了正确的道路,最终,这是我所需要的。

li.current-menu-parent >a, .current-menu-item >a {
    color: red !important;
}
wmtdaxz3

wmtdaxz35#

WordPress 5.7

测试和工作,2021年

2021年。如果你们中的任何人还在寻找解决方案,那么它就在这里。
这将突出显示父菜单及其子菜单。如果没有子菜单,则父菜单将突出显示。记住!important是必需的。

.current-menu-parent > a,
.current-menu-item a { 
    color: blue !important; /* Important is required */
}
cuxqih21

cuxqih216#

.current-menu-ancestor没有为我工作。.current-page-ancestor没有。

zf9nrax1

zf9nrax17#

这对我很有效。下面的CSS将允许你对活动菜单进行样式化......最多三个菜单。

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
  • 代表当前活动页面的菜单按钮将为黄色,
  • 如果代表当前活动页面的按钮是嵌套的,则其父按钮将为绿色...否则菜单上的顶级按钮将为绿色。
  • 最重要的是(无论菜单中出现多少层次的嵌套)任何类为**.current-menu-ancestor**的元素都将使用红色背景进行样式化。

也可以只设置**.current-menu-ancestor**的样式,而设置任何父菜单项的样式。

vohkndzv

vohkndzv8#

如果你想突出显示主菜单上父项(比如我!),用jQuery试试:

jQuery(document).ready(function() {
    jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
        .parent().addClass('current-menu-item');
});

我还添加了'default'类到其中一个项目(在'li')中,以便为我的帖子页面选择它:

jQuery(document).ready(function() {
    if (jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
        .parent().addClass('current-menu-item').length == 0 &&
        document.URL.split('/')[3].length > 1)
        jQuery('#menu-mainmenu .default').addClass('current-menu-item');
});

有了这个,你将有如下选择。例如:关于我们|产品展示|联系我们|关于我们
'http:example.com':〉首页|产品展示|联系我们|关于我们
'http://example.com/shop':关于我们|〉购物|联系我们|关于我们
'http://example.com/shop/product-1':关于我们|〉购物|联系我们|关于我们
'http://example.com/posts':关于我们|产品展示|〉新闻动态|关于我们
'http://example.com/new-post':关于我们|产品展示|〉新闻动态|关于我们
'http://example.com/about-us':关于我们|产品展示|联系我们|〉关于我们

相关问题