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,可以很方便的把菜单显示到下拉菜单、幻灯片或者其他的代码中。
发表回复