Ajouter un menu personnalisé à la buddybar

de | 15 octobre 2016

L’objectif de ce tutoriel est de vous donner un moyen d’afficher un menu personnalisé à la navigation BuddyPress sur les profils et les groupes. La buddybar est ce menu horizontal qui s’affiche entre l’en-tête et le contenu lorsque vous vous trouvez sur une page de profil ou de groupe.

tuto_wp_menu_bpnav

Après lecture de ce tutoriel, vous allez non seulement pouvoir ajouter un item de menu, mais en plus, il sera déroulant. Exactement comme il le serait si vous ajoutiez un tel élément au menu principal de votre thème.

Je rappelle aussi que la buddybar ne possède pas de menu déroulant, ce qui peut dans certaines conditions déboucher sur une navigation répartie sur 2, voire 3 lignes. Ce qui, amha, est plus que saoulant quand c’est le cas !

Imaginons que nous voulions afficher une liste de liens externes aux membres du site. Vous pourriez bien sûr le faire via le menu principal, mais celui-ci est public et en plus, il s’affiche partout. En même temps, hein, il est là pour ça! Mais bon… Si en plus votre thème ne propose qu’un seul menu, vous allez peut-être être confronté à un problème de place.

Comme vous utilisez BuddyPress, vous allez pouvoir le montrer uniquement à vos membres sur la page du profil et/ou uniquement sur la page de groupe. Sans avoir à tenir compte des spécificités de votre thème en matière d’emplacement de menu. On se contente simplement de travailler dans le(s) template(s) de BuddyPress.

Première bonne nouvelle, on va utiliser le customiseur de menu de WP pour structurer notre menu. Deuxième bonne nouvelle, BP dispose de filtres vous permettant d’intégrer un tel menu à sa navigation. Seule petite ombre au tableau, il faudra éventuellement, selon le thème, jouer un peu avec CSS pour harmoniser son apparence.

Pour ce tutoriel, je vous propose un exemple avec le thème Twenty Sixteen.

On va donc:
– définir un nouvel emplacement pour notre menu
– l’intégrer à la navigation de BP
– créer un menu constitué de liens vers des sites externes
– ajouter un peu de staïle !

Notez dès maintenant que vous pouvez utiliser cette astuce pour des liens vers des pages internes, des catégories ou quoi que ce soit d’autre de disponible dans le customiseur de menu.

Pour ce faire, on va utiliser les fonctions WP register_nav_menu et wp_nav_menu et pour BuddyPress, les 2 actions hooks bp_member_options_nav et bp_group_options_nav pour ajouter le menu à la navigation sur les profils ou les groupes.

Nous travaillons dans les fichiers suivants:
le fichier functions.php et le fichier style.css de votre thème enfant
le fichier bp-custom.php de BuddyPress

Le nouvel emplacement de menu se nomme bplink

On va le déclarer via le fichier functions.php

function register_my_menu() {
  register_nav_menu( 'bplink', 'bplink' );
}
add_action( 'after_setup_theme', 'register_my_menu' );

On ajoute cet emplacement à la navigation de BP en passant par le fichier bp-custom.php

function my_buddylinks_menu() {

if( is_user_logged_in() ) :

	if ( has_nav_menu( 'bplink' ) ) {
		wp_nav_menu(array( 
			'theme_location'	=> 'bplink',  
			'items_wrap'		=>'%3$s', 		
			'container_class' => 'link-dropdown'
		 ) );
	} 

endif;

}
add_action( 'bp_member_options_nav', 'my_buddylinks_menu' );
add_action( 'bp_group_options_nav', 'my_buddylinks_menu' );

A propos de cette fonction
Elle va ajouter un nom de classe à une div, ce qui nous permettra de cibler très précisément notre item de menu. Cet item étant dans la barre de navigation, hérite du style de navigation de BP, et avec une div nommée, nous allons pouvoir dérouler notre menu sans perturber les autres éléments se trouvant sur cette barre.

Construisons à présent un nouveau menu.
– tableau de bord > apparence > menu
– ajouter un menu > entrer un titre. Par exemple Mes Liens. Dans URL, enlever le http par défaut et mettre #
– ajouter une série d’éléments de type liens en prenant garde de les placer comme sous élement de Mes liens.
– enregistrer le menu
– passer à l’onglet Gérer les emplacements et sélectionner bplink.
– enregistrer à nouveau

C’est presque terminé! Allez sur un profil ou un groupe pour vérifier que Mes liens apparaît bien sur la barre de navigation. A ce stade, ce sera visible certes, mais pas forcément regardable, ou même présentable. C’est le moment d’utiliser CSS.

Voici les règles minimales pour afficher ce menu sou forme déroulante. Notez bien qu’il ne s’agit que du minimum syndical et qu’il ne tient qu’à vous de les améliorer pour convenir à vos besoins.
Notez également que nous ne traitons que la partie sous-menu, puisque l’item primaire « Mes liens » est déjà pris en charge par la CSS buddynav par défaut.

/* add a wp_menu on profile and group nav */

ul.sub-menu {
	display: none;
	position: absolute;
	background-color: #ccc!important;
	width: 130px;
	z-index: 1;
}

ul.sub-menu li {
    padding: 3px 4px;
    text-decoration: none;
}

#menu-item-73:hover .sub-menu {
    display: block;
}

A faire absolument avant d’appliquer les règles ci-dessus
N’oubliez pas de vérifier et de réctifier le ID #menu-item-73 qui est l’identifiant unique généré par WordPress pour l’item que vous venez d’ajouter. Vous le trouverez facilement (click-droit > afficher la source de la page) dans le bloc

<div id="item-nav">

à l’intérieur de

<div class="link-dropdown"><li id="Ce qui est marqué ici">

Et voilà! C’est terminé. Vous avez à présent un petit bouton supplémentaire sur votre buddybar avec un accès à quasiment toutes les parties WordPress de votre site.

Partagez...Tweet about this on TwitterShare on Google+Share on FacebookEmail this to someone