自定义wordpress三级导航菜单代码
技术文章 2024年3月15日
首先,在你的主题functions.php文件中,添加以下代码以注册一个新的菜单位置:
function mytheme_register_menus() {
register_nav_menus(
array(
'primary-menu' => __('Primary Menu', 'mytheme')
)
);
}
add_action('init', 'mytheme_register_menus');
接下来,在你的主题header.php文件中,添加以下代码以显示3级菜单:
<nav id="primary-menu" class="main-navigation" role="navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container' => false,
'menu_class' => 'menu',
'fallback_cb' => false,
'walker' => new MyTheme_Menu_Walker()
)
);
?>
</nav>
然后,在你的主题目录中创建一个名为menu-walker.php的文件,并添加以下代码:
class MyTheme_Menu_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"sub-menu level-" . ($depth + 1) . "\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "</ul>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$output .= '<li' . $class_names . '>';
$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
$output .= '<a' . $attributes . '>';
$output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$output .= '</a>';
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>\n";
}
}
最后,在你的主题functions.php文件中,添加以下代码以包含menu-walker.php文件,ZhanYes小编提醒,也可以不要这个直接放在functions.php文件中:
require_once get_template_directory() . '/menu-walker.php';
现在,你应该可以在WordPress后台创建一个包含3级菜单的自定义菜单,并将其分配给主题位置。