WordPress菜单操作

在开发WordPress菜单时,我们可以新建菜单区域,然后可以在后台填充菜单之类的,比如大部分主题的顶部菜单、底部菜单。

在主题中注册菜单,我们可以这样:

// 在主题中注册一个自定义菜单
function register_custom_menu() {
    register_nav_menu('custom_menu', __('Custom Menu'));
}
add_action('after_setup_theme', 'register_custom_menu');

之后如果要显示在某个地方,可以这样:

// 在主题中显示菜单
function display_custom_menu() {
    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
        'menu_id'        => 'custom-menu',
        'container'      => 'nav',
        'container_class'=> 'custom-menu-class',
    ));
}
display_custom_menu();

解释下wp_nav_menu的参数:

  1. theme_location: 指定要显示的菜单的位置。这个位置是在主题中通过 register_nav_menu 函数注册的。例如,如果您使用 register_nav_menu('primary', 'Primary Menu'); 注册了一个名为 “Primary Menu” 的菜单,那么您可以使用 theme_location => 'primary' 来指定它。
  2. menu_id: 为菜单指定一个唯一的ID。这在CSS样式和JavaScript中可能会很有用。
  3. container: 指定菜单包裹容器的类型。默认值是 ‘div’,您也可以设置为 ‘nav’、’ul’ 等。
  4. container_class: 指定包裹容器的CSS类。
  5. fallback_cb: 如果指定的菜单不存在,将调用此回调函数。默认情况下,它显示一个默认的页面列表。
  6. depth: 指定菜单的层次深度。如果您的菜单有子菜单,可以使用此参数来限制显示的层次深度。
  7. walker: 允许您提供一个自定义的 Walker 类来控制菜单的输出。

fallback_cbwp_nav_menu 函数的一个参数,用于指定在指定的菜单位置不存在时所调用的回调函数(fallback callback)。这个回调函数用于提供一个备用的菜单或菜单项,以防无法找到指定位置的菜单。

如果您在 wp_nav_menu 函数中指定了一个 theme_location,并且该位置上没有注册菜单,WordPress 将调用 fallback_cb 中指定的回调函数来处理这种情况。默认情况下,如果没有指定 fallback_cb,WordPress 会显示一个默认的页面列表。

以下是一个简单的示例,演示如何在 wp_nav_menu 中使用 fallback_cb

$args = array(
    'theme_location' => 'primary',
    'fallback_cb'    => 'custom_menu_fallback',
);

wp_nav_menu($args);

在上述示例中,custom_menu_fallback 是一个用户定义的回调函数,它会在指定的菜单位置没有菜单时被调用。您可以在主题的 functions.php 文件或其他适当的位置定义这个回调函数:

function custom_menu_fallback() {
    // 在这里定义备用菜单或其他处理逻辑
    echo '<ul><li><a href="#">Fallback Menu Item</a></li></ul>';
}

这个回调函数可以根据需要提供任何您认为合适的备用菜单或菜单项。这样,当主题中的某个位置没有注册菜单时,就会显示这个备用内容。

在WordPress中,Walker 是一种用于自定义遍历和显示导航菜单树的对象。通过使用 Walker 类,您可以对菜单的输出进行更细粒度的控制,包括修改菜单项的HTML结构、添加自定义标记、处理子菜单等。

wp_nav_menu 函数允许您通过 walker 参数指定一个 Walker 类。该 Walker 类必须扩展自 Walker_Nav_Menu 类或其子类,这是 WordPress 提供的默认菜单 Walker 类。

以下是一个简单的示例,展示如何创建一个自定义 Walker 类:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    // 在开始显示每个菜单项之前调用
    function start_el(&$output, $item, $depth = 0, $args = null) {
        $output .= '<li>';
        $output .= '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
    }

    // 在结束显示每个菜单项之后调用
    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= '</li>';
    }

    // 在开始显示子菜单之前调用
    function start_lvl(&$output, $depth = 0, $args = null) {
        $output .= '<ul class="sub-menu">';
    }

    // 在结束显示子菜单之后调用
    function end_lvl(&$output, $depth = 0, $args = null) {
        $output .= '</ul>';
    }
}

在上述示例中,Custom_Walker_Nav_Menu 类扩展自 Walker_Nav_Menu 类,并重写了其中的几个方法。您可以根据需要在这些方法中添加自定义的 HTML 结构和样式。

要在主题中使用这个自定义 Walker 类,您可以在 wp_nav_menu 函数中的参数中指定它,如下所示:

$args = array(
    'theme_location' => 'primary',
    'walker'         => new Custom_Walker_Nav_Menu(),
);

wp_nav_menu($args);

通过使用 Walker,您可以更灵活地控制菜单的生成过程,以满足特定设计和功能需求。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片

    暂无评论内容