有没有办法让Buddypress" buddybar"从管理栏进入我主题的导航标题。我想使用" buddybar"菜单和下拉完全一样,没有被强制使用管理栏。
我无法在此找到任何文档或论坛讨论。是否有一个可以调用的启动函数,它将加载" buddybar"在我的主题的其他地方。
答案 0 :(得分:2)
您只需要一段代码即可输出您需要的大部分内容。
<?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;
}
这应该给你一个近乎完全的伙伴栏副本,但没有管理栏本身
答案 1 :(得分:1)
感谢前一个回答的灵感,我想出了这个,其中还包括通知位。
<?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;
}
如果你碰巧喜欢我的LESS:
#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;
}
}
}
}