自定义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级菜单的自定义菜单,并将其分配给主题位置。

相关文章