BuddyPress France

Ceci est un tutoriel en 2 parties qui vous explique la création d’un widget et la mise en place d’un thème enfant

BP est une suite de plugins préformatés en termes d’affichage pour s’adapter au thème par défaut. BP 1.2.x utilise un affichage sur deux colonnes.

Dans certaines conditions, on peut vouloir modifier cet aspect et donc ajouter ou supprimer une colonne, ce qui oblige à reconfigurer le template d’origine. En clair, il s’agit de modifier la position de certaines fonctions afin de les faire coïncider avec une maquette.

Première partie

Pour créer un widget, il faut utiliser le fichier “functions.php” qui se trouve dans la plupart des thèmes WP. S’il n’existe pas, il faut le créer et le mettre à la racine du template.

Supposons que vous voulez créer un nouveau widget dans la colonne de droite. BP fournit en natif  la structure d’affichage de celui-ci. C’est à dire les appels à une fonction quelconque, ainsi que l’affichage sous forme de titre, contenu, texte additionnel, le tout entouré des balises HTML nécessaires.

On va donc mettre le code suivant dans le fichier “functions.php”

if ( function_exists('register_sidebar') )
register_sidebar(array(
 'name' => 'nom_du_widget',
 'before_widget' => '<div id="XYZ">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 )
);

Cette fonction génère l’affichage du widget sur la page d’administration des widgets.

Vous lui attribuez un nom unique à la ligne ‘name’ – ce que vous voulez, en majuscule ou minuscule . C’est ce nom qui s’affichera dans l’admin.

Vous devez aussi nommer le ID, par exemple  ‘XYZ’,  que vous intègrerez à la feuille de style. Si vous préférez utiliser une classe, vous pouvez le faire aussi. Il suffit alors de remplacer div id=’XYZ’ par div class=’XYZ’.

Une fois ces modifs enregistrées, votre widget est potentiellement opérationnel. Si vous voulez en créer d’autres, il vous suffit de recopier autant de fois que nécessaire la  fonction ci-dessus et de l’ajouter dans le fichier functions.php, avec un nom unique pour chacun d’eux.

Vos widgets sont à présent visibles dans l’admin des widgets et vous pouvez les positionner depuis cet emplacement sur votre template.

Reste à implémenter le widget dans le template.

Pour cela vous devez ouvrir le fichier concerné dans le répertoire de votre thème.  Il y en a plusieurs et c’est là ou il ne faut pas se tromper. Supposons que vous voulez ajouter un de vos widgets personnels  sur la page d’activité de votre site.

Vous ouvrez le fichier “activity/index.php” et vous collez le code suivant à l’endroit souhaité:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('nom_du_widget') ) : ?>
/* ici vous mettez tout ce qui vous convient en terme de php, html, javascript,... Mais vous pouvez très bien ne rien mettre aussi... */
<?php endif; ?>

Ne vous laissez pas abuser par le terme sidebar: c’est à usage interne et BP ne vous fera pas la gueule si vous collez un widget à un endroit qui n’est pas une sidebar, mais carrément à l’emplacement de votre contenu principal ou dans le footer ou quoi que ce soit d’autre. En fait un widget est d’abord un bout de code qui vous permet de contrôler une position dans un template.

Bien entendu ce n’est là que le principe général de l’implémentation. Vous devrez encore adapter ce bout de code à votre template à l’aide de la feuille de style. Vous pourrez appliquer tout ce qui vous chante pour avoir un affichage correct, à condition de respecter votre code de nommage des ID et des CLASS précités.

Deuxième partie

Comme vous allez modifier des fichiers natifs et que ces modifs seront perdues à la prochaine mise à jour, WP a prévu ce cas de figure et vous offre la possibilité de créer un thème enfant.  En travaillant les fichiers du thème enfant plutôt que ceux du thème parent d’origine, vous ne perdrez jamais vos modifs. L’autre avantage est que vous n’avez pas à dupliquer la totalité du thème, mais juste les parties qui vous intéressent.

Dans l’exemple ci-dessus, vous allez créer un thème enfant auquel vous allez attribuer un nom unique., disont Toto

Allez dans wp-content/themes et créez un dossier “Toto”

Dans ce répertoire, vous allez créer un fichier nommé “style.css”

En en-tête de fichier vous mettez obligatoirement ce commentaire:

/*
Theme Name: Toto
Theme URL: http://www.monsite.com/themes/Toto
Description:  a 2-column theme created for WordPress.
Author:  vous
Author URI:  l'url de votre site
Version: 1.0
Template: bp-default
Tags:  buddypress, two-columns

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

Les lignes vraiment importantes sont theme name: “le nom de VOTRE thème enfant” et Template: “le nom de votre thème principal” qui est le parent associé à votre enfant. Ainsi WP associera les deux thèmes automatiquement, en allant voir si un enfant existe. Si c’est oui, il le lira en premier. Si c’est non, il enverra le thème parent.

Après le commentaire ci-dessus vous allez ajouter ces 2 lignes:

@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

La première ligne contrôle l’affichage de la buddybar (la barre d’administration de BP…)
La seconde appelle tous les styles prévus d’origine pour buddypress.
Vous avez maintenant une copie conforme du thème original pour votre thème enfant.

Vous enregistrez le tout et vous activez ce thème pour votre site en lieu et place du thème BP par défaut.
Vous ne verrez aucun changement, mais si vous prenez pas exemple le style par défaut de la balise H1 présent dans style.css qui se trouve dans le thème BP-Default et que vous lui attribuez vos propres paramètres, vous verrez ce changement.

Il faut bien entendu écrire cela dans le nouveau fichier style.css que vous venez de créer.

Par exemple ceci qui affichera tous les titres h1 en rouge:

h1 {
color: red;
}

Le thème enfant étant prioritaire, c’est lui qui sera pris en compte à l’affichage. Votre modif est bien interprétée depuis le thème enfant. Vous n’avez rien touché au fichier original qui sera écrasé à la prochaine mise à jour et votre style à vous est préservé, puisque BP n’écrase pas les thèmes qui ne font pas partie de sa distribution.

Vous procédez de la même manière pour toutes les autres modifs de styles, en copiant le nom originel de l’id ou de la classe à changer et en les collant dans le style.css de votre enfant.

Concernant les fichiers de template que vous voudriez modifier, vous procédez de la même façon. Vous faites d’abord une copie conforme du fichier que vous voulez modifier, et le cas échéant de son chemin, comme ci-dessus “activity/index.php” que vous collez dans votre thème enfant.

Résumé de ce que vous devez voir après les manips décrites ci-dessus.

wp-content/themes/Toto
wp-content/themes/Toto/style.css
wp-content/themes/Toto/functions.php
wp-content/themes/Toto/activity/index.php

Fonctionnement général de BuddyPress

http://codex.buddypress.org/

A la demande générale du fan club, voici comment hacker le profil sans faire de mal, ni à buddypress, ni à Fairweb.

Méthode applicable aux versions 1.1 à 1.1.3 de BP. Au-delà, faudra lire la nouvelle doc des templates puis adapter.

Supposons que l’on  veuille masquer un champ du profil, sans pour autant le supprimer en admin. Juste ne pas le montrer. Le rendre invisible aux yeux des visiteurs quoi. Avec CSS, nous pouvons le faire facilement. à l’aide des 2 possibilités que sont display:none et visibility:hidden. Sachant que le premier est plus balaise que le second. Le display vire tout l’affichage environnant autour de lui. Le second ne vire que ce qui le concerne directement. Quoi qu’il en soit les deux jouent très bien à l’homme invisible.

Quand on crée des champs supplémentaires dans le profil, BP nous demande de leur attribuer un nom auquel il ajoute en arrière-plan de manière très basique field_1, field_2 etc. Ceci est ensuite répercuté dans l’affichage sous forme de classe attribuée à une ligne de tableau, qui permet le cas échéant de lui apporter du staïle, Coco. Soit en termes plus choisis, a CSS class called “field_##  nom-que_j’ai_donné-à-ce-champ” for a good design.

Remarquez au passage qu’il y a un espace blanc das l’intitulé. C’est juste pour que l’on comprenne que c’est pour nos yeux à nous. Parce qu’on le vaut bien, ma chère.  Mais pas du tout pour le navigateur ou pour la feuille de style. Leur interprétation s’arrête à l’espace, au simple “field_##”

Ça c’est fait.

C’est pas web 2.0 du tout, du tout, mais BP utilise un bête tableau à 2 colonnes pour construire une fiche profil.
Chaque information est contenue dans une ligne pour laquelle nous avons un champ “label” et un champ “data”.
Oui buddypress est anglophone !

Malheureusement, nous ne pouvons pas intervenir directement sur ces 2 cellules, puisqu’elles sont identiques du point de vue CSS, pour tout le tableau.

Label sous-entend titre du champ. Par exemple: “Couleur de vos Oreilles”. Appelation également utilisée par BP pour nommer la ligne complète.
Data sous-entend “ce que le visiteur voudra bien indiquer”.

Fort de tout ceci, BP va nous bricoler à toute vitesse une belle ligne de tableau en html. A savoir une ligne < tr > contenant deux cellules < td >
La ligne est identifiée par une classe nommée “field_## couleur-de-vos-Oreilles”
Les cellules étant toujours identiques dans le template du profil ont chacune une classe attribuée par défaut: “label” et “data”.

Pour masquer l’affichage de ce bloc d’information, il suffit donc d’indiquer en CSS le fait que la ligne “field….” contenant la cellule x et la cellule z ne doit pas être montrée.

Reste plus qu’à écrire un bout de code CSS pour parvenir à nos fins.

A l’aide du bloc-note ou de notepad++ ou de tout ce qui fait du texte sur un ordi, SAUF WORD, on crée un fichier intitulé “custom.css” que l’on placera dans le répertoire “css” qui se trouve dans le répertoire “_inc” qui est dans le répertoire ” bp-default”, lui-même dans le répertoire “themes” de “wp-content”. Ca va, vous suivez ?

Vous devez avoir ça à l’arrivée:

wp-content/themes/bp-default/_inc/css/custom.php

Vous y inscrivez le bout de code suivant:

tr.nom_du_champ td.label {
display:none;
}

tr.nom_du_champ td.data{
display:none;
}

C’est tout pour la méthode simple ! J’en ai une plus compliquée, mais le résultat est le même, donc j’en reste là.

Pour connaître le nom exact du champ, allez sur la page du profil où se trouve le champ que vous voulez masquer et affichez le code source de la page et repérez le nom attribué par buddy. Là faut savoir lire du html ou être pragmatique et utiliser un outil comme “web developer”…

Pour que “custom.css” fonctionne, il faut décommenter (retirer les 2 slashes en début de ligne) la ligne qui commande ce fichier.
C’est la dernière ligne du fichier “style.css” qui se trouve dans le dossier du thème “bp-default”.

La fonction “recherche” incluse dans poEdit est particulièrement utile lorsqu’il s’agit de parcourir de longs fichiers. Malheureusement pour eux, les utilisateurs de windows (bug signalé sous XP, Vista, windows 7) profitent un peu moins de cet outil. Et pour cause ! La fenêtre de recherche est inaccessible pour nombre d’entre eux. On a beau actionner le menu ou faire des  ctrl+F à faire frémir n’importe quel kiné, la fenêtre de recherche n’est plus là ou juste sous forme repliée dans la barre des tâches et impossible à déplier…. La belle affaire. Le seul moyen de la faire réapparaître est de désinstaller/réinstaller poEdit. Pas évident quand on s’en sert plusieurs fois par jour.

Le coupable en est un petit dysfonctionnement au niveau de la mémorisation de la position de cette fameuse fenêtre.  En fait elle s’affichait toujours mais à “l’extérieur” de votre écran, façon pop-up persistante si vous voyez ce que je veux dire… Pour que ça se produise avec un  poEdit opérationnel à 100%, il suffit de lancer une recherche  et de replier l’outil et de fermer poEdit. La position de la fenêtre de recherche est logiquement enregistrée comme étant “inactive, repliée, rangée dans la barre des tâches”. Lorsque vous rouvrez poEdit, il retrouve la position enregistrée et vous vous ne pouvez rien faire d’autre que de regarder, car votre PC est provisoirement plus fort que vous à cet instant. Mais on va l’avoir le salopiot ! Voilà comment:

Pour régler le problème il faut aller dans la base de registre (eh oui, ça se passe ainsi chez windows)

Menu Démarrer
Exécuter
regedit
HKEY_CURRENT_USER\Software\Vaclav Slavik\Poedit
retirer les valeurs des clés find_pos_x et find_pos_y

Ouvrir poEdit
Lancer une recherche et constater que la fenêtre est revenue
La positionner au milieu de l’écran par exemple

fermer poEdit

Retourner dans le registre et constater que la pos x et y ont retrouvées des valeurs normales.