WordPress Timber三级深度菜单调用问题求助

嘿，我来帮你搞定这个Timber多级菜单的问题！

你遇到的情况是因为官方文档的示例通常只处理两级菜单，但Timber其实支持获取菜单的所有层级——每个菜单项对象都自带children属性，里面就是它的子菜单，不管嵌套多少层都能拿到。

最优雅的解决方法是用Twig的**宏（macro）**来递归渲染菜单，这样不管你的菜单有多少级，都能自动处理。下面是具体步骤和代码：

第一步：定义递归渲染的Twig宏 #

在你的模板文件（比如header.twig）里，先添加这个宏：

{% macro render_menu_items(items) %}
  {% for item in items %}
    <li class="menu-item{% if item.children %} has-children{% endif %}">
      <a href="{{ item.link }}" {% if item.current %}aria-current="page"{% endif %}>
        {{ item.title }}
      </a>
      <!-- 如果当前项有子菜单，递归调用宏渲染 -->
      {% if item.children %}
        <ul class="submenu">
          {{ _self.render_menu_items(item.children) }}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

第二步：在主模板里调用这个宏 #

接下来，把你原来的菜单渲染部分替换成调用这个宏：

{% if menu %}
  <div class="header-menu-items">
    <div class="header-menu-item mod-title">
      <a href="{{ site.url }}" class="" rel="home">
        <!-- 这里放你的网站标题/Logo代码 -->
      </a>
    </div>
    <!-- 主菜单容器 -->
    <ul class="main-menu">
      {{ _self.render_menu_items(menu.items) }}
    </ul>
  </div>
{% endif %}

为什么这个方法管用？ #

Twig的宏可以自己调用自己（递归），每遇到一个有children的菜单项，就会自动生成下一级的子菜单列表，不管你嵌套3级、4级还是更多，都能完美渲染。

另外我还加了几个实用细节：

• has-children类：方便你用CSS给有子菜单的项加下拉箭头之类的样式
• aria-current="page"：给当前页面的菜单项加无障碍属性，提升页面可访问性

最后要确保你在WordPress后台的菜单设置里，已经正确创建了多层级菜单（拖拽菜单项缩进就能创建子菜单），Timber会自动把这些层级映射到菜单项的children属性里。

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