气泡通知 Wordpress - 0 时隐藏/+1 时显示

Question

我是 php & css 的新人。

读了很多书却学得很少，我设法在 php 和 css 中对项目中的通知进行了编程。它工作正常，显示数量（朋友、消息和通知）并重定向到它应该的地方。

我的问题是当用户没有通知时我需要“隐藏”“0”的气泡，只有当他们有 1 个或多个通知时才显示

Functions.php

if ( !is_user_logged_in()) {
    return $menu;
}

$user_id = bp_loggedin_user_id();
$user_url = bp_loggedin_user_domain();

$friends_url = $user_url . bp_get_friends_slug() . '/';
$msg_url = $user_url . bp_get_messages_slug() . '/';
$notify_url = $user_url . bp_get_notifications_slug() . '/';

ob_start();

<li><a><a href="<?php echo bp_loggedin_user_domain();?>friends"><span class="notifications_icons"><i class="fas fa-user-friends" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo friends_get_friend_count_for_user( $user_id );?></span></a></a></li>

<li><a><a href="<?php echo bp_loggedin_user_domain();?>messages"><span class="notifications_icons"><i class="fas fa-envelope" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo bp_get_total_unread_messages_count( $user_id );?></span></a></a></li>

<li><a><a href="<?php echo bp_loggedin_user_domain();?>notifications"><span class="notifications_icons"><i class="fas fa-bell" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo bp_notifications_get_unread_notification_count( $user_id );?></span></a></a></li>
<?php
    $menu_items = ob_get_clean();

    $menu = $menu . $menu_items;
    return $menu;
}

add_filter( 'wp_nav_menu_items', 'my_counter_nav_menu' );
?>

CSS

.notifications_icons {
color: #ffffff;
vertical-align: middle;
margin: -7px;
}

.my_bubble_notify {
color: #ffffff;
border-radius: 3px;
background-color: #f7823f;
vertical-align: 20%;
position: relative;
    font-size: small;
    padding: 0.1em 5px;
}

Buddypress 6.0.0

WordPress 5.4.2

站点：http://www.gamerstroop.com

如果需要，可以使用测试账号(acc:test – pw:test)

我不知道是否可以在此处粘贴我的站点 link。如果我不能删除它或让我知道，非常感谢您阅读和帮助我！ <3

Answer 1

我相信如果您将 my_bubble_notify 跨度包含在 if 语句中，它应该可以工作。

例如

 <li>
    <a>
       <a href="<?php echo bp_loggedin_user_domain();?>friends">
          <span class="notifications_icons">
            <i class="fas fa-user-friends" style="font-size:17px;"></i>
          </span>
         <?php if(friends_get_friend_count_for_user( $user_id ) >= 1) { ?>
           <span class="my_bubble_notify"><?php echo friends_get_friend_count_for_user( $user_id );?></span>
         <?php } ?>
       </a>
    </a>
</li>

气泡通知 Wordpress - 0 时隐藏/+1 时显示

Bubble Notification Wordpress - Hide if 0 / Show if +1

css

php

wordpress

notifications