目录
WordPress 的 wp_nav_menu()
默认输出 HTML 结构,但有时并不符合我们的设计需求。为了自定义菜单结构,WordPress 提供了 Walker_Nav_Menu
类,允许我们自定义菜单 HTML。然而,每次都重写 start_el()
和 start_lvl()
方法,难免重复代码。
本篇文章将教你如何使用 PHP 继承优化 WordPress 菜单 Walker,创建一个通用的菜单基类,快速生成符合设计需求的 HTML 结构。
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>
但如果你想要更复杂的结构,比如:
<li>
上添加额外的 data-
属性<div>
包裹二级菜单就需要自定义 Walker_Nav_Menu
。
为了避免重复代码,我们可以创建一个通用的 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">
为其他结构。如果你的菜单项需要显示 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)
);
}
}
<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>';
}
}
你可以在 wp_nav_menu()
中调用你的 Walker:
wp_nav_menu([
'theme_location' => 'primary',
'walker' => new Icon_Menu_Walker()
]);
Base_Menu_Walker
,让不同菜单共享通用逻辑使用继承优化 Walker,让 WordPress 菜单开发更简单、更可维护!
WordPress日记主要承接WordPress主题定制开发、PSD转WordPress、WordPress仿站以及以WordPress为管理后端的小程序、APP,我们一直秉持“做一个项目,交一个朋友”的理念,希望您是我们下一个朋友。如果您有WordPress主题开发需求,可随时联系QQ:919985494 微信:18539976310
还没有任何评论,你来说两句吧