用户登录/登出状态下菜单元素显隐及登录链接替换问题

问题根源 #

你之前给not-logged-in类加display:none没效果，是因为登录后这个类不会自动从元素上移除，导致CSS依然生效。正确做法是用WordPress内置的is_user_logged_in()函数做服务器端判断，精准控制元素渲染。

1. 铃铛图标的显示/隐藏控制 #

只有用户登录时才渲染铃铛元素，登出时不输出该代码，彻底避免CSS失效问题：

<?php if (is_user_logged_in()) : ?>
<li class="notification-bell"> <!-- 替换无效的#类名，用有意义的命名 -->
     <a href="https://your-site.com/notifications"> <!-- 替换成你的通知页面链接 -->
         <i class="far fa-bell odp-mr-1"></i>0
     </a>
</li>
<?php endif; ?>

2. NEW ADVERT按钮的动态切换 #

根据登录状态，分别输出登录链接或登录后的目标元素：

<li id="upload-ad">
    <?php if (!is_user_logged_in()) : ?>
        <!-- 登出状态：跳转到登录页，登录后返回当前页面 -->
        <a href="<?php echo wp_login_url(trailingslashit(home_url($wp->request)));?>" style="color: #fff;">
            NEW ADVERT
        </a>
    <?php else : ?>
        <!-- 登录状态：替换成你需要的可点击元素，示例指向广告上传页 -->
        <a href="<?php echo home_url('/submit-advert/'); ?>" style="color: #fff;">
            NEW ADVERT
        </a>
        <!-- 如果需要关联用户ID，可这样写： -->
        <!-- <a href="/user-profile/?id=<?php echo get_current_user_id(); ?>" style="color: #fff;">MY ADVERTS</a> -->
    <?php endif; ?>
</li>

完整修改后代码 #

整合到你的原代码中：

<div class="fusion-secondary-main-menu">
       <div class="fusion-row">
            <?php avada_main_menu(); ?>
            <?php avada_mobile_menu_search(); ?>
       <ul id="odp-main-menu-right" class="odp-pl-0">
            <!-- 登录可见的铃铛 -->
            <?php if (is_user_logged_in()) : ?>
            <li class="notification-bell">
                 <a href="https://your-site.com/notifications"><i class="far fa-bell odp-mr-1"></i>0</a>
            </li>
            <?php endif; ?>

            <!-- 动态切换的NEW ADVERT按钮 -->
            <li id="upload-ad">
                <?php if (!is_user_logged_in()) : ?>
                    <a href="<?php echo wp_login_url(trailingslashit(home_url($wp->request)));?>" style="color: #fff;">
                        NEW ADVERT
                    </a>
                <?php else : ?>
                    <a href="<?php echo home_url('/submit-advert/'); ?>" style="color: #fff;">
                        NEW ADVERT
                    </a>
                <?php endif; ?>
            </li>
       </ul>
</div>

额外提示 #

• 不要用#作为CSS类名，这是无效选择器，换成如notification-bell这类有意义的命名
• 若坚持用CSS控制显示，可利用WordPress自动给body添加的logged-in类：

  .logged-in .notification-bell { display: block; }
  body:not(.logged-in) .notification-bell { display: none; }
  

  但服务器端PHP判断更高效，也避免未登录用户看到页面源码中的铃铛元素。

内容的提问来源于stack exchange，提问作者Sewes le Roux