site - avecunphotographe.fr

Après un peu plus de deux mois de travail en temps masqué et la plupart du temps le weekend, je pense que mon initiation à Wordpress s'est bien déroulée.

Les étapes de conception

Profitant de la mise en place d'un nouveau projet, j'ai tout d'abord vérifié que Worpress pouvait convenir. Puis j'ai patiemment expliqué point par point les avantages d'une telle solution. J'avais pris la précaution de préciser que je n'avais encore jamais fait l'intégration de ce programme auparavant. Le « client » était donc au courant que ça me prendrait un plus de temps, mais comme il n'était pas pressé, ça tombait bien.

J'ai commencé alors par définir les grandes lignes. Avec mon correspondant, nous avons validé une interface à partir d'une page html/css statique – pour le coup, j'ai eu de la chance d'avoir en face de moi une personne qui savait exactement ce qu'elle voulait –.

En parallèle, j'ai installé un site de développement sur un ordinateur portable. C'est là que j'ai commencé à faire mes premières armes sous Wordpress. Pendant ce temps, nous nous occupions de l'hébergement et derrière une belle page de construction, nous commencions à poser les premières briques du site que vous découvrirez un peu plus bas.

J'avais en tête quelques difficultés et c'est en définitive mon module de choix de catégories qui fut le plus long à mettre en place.

Vous vous en doutez, il ne m'a pas fallu longtemps pour avoir les mains dans le cambouis. Et c'est à coups de personnalisation de thème, de fonctions php et d'un soupçon de jquery que je suis arrivé à mes fins.

Le résultat

Alors voilà. Le site s'appelle avecunphotographe.fr. Il parle de photographie bien sûr. Plus précisément, il propose des stages d'initiation, de perfectionnement et des séjours photo. Le tout est accès sur des cas pratiques, mais aussi sur le post-traitement (outils numériques, impressions, etc.). Et vous savez quoi, la région où se déroulent la plupart des stages se situe dans le val de Loire, une région hautement recherchée pour les photographes de paysages.

Capture avecunphotographe.fr

Je vous laisse découvrir le côté technique du site. Pour ma part, j'ai une affection particulière pour le module de choix de stages – mais forcement, c'est celui qui m'a donné le plus de fil à retordre –. J'aime bien aussi la galerie, le calendrier, le pied de page... bref, c'est assez rare chez moi, mais je l'avoue, j'aime bien ce site... mais pour combien de temps encore, je n'en sais rien.

Conclusion

J'ai été surpris en bien par l'adaptabilité de ce Blog/CMS. L'installation est facile certes, mais la personnalisation, la documentation et surtout la communauté de développeurs en font un outil très simple d'accès.

Je suppose que vous ne m'avez pas attendu pour le connaitre, quoiqu'un en soit, je pense y retourner bientôt.

Comment faire un site en plusieurs langues ?

Il est très simple de préparer un site pour gérer plusieurs langues. En php, il existe une série de commandes qui prendra en charge la traduction de vos textes. C'est ce que l'on appelle les fonctions gettext.

Dans cette page, je m'appuie sur le résultat d'un travail réalisé pour afficher les messages d'erreur de type 40x. Le fichier source est joint à ce billet.

Les fonctions gettext

Au début de votre page PHP, insérer les commandes suivantes :

$locale_dir = "messages"; // Nom de la "session"
$locale = "fr"; // Langue actuelle utilisée (que l'on fera varier)
putenv("LANG=$locale");
setlocale(LC_ALL, $locale );
bindtextdomain($locale_dir, "./locales"); // Répertoires où sont contenus vos fichier traduits.
bind_textdomain_codeset($locale_dir, "UTF-8");
textdomain($locale_dir);

Plus d'informations dans la documentation officielle.

Une fois ses commandes ajoutées, le mode "traduction" est activé.Il suffit d'encadrer le texte à traduire avec la syntaxe suivante : $maVariable = _("Mon texte à traduire"). Tant que les champs ne sont pas traduit, le contenu s'affichera tel quel. Par exemple ici : $maVariable affichera "Mon texte à traduire".

C'est à partir de ce moment que ça devient intéressant, au niveau du code, il n'y a plus rien à faire ; la suite sera gérée par un autre programme indépendant. Il en existe plusieurs, mais le plus connu semble être POedit.

Utilisation de Poedit

Malgré sont interface peu conviviale, Poedit est un très bon outil qui permet de gérer tout le workflow de traduction. Je ne vais pas rentrer dans les détails mais pour traduire son texte, voici comment Poedit fonctionne :

  1. On créé un projet en définissant le répertoire de travail. On lui montre où sont stockés les fichiers sources en PHP.
  2. On demande à Poedit de scanner les fichiers PHP. Il va extraire automatiquement toutes les variables (ex: Mon texte à traduire) et les placer dans ses textes à traduire. Techniquement, il va créer des fichiers .mo et .po dans une arborescence qui lui est propre.
  3. Si on a un service de traduction (amis, groupe collaboratif, etc.) on leur fournir les fichiers .mo qu'ils n'ont plus qu'à traduire. Personnellement j'ai travaillé avec le programme translate.net, mais rien ne vaut une vrai traduction.
  4. On replace le fichier .mo dans sa structure et on met à jour. Il va ainsi préparer le fichier .po qui servira pour la traduction.
  5. Il ne reste plus qu'à remettre le tout en ligne et vérifier que votre page se traduit bien.

Remarque : Il faut savoir que la structure ainsi générée, ex: locales / fr_FR / LC_MESSAGES n'est pas propre au php mais est habituellement utilisée pour tous les programmes localisés.

Détection automatique de la langue.

J'ai essayé de simplifier au maximum cette fonction. L'idée est de récupérer la langue du navigateur (HTTP_ACCEPT_LANGUAGE), de vérifier qu'elle est prise en charge puis de l'utiliser comme langue de base. En cas de non détection, le serveur prendra la langue par défaut.

$l_default = "fr";
$languages = split(',', preg_replace('/(;q=\d+.\d+)/i', '', getenv('HTTP_ACCEPT_LANGUAGE')));
$first_lang = substr($languages0, 0, 2);
if ( in_array($first_lang, array('fr', 'en', 'es', 'de') ) ) {
$select_lang = $first_lang;
} else {
$select_lang = $l_default;
}

Mise en page avec bords arrondis

Ça fait un petit bout de temps que je cherchais à encadrer un contenu par une box aux bords arrondis ; c'est assez simple à faire quand il s'agit d'une largeur fixe, mais lorsque la largeur varie, il fallait passer par des artifices souvent périlleux aux affichages différents d'un navigateur à l'autre.

Je me suis donc décidé à faire le tour de quelques sites afin de trouver la solution la plus propre et j'ai fini par la trouver sur un forum.

Le résultat a été placé dans mon dépôt de fichiers.

Pour savoir comment ça fonctionne, je sous invite à consulter la fiche sur la documentation du site ; les grandes étapes y sont développées.