Buddypress

Question

有没有办法将 Buddypress "buddybar" 从管理栏移动到我的主题的导航 header 中。我想按原样使用 "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;
}

这应该会为您提供几乎完全相同的好友栏副本，但没有管理栏本身

Answer 2

感谢上一个答案的启发，我想到了这个，其中还包括通知位。

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

    }

}

Buddypress - 在 Header 中显示通知和个人资料（而不是 WP-admin 栏）

Buddypress - Display notification and profile in Header (instead of WP-admin bar)

php

wordpress