Bootstrap + Wordpress + Timber答案

【问题标题】：Bootstrap + Wordpress + TimberBootstrap + Wordpress + Timber
【发布时间】：2016-07-19 06:47:04
【问题描述】：

有没有用wordpress+timber+bootstrap创建的教程或模板？

我的菜单有问题...

菜单头.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 %}

不幸的结果是这样的：

我不知道如何将子菜单显示为下拉菜单...请帮助...

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

【问题讨论】：

标签： wordpress twitter-bootstrap timber

【解决方案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 %}

【讨论】：

【解决方案2】：

我在搜索 WP-Timber-Foundtion 6 信息时发现了大约一年前的一篇博文。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 %}

您应该遍历menu.items，这是一个包含所有菜单项的数组。

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

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

最后，如果您想轻松查看菜单对象中发生的情况，可以使用 menu|print_r 显示此对象

【讨论】：