用 PHP 继承优化 WordPress 菜单 Walker：自定义菜单输出

王超

2025-03-31

WordPress主题开发

21 次

WordPress 的 wp_nav_menu() 默认输出 HTML 结构，但有时并不符合我们的设计需求。为了自定义菜单结构，WordPress 提供了 Walker_Nav_Menu 类，允许我们自定义菜单 HTML。然而，每次都重写 start_el() 和 start_lvl() 方法，难免重复代码。

本篇文章将教你如何使用 PHP 继承优化 WordPress 菜单 Walker，创建一个通用的菜单基类，快速生成符合设计需求的 HTML 结构。

为什么要自定义 WordPress 菜单？

WordPress 默认的 wp_nav_menu() 生成的 HTML 结构类似于：

<ul>
    <li class="menu-item"><a href="#">首页</a></li>
    <li class="menu-item menu-item-has-children">
        <a href="#">分类</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">子分类 1</a></li>
            <li class="menu-item"><a href="#">子分类 2</a></li>
        </ul>
    </li>
</ul>

但如果你想要更复杂的结构，比如：

添加 FontAwesome 图标
在 <li> 上添加额外的 data- 属性
使用 <div> 包裹二级菜单

就需要自定义 Walker_Nav_Menu。

1. 创建通用的 Walker 基类

为了避免重复代码，我们可以创建一个通用的 Base_Menu_Walker，封装常用功能。

class Base_Menu_Walker extends Walker_Nav_Menu {
    protected function add_menu_classes($classes, $item, $args) {
        // 添加自定义 class
        if ($item->current || $item->current_item_ancestor) {
            $classes[] = 'current-menu';
        }
        return implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    }

    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $classes = $this->add_menu_classes($item->classes, $item, $args);
        $output .= sprintf(
            '<li class="%s"><a href="%s">%s</a>',
            esc_attr($classes),
            esc_url($item->url),
            esc_html($item->title)
        );
    }

    public function start_lvl(&$output, $depth = 0, $args = null) {
        $output .= '<ul class="submenu">';
    }

    public function end_lvl(&$output, $depth = 0, $args = null) {
        $output .= '</ul>';
    }
}

代码解析

add_menu_classes() 统一管理菜单项 class，可以为当前页、祖先菜单项等添加特殊样式。
start_el() 定义菜单项 HTML，可以自定义 <li> 结构。
start_lvl() 定义子菜单 HTML 结构，可以替换默认 <ul class="sub-menu"> 为其他结构。

2. 创建具体的菜单 Walker

示例 1：添加 FontAwesome 图标的菜单

如果你的菜单项需要显示 FontAwesome 图标，你可以扩展 Base_Menu_Walker：

class Icon_Menu_Walker extends Base_Menu_Walker {
    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $icon = get_field('menu_icon', $item); // 假设你用 ACF 存储图标
        $classes = $this->add_menu_classes($item->classes, $item, $args);
        
        $output .= sprintf(
            '<li class="%s"><a href="%s"><i class="%s"></i> %s</a>',
            esc_attr($classes),
            esc_url($item->url),
            esc_attr($icon), // FontAwesome 图标
            esc_html($item->title)
        );
    }
}

示例 2：用 `<div>` 代替 `<ul>` 作为子菜单

如果你想要子菜单用 <div class="dropdown"> 而不是 <ul>，可以这样做：

class Div_Submenu_Walker extends Base_Menu_Walker {
    public function start_lvl(&$output, $depth = 0, $args = null) {
        $output .= '<div class="dropdown">';
    }

    public function end_lvl(&$output, $depth = 0, $args = null) {
        $output .= '</div>';
    }
}

3. 在主题中使用

你可以在 wp_nav_menu() 中调用你的 Walker：

wp_nav_menu([
    'theme_location' => 'primary',
    'walker' => new Icon_Menu_Walker()
]);

总结

用 PHP 继承封装 WordPress Walker，避免重复代码
创建 Base_Menu_Walker，让不同菜单共享通用逻辑
通过扩展 Walker 类，轻松实现 FontAwesome 图标、自定义子菜单结构

使用继承优化 Walker，让 WordPress 菜单开发更简单、更可维护！

文章标签：

菜单

WordPress日记主要承接WordPress主题定制开发、PSD转WordPress、WordPress仿站以及以WordPress为管理后端的小程序、APP，我们一直秉持“做一个项目，交一个朋友”的理念，希望您是我们下一个朋友。如果您有WordPress主题开发需求，可随时联系QQ：919985494 微信：18539976310

上一篇：如何使用 WordPress 的 wp_remote_get() 实现 API 数据抓取与展示

下一篇：在WordPress主题开发中实现自定义菜单和菜单位置