Buddypress – Benachrichtigung und Profil im Header anzeigen (statt WP-Adminleiste)

Lesezeit: 7 Minuten

Benutzer-Avatar
Benutzer1711576

Gibt es eine Möglichkeit, die Buddypress “Buddybar” aus der Adminleiste in den Navigationskopf meines Themes zu verschieben. Ich möchte das “Buddybar”-Menü und die Dropdown-Menüs genau so verwenden, wie sie sind, ohne gezwungen zu sein, die Admin-Leiste zu verwenden.

Ich konnte keine Dokumentation oder Forumsdiskussionen dazu finden. Gibt es eine Startfunktion, die aufgerufen werden kann, die die “Buddybar” an anderer Stelle in meinem Thema lädt.

  • Wir haben einfach unsere eigene Leiste erstellt und sie sichtbar gemacht, wenn ein Benutzer angemeldet war.

    – Aibräer

    4. August 2015 um 17:36 Uhr

Benutzer-Avatar
Benutzer1711576

Alles, was Sie brauchen, ist ein Stück Code, um das meiste auszugeben, was Sie brauchen.

<?php bp_nav_menu(); ?>

Unten ist das HTML und CSS wird verwendet, um das Dropdown-Menü zu erstellen.

HTML

<ul class="dropdown-menu">
   <li>
      <ul id="drop-down-user-actions" class="ab-submenu hover">
          <li id="drop-down-user-info"><a class="ab-item" href="https://stackoverflow.com/questions/31812132/<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo get_avatar( $current_user->ID, '65' );?></a></li>
          <li id="drop-down-user-profile"><a class="ab-item" href="https://stackoverflow.com/questions/31812132/<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo $current_user->display_name ?></a></li>
          <li id="drop-down-edit-profile"><a class="ab-item" href="<?php echo $link; ?>"><?php _e('Edit Profile','cactusthemes') ?></a></li>
          <li id="drop-down-logout"><a class="ab-item" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Logout','cactusthemes') ?></a></li>
      </ul>
   </li>
   <?php bp_nav_menu(); ?>                                      
</ul>

CSS

#drop-down-user-info img {
position: relative;
width: 64px;
height: 64px;
float:left;
padding:0;
margin:0;
}
#drop-down-user-profile, #drop-down-edit-profile, #drop-down-logout {
margin-left: 80px;
}
#drop-down-user-profile {
color:#FFF;
}
#drop-down-user-profile > a {
text-transform: capitalize;
}
#menu-bp, #drop-down-user-actions {
padding: 6px 0;
background:#4c4c4d;
min-width: 264px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color:#C5C5C5
}
#drop-down-user-actions { 
background:#26292c;
padding: 20px;
}
#menu-bp > li {
background:#4c4c4d;
}    
#menu-bp > li > a, #menu-bp > li > ul > li > a {
padding-right: 1em;
padding-left: 1em;
line-height: 26px;
height: 26px;
white-space: nowrap;
min-width: 140px;
display: block;
}
#menu-bp > li.menu-parent:hover, #menu-bp > li.menu-parent > a:hover, #menu-bp .sub-menu li a:hover {
color: #e14d43;
}
#menu-bp .sub-menu li a {
color: #C5C5C5!important;
}
#menu-bp .sub-menu li a:hover {
color: #e14d43!important;
}
#menu-bp .menu-parent>a:before {
color: inherit!important;
position: relative!important;
font-size: 14px!important;
font-family: FontAwesome!important;
-webkit-font-smoothing: antialiased!important;
right: 5px!important;
top:0px!important;
content: "\f0d9"!important;
}
#menu-bp .menu-parent .sub-menu li > a:before, .dropdown-menu #drop-down-user-actions li > a:before {
content:none!important;
}
#menu-bp > li > ul {
display: none;
margin-left: 0;
left: inherit;
right: 100%;
padding:6px 10px;
margin-top:-32px;
position: absolute;
background:#4c4c4d;
}
#menu-bp .menu-parent:hover > .sub-menu {
display: block;
transition: all .1s ease;
}
#menu-bp > li > ul > li a {
padding:0;
}
#menu-bp li > a > span {
display:none;
}
#menu-bp > li > a {
pointer-events: none;
cursor: default;
}  

Dies sollte Ihnen eine nahezu exakte Kopie der Buddybar geben, jedoch ohne die Admin-Leiste selbst

  • BP hat eine Funktion für den angemeldeten Benutzerlink: bp_loggedin_user_domain() und eine Funktion zum Abrufen des Avatars: bp_loggedin_user_avatar(), die mehrere Argumente akzeptiert.

    – Shanebp

    5. August 2015 um 15:01 Uhr

Benutzer-Avatar
Bremsen

Dank der Inspiration aus der vorherigen Antwort bin ich auf diese Idee gekommen, die auch das Benachrichtigungsbit enthält.

<?php
    if (is_user_logged_in()) {

        ?>
        <nav class="bp-nav" role="navigation">
            <ul id="bp-nav-menu">
                <li id="bp-nav-menu-notifications" class="menupop">
                    <a class="bp-nav-menu-item" aria-haspopup="true" href="https://stackoverflow.com/questions/31812132/<?php echo $menu_link; ?>">
                        <?php echo $menu_title; ?>
                    </a>
                    <div class="bp-nav-menu-sub-wrapper">
                        <ul id="bp-nav-menu-notifications-default" class="bp-nav-menu-submenu">
                            <?php
                                $notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id(), 'object' );
                                $count         = ! empty( $notifications ) ? count( $notifications ) : 0;
                                $alert_class   = (int) $count > 0 ? 'pending-count alert' : 'count no-alert';
                                $menu_title="<span id="ab-pending-notifications" class="" . $alert_class . '">' . number_format_i18n( $count ) . '</span>';
                                $menu_link     = trailingslashit( bp_loggedin_user_domain() . bp_get_notifications_slug() );
                                if ( ! empty( $notifications ) ) {
                                    foreach ( (array) $notifications as $notification ) {
                                        ?>
                                        <li id="bp-nav-menu-notification-<?php echo $notification->id; ?>">
                                            <a class="bp-nav-menu-item" href="<?php echo $notification->href; ?>">
                                                <?php echo $notification->content; ?>
                                            </a>
                                        </li>
                                        <?php
                                    }
                                } else {
                                    ?>
                                    <li id="bp-nav-menu-no-notifications">
                                        <a class="bp-nav-menu-item" href="https://stackoverflow.com/questions/31812132/<?php echo $menu_link; ?>">
                                            <?php echo __( 'No new notifications', 'buddypress' ); ?>
                                        </a>
                                    </li>
                                    <?php
                                }
                            ?>
                        </ul>
                    </div>
                </li>
                <li id="bp-nav-menu-my-account" class="menupop with-avatar">
                    <a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit/">
                        <?php bp_loggedin_user_fullname(); ?><?php bp_loggedin_user_avatar( 'type=thumb&width=28&height=28' );?>
                    </a>

                    <div class="bp-nav-menu-sub-wrapper">
                        <ul id="bp-nav-menu-user-actions" class="bp-nav-menu-submenu hover">
                            <li id="bp-nav-menu-user-info">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>">
                                    <?php bp_loggedin_user_avatar( 'type=thumb&width=64&height=64' );?>
                                </a>
                            </li>
                            <li id="bp-nav-menu-user-profile">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
                                    <?php bp_loggedin_user_fullname(); ?>
                                </a>
                            </li>
                            <li id="bp-nav-menu-edit-profile">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
                                    <?php _e('Edit My Profile', 'buddypress') ?>
                                </a>
                            </li>
                            <li id="logout">
                                <a class="bp-nav-menu-item" href="<?php echo wp_logout_url( get_permalink() ); ?>">
                                    <?php _e('Log Out', 'buddypress') ?>
                                </a>
                            </li>
                        </ul>
                        <?php bp_nav_menu(); ?>
                    </div>
                </li>
            </ul>
        </nav>

        <?php
    }
?>

Das einzige ist, ich ziehe zuerst um <li> out in eine functions.php-Funktion, da ich sie dann per Ajax auf Updates überprüfen kann.

Hier ist ein grundlegendes CSS für den Einstieg. Sie möchten wahrscheinlich nicht, dass es wie die Admin-Leiste aussieht, also müssen Sie nicht versuchen, das zu duplizieren:

#bp-nav-menu > li {
  display: inline-block;
}
#bp-nav-menu > li.menupop {
  position: relative;
}
#bp-nav-menu > li.menupop .bp-nav-menu-sub-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 3;
  background: #ccc;
  min-width: 200px;
}
#bp-nav-menu > li.menupop:hover .bp-nav-menu-sub-wrapper {
  display: block;
}
#bp-nav-menu #bp-nav-menu-notifications > a {
  padding: 0 0.5em;
}
#bp-nav-menu #bp-nav-menu-notifications > a span {
  background: #ddd;
  color: #333;
  padding: 2px 5px;
  border-radius: 4px;
}
#bp-nav-menu #bp-nav-menu-user-actions {
  list-style: none;
  overflow: hidden;
  width: 250px;
}
#bp-nav-menu #bp-nav-menu-user-actions > li {
  float: left;
  clear: right;
}
#bp-nav-menu #bp-nav-menu-user-actions > li#bp-nav-menu-user-info {
  clear: none;
}
#bp-nav-menu #menu-bp {
  background: #aaa;
  list-style: none;
  padding: 0;
}
#bp-nav-menu #menu-bp .no-count {
  display: none;
}
#bp-nav-menu #menu-bp .menu-parent {
  position: relative;
}
#bp-nav-menu #menu-bp .menu-parent:before {
  content: "\f141";
  font-family: Dashicons;
}
#bp-nav-menu #menu-bp .menu-parent .sub-menu {
  display: none;
  position: absolute;
  left: -200px;
  top: 0;
  width: 200px;
  background: #999;
  list-style: none;
}
#bp-nav-menu #menu-bp .menu-parent:hover .sub-menu {
  display: block;
}

Wenn Sie LESS wie ich bevorzugen:

#bp-nav-menu {

    > li {
        display: inline-block;

        &.menupop {
            position: relative;

            .bp-nav-menu-sub-wrapper {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                z-index: 3;
                background: #ccc;
                min-width: 200px;
            }

            &:hover {
                .bp-nav-menu-sub-wrapper {
                    display: block;
                }
            }
        }
    }

    #bp-nav-menu-notifications {
        > a {
            padding: 0 0.5em;
            span {
                background: #ddd;
                color: #333;
                padding: 2px 5px;
                border-radius: 4px;
            }
        }
    }

    #bp-nav-menu-user-actions {
        list-style: none;
        overflow: hidden;
        width: 250px;

        > li {
            float: left;
            clear: right;
            &#bp-nav-menu-user-info {
                clear: none;
            }
        }
    }

    #menu-bp {
        background: #aaa;
        list-style: none;
        padding: 0;

        .no-count {
            display: none;
        }

        .menu-parent {
            position: relative;
            &:before {
                content: "\f141";
                font-family: Dashicons;
            }
            .sub-menu {
                display: none;
                position: absolute;
                left: -200px;
                top: 0;
                width: 200px;
                background: #999;
                list-style: none;

                > li {
                }
            }
            &:hover .sub-menu {
                display: block;
            }
        }

    }

}

  • Woher hast du die <?php echo $menu_link; ?> und <?php echo $menu_title; ?> ?

    – Code-Liebhaber

    8. August 2019 um 12:48 Uhr

1354820cookie-checkBuddypress – Benachrichtigung und Profil im Header anzeigen (statt WP-Adminleiste)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy