在“木材”菜单中使用ACF的“链接”自定义字段

时间:2018-07-03 20:09:12

标签: wordpress twig timber

我需要将自定义CTA链接添加到网站的主菜单。目前,我的菜单标记是:

<nav id="js-menu--primary" class="menu menu--primary clearfix" aria-label="{{ site_nav.title|e}} Menu" role="navigation">
  <button id="menu-toggle" class="menu-toggle" aria-label={{ __('Menu', 'realease')|e('esc_html') }} aria-expanded="false">
  <span></span>
</button>
<ul class="menu__items menu__items--primary clearfix">
{% for item in site_nav.items %}
  <li class="{{ item.classes|join(' ') }} menu__item">
    <a class="menu__link menu__link--primary" href="{{ item.link }}">{{ item.title }}</a>
    {% if item.children %}
      <ul class="sub-menu">
        {% for child in item.children %}
          <li class="sub-menu__item">
            <a href="{{ child.link }}">{{ child.title }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}
</ul>
</nav><!-- .menu--primary -->

我想在菜单项之后添加CTA链接,其显示为:

  <li class="site__header--cta">
    <a href="ctalink" class="button button__secondary">ctatext</a>
  </li>

如何在树枝模板中包含这些ACF菜单链接字段?

感谢您的帮助,谢谢!

1 个答案:

答案 0 :(得分:0)

如果无论如何都对链接进行了硬编码和可见,那么您唯一需要做的就是将其添加到{% endfor %}标签之后。

然后它将显示为:

<nav id="js-menu--primary" class="menu menu--primary clearfix" aria-label="{{ site_nav.title|e}} Menu" role="navigation">
  <button id="menu-toggle" class="menu-toggle" aria-label={{ __('Menu', 'realease')|e('esc_html') }} aria-expanded="false">
  <span></span>
</button>
<ul class="menu__items menu__items--primary clearfix">
{% for item in site_nav.items %}
  <li class="{{ item.classes|join(' ') }} menu__item">
    <a class="menu__link menu__link--primary" href="{{ item.link }}">{{ item.title }}</a>
    {% if item.children %}
      <ul class="sub-menu">
        {% for child in item.children %}
          <li class="sub-menu__item">
            <a href="{{ child.link }}">{{ child.title }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}
  <li class="site__header--cta">
    <a href="ctalink" class="button button__secondary">ctatext</a>
  </li>
</ul>
</nav><!-- .menu--primary -->

但是,如果您要为导航项动态地执行此操作,并从wordpress菜单中获取该信息,那么我将需要有关您的设置的更多信息,以便为您提供帮助。