菜单中的WordPress交换主菜单

如何解决菜单中的WordPress交换主菜单

场景：

我想方便用户从两个不同的菜单中进行选择，以用作其主菜单。

我创建了两个菜单，并且在两个菜单中都创建了一个条目，以彼此切换（切换至B）（切换至A）。

这个想法是，当按下菜单项时，将调用wordpress函数来切换菜单。由于我已经创建了菜单，因此它们具有特定的ID供您选择。我想要单击（在每个菜单中创建的菜单项）以交换主菜单时的特定功能。

------------ 编辑 ------------

我的方法

到目前为止，我的方法如下。

创建了一个名为Menu_Switch的模板，并基于该模板创建了一个wordpress页面。
在该模板中调用了一个函数。
我用两个菜单中的新创建页面创建了菜单条目。

功能如下。

function switch_menu ( $args = '' ) {

    if( $args['theme_location'] == 'primary') {

        if ($args['menu'] == '45') {
            $args['menu'] = '65';
        }  else if ($args['menu'] == '65') {
            $args['menu'] = '45';
        }

        return $args;
    }

    $redirect = home_url();

}

然后像这样在模板中调用函数

<?php echo switch_menu(); ?>

问题

此代码无法正常工作。预计会这样。

如果primary menu的ID为45，则应将其设置为65，反之亦然。
（由于开关模板为空白），该页面应重定向到上一页或主页。

解决方法

我认为这是否与您想要的方式无关-我的意思是即时更改位置，因为这会影响所有用户的整个网站。
您可以使用下一个逻辑来做到这一点：

同时显示两个菜单，其中一个菜单将与display: none
当用户选择另一个菜单-更改一些html类（很好-在body元素中）时，将CSS应用于隐藏一个菜单并显示另一个菜单
将其状态存储在 cookie 中，以便用户在所有页面上以及返回站点时都能看到所选菜单

更新
我的意思是，您可以创建两个位置并在前端将它们并排显示-在这种情况下，您可以创建两个不同的菜单并分配给不同的位置。在视觉上，它就像在一个地方的两个菜单。

请参见示例：

使用Cookie和CSS可以显示一个或另一个菜单。

更新2
完整解决方案（在真实的WordPress网站上测试过）：

为菜单创建两个位置

register_nav_menus(
    array(
        'header_top_nav'        => __( 'Header Top Area','starter' ),'header_main_nav'       => __( 'Header Main Area','starter' )
    )
);

创建两个菜单，分配上面的位置。将带有html类js_btn_show_menu_a和js_btn_show_menu_b的触发按钮添加到菜单中，这些按钮将用于处理js中的点击事件
在前面显示这些菜单：

<nav class="menu_a">
   <?php
       wp_nav_menu(
           array(
               'theme_location' => 'header_top_nav'
           )
       );
   ?>
</nav>
<nav class="menu_b">
   <?php
       wp_nav_menu(
           array(
               'theme_location' => 'header_main_nav'
           )
       );
   ?>
</nav>

为触发器类添加js并设置cookie

$( document ).on( 'click','.js_btn_show_menu_a',function ( e ) {
    e.preventDefault();
    $( 'html' ).addClass( 'show_menu_a' ).removeClass( 'show_menu_b' );
    Cookies.set( 'menu','show_menu_a' );
})
$( document ).on( 'click','.js_btn_show_menu_b',function ( e ) {
    e.preventDefault();
    $( 'html' ).addClass( 'show_menu_b' ).removeClass( 'show_menu_a' );
    Cookies.set( 'menu','show_menu_b' );
})

获取cookie 并将其设置为标记<html>上的html类

$menu_cookie = htmlspecialchars( $_COOKIE['menu'] ) ? htmlspecialchars( $_COOKIE['menu'] ) : 'show_menu_a';
<html class="<?php echo esc_attr( $menu_cookie ); ?>">

添加CSS 用于基于CSS类的显示/隐藏菜单

.show_menu_a .menu_a {display: block;}
.show_menu_a .menu_b {display: none;}
.show_menu_b .menu_b {display: block;}
.show_menu_b .menu_a {display: none;}

我认为您正在搜索一个可以切换主菜单的过滤器。

如果您要浏览wp_nav_menu()源代码

有一个过滤器$args = apply_filters( 'wp_nav_menu_args',$args );，此$ args数组结构为

$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'       => '',);

您会注意到有一个关键的menu_id，如果可以设置并应用此过滤器，则菜单将根据给定的menu_id进行更改。

类似

add_filter('wp_nav_menu_args',function(){
    $args['menu_id'] = <desired_menu_id>
    return $args;
});

菜单中的WordPress交换主菜单

如何解决菜单中的WordPress交换主菜单

解决方法

相关推荐