Bootstrap + Wordpress + Древесина

Существуют ли какие-либо учебные пособия или шаблоны, созданные с помощью wordpress+timber+bootstrap?

У меня проблема с меню...

меню-head.twig:

<nav class="navbar navbar-custom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            {% include "menu.twig" with {'menu': menu.get_items} %}
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

меню.ветка:

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} {% for item in menu %}
    <li class="{{item.classes | join(' ')}}">
        <a href="{{item.get_link}}">{{item.title}}</a> {% include "menu.twig" with {'menu': item.get_children} %}
    </li>
    {% endfor %}
</ul>
{% endif %}

и неудачный результат таков: введите здесь описание изображения

Я не знаю, как реализовать это, чтобы дочерние меню отображались в виде выпадающих меню... пожалуйста, помогите...

РЕДАКТИРОВАТЬ: я перееду в фонд... :)


wordpress twitter-bootstrap timber
person Manson Mamaril    schedule 19.07.2016    source источник

Ответы (4)


arrow_upward
2
arrow_downward

@manson-mamaril, ты просто немного пропустил в menu.twig. Вместо {% for item in menu %} должно быть {% for item in menu.get_items %}:

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} 
    {% for item in menu.get_items %}
        <li class="{{item.classes | join(' ')}}">
            <a href="{{item.get_link}}">{{item.title}}</a> 
            {% include "menu.twig" with {'menu': item.get_children} %}
        </li>
    {% endfor %}
</ul>
{% endif %}
person Jared    schedule 31.01.2017

arrow_upward
0
arrow_downward

Я наткнулся на сообщение в блоге около года назад, когда искал информацию о WP-Timber-Foundtion 6.

http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html

person JAstuccio    schedule 21.07.2016

arrow_upward
0
arrow_downward

Что-то вроде этого должно работать

  <div class="collapse navbar-collapse" id="navbarmain">
      <ul class="nav navbar-nav main-menu">
          {% for item in menu.get_items %}
              <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
                  {% if item.get_children %}
                      <ul class="dropdown-menu" role="menu">
                          {% for child in item.get_children %}
                              <li><a href="{{child.get_link}}" class="transition">{{child.title}}</a></li>
                          {% endfor %}
                      </ul>
                  {% endif %}
              </li>
          {% endfor %}
      </ul>
  </div>
person Richard    schedule 24.01.2017

arrow_upward
0
arrow_downward

В вашем меню-head.twig замените {% include "menu.twig" with {'menu': menu.get_items} %} на {% include "menu.twig" with {'menu': menu} %}

Затем в вашем menu.twig

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} {% for item in menu.items %}
    <li class="{{item.classes | join(' ')}}">
        <a href="{{item.get_link}}">{{item.title}}</a> {% include "menu.twig" with {'menu': item.get_children} %}
    </li>
    {% endfor %}
</ul>
{% endif %}

Вы должны пройти через menu.items, который представляет собой массив, содержащий все ваши пункты меню.

Кстати, убедитесь, что вы передаете свое меню в контекст:

$context['menu'] = new \Timber\Menu(ID);

Наконец, если вы хотите легко увидеть, что происходит в вашем объекте меню, вы можете отобразить этот объект с помощью menu|print_r

person Aurélien    schedule 10.03.2019