Bootstrap + Wordpress + Timber

Question

是否有使用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>

menu.twig：

{% 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 %}

不幸的结果就是这个：

我不知道如何实现它，子菜单显示为下拉菜单...请帮助...

编辑：我将搬到基金会...... :)

Answer 1

@ 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 %}

Answer 2

大约一年前，我在搜索WP-Timber-Foundtion 6信息时遇到了一篇博文。

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

Answer 3

这样的事情应该有效

  <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>

Answer 4

在menu-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 %}

你应该遍历qazxsw poi，这是一个包含所有菜单项的数组。

顺便说一下，确保将菜单传递给上下文：

menu.items

最后，如果您想轻松查看菜单对象中发生的情况，可以使用$context['menu'] = new \Timber\Menu(ID);显示此对象