如何自定义WordPress导航菜单实现所有链接放在单个li标签内

方法1：使用wp_get_nav_menu_items实现（已验证可行） #

该方法逻辑简单直观，不需要处理Walker类的层级规则，直接按需输出结构即可：

• 首先在WordPress后台「外观-菜单」中创建对应导航菜单，绑定到指定显示位置
• 在主题需要输出导航的位置插入以下代码：

// 替换为你实际绑定的菜单位置别名
$menu_location = 'primary';
$menu_locations = get_nav_menu_locations();
// 校验菜单位置是否存在绑定
if (isset($menu_locations[$menu_location])) {
    $menu_id = $menu_locations[$menu_location];
    $menu_items = wp_get_nav_menu_items($menu_id);
    if (!empty($menu_items)) {
?>
<div class="nav-bar">
    <ul>
        <li>
            <?php foreach ($menu_items as $item) : ?>
                <a href="<?php echo esc_url($item->url); ?>">
                    <?php echo esc_html($item->title); ?>
                </a>
            <?php endforeach; ?>
        </li>
    </ul>
</div>
<?php
    }
}
?>

方法2：自定义Walker类实现（保留wp_nav_menu调用逻辑） #

如果你希望继续使用WordPress原生的wp_nav_menu函数调用菜单，也可以通过自定义Walker实现需求：

1. 首先将以下代码添加到主题的functions.php文件中：

class Single_Li_Nav_Walker extends Walker_Nav_Menu {
    // 禁用默认的层级输出
    function start_lvl( &$output, $depth = 0, $args = array() ) {}
    function end_lvl( &$output, $depth = 0, $args = array() ) {}
    // 仅输出a标签，不生成默认的li包裹
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
    }
    function end_el( &$output, $item, $depth = 0, $args = array() ) {}
}

2. 在需要输出导航的位置调用菜单，手动包裹你需要的外层结构：

<div class="nav-bar">
    <ul>
        <li>
            <?php
            wp_nav_menu(array(
                'theme_location' => 'primary', // 替换为实际的菜单位置别名
                'container' => false,
                'items_wrap' => '%3$s', // 禁用默认的ul结构输出，仅返回菜单项内容
                'walker' => new Single_Li_Nav_Walker(),
                'fallback_cb' => false
            ));
            ?>
        </li>
    </ul>
</div>

两种方案都可以完全匹配你需要的DOM结构，其中wp_get_nav_menu_items的方案调试成本更低，更适合高自定义的菜单需求。

内容的提问来源于stack exchange，提问作者ATXVISIONS