纯CSS解决方案：

Question

我想在我的辅助菜单中添加一个指向“我的帐户”页面的按钮，如果用户已登录，该按钮上的文字应显示“我的帐户”。

如果用户退出，他们会看到一个“注册”按钮并指向登录页面。

任何人都知道这是否可行？

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

这是我孩子主题的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

纯CSS解决方案：

在Wordpress中，如果用户已登录，则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; }：

show-if-logged-in

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

e.g：

hide-if-logged-in
.show-if-logged-in { display: none; } body.logged-in show-if-logged-in { display: block; } body.logged-in .hide-if-logged-in { display: none; }第二个按钮

所以你可以使用这个css代码：

{{1}}

Answer 2

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

这样做的缺点是它不易维护，它需要开发人员通过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' );

二级菜单中的woocommerce / sensei动态/可更改按钮

2 个答案:

纯CSS解决方案：