如何通过ACF真假字段隐藏WordPress导航菜单项？

1. 先确认ACF字段关联是否正确 #

• 检查ACF字段的位置规则是否选择了「导航菜单项」，字段名称（比如hide_menu_item）要记准确
• 用调试代码验证字段值是否能正确获取：

  add_action('wp_footer', 'debug_acf_menu_field');
  function debug_acf_menu_field() {
      $menu = wp_get_nav_menu_object('主导航'); // 替换为你的主导航菜单名称
      if (!$menu) return;
      $items = wp_get_nav_menu_items($menu->term_id);
      foreach ($items as $item) {
          echo "菜单项「{$item->title}」ID: {$item->ID} | 隐藏字段值: " . get_field('hide_menu_item', $item->ID) . "<br>";
      }
  }
  

  查看页面底部输出，确认每个菜单项的字段值是否和后台设置一致。如果输出为空或错误，说明字段关联有问题，重新检查ACF字段设置。

2. 从源头上过滤菜单项（推荐） #

直接在WP获取菜单项的阶段移除需要隐藏的项，不受Cwicly渲染结构影响，比CSS更可靠：

add_filter('wp_get_nav_menu_items', 'filter_hidden_cwicly_menu_items', 10, 3);
function filter_hidden_cwicly_menu_items($items, $menu, $args) {
    // 仅针对主导航，根据你的菜单名称调整
    if ($menu->name !== '主导航') return $items;
    
    foreach ($items as $key => $item) {
        // 替换为你的ACF字段名称
        $should_hide = get_field('hide_menu_item', $item->ID);
        if ($should_hide) {
            unset($items[$key]);
        }
    }
    return $items;
}

把这段代码加到子主题的functions.php里，清除缓存后测试。

3. 针对Cwicly渲染结构的CSS隐藏方案 #

如果上面的过滤钩子不生效（Cwicly未使用原生wp_get_nav_menu_items），可以给目标菜单项标记属性后用CSS隐藏：

步骤1：给隐藏项加自定义属性 #

add_filter('nav_menu_item_attributes', 'add_hide_attribute_to_menu_item', 10, 4);
function add_hide_attribute_to_menu_item($atts, $item, $args, $depth) {
    $should_hide = get_field('hide_menu_item', $item->ID);
    if ($should_hide) {
        $atts['data-menu-hide'] = 'true';
    }
    return $atts;
}

步骤2：添加CSS规则 #

[data-menu-hide="true"] {
    display: none !important;
}

把CSS加到主题自定义CSS或Cwicly的全局样式里。

4. 验证字段是否作用于<li>元素 #

打开浏览器开发者工具，查看菜单的<li>标签：

• 如果能看到data-menu-hide="true"属性，说明字段已正确关联，问题出在CSS优先级（加!important或调整选择器权重）
• 如果看不到属性，说明钩子未触发，检查Cwicly是否禁用了原生WP菜单钩子，此时需要查看Cwicly开发者文档找对应的菜单渲染钩子（比如cwicly_nav_menu_item类的相关过滤）

内容的提问来源于stack exchange，提问作者Shaun Taylor