Comment créer des widgets et un thème enfant dans BP 1.2.x
Le 25/04/2010 dans Mes astuces
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/
