Buddypress — Отображать уведомления и профиль в заголовке (вместо панели управления WP)
Есть ли способ переместить Buddypress «buddybar» из админ-панели в заголовок навигации моей темы. Я хочу использовать меню «buddybar» и выпадающие списки точно так же, как они, без необходимости использовать панель администратора.
Мне не удалось найти какую-либо документацию или обсуждения на форуме по этому вопросу. Есть ли начальная функция, которую можно вызвать, которая загрузит «buddybar» в другом месте моей темы.
Решение
Все, что вам нужно, это один кусок кода для вывода большей части того, что вам нужно.
<?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, но без самой админ-панели
Другие решения
Благодаря вдохновению от предыдущего ответа я придумал это, который также включает бит уведомления.
<?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, потому что тогда я смогу проверять наличие обновлений через 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;
}
}
}
}
detector