You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何仅显示当前列表项并隐藏其他项(附WordPress侧边栏代码)

嘿,我来帮你搞定这个需求——只显示当前列表项,隐藏其他项。结合你已经写的代码,这里有两种靠谱的方案,你可以根据自己的情况选:

方案一:纯CSS快速实现(利用WordPress自带类)

WordPress会自动给当前页面对应的菜单项添加专属类,我们可以直接用CSS基于这个类来控制显示隐藏:

  1. 先确认类名:在当前分类页面打开浏览器开发者工具(按F12),查看菜单列表里的当前项,你会发现它带有current-cat(分类菜单场景)或current-menu-item(自定义菜单场景)的类。
  2. 添加以下CSS代码:
/* 默认隐藏所有菜单项 */
.menuincoursepages ul li {
    display: none;
}

/* 仅显示当前活跃的菜单项 */
.menuincoursepages ul li.current-cat,
.menuincoursepages ul li.current-menu-item {
    display: block;
}
  1. 把这段CSS添加到主题中:可以通过后台「外观 -> 自定义 -> 额外CSS」粘贴,或者编辑主题的style.css文件(注意用子主题的话要编辑子主题文件,避免主题更新丢失代码)。
方案二:PHP自定义输出菜单(更灵活可控)

如果默认侧边栏的菜单输出不够灵活,你可以替换原来的dynamic_sidebar代码,直接用WordPress内置函数输出菜单,精准控制显示逻辑:

分类菜单场景

<div class="menuincoursepages">
    <?php
    // 输出分类菜单,自动识别并高亮当前分类
    wp_list_categories(array(
        'title_li' => '', // 去掉默认的分类标题
        'current_category' => get_queried_object_id(), // 绑定当前页面的分类ID
        'style' => 'list', // 保持列表结构
        'hide_empty' => true, // 可选:隐藏没有文章的分类
    ));
    ?>
</div>

自定义菜单场景

如果你的侧边栏是自定义菜单而非分类菜单,换成wp_nav_menu函数:

<div class="menuincoursepages">
    <?php
    wp_nav_menu(array(
        'menu' => '你的菜单名称', // 替换为你后台创建的菜单名称
        'container' => false, // 去掉默认的容器div
        'current_class' => 'current-menu-item', // 指定当前项的类名
    ));
    ?>
</div>

替换完成后,依然搭配方案一中的CSS代码即可实现效果。

可选:显示当前项的子菜单

如果需要显示当前项的子菜单,修改CSS如下:

.menuincoursepages ul li,
.menuincoursepages ul li ul {
    display: none;
}

.menuincoursepages ul li.current-cat,
.menuincoursepages ul li.current-menu-item {
    display: block;
}

/* 显示当前项的子菜单 */
.menuincoursepages ul li.current-cat ul,
.menuincoursepages ul li.current-menu-item ul {
    display: block;
}

内容的提问来源于stack exchange,提问作者mukesh

火山引擎 最新活动