Traduction française du thème P2

Le thème peut être téléchargé directement depuis votre interface d’administration si vous êtes sur WordPress 2.8 ou sur le site officiel de WordPress.org ici

A noter qu’il y a un mini-bug dans le fichier authors.php, la traduction ne s’affiche pas correctement. Pour que cela marche, il faut modifier la ligne #11 de authors.php. 

Au lieu de :

<?php printf( _c(‘Updates from %s|name’, ‘p2′), $author->user_nicename ); ?>

Il faut mettre :

<?php printf( _c(‘Updates from %s’, ‘p2′), $author->user_nicename ); ?>

Ce thème est vraiment fabuleux pour créer une sorte de FAQ participative ou un twiter like. J’adore. 

N’hésitez pas à me faire des retours si vous constatez des bugs ou si vous avez des remarques sur la traduction.

Aucune article en rapport.

Dans le répertoire mon_install_wpmu/wp-content/theme/buddypress-home/css/, vous avez les feuilles de style du thème principal décomposées de la façon suivante : 

base.css => Fichier de définition CSS globale. 

custom-sample.css => Voir plus bas.

ie/ => Fichiers CSS  spécifique pour Internet Explorer 

loader.php => Fichier permettant de gérer les différents fichiers CSS. 

Le fichier « custom-sample.css » vous permet de modifier à votre guise les différents style de la CSS de base, sans avoir à toucher les fichiers livrés avec BuddyPress. Cela permet de pouvoir faire des mise à jour de buddypress, en douceur, sans tout perdre. 

Pour que le fichier « custom-sample.css » fonctionne, il faut tout d’abord le renommer : 

mv custom-sample.css custom.css

A partir de là, vous pouvez mettre les styles que vous voulez modifier dans le fichier « custom.css » et les modifications seront prisent en compte lorsque du rechargement de la page de votre site. 

Pour prendre un exemple, si vous voulez modifier la couleur de fond du corps de la page:

Il faut copier la définition du style #body du fichier base.css qui contient : 

body {

     background: #fff;

     font-size: 1.2em;

    color: #555;

    background: url(../images/background.gif) top left repeat-y;

   line-height: 170%; 

   min-width: 960px;

    max-width: 1300px;

    margin: 0 auto;

}

et mettre les styles suivant dans « custom.css » : 

body {

    background: #ff0000;

    font-size: 1.2em;

    color: #555;

    line-height: 170%;

    min-width: 960px;

    max-width: 1300px;

    margin: 0 auto;

}

Recharger votre site et vous verrez vos modifications. Pour le moment, le site pique les yeux car le rouge est plutôt violent mais c’est plus pour vous montrer la mécanique. Maintenant, c’est à vous de jouer et de modifier votre page buddypress comme vous le souhaitez. A noter, qu’un certain nombre de bandeaux de couleur sont gérés par des images. Si vous voulez complètement modifier les couleurs de votre thème, il faudra utiliser votre logiciels de retouche d’image préféré afin de procéder à ce changement. 

La même mécanique est, bien entendu, possible avec les thèmes des membres.

Aucune article en rapport.

Premièrement et, et afin de bien comprendre, je vous conseille cet excellent tutorial sur les thèmes wordpress chez fan6art.

Dans Buddypress, la notion de thème se retrouve 3 fois : 

• Le thème principal. 
• Le thème des membres. 
• Le thème des blogs des membres. 

Le thème principal et le thème des blogs sont présents dans le répertoire :

mon_install_wpmu/wp-content/themes/

Le thème des membres se trouve dans le répertoire :

mon_install_wpmu/wp-content/member-themes/

• Le thème principal :

Le thème principal est le thème de la page d’accueil d’un site buddypress. C’est là où se trouve le blog du site et les widgets de buddypress. Il contient aussi les pages de recherche de membre et de groupe. 

Afin de l’activer, il faut aller dans le site d’administration du wpmu :

Aller dans Site Admin

Cliquer sur Thème et activer le thème. 

Ensuite, aller dans Design / Thème et sélectionner le thème. 

• Le thème des membres :

Ce thème est spécifique à BuddyPress et correspond aux pages de l’utilisateur qui contient l’activity, le wire, les groupes, les messages, etc….

Pour activer et choisir son thème de membre, il faut aller dans l’interface de gestion de son site wpmu :

Aller dans Site Admin / BuddyPress

Sélectionner le thème que vous voulez activer dans le menu déroulant 

Sauvegarder les options. 

• Les thèmes des blogs des membres : 

Il s’agit de tout les thèmes qui sont utilisables pour les blogs des membres inscrits. C’est la partie des thèmes la plus classique et l’ensemble des thèmes wordpress fonctionne sans problème avec. 

Pour choisir la liste des thèmes, il faut aller dans l’interface d’administration de votre site wpmu : 

Dans Site Admin / Thème, sélectionner les thèmes que vous voulez activer pour vos utilisateurs et sauvegarder les options. 

Chaque utilisateur pourra sélectionner le thème de son choix dans l’interface d’administration de son propre blog dans Design / Theme.

Maintenant que nous avons une meilleure vue sur les différents thèmes, il faut bien distinguer comment nous passons d’un thème à l’autre. Je fait abstraction des thèmes des blogs des membres qui est séparés. 

• Navigation depuis le thème principal :

Afin de bien comprendre comment se passe la navigation depuis le thème principal, je vous invite à consulter ce screenshot. 

Thème Principal BuddyPress

Les zones en bleu permettent de rester sur des pages gérées par le thème principal.

Les zones en vert permettent d’aller sur des pages gérées par le thème des membres.

• Navigation depuis le thème principal :

Afin de bien comprendre comment se passe la navigation depuis le thème des membres, je vous invite à consulter ce screenshot. 

Thème des membres BuddyPress

Les zones en bleu permettent d’aller  sur des pages gérées par le thème principal.

Les zones en vert permettent de rester sur des pages gérées par le thème des membres.

Bon, je vais m’arrêter là pour aujourd’hui mais n’hésitez pas à suivre ce blog pour d’autres articles sur ce thème.

Aucune article en rapport.

Attention, je n’aborderai pas dans ce tutorial tout la partie Webmastering (c’est-à-dire comment gérer une CSS ou du code HTML). Le but est de présenter la mécanique permettant de faire un thème dans Elgg. 

• Le principe d’un thème

Dans Elgg, la création d’un thème consiste à créer un plugins. De prime abord, cela peut sembler compliqué mais cela ne l’est pas tant que ça. Le gros avantage de cette méthode est de laisser le moteur de Elgg intacte, ce qui va faciliter les mises à jours. 

L’autre chose à bien comprendre est que tout les fichiers présents dans le thème vont remplacer les fichiers livrés avec votre installation. De ce fait, si vous ne souhaitez pas modifier le look & feel des groupes, par exemple, vous n’incluez pas les fichiers correspondant dans votre thème. Elgg ne voyant pas de fichier spécifique dans votre thème va prendre ceux du thème générale.

Du coup, cela simplifie la création de thème car vous n’avez qu’a vous occuper de la partie qui vous intéresse.

Par exemple, si vous voulez modifier le bas de page de votre site, le fichier d’origine se trouve à cette endroit (en partant du répertoire de votre installation Elgg)  :

/views/default/page_elements/footer.php

vous devez créer un fichier dans le répertoire de votre thème avec le même chemin 

/mod/Mon_Theme_A_Moi/views/default/page_elements/footer.php

 

• Etape #1 : La création du squelette

Comme tout plugins, vous devez créer un répertoire contenant votre thème dans le répertoire « mod » de votre installation. Le nom du répertoire sera pris comme nom de votre thème et  c’est lui là qui apparaîtra dans la liste des plugins de l’interface d’administration. 

Une fois, le répertoire de votre thème créé, il faut au minimum 2 fichiers : « start.php » et « manifest.xml »

 Dans le cas d’un thème, le fichier start.php peut être vide.

Le fichier manifest.xml permet de dire à Ellg toutes les informations nécessaires à afficher dans l’interface d’administration, il doit contenir les élements suivants :

 

<?xml version= »1.0″ encoding= »UTF-8″?>

<plugin_manifest>

        <field key= »author » value= »Votre Nom » />

        <field key= »version » value= »Le Numéro de Version » />

        <field key= »description » value= »La description de votre thème » />

        <field key= »website » value= »Le site où le thème pourra être téléchargé » />

        <field key= »copyright » value= »Copyright » />

        <field key= »licence » value= »La licence sous laquelle votre thème est fait » />

</plugin_manifest>

 

C’est tout pour le squelette du thème. A partir de maintenant, il est possible de l’activer. 

• Etape #2 : Activation du plugin

Afin d’activer votre thème, vous devez aller dans la page d’administration de votre site Elgg et cliquez dans « Tool Administration ». 

Sur cette page, en bas de la liste, vous devez retrouver votre thème. A partir de là, vous pouvez l’activer. 

Si tout ce passe bien,  votre thème doit être activité mais, vu que vous n’avez encore fait aucune modification, le site doit s’afficher avec le look habituel. 

• Etape #3 : Les modifications de la structure de la page

La structure des pages est gérée à partir d’un fichier se trouvant par défaut ici :

/views/default/pageshells/pageshells.php

Le contenu de chacun des éléments des pages (haut de page, bas de page, spotlight, barre d’admin, etc…) se trouve par défaut ici :

/views/default/page_elements/

Si vous avez bien compris le principe, vous devez mettre les fichiers dans votre répertoire de thème en gardant la même structure de répertoire. Pour les pageshells, vous devez le mettre dans le répertoire suivant :

/mod/Mon_Theme_A_Moi/views/default/pageshells/

Idem pour le contenu des élements de la page qui doit être dans le répertoire :

/mod/Mon_Theme_A_Moi/views/default/page_elements/

A noter que le contenu de la page d’accueil quand vous n’êtes pas inscrits  (la partie centrale) n’est pas gérer dans le pageshells directement. J’y reviendrai dans un autre tutorial. 

• Etape #4 : Les modifications du design de la page

/views/default/css.php

/mod/Mon_Theme_A_Moi/views/default/css.php

/views/default/[Nom_Plugins]/css.php

/mod/Mon_Theme_A_Moi/views/default/[Nom_Plugins]/css.php

Pour finir, 2 liens vers des sites tournant sous Elgg :

Aucune article en rapport.