Question

我读过很多文章和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的人来说很容易，所以请帮助我。

P.S。对不起我的英语，这不是我的母语。

Answer 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保存的一个片段，我在寻找相同的内容时无需使用JavaScript就为其添加了书签。

Answer 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结构。

创建WordPress菜单

2 个答案: