wp_nav_menu函数的walker使用以及菜单的动态遍历

wordpress自带的wp_nav_menu可以很方便的获取菜单项,参数也非常简单,甚至只需要一个参数:theme_location就可以正常调用了。此函数的参数如下:

function wp_nav_menu( $args = array() ) {
	static $menu_id_slugs = array();

	$defaults = array(
		'menu'                 => '',
		'container'            => 'div',
		'container_class'      => '',
		'container_id'         => '',
		'container_aria_label' => '',
		'menu_class'           => 'menu',
		'menu_id'              => '',
		'echo'                 => true,
		'fallback_cb'          => 'wp_page_menu',
		'before'               => '',
		'after'                => '',
		'link_before'          => '',
		'link_after'           => '',
		'items_wrap'           => '<ul id="%1$s" class="%2$s">%3$s</ul>',
		'item_spacing'         => 'preserve',
		'depth'                => 0,
		'walker'               => '',
		'theme_location'       => '',
	);

....

虽然大多数情况通过wp_nav_menu配合css以及可以完全满足我们的要求,但是在一些特殊情况下,还是用得不那么舒服。不过其实可以通过walker来定制wp_nav_menu的html代码,以下只是一个简单的示例:

class My_Custom_Walker extends Walker_Nav_Menu {
    // 添加图标到菜单项的开始
    function start_el(&$output, $item, $depth = 0, $args = null) {
        $output .= "<li>";

        // 输出菜单项的链接
        $output .= '<a href="' . $item->url . '">';

        // 输出菜单项的文本
        $output .= $args->link_before . $item->title . $args->link_after;

        // 输出菜单项的图标(假设有一个'icon'字段存储了图标类名)
        $output .= '<span class="icon ' . esc_attr($item->icon) . '"></span>';

        // 关闭菜单项的链接
        $output .= '</a>';
    }

    // 添加图标到菜单项的结束
    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= "</li>\n";
    }
}

// 在wp_nav_menu中使用自定义Walker类
wp_nav_menu(array(
    'theme_location' => 'main-menu',
    'walker' => new My_Custom_Walker(),
));

可以通过继承Walker_Nav_Menu,来重新定义一个菜单输出类,从而达到输出我们想要的wp_nav_menu的html代码,具体可以参考官网:wp_nav_menu() – Function | Developer.WordPress.org

此方法虽然好,但是显得有点麻烦,至少你还得去看一下Walker_Nav_Menu是怎样写的。我们可以用更简单的方法遍历菜单中的项目:

// 获取主导航菜单的ID(你需要替换'main-menu'为你的实际菜单名称)
$menu_name = 'main-menu';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);

// 获取菜单项目
$menu_items = wp_get_nav_menu_items($menu->term_id);

// 遍历菜单项目
foreach ($menu_items as $menu_item) {
    // 输出菜单项目的ID、标题、链接等信息
    echo 'ID: ' . $menu_item->ID . ', ';
    echo '标题: ' . $menu_item->title . ', ';
    echo '链接: ' . $menu_item->url . '<br>';
}

这样我们可以直接拿到菜单的$menu_item,可以很方便的把菜单显示到下拉菜单、幻灯片或者其他的代码中。

发布日期:2023-12-18 浏览次数:311

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注