当页面不在菜单中时，Timber Twig 将类添加到祖先菜单项答案

【问题标题】：Timber Twig add class to ancestor menu item when page is not in menu当页面不在菜单中时，Timber Twig 将类添加到祖先菜单项
【发布时间】：2020-04-13 08:28:26
【问题描述】：

我有一个包含 2 个子级别的菜单：/news/current-news/ - 在“当前新闻”级别，顶部的“新闻”列表项正确选择了“当前页面父级” ' 班级。该页面上的项目太多，无法作为第三级菜单放入，这些是分页的预告片。当您单击其中一个预告片时，网址为 /news/current-news/item-title - 在该页面上，我希望菜单中的主要“新闻”项仍然选择“ current_page_parent' 类 - 这是可能的，因为它是 url 中的子项，而不是菜单结构中的子项？我的菜单是：

{% if menu %}
<ul class="nav-main">
{% for item in menu.get_items %}
  <li class="nav-main-item{{ item.classes|join(' ') }}" role="menuitem"
  {% if item.children %}role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0"{% endif %}>
    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>
    {% if item.get_children %}
      <ul class="nav-drop">
      {% for child in item.get_children %}
        <li class="nav-drop-item {{ child.classes | join(' ') }}">
          <a class="nav-drop-link" href="{{ child.get_link }}">
            <div class="menu-item-title">{{ child.title }}</div> 
            <div class="menu-item-description">{{ child.post_content }}</div>
          </a>
        </li>
      {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}</ul>{% endif %}

以及来自页面的 php 模板：

<?php
/**
 * Template Name: Blog Landing Page
 * Template Post Type: page
 */

global $paged;
  if (!isset($paged) || !$paged){
      $paged = 1;
  }

 $context = Timber::context();

$timber_post     = new Timber\Post();
$context['post'] = $timber_post;

$newsArgs   =   array(
    'post_type'     =>  'post',
  'post_status'     => 'publish',
  'posts_per_page'  =>  6,
  'paged'           => $paged,
    'orderby'       =>  array(
    'date'          =>  'DESC'
));
$context['news'] = new Timber\PostQuery($newsArgs);

Timber::render( 'layouts/layout-blog.twig', $context );

【问题讨论】：

我通常使用nav_menu_css_class 来做类似的事情。为了帮助您提供具体的代码示例，我有两个问题：news/current-news 是您在设置 → 阅读中指定为帖子页面的页面吗？以及帖子类型为post 的单个新闻项目是否发布？
嗨@Gchtr - 1 - 不；和 2 - 是的，但是 /news/videos 也有类似的场景，它们也是来自“视频”类别的帖子类型“帖子”。每个页面（如“当前新闻”或“视频”）都有自己的模板，我将使用其中的代码更新问题。

标签： wordpress menu twig timber

【解决方案1】：

我相信您可以通过比较帖子路径和菜单项路径来做到这一点。如果帖子路径包含菜单项路径，则此示例添加 current_page_parent 类：

{% if item.path in post.path %} current_page_parent {% endif %}

它在你的 sn-p 中：

{% if menu %}
<ul class="nav-main">
{% for item in menu.get_items %}
  <li class="nav-main-item{{ item.classes|join(' ') }}{% if item.path in post.path %} current_page_parent {% endif %}" role="menuitem"
  {% if item.children %}role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0"{% endif %}>
    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>
    {% if item.get_children %}
      <ul class="nav-drop">
      {% for child in item.get_children %}
        <li class="nav-drop-item {{ child.classes | join(' ') }}">
          <a class="nav-drop-link" href="{{ child.get_link }}">
            <div class="menu-item-title">{{ child.title }}</div> 
            <div class="menu-item-description">{{ child.post_content }}</div>
          </a>
        </li>
      {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}</ul>{% endif %}

如果您想将该行为限制为仅 News 菜单项，只需添加另一个条件：

{% if item.title == 'News' and item.path in post.path %} current_page_parent {% endif %}

【讨论】：