WordPress 中的 Walker 类答案

【问题标题】：Walker Class in WordPressWordPress 中的 Walker 类
【发布时间】：2016-06-18 00:46:59
【问题描述】：

我正在尝试在页脚导航中创建此导航结构：

<div class="footer container">
    <div class="footer-nav-containers">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="footer-nav-containers">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="footer-nav-containers">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

我对 WordPress 还是很陌生，如果能帮助我将其设置为 Walker 课程，我将不胜感激。谢谢！

【问题讨论】：

这里有一个很好的解释：code.tutsplus.com/tutorials/…。你到底想做什么？您想在页脚中重复您的主要/标题导航吗？
感谢@NathanielFlick 基本上我正在尝试将我硬编码的内容转换为 WP 主题。在页脚中，我想将每个 ul 包装在一个名为“footer-nav-containers”的 div 中。根据我的阅读，使用 walker 类是我最好的选择，但我不确定如何获得这种结构。
嗨，你可以做 Walker，但我通常倾向于创建一个外观/菜单（如果你希望它们是相同的项目，你可以调用你的页脚或简单地在页脚中再次调用主导航） .这里有一些很棒的信息：premium.wpmudev.org/blog/add-menus-to-wordpress
对于新菜单，您可以在 functions.php 中查找 nav_menu，将其复制并命名为您选择的名称，可能是 footer_menu，然后在模板中调用它： '新菜单' ) ); ?>

标签： php html wordpress

【解决方案1】：

首先，HTML 是无效的。您需要将<li> 放入<ul> 我假设你已经注册了“footer”菜单

无论如何....

 <?php wp_nav_menu( array( 
      'theme_location' => 'footer', 
      'menu_id' => 'footer-menu' ,
      'container'         => 'div',
      'menu_class'        => 'footer container',
      ) 
    ); 
    ?>

并添加 jQuery 来包装 3 个菜单项。

var items = $(".footer container > li");
for(var i = 0; i < items.length; i+=3) {
   items.slice(i, i+3).wrapAll("<div class='footer-nav-containers'></div>");
}

【讨论】：