F8EOZ » _e

Mon blog – Partie 14 – Créer son thème WordPress – Traduction

admin — Sun, 11 Dec 2011 09:48:38 +0000

Objet
Le thème est prévu pour être publié. Il a été programmé en utilisant, pour afficher les messages, les 2 fonctions WordPress:
__ ($message, $domain) qui renvoie un texte à une autre fonction,
_e($message, $domain) qui affiche directement le texte.

Pour écrire des programmes multilingues, WordPress s’appuie sur la bibliothèque logicielle GNU GetText .

GetText utilise la chaîne de caractères à traduire comme clef de recherche dans un fichier de traduction et renvoie, soit la chaîne traduite, soit la chaîne d’origine, si aucune traduction n’est disponible.

On se reportera utilement à la documentation Translating WordPress et load_theme_textdomain .

Le fichier de traduction source fr_FR.po
Le fichier peut être créé avec un simple éditeur de texte mais il est bien plus facile de le faire en utilisant un outil d’aide comme Poedit. Ce logiciel examine tous les fichiers .php contenu dans un ou plusieurs répertoires pour en extraire les textes à traduire. Pour cela il faut naturellement lui indiquer:
- les paramètres généraux: langue = fr, pays = FR, jeux de caractères = UFT8 qui serviront à produire l’entête du fichier,
- la liste des répertoires à balayer, ici C:/… …/themes/montheme,
- les fonctions qui contiennent les textes à traduire, c’est à dire, __ (bien mettre 2 underscores) et _e .

Poedit produit la liste des messages à traduire et le fichier compilé fr_FR.mo qui est utilisé par le thème. Il est ensuite très facile pour un utilisateur du thème de décliner le fichier source, selon sa langue, norme ISO 639 et son pays, norme ISO 3166-1, en de_DE, en_GB, en_US, xx_YY, …, d’y inclure sa traduction et de le recompiler.

Notion de domaine
Il permet de limiter le champ de la traduction à un domaine de programmes. Les plugins, par exemple, qui ont leur propre fichier de traduction. Le nom du fichier de traduction est alors préfixé du nom de de domaine. Il est de la forme domaine-fr_FR.po et domaine-fr_FR.mo. Pour le thème le nom du fichier ne doit pas être préfixé du nom de domaine.

Installation
Dans le répertoire /themes/montheme créer le répertoire languages. Mettre les fichiers fr_FR.po et fr_FR.mo créés avec Poedit dans /montheme/languages .

Avec l’éditeur de texte ouvrir le fichier functions.php, insérer en début de ce fichier les lignes suivantes:

// Path des fichiers de traduction
add_action('after_setup_theme', 'traduction_setup');
function traduction_setup(){
// Préparation du répertoire et du fichier de traduction
    load_theme_textdomain( 'montheme', TEMPLATEPATH . '/languages' ); // fixer le nom du domaine
    $locale = get_locale(); // Notre langue fr et notre pays FR = fr_FR
    $locale_file = TEMPLATEPATH . "/languages/$locale.php";
    if ( is_readable( $locale_file ) ) require_once( $locale_file );
    // The .mo files must use language-only filenames, like languages/de_DE.mo in your theme directory
} // end setup

Enregistrer les fichiers. Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Pour vérifier le fonctionnement, ouvrir fr_FR.po avec Poedit. Dans la liste des messages affichés, cliquer sur le premier, par exemple. Dans l’espace de traduction (partie basse de la fenêtre de Poedit), saisir (sans les quotes) « Ceci est un exemple de texte traduit ». Valider. Enregister. Vérifier que le texte a été remplacé. C’est terminé.

Télécharger les fichiers du thème et les copier sous /themes/montheme .

Mon blog – Partie 5 – Créer son thème WordPress – Template Index

admin — Thu, 01 Dec 2011 11:06:41 +0000

Objet
Dans la partie 4 nous avons vu que le template index.php était le fichier nécessaire et suffisant (avec style.css) pour faire fonctionner notre thème. Il vaut bien un chapitre!

Que doit-il faire?

Il est chargé de présenter les Posts, titre et contenu, dans la page Web. Problème classique de la programmation, nous ne savons s’il y a des Posts, ni combien il y en a. S’il n’y a pas de Posts, il est intéressant de le signaler par un message. S’il y a des Posts, il faut éviter la saturation et en limiter le nombre par page Web tout en ayant un moyen d’en balayer l’ensemble. D’autre part, nous ne souhaitons pas encombrer notre page avec des Posts trop longs, il faut un moyen d’en présenter le début avec un lien pour en lire la suite.
Tout cela est réalisé simplement dans WordPress par une instruction conditionnelle, une boucle while un index et quelques fonctions.

Nous allons programmer cela pas à pas.

L’instruction conditionnelle
Dans index.php, entre la balise

insérer le code PHP suivant:

1er cas il y a des posts – la boucle while
Dans cette boucle il faut un index qui nous placera sur le Post suivant de l’ensemble des Posts de la sélection et qui est incrémenté à chaque boucle. Ceci est réalisé par la fonction the_post(). Entre la ligne if et else de l’instruction précédente placer le code PHP suivant:

Le plus difficile est fait! nous pouvons afficher maintenant le Post, son titre, ses méta-données. Pour habiller le Post nous allons l’insérer dans une balise

muni d’une classe post. La propriété id de la balise

est rendu unique par la fonction the_ID() . Nous allons d’abord afficher le titre du Post. Il est placé dans une balise et habillé d’une balise de titre

muni de la classe posttitle. Insérer dans index.php après la ligne the_post() les lignes suivantes:

Insérer dans style.css les lignes suivantes:

#post { float: left; margin: 0 0 0 0; padding: 0 0 0 0; } .posttitle { font-weight:normal; font-size:1.9em; padding: 0 0 0 0; margin: 1em 0 0 0; font-family: Arial; } .posttitle a, .posttitle a:link, .posttitle a:visited { color:#333; /* noir ;/ } .posttitle a:hover, .posttitle a:active { color: #C51500; / rouge /

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le titre de chaque Post* est affiché sur fond blanc. La colonne de gauche commence à se dessiner. Ce n’est pas encore parfait. Ne vous inquiétez pas on avance. La fonction the_permalink() a récupéré l’URL du Post pour la placer dans la balise de son titre. Regarder aussi la balise
du Post et son id. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever la boucle while en y plaçant sous le titre, la date et le l’heure, le contenu du Post, les catégories et les tags. Nous allons aussi prévoir la possibilité de modifier le Post (uniquement pour l’dministrateur). Sous la balise

qui termine l’habillage du titre insérer les lignes suivantes:



      



    


    
        
        
    Catégories: 
    | 
    |

Insérer en fin de style.css les lignes suivantes:

.postmetadata {
font-size:1.1em;
text-align:left;
font-style:italic;
}

.postcontent, .postcontent p{
font-size:1.15em;
padding: 0 1.5em 0.2em 0;
margin: 1.5em 0 0.5em 0;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le Post est affiché sur fond blanc. La fonction the_time() affiche la date et l’heure. La fonction the_content() affiche le contenu et gère le tag More qui limite le nombre de lignes affichées. La fonction the_tags() affiche les tags et établit un lien vers ceux-ci. La fonction the_category() affiche les catégories et établit un lien vers celles-ci. La fonction comments_popup_link() affiche le nombre de commentaires et établit un lien vers ceux-ci. La fonction edit_post_link() établit un lien pour modifier le Post.

Traduction
Noter que ces dernière fonctions sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

Navigation
Il faut maintenant gérer la navigation page précédente, page suivante. Sous la ligne endwhile insérer les lignes suivantes:

Insérer en fin de style.css les lignes suivantes:

.navigation {
margin: 1em 0 0 0;
font-size:1.1em;
}

.alignleft {
float: left;
margin: 5px 5px 5px 0;
}

.alignright {
float: right;
margin: 5px 0 5px 5px;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Vous ne pouvez constater l’effet de cet ajout que si vous avez un nombre de Posts qui dépasse le nombre définis dans les réglages de lecture. Vous pouvez, le temps du test, modifier ce réglage et le rétablir ensuite à sa valeur par défaut.

Traduction
Noter que les fonctions previous_posts_link() et next_posts_link() sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

2ème cas il n’y a pas de Posts
Nous terminons ici l’autre branche de l’instruction conditionnelle. Inserer après la ligne else du fichier index.php les lignes suivantes:

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Pour constater l’effet de cet ajout, entrer dans le champ de recherche situé dans l’en-tête, un critère de recherche qui n’existe pas, cliquer sur le bouton chercher.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Traduction
Noter que la fonction_e() permet le texte de votre choix.