woocommerce/sensei dynamic/changeable 二级菜单中的按钮

Question

我想在二级菜单中添加一个指向 'my account' 页面的按钮，如果用户已登录，按钮上的文本应显示 'my account'。

如果用户已注销，他们会看到一个显示 'register' 并指向登录页面的按钮。

有人知道这是否可能吗？

我想我很接近，但我不确定是否可能：

这是我的儿童主题 functions.php:

    function storefront_secondary_navigation() {
        if ( has_nav_menu( 'secondary' ) ) {
            ?>
            <nav class="secondary-navigation" role="navigation" aria-label="<?php esc_html_e( 'Secondary Navigation', 'storefront' ); ?>">
                <p>wat is deze</p>
                <?php


                        if( ! is_user_logged_in()) {
                        wp_nav_menu(
                                array(
                                    'theme_location'    => 'secondary',
                                    'fallback_cb'       => '',

                                )

                            );

                        }
                        else{
                        wp_nav_menu(
                                array(
                                    'theme_location'    => 'secondary',
                                    'fallback_cb'       => '',

                                )

                            );

                        }
echo "menu locations";
$hoi = get_nav_menu_locations();
var_dump($hoi);
//outputs an array with 3 objects: 'primary', 'secondary', and 'handheld'.
                ?>
            </nav><!-- #site-navigation -->
            <?php
        }
    }

Answer 1

我设法修复了它并且它有效。我通过 wordpress 菜单编辑器在二级菜单中制作了 2 个单独的项目。然后我创建了一个动作挂钩，它检查用户是否登录或注销，然后相应地隐藏按钮（使用菜单编辑器中设置的相应 link）。

这样做的缺点是不容易维护，它需要开发者通过ID获取元素，所以如果有人更改菜单设置，它可能会得到不同的ID，因此每次都要手动修复。

function modify_secondary_menu_buttons() {                  
        if( ! is_user_logged_in()) {
            echo '<script type="text/javascript">
                jQuery("#menu-item-8071").css("display", "none");
            </script>'; 
            return;

        }
        else{
             echo '<script type="text/javascript">
            // Document ready
            jQuery(document).ready(function(){
                console.log("You are logged in");

                jQuery("#menu-item-8011").css("display", "none");

            });
            </script>';         
        }           
}
add_action( 'wp_footer', 'modify_secondary_menu_buttons' );

Answer 2

纯CSS解决方案：

在 Wordpress 中，如果用户已登录，<body> 元素具有 class logged-in。因此您可以使用它来隐藏右键：

将此添加到您的 style.css:

#menu-item-8071 {
    display: none;
}

body.logged-in #menu-item-8071 {
    display: block;
}

body.logged-in #menu-item-8011 {
    display: none;
}

您可以将自己的 css class 添加到您的按钮中，而不是使用 menu-items id 作为 css 选择器。首先，您必须在屏幕选项（位于菜单编辑器页面顶部）中启用“CSS 类”。现在您可以为每个菜单项输入额外的 css class。

例如：

show-if-logged-in 第一个按钮
hide-if-logged-in 第二个按钮

因此您可以使用此 css 代码：

.show-if-logged-in {
    display: none;
}

body.logged-in show-if-logged-in {
    display: block;
}

body.logged-in .hide-if-logged-in {
    display: none;
}

woocommerce/sensei dynamic/changeable 二级菜单中的按钮

woocommerce/sensei dynamic/changeable button in secondary menu

php

wordpress

storefront

woocommerce

纯CSS解决方案：