Buddypress - Отображать уведомление и профиль в заголовке (вместо панели WP-admin)

Question

Есть ли способ переместить Buddypress «buddybar» из панели администратора в заголовок навигации моей темы. Я хочу использовать меню «buddybar» и сбрасывать его точно так же, как и они, не будучи вынужденным использовать панель администратора.

Мне не удалось найти документацию или обсуждения на форуме. Есть ли функция запуска, которую можно вызвать, которая будет загружать «собеседник» в другом месте моей темы.

Answer 1

Все, что вам нужно, это одна часть кода для вывода большинства необходимых вам.

<?php bp_nav_menu(); ?> 

Ниже приведены html и css для создания выпадающего списка.

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="<?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="<?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; 
} 

Это должно дать вам почти точную копию buddybar, но без самой панели администратора

Answer 2

Благодаря вдохновению от в предыдущем ответе я придумал это, что также включает notificatio n бит.

<?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="<?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="<?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 
    } 
?> 

Единственное, я двигаюсь первый <li> из в functions.php FUNC, потому что тогда я буду в состоянии проверить его обновления через AJAX.

Вот несколько базовых CSS для начала работы. Вы, вероятно, не будете хотеть, чтобы это выглядело как бар админ поэтому нет необходимости пытаться дублировать:

#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; 
} 

Если вам случится предпочитают МЕНЬШЕ, как я:

#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; 
      } 
     } 

    } 

}