一，WordPress 使用 register_nav_menus() 设置菜单位置

导航菜单注册函数 register_nav_menus()

在主题的 functions.php 中添加：

if (function_exists('register_nav_menus')) {
    register_nav_menus(array(
        'header_main' => __('顶部菜单'),
        'footer_bottom' => __('底部菜单')
    )); 
}

上面注册了两个菜单位置，其中 ‘header_main’ 和 ‘footer_bottom’ 分别是这两个菜单的“键key”，后面的值是菜单的标题，会在 “外观->菜单->管理位置” 显示出来。

二，使用 wp_nav_menu() 生成菜单

使用的时候，指定菜单名称即可：

$nav_str = wp_nav_menu( array(  
    'theme_location'    => 'footer_bottom', //[保留]用于在调用导航菜单时指定注册过的某一个导航菜单名，如果没有指定，则显示第一个  
    'menu'              => 'footer_bottom', //[可删]使用导航菜单的名称调用菜单，可以是 id, slug, name (按顺序匹配的) 。  
    'container'         => false, //[可删]最外层容器标签名  
    'container_class'   => '',//[可删]最外层容器class名  
    'container_id'      => '',//[可删]最外层容器id值  
    'menu_class'        => 'footer-link-container', //[可删]ul 节点的 class 属性值  
    'menu_id'           => '', //[可删]ul 节点的 id 属性值  
    'echo'              => false, //[可删]确定直接显示导航菜单还是返回 HTML 片段，如果想将导航的代码作为赋值使用，可设置为false  
    'fallback_cb'       => 'wp_page_menu', //[可删]备用的导航菜单函数，用于没有在后台设置导航时调用  
    'before'            => '', //[可删]显示在导航a标签之前  
    'after'             => '', //[可删]显示在导航a标签之后    
    'link_before'       => '', //[可删]显示在导航链接名之前  
    'link_after'        => '', //[可删]显示在导航链接名之后  
    'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',  //[可删]使用字符串替换修改ul的class  
    'depth'             => 0, //[可删]显示菜单的深度, 当数值为0时显示所有深度的菜单，-1所有菜单平级显示  
    'walker'            => '' //[可删]自定义的遍历对象，调用一个对象定义显示导航菜单      
));

echo str_replace('sub-menu', 'select', $nav_str);

三，使用 Walker_Nav_Menu 类创建自定义分类

在WordPress中，Walker_Nav_Menu是一个核心类，用于处理主题中wp_nav_menu()函数生成的导航菜单的HTML输出。默认情况下，wp_nav_menu()使用Walker_Nav_Menu来遍历菜单项并生成HTML代码。然而，Walker_Nav_Menu可以被扩展以创建自定义的walker，这样你就可以控制菜单项的输出方式，比如使其与Bootstrap或其他框架兼容。

创建自定义Walker

要创建一个自定义的walker，你需要继承Walker_Nav_Menu类，并覆盖其中的方法以改变菜单项的生成方式。以下是一个基本的自定义walker的示例，用于Bootstrap兼容的导航菜单：

class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {

    // 构造函数可以用来初始化任何需要的属性
    public function __construct() {
        parent::__construct();
    }

    // 覆盖display_element方法以更改菜单项的输出
    function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args = null ) {
        // 基础实现
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args );
        
        // 自定义代码，例如添加额外的类或ID
        if ( ! empty( $args->has_children ) ) {
            $element->classes[] = 'dropdown';
        }
    }

    // 覆盖start_el方法以更改菜单项的开始标签
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // 基础实现
        parent::start_el( $output, $item, $depth, $args );
        
        // 自定义代码，例如添加额外的HTML属性
        if ( $depth > 0 ) {
            $output = str_replace( '<a', '<a class="dropdown-item"', $output );
        }
    }
}

使用自定义Walker

一旦你创建了自定义walker，你就可以在wp_nav_menu()函数中使用它。你需要将walker实例化，并将其作为参数传递给wp_nav_menu()函数。

// 在functions.php文件中实例化自定义walker
$bootstrap_walker = new Bootstrap_Walker_Nav_Menu();

// 使用wp_nav_menu()函数显示菜单
wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker' => $bootstrap_walker,
    'container'      => false,
    'menu_class'     => 'navbar-nav',
) );

在这个例子中，'theme_location'参数应该与你在WordPress主题中注册的菜单位置相匹配。'walker'参数接收自定义walker的实例，而其他参数则根据你的需求进行调整。

注意事项

确保你的自定义walker类位于WordPress主题的functions.php文件中，或者在一个加载到主题中的自定义插件中。此外，测试你的walker以确保它按预期工作，并且没有破坏WordPress的其他功能。

修改时间 2024-07-14



真诚赞赏，手留余香

微信支付