创建 WordPress 菜单的自定义 HTML 结构答案

【问题标题】：Creating custom HTML structure of WordPress menu创建 WordPress 菜单的自定义 HTML 结构
【发布时间】：2015-11-17 06:44:59
【问题描述】：

我已经阅读了很多文章和 WordPress Codex 页面，但仍然无法理解。我想用非常简单的 HTML 结构创建菜单，如下所示：

<nav class="nav">
    <ul class="list">
        <li class="item"><a class="link--active" href="#">Link 1</a></li>
        <li class="item"><a class="link" href="#">Link 2</a></li>
        <li class="item"><a class="link" href="#">Link 3</a></li>
    </ul>
</nav>

对我来说最重要的是能够将我的自定义类分配给每个元素。我看到了使用 WP Walker 类的非常复杂的示例，并试图简化它们，但没有奏效。我相信对于熟悉 WordPress 的人来说这很容易，所以请帮助我。

附：对不起，我的英语不是我的母语。

【问题讨论】：

wp 有一个标准的walker，它的输出和上面的一样，但是有不同的类并且使用div而不是nav。
我写道，课程对我来说是最重要的。使用 nav 代替 div 也不错，但这不是什么大问题。

标签： html wordpress menu

【解决方案1】：

您需要使用 wp_nav_menu 功能。

要输出上面列出的 HTML，您需要传递以下内容：

<?php wp_nav_menu( array(
   'menu' => 'Your Name for Menu',
   'container' => 'nav',
   'container_class' => 'nav',
   'menu_class' => 'list'
 )); ?>

至于列表项和链接类，您可能需要查看 WordPress 自行添加的默认项，看看它们是否适合您的需求。

至于将活动类添加到链接中，请尝试以下代码：

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

    if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
) {
    $classes[] = "active";
   }
   return $classes;
}

请注意，这不是我的代码，而是我从 https://wordpress.stackexchange.com/questions/112955/add-class-to-active-element-and-its-parent-in-nav-menu 保存的 sn-p，我在查找相同内容时添加了书签，而无需使用 JavaScript。

【讨论】：

我没有在我的问题中提到它，但我使用 BEM，因此课程非常重要。因为我也使用 SASS，所以我想我只会 @extend WordPress 类。它不会像我想要的那么好，但它是一些东西。谢谢。

【解决方案2】：

在你的函数上添加这个函数

function wp_get_menu_array($current_menu) {
    $menu_name = $current_menu;
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $array_menu = wp_get_nav_menu_items( $menu->term_id); 
    $menu = array();
    foreach ($array_menu as $m) {
        if (empty($m->menu_item_parent)) {
            $menu[$m->ID] = array();
            $menu[$m->ID]['ID']      =   $m->ID;
            $menu[$m->ID]['title']       =   $m->title;
            $menu[$m->ID]['url']         =   $m->url;
            $menu[$m->ID]['children']    =   array();
        }
    }
    $submenu = array();
    foreach ($array_menu as $m) {
        if ($m->menu_item_parent) {
            $submenu[$m->ID] = array();
            $submenu[$m->ID]['ID']       =   $m->ID;
            $submenu[$m->ID]['title']    =   $m->title;
            $submenu[$m->ID]['url']  =   $m->url;
            $menu[$m->menu_item_parent]['children'][$m->ID] = $submenu[$m->ID];
        }
    }
    return $menu;
}

在你的视图上调用它

<div class="row">
    <?php
                $menu_items = wp_get_menu_array('your_menu_name');
                foreach ($menu_items as $item) : ?>
                    <div class="col-md-3">
                      <strong><?= $item['title'] ?></strong>
                      <?php if( !empty($item['children']) ):?>
                      <ul>
                        <?php foreach($item['children'] as $child): ?>
                          <li>
                            <a href="<?= $child['url'] ?>" title="<?= $child['title'] ?>"><?= $child['title'] ?></a>
                          </li>
                        <?php endforeach; ?>
                      </ul>
                      <?php endif; ?>
                    </div>
                  <?php endforeach; ?>  
</div>

这为您提供了两级菜单。您可以根据需要自定义 html 结构。

【讨论】：