Fils RSS pour les
Articles
Commentaires

Internationalisation des thèmes::partie 3::le travail sur les sources


Marc Charlet 21 septembre 2006 par Marc Charlet

Au terme de cette troisième partie, nous aurons acquis la pratique de la transformation des sources de notre thème de travail pour les rendre compatibles avec les normes gettext d'internationalisation et nous serons prêts pour l'étape suivante: la génération du fichier POT.

Tous les fichiers source php du thème sont à convertir mais dans le cadre de ce tutoriel, nous nous limiterons au fichier index.php. Malgré la tentation de travailler sur tous les fichiers dès à présent, il est préférable pour la bonne compréhension de la suite du tutoriel, de ne traiter que le fichier index.php

Fichiers et outils

Pour effectuer notre travail sur les sources, il faudra nous procurer

  • les sources1 de notre thème de travail Green Bridge
  • un éditeur de texte2 de préférence3 avec des fonctions macro
  • une structure locale Apache/MySQL/PHP en état de fonctionnement4

Dans un premier temps, nous allons extraire les sources de notre thème dans un répertoire de travail indépendant de notre structure locale Apache/MySQL/PHP.

(i)Je vous conseille vivement de mettre ce répertoire à la racine de votre disque dur5 et de le renommer en quelque chose de plus pratique6 comme c:/greenbridge

GreenBridge-01.jpgNous allons également copier une version locale des sources du thème dans notre /wp-content/themes/ et choisir d'utiliser notre nouveau thème via les écrans d'administration appropriés. Le thème Green Bridge apparaît bien dans toute sa splendeur avec ses messages en anglais, bien évidemment!7.

(i)Je vous suggère de faire une deuxième copie du répertoire dans /wp-content/themes qui sera notre répertoire de test et que vous allez renommer en quelque chose comme GreenBridgeI8.
Pour pouvoir distinguer la copie de référence de notre copie test dans l'écran d'administration des thèmes de wordpress, il suffit de modifier la première ligne9 du fichier style.css du répertoire de test en Theme Name: Green Bridge International.

(i)En guise de premier test, vous pouvez sélectionner ce 'nouveau' thème10 dans l'écran d'administration des thèmes et constater qu'il n'y aucune différence pour le moment avec le thème précédent, notre thème de référence en anglais.

Pour résumer

Je vous suggère de vous constituer trois copies du répertoire du thème:

  • une première dans c:/greenbridge qui sera notre copie de travail
  • une seconde en local dans /wp-content/themes/green-bridge-10 qui sera notre copie de référence11
  • une troisième en local dans /wp-content/themes/GreenBridgeI qui sera notre copie de test

(i)Lors de la phase test avec les fichiers POT, PO et MO12 nous travaillerons directement sur les fichiers dans le répertoire test13, mais pour le moment, évitons de générer trop de désordre, travaillons sur les fichiers c:/greenbridei et copions les, un à la fois, vers le répertoire test.

C'est parti

Nous allons donc prendre index.php et faire le travail ensemble.

Index.php au départ c'est ça14:

PLAIN TEXT
  1. <?php get_header();?>
  2. <div id="content">
  3. <div id="content-main">
  4. <?php if (have_posts()) : ?>
  5.        
  6.         <?php while (have_posts()) : the_post(); ?>
  7.                
  8.             <div class="post" id="post-<?php the_ID(); ?>">
  9.                 <div class="posttitle">
  10.                     <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  11.                     <p class="post-info"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?> </p>
  12.                 </div>
  13.                
  14.                 <div class="entry">
  15.                     <?php the_content('Continue Reading &raquo;'); ?>
  16.                 </div>
  17.        
  18.                 <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
  19.                 <?php comments_template(); ?>
  20.             </div>
  21.    
  22.         <?php endwhile; ?>
  23.  
  24.         <p align="center"><?php posts_nav_link(' - ','&#171; Prev','Next &#187;') ?></p>
  25.        
  26.     <?php else : ?>
  27.  
  28.         <h2 class="center">Not Found</h2>
  29.         <p class="center">Sorry, but you are looking for something that isn't here.</p>
  30.     <?php endif; ?>
  31. </div><!-- end id:content-main -->
  32. <?php get_sidebar();?>
  33. <?php get_footer();?>

Le but n'est pas ici d'expliquer le fonctionnement de la boucle principale de Wordpress mais bien de traquer les apparitions15 de messages dépendants de la langue, ici la langue anglaise.

Les premiers messages de ce genre apparaissent dans les lignes 10 et 11:

PLAIN TEXT
  1. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  2. <p class="post-info"><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?> </p>

Dans les lignes 10 et 11 nous avons

  • title="Permanent Link to"
  • the_time('F jS, Y')16
  • > by <

que nous allons transformer (en ajoutant, pour être tout de suite complet, la variable $textdomain17, pour nous: 'GreenBridge') en:

  • title="<?php _e('Permanent Link to','GreenBridge'); ?>"
  • the_time(__('F jS, Y', 'GreenBridge') )
  • ><?php _e(' by ','GreenBridge'); ?><

les lignes 10 et 11 sont maintenant devenues:

PLAIN TEXT
  1. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to ','GreenBridge'); ?><?php the_title(); ?>"><?php the_title(); ?></a></h2>
  2. <p class="post-info"><?php the_time(__('F jS, Y','GreenBridge') ) ?><?php _e(' by ','GreenBridge'); ?><?php the_author_posts_link() ?> </p>

Sauvez votre fichier index.php18

Premier test important

  • Faites un 'copier' de votre fichier c:/greenbridgei/index.php et collez le dans le répertoire test /wp-content/themes/GreenBridgeI en remplacement du fichier existant.
  • activez le thème test Green Bridge International
  • visualisez le site: tout doit s'afficher exactement comme pour le thème de référence19.
  • si ce n'est pas le cas: vérifiez scrupuleusement les modifications apportées au fichier index.php et recommencez l'opération
  • au besoin faites du copier-coller au départ des pages de ce site

(i)Pour être sûr de travailler sur la version test de mon thème j'ai encadré le ' by ' de la ligne 11 avec trois étoiles '***'.

Comme ceci: stars-by-stars.jpg

PLAIN TEXT
  1. <p class="post-info"><?php the_time(__('F jS, Y','GreenBridge') ) ?> ***<?php _e(' by ','GreenBridge'); ?>*** <?php the_author_posts_link() ?> </p>

travail complet du fichier index.php

Il faut parcourir les sources du fichier index.php ligne par ligne et traquer les apparitions des messages en anglais. A chaque apparition, il faut modifier la source en introduisant soit la fonction __() soit la fonction _e() comme expliqué précédemment.

Outre les lignes 10 et 11 évoquées dans le paragraphe précédent, les ligne 15, 18, 24, 28 et 29 sont concernées.

Faites tout particulièrement attention à la ligne 18 (et accessoirement à la ligne 24) et prenez bien soin d'englober les messages entre les guillemets au complet, y compris les entités numériques (#187 et #171) ainsi que le signe %.

(i) Si vous avez un doute, comparez votre fichier en cours d'édition à son équivalent provenant du thème MistyLookI20

Sauvegardez régulièrement vos modifications et faites à chaque fois un 'copier' vers le répertoire test de votre environnement Apache/MySQL/PHP. Un affichage sans erreur est votre seul passeport pour continuer les modifications.

Utilisation de macros

Pour vous simplifier la vie, je vous conseille vivement d'utiliser des macros.

(i)Personnellement j'utilise quatre macros21.

Dans le cas de la fonction __():

  • prenons the_content('Continue Reading &raquo;'); dans la ligne 15
  • la première macro insère __( avant le guillemet the_content(__('Continue Reading &raquo;');
  • la seconde insère ,'GreenBridge') après le guillemet the_content(__('Continue Reading &raquo;','GreenBridge') );

Et pour la fonction _e():

  • prenons <h2 class="center">Not Found</h2> dans la ligne 28
  • la troisième macro insère <?php _e(' juste avant le texte à afficher <h2 class="center"><?php _e('Not Found</h2>
  • la quatrième insère ','GreenBridge'); ?> juste après le texte

    <h2 class="center"><?php _e('Not Found','GreenBridge'); ?></h2>

Le fichier index.php transformé

Le fichier index.php une fois terminé doit ressembler à ceci:

PLAIN TEXT
  1. <?php get_header();?>
  2. <div id="content">
  3. <div id="content-main">
  4. <?php if (have_posts()) : ?>
  5.        
  6.         <?php while (have_posts()) : the_post(); ?>
  7.                
  8.             <div class="post" id="post-<?php the_ID(); ?>">
  9.                 <div class="posttitle">
  10.                     <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to ','GreenBridge'); ?><?php the_title(); ?>"><?php the_title(); ?></a></h2>
  11.                     <p class="post-info"><?php the_time(__('F jS, Y','GreenBridge')) ?> ***<?php _e(' by ','GreenBridge'); ?>*** <?php the_author_posts_link() ?> </p>
  12.                 </div>
  13.                
  14.                 <div class="entry">
  15.                     <?php the_content(__('Continue Reading &raquo;','GreenBridge')); ?>
  16.                 </div>
  17.        
  18.                 <p class="postmetadata"><?php _e('Posted in ','GreenBridge'); ?><?php the_category(', ') ?> | <?php edit_post_link(__('Edit','GreenBridge'), '', ' | '); ?>  <?php comments_popup_link(__('No Comments &#187;','GreenBridge'), __('1 Comment &#187;','GreenBridge'), __('% Comments &#187;','GreenBridge')); ?></p>
  19.                 <?php comments_template(); ?>
  20.             </div>
  21.    
  22.         <?php endwhile; ?>
  23.  
  24.         <p align="center"><?php posts_nav_link(' - ',__('&#171; Prev','GreenBridge'),__('Next &#187;','GreenBridge')) ?></p>
  25.        
  26.     <?php else : ?>
  27.  
  28.         <h2 class="center"><?php _e('Not Found','GreenBridge'); ?></h2>
  29.         <p class="center"><?php _e("Sorry, but you are looking for something that isn't here.",'GreenBridge'); ?></p>
  30.     <?php endif; ?>
  31. </div><!-- end id:content-main -->
  32. <?php get_sidebar();?>
  33. <?php get_footer();?>



Liens et références utiles

  • description du thème de travail Green Bridge et téléchargement depuis mon site ici
  • éditeur de texte Notepad++
  • environnement Apache/MySQL/PHP Wamp
  • environnement Apache/MySQL/PHP easyphp



Remarque importante

Bien souvent, les sources php des thèmes contiennent déjà certaines fonctions gettext, le plus souvent la fonction _e()22.
Il faut quand même modifier ces sources pour y inclure 'GreenBridge', notre variable $textdomain. (voir le lien ci-dessous)

Résultat de la recherche des fonctions gettext déjà présentes dans les sources du thème.



L'étape suivante: la génération du fameux fichier POT clé de voûte de toute la traduction.

  1. j'ai mis les sources en téléchargement ici pour être sûr que tout le monde utilise bien la même version [retour]
  2. Notepad++ me paraît bien indiqué [retour]
  3. vivement conseillé quand même [retour]
  4. Wamp pour ceux qui le désirent, moi cela fait un bon bout de temps que je travaille avec easyphp mais le choix est sans importance: du moment que l'on peut tester le résultat de son travail en local [retour]
  5. cela va permettre d'éviter de traîner un chemin vers le répertoire avec un 'Mes Documents' à rallonge et des guillemets partout [retour]
  6. évitez surtout de lui donner un nom avec un espace [retour]
  7. sinon pourquoi ducros il va se décarcasser? [retour]
  8. I pour international, bien entendu [retour]
  9. en fait la deuxième, juste après la ligne /* [retour]
  10. celui qui a pour nom Green Bridge International 1.1 [retour]
  11. ou de sauvegarde [retour]
  12. dans le billet suivant [retour]
  13. /wp-content/themes/GreenBridgeI [retour]
  14. le loop dans toute sa splendeur [retour]
  15. pas toujours évidentes comme nous allons le voir [retour]
  16. la variable temps aussi doit être 'traduite', quand je vous disais que ce n'était pas toujours évident.. [retour]
  17. c'est un peu comme définir notre cadre de travail, l'explication viendra dans le billet suivant, patience... [retour]
  18. dois-je vraiment vous demander de sauvegarder régulièrement? [retour]
  19. rappelez-vous: si gettext ne trouve rien, il affiche le message dans la langue d'origine [retour]
  20. que vous pouvez télécharger ici [retour]
  21. je vous donne le fichier xml pour notepad++ ici ce fichier est a copier dans votre répertoire C:\Documents and Settings\Utilisateur\Application Data\Notepad++\ où Utilisateur est votre nom d'utilisateur [retour]
  22. sans doute le fruit de copier-coller de sources d'un thème à un autre [retour]

Tags: , , , , , , , , ,

Publié dans Traductions, Wordpress |

4 réponses à “Internationalisation des thèmes::partie 3::le travail sur les sources”

  1. le 26 fév 2007 à 13:01   Fetard

    Bonjour
    As tu eu déja le cas d’avoir des variables dans les chaines à traduire?

    Comment cela peut se gérer?

    Merci d’avance

  2. le 26 fév 2007 à 13:21   Marc Charlet

    peut-être ceci peut servir de début de piste?

    http://www.wordpress-fr.net/support/sujet-2209-resolu-mettre-francais-petit-entete

    (voir la manipulation des variables $link et $label)

    sinon, en général, il faut définir la variable auparavant et passer par la fonction __() avant d’utiliser la variable dans une fonction plus complexe.

    comme ceci:
    $Ma_Variable = “contenu par défaut de la variable en anglais”;
    $Ma_Variable = __($Ma_Variable);

    <?php function(qqchose avec $Ma_Variable); ?>

    (en n’oubliant pas de compléter le fichier pot)

  3. le 14 mar 2007 à 21:06   Blog A Brac

    Ravalement de façade (chantier suite)…

    Bon,
    J’ai fini par trouver un thème qui me plaît. Il s’agit d’un thème connu dans la communauté Wordpress : Hemingway conçu par Kyle Neath. Il a fait l’objet de plusieurs adaptations mais j’ai décidé de partir de la…

  4. le 14 juin 2007 à 20:14   robert

    hi all.