Ce texte est une simple traduction de celui proposé sur Buddypress.org mais j’ai pensé que celà pourrait être utile aux non-anglophones :
La nouveauté de BuddyPress 1.1 est la possibilité de créer des thèmes Buddypress compatibles en utilisant les thèmes enfants de WordPress.
Les avantages de créer des thèmes enfants sont énormes. D’abord, lorque vous faites une mise à jour de Buddypress, votre thème sera également automatiquement mis à jour. Il n’est pas nécessaire de dupliquer chaque fichier du thème, votre thème héritera de tous les fichiers de thème dont il a besoin. Si vous avez besoin d’écraser un fichier, vous pouvez le faire individuellement pour chaque fichier de modèle.
Tout celà semble très bien, mais où commencer ?
Le thème bp-default qui est proposé avec le package de Buddypress est un thème pré-construit que vous pouvez utiliser comme guide pour construire votre propre thème.
La première chose à faire est du dupliquer ce thème et de donner un nouveau nom à son répertoire. Vous avez maintenant un nouveau thème à partir duquel vous pouvez travailler. Ouvrez le fichier style.css et vous verrez ce qui suit.
/*
Theme Name: BuddyPress Default
Theme URI: http://buddypress.org/extend/themes/
Description: The default theme for BuddyPress.
Version: 1.1
Author: BuddyPress.org
Author URI: http://buddypress.org
Template: bp-sn-parent
*/
Vous devrez éditer ces détails et les modifier avec vos propres informations. Donnez à votre thème un nom unique. Assurez-vous cependant de ne pas toucher à la ligne « Template: ». Activez votre nouveau thème dans l’interface d’administratin de votre installation de Buddypress. Vous pourrez alors voir les modifications en live sur votre installation pendant que vous travaillez sur votre thème.
Plus bas dans ce fichier CSS, vous trouverez des règles d’importation de fichiers CSS.
/* Font styles */
@import url ( ../bp-sn-parent/_inc/css/fonts/12px.css );
/* Layout styles for home page, internal pages and blog/directory pages */
@import url ( ../bp-sn-parent/_inc/css/layout/home-page/3c-right.css );
@import url ( ../bp-sn-parent/_inc/css/layout/internal-pages/3c-left.css );
@import url ( ../bp-sn-parent/_inc/css/layout/blog-dir-pages/2c-right.css );
Ces fichiers CSS se trouvent dans le thème bp-sn-parent. Ce thème parent contient de nombreux styles de polices et de positionnements que vous pouvez utiliser pour structurer votre nouveau thème. Si vous ouvrez le répertoire bp-sn-parent/_inc/css/ vous verrez toute les styles de structure que vous pouvez utiliser dans votre thème. Bien sûr, vous n’êtes pas obligé. Si vous préférez construire votre propre structure n’importez pas ces fichiers dans votre fichier style.css.
Vous remarquerez également :
/* Default theme admin bar styles */
@import url ( _inc/css/adminbar.css );
Ce sont les styles de la barre d’administration qui apparaît en haut de chaque page. Vous voudrez probablement éditer ces styles pour ajouter vos propres couleurs ou positionnements pour la barre d’administration.
Enfin, il y a le fichier screen.css inclus à la ligne suivante. C’est là que se trouvent les styles natifs du thème. Si vous voulez partir de rien, vous pouvez supprimer tous les styles et déclarations de ce fichier. Assurez-vous de vérifier aussi le fichier screen.css dans le répertoire bp-sn-parent/_inc/. Ils sont un peu plus basiques si vous voulez commencer avec une base générale de styles CSS. Copiez simplement les styles de ce fichier dans le fichier screen.css de votre propre thème. N’éditez jamais /bp-sn-parent/.
Où sont tous les fichiers de modèles ?
Enfin, vous remarquerez qu’il n’y a aucun fichier de modèle dans votre thème. Ceci vient du fait que votre thème hérite de tous les fichiers de modèles du thème /bp-sn-parent/. Si vous voulez vérifier le code HTML, ouvrez ce thème et parcourez les fichiers de modèle. Si vous décidez de changer quelque chose dans le fichier de modèle, copiez-le depuis /bp-sn-parent/ et collez-le dans votre thème. Ce fichier dans votre thème écrasera celui qui se trouve dans /bp-sn-parent/. Encore une fois, vous ne devrez jamais éditer aucun fichier de /bp-sn-parent/.
Bonne création de thème et n’oubliez pas de proposer votre thème lorsque vous aurez fini.
29 novembre 2009 à 5:49
Bravo et merci !
(ça, c’est fait)
29 novembre 2009 à 6:08
Tu peux le récupérer et peut-être créer des pages de traduction de la doc officielle dans Buddypress France non ? On pourrait continuer peu à peu, qu’en penses-tu ?
15 février 2010 à 2:06
Cool première version explication francaise que je trouve
30 septembre 2011 à 6:09
Dans le template par défaut il est indiqué ceci dans style.css :
» * If you want to make a custom theme based on this theme, DO NOT copy and edit it. By
* doing this you will make updates and maintainence much harder for yourself.
* Instead, please read this codex page on how to build a BuddyPress child theme: »
Concrètement cela signifie que la méthode que tu proposes dans ton billet n’est pas la bonne puisqu’il ne faut pas copier le thème bp-default. D’autant plus que l’on peut indiquer dans le nouveau thème de se baser sur le template par défaut. C’est une meilleure méthode qui a l’avantage de simplifier les mises à jour.
Source : http://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/
30 septembre 2011 à 6:17
Oui, je suis entièrement d’accord avec ton commentaire. Mon billet est obsolète. A une époque, c’était la méthode préconisée par BuddyPress mais le code de BP a beaucoup évolué et s’est beaucoup amélioré pour bénéficier de l’évolution des fonctionnalités au fil des mises à jours. Merci d’avoir commenté.
30 septembre 2011 à 6:30
La nouvelle méthode est vraiment sympa, elle permet de profiter des nouveautés du thème par défaut tout en conservant sa personnalisation quand elle n’est pas trop avancée.
5 octobre 2011 à 8:58
Cette nouvelle méthode respecte surtout le système de thème parent et thème enfant que l’on connaît dans WordPress à la base. C’est en effet, nettement plus logique.