Ajout d’un onglet de navigation BuddyPress

Lors d’une création de site internet communautaire, il peut être intéressant d’ajouter un onglet de navigation dans le profil BuddyPress de l’utilisateur. Je montre dans cet article comment le faire avec du contenu simple :

Dans BuddyPress, les onglets de navigation sont construits dans la fonction bp_setup_nav(). Lors de cette exécution, le hook portant le même nom, bp_setup_nav est appelé et permet d’enregistrer de nouveaux onglets.

Le code pour ajouter un onglet Passions :

Copier

/**
 * WP BuddyPress management
 *
 * @since 1.0.0
 */
class Sukellos_BuddyPress_Manager {

/**
     * Constructor
     */
    public function __construct() {

// Fires inside the ‘bp_setup_nav’ function, where plugins should register their navigation items.
        // See https://www.buddyboss.com/resources/reference/hooks/bp_setup_nav/
        add_action( 'bp_setup_nav', array($this, 'action_bp_setup_nav'), 10 );
    }

/**
     * Fires inside the ‘bp_setup_nav’ function, where plugins should register their navigation items.
     *
     * @return void
     */
    public function action_bp_setup_nav() {

$args = array(
            'name'              => 'Passions', // Display name for the nav item.
            'slug'              => 'passions', // URL slug for the nav item.
            'item_css_id'       => 'passions', // The CSS ID to apply to the HTML of the nav item.
            'show_for_displayed_user' => true,  // When viewing another user does this nav item show up?
            'site_admin_only'         => false, // Can only site admins see this nav item?
            'position'                => 105,    // Index of where this nav item should be positioned.
            'screen_function'         => array( $this, 'action_screen_function_passions' ), // The name of the function to run when clicked.
            'default_subnav_slug'     => false,  // The slug of the default subnav item to select when clicked.,
        );
        $nav_item = bp_core_new_nav_item( $args );
    }

/**
     * Passions
     * @return void
     */
    public function action_screen_function_passions() {

// TODO
    }
}
new Sukellos_BuddyPress_Manager();

La fonction bp_core_new_nav_item est appelé en lui passant les paramètres suivants sous la forme d’un tableau associatif :

name : le nom de l’onglet
slug : le slug de l’onglet
item_css_id : l’identifiant CSS qui peut être utilisé pour personnaliser le style de l’onglet
show_for_displayed_user : affichage de l’onglet lorsque le profil est parcouru par un autre utilisateur ?
site_admin_only : affichage de l’onglet uniquement par un administrateur ?
position : index de positionnement de l’onglet
screen_function : le nom de la méthode à appeler lors du clic sur l’onglet
default_subnav_slug : le slug du sous-onglet à sélectionner lors du clic sur l’onglet (false si aucun sous-onglet)

Désignation du modèle utilisé par BuddyPress

L’extension BuddyPress possède plusieurs modèles situés dans buddypress/bp-templates/bp-legacy/buddypress/.

Dans cet exemple j’utilise members/single/plugins.php en le désignant de la manière suivante:

Copier

Le code de ce modèle BuddyPress est plutôt simple :

Copier

<?php
/**
 * BuddyPress - Users Plugins Template
 *
 * 3rd-party plugins should use this template to easily add template
 * support to their plugins for the members component.
 *
 * @package BuddyPress
 * @subpackage bp-legacy
 * @version 3.0.0
 */

/**
 * Fires at the start of the member plugin template.
 *
 * @since 1.2.0
 */
do_action( 'bp_before_member_plugin_template' ); ?>

<?php if ( ! bp_is_current_component_core() ) : ?>

<div class="item-list-tabs no-ajax" id="subnav" aria-label="<?php esc_attr_e( 'Member secondary navigation', 'buddypress' ); ?>" role="navigation">
    <ul>
        <?php bp_get_options_nav(); ?>

<?php

/**
         * Fires inside the member plugin template nav <ul> tag.
         *
         * @since 1.2.2
         */
        do_action( 'bp_member_plugin_options_nav' ); ?>
    </ul>
</div>

<?php endif; ?>

<?php if ( has_action( 'bp_template_title' ) ) : ?>
    <h3><?php

/**
     * Fires inside the member plugin template <h3> tag.
     *
     * @since 1.0.0
     */
    do_action( 'bp_template_title' ); ?></h3>

<?php endif; ?>

<?php

/**
 * Fires and displays the member plugin template content.
 *
 * @since 1.0.0
 */
do_action( 'bp_template_content' ); ?>

<?php

/**
 * Fires at the end of the member plugin template.
 *
 * @since 1.2.0
 */
do_action( 'bp_after_member_plugin_template' );

Intégration du contenu dans la page BuddyPress

Il es ressort que deux hooks principaux peuvent être utilisés pour y intégrer du contenu :

Un titre h3 avec l’action bp_template_title
Un corps de page avec l’action bp_template_content

Par exemple :

Copier

Le code intégral

Le code complet de l’exemple :

Copier

/**
 * WP BuddyPress management
 *
 * @since 1.0.0
 */
class Sukellos_BuddyPress_Manager {

/**
     * Constructor
     */
    public function __construct() {

// Fires inside the ‘bp_setup_nav’ function, where plugins should register their navigation items.
        // See https://www.buddyboss.com/resources/reference/hooks/bp_setup_nav/
        add_action( 'bp_setup_nav', array($this, 'action_bp_setup_nav'), 10 );
    }

/**
     * Fires inside the ‘bp_setup_nav’ function, where plugins should register their navigation items.
     *
     * @return void
     */
    public function action_bp_setup_nav() {

$args = array(
            'name'              => 'Passions', // Display name for the nav item.
            'slug'              => 'passions', // URL slug for the nav item.
            'item_css_id'       => 'passions', // The CSS ID to apply to the HTML of the nav item.
            'show_for_displayed_user' => true,  // When viewing another user does this nav item show up?
            'site_admin_only'         => false, // Can only site admins see this nav item?
            'position'                => 105,    // Index of where this nav item should be positioned.
            'screen_function'         => array( $this, 'action_screen_function_passions' ), // The name of the function to run when clicked.
            'default_subnav_slug'     => false,  // The slug of the default subnav item to select when clicked.,
        );
        $nav_item = bp_core_new_nav_item( $args );
    }

/**
     * Passions
     * @return void
     */
    public function action_screen_function_passions() {

bp_core_load_template( 'members/single/plugins' );

// Adding content in Plugins template
        add_action( 'bp_template_title', array( $this, 'action_bp_template_title_passions' ) );
        add_action( 'bp_template_content', array( $this, 'action_bp_template_content_passions' ) );
    }
    public function action_bp_template_title_passions() {

echo 'Passions';
    }
    public function action_bp_template_content_passions() {

echo "
        <p>J'adore :</p>
        <ul>
            <li>Le développement d'extensions Wordpress,</li>
            <li>Les chats,</li>
            <li>Le rock'n roll.</li>
        </ul>
        ";
    }
}
new Sukellos_BuddyPress_Manager();

Quelques liens pour approfondir

Besoin d’une assistance technique par un expert WordPress ?
Optez pour un crédit temps de quelques heures

Contactez-moi

Ajouter une page personnalisée dans BuddyPress

Ajout d’un onglet de navigation BuddyPress

Désignation du modèle utilisé par BuddyPress

Intégration du contenu dans la page BuddyPress

Le code intégral

Quelques liens pour approfondir

Laisser un commentaire Annuler la réponse