Использование настраиваемого поля ACF Link в меню Timber

Question

Мне нужно добавить пользовательские ссылки 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 в шаблон веточки?

Любая помощь приветствуется, спасибо!

Answer 1

Если ссылка жестко закодирована и видна всегда, независимо от того, что вам нужно сделать, это добавить ее после тега {% 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, тогда мне потребуется дополнительная информация о вашей настройке, чтобы помочь вам.