Episode n°4 : L’installation des menus de navigation avec la liste des langues ?

Publié le 28 novembre 2010 par Michel

Dans l’épisode précédent, nous avons appris comment prendre en compte les termes des catégories (nom et description) afin que lors de la navigation si un article est dans une langue, la liste des catégories soit dans la même comme tous les mots de la structure du thème.

Au cours de cette étape, les éléments de navigation vers chaque langue du site sont ajoutés au menu :

Le thème fils de démo contient dans la feuille de style des éléments qui transforment dans le menu les noms des langues en drapeau. Pour la compréhension, ces lignes css seront temporairement inactivées.

Un bref coup d’oeil sur l’écran Menus du menu Apparence

Settings of navigation menus

Settings of navigation menus

Ici, un exemple simple de ligne ‘Home’ dans le menu ‘topleft’ affecté à l’espace ‘primary navigation’ – voir les flèches – Après chaque modification, ne pas oublier de sauver via les boutons bleus !

Retour à la page of xili-language et la boite “Special” :

Special menu languages

Special menu languages

Sur cette copie d’écran, le rectangle à bord rouge est autour de la zone où on choisit le lieu du menu de navigation concerné et on active l’insertion en cochant. (L’autre partie – ovale rouge – concerne des insertions préparatoires pour un menu configuré à la main par le webmestre et n’est pas étudié ici.)

Et maintenant les “lignes” langue du menu sont ajoutées en fin de liste sur le menu sous l’entête.

Sans les lignes “drapeaux” du style.css :

Language menu item w/o formatting

Language menu item w/o formatting

et ici avec les lignes de style affichant les drapeaux qui sont placées après les premières lignes obligatoires du fichier style.css d’un thème fils…

With formatting as here - see style.css for example

With formatting as here - see style.css for example

Chaque terme des lignes du menu doivent être (et traduits) dans les fichiers .mo qui peuvent être mis à jour avec xili-dictionary.

Note: l’exemple ci-dessus montre aussi un menu avec inclusion (et sélection selon la langue) automatique de pages du site. De la sélection (ici include 2 et 3), selon la language en cours, l’une des deux pages sera affichée. Dans dev.xiligroup.com, un lieu (navigation menu location) en haut à droite a été ajouté pour le menu qui permet de revenir en page d’accueil dans une autre langue !

Prochaine étape : les widgets et quelques trucs et astuces (css, printf…)

Publié dans Mode d'emploi | Marqué avec , , , | Laisser un commentaire

Episode n°3 : comment ajouter les termes du site liés à la base de données (catégories par ex.)

Publié le 24 novembre 2010 par xiligroup dev

A la fin du précédent épisode, on a pu constater qu’afficher seul un article coché en français coincidait avec l’affichage du thème dans la même langue. Mais quelques éléments comme les catégories et leur description restaient dans la langue racine : l’anglais.

Les catégories dépendent totalement de la façon avec laquelle le webmestre a organisé le site web. Il est donc nécessaire d’ajouter aux fichiers de langue (.po et .mo) ces nouveaux mots et phrases de la description.
En tant que webmestre agile avec le clavier et un éditeur de texte, il est possible de le faire à la main dans le .po associé à chaque langue cible et de compiler en .mo avec poEdit… Mais, xili-dictionary a été conçu pour faire cela en ligne en utilisant le tableau de bord de WP et ses bibliothèques de code de son noyau.

Rappel : comme la langue racine du thème twentyten (comme WP) est l’anglais (lignes msgid dans le .po), n’oubliez pas de nommer (ou renommer) les catégories en anglais.

Après avoir installé, l’extension xili-dictionary, vous notez que la liste est vide. Pour la remplir avec les termes du thème (par exemple les couples du fr_FR.po), importer le fichier qui est disponible dans le dossier du thème twentyten-xili (voir l’article précédent).

Xili-dictionary : importer .po

Xili-dictionary : importer .po

Tous les textes traduisibles et leur traduction voulue par les concepteurs sont maintenant dans la liste de xili-dictionary. Maintenant pour ajouter les termes liés aux catégories (nom et description), appuyer sur le bouton importer les catégories et confirmer.
Comme exemple, nous allons traduire la catégorie dénommée “News” en supposant qu’elle existe dans le site.

La liste des mots et expressions du dictionnaire permet la recherche. Ainsi, comme on le voit dans la copie d’écran ci-dessous, en saisissant “News” la liste se réduit et on isole la ligne que l’on va traduire.
En cliquant sur le bouton Modifier, on voit que ce terme n’a pas de traduction.

xili-dictionary - editing translation

xili-dictionary - editing translation

En cliquant sur le lien “Ajouter une traduction”, on peut saisir le terme équivalent du msgstr des couples de lignes d’un fichier .po.

xili-dictionary : Ajouter une traduction

xili-dictionary : Ajouter une traduction

Tout en n’oubliant pas de sélectionner la langue cible (ici le français), saisir la traduction et appuyer le bouton Ajouter.

Répéter ces opérations pour la description de la catégorie News.

Sans attendre, créons un fichier .mo fr_FR actualisé dans le dossier.

xili-dictionary : exporter le .mo

xili-dictionary : exporter le .mo

Du côté visiteur, la liste des catégories est maintenant traduite à l’affichage d’un article coché en français.

Catégories à l'affichage d'un article coché en français

Catégories à l'affichage d'un article coché en français

Au tout premier démarrage d’un site, ce travail est un peu fastidieux. Mais s’il y a des modifications dans les catégories ou une nouvelle ajoutée, c’est facile à mettre à niveau.

Prochaine étape : les menus et la liste des langages.

Publié dans Mode d'emploi | Marqué avec , , , | Laisser un commentaire

Episode n°2 : Création d’un site multilingue avec xili-language.

Publié le 20 novembre 2010 par Michel

Résumé des épisodes précédents:
Dans l’article précédent, plusieurs étapes importantes ont été définies. Cet article continue en commun la série sur le thème enfant.

L’étape par étape est un peu différente que précédemment car un thème enfant est dispo :

  1. Installation de wordpress 3.0,
  2. Vérification que le thème par défaut “twentyten” est en place, and ajout du thème “twentyten-xili”
    Pour xili-language 2.1.x, mettre à jour la version de twentyten-xili-v1.1.
    twentyten-xili theme 1.0 pour xili-language 1.8.9.1
    téléchargeable ici (45kB) [màj v. 0.9.9 + japonais]. Twentyten-xili doit être défini comme le thème courant du site internet.
  3. Ajout des fichiers .po et .mo des langues ciblées (ici fr_FR, de_DE et es_ES)

    On les trouve dans le sous-dossier languages du dossier du thème twentyten de chaque kit.
    http://es.wordpress.org/
    http://fr.wordpress.org/
    http://de.wordpress.org/

  4. Activation des extensions xili-language (choix des langues) et xili-dictionary
  5. Création d’une catégorie – par exemple “Actualités” donc “News” et sa description (“Recent news about website”) puisque la langue pivot est l’anglais.
  6. Création d’un ou deux articles en français et/ou en anglais qu’on va apprendre à relier si leurs contenus sont la traduction – adaptation de l’autre.
  7. Ajout des widgets spécifiques de xili-language – les configurer,…
  8. Personnalisation du nouveau système de menus de l’entête (wp_nav_menu)
  9. Les contenus des menus
  10. Les mots-clés et l’extension xili-tidy-tags.

Les étapes 1 à 6 sont faciles avec un minimum de connaissance sur WordPress et sa façon de l’installer mais on reviendra avec plus de détails sur la 4 et la 6. La 6ième parce qu’il y a quelques petits trucs pour les auteurs dans ce contexte multilingue.

Les copies d’écran sont prises lors de la rédaction de l’article ici même. L’un en anglais, l’autre en français.

Adding new post

Ajouter un article ici en anglais


Pour écrire les deux articles simultanément, un autre onglet est ouvert en cliquant le lien Add New (Ajouter) sur la ligne du french dans la boite Linked Posts (Articles liés) – (en utilisant la touche droite de la souris et la ligne nouvel onglet).

Dans le nouvel onglet, on voit l’article lié avec les boites de liens pré-remplis et il ne reste plus qu’à compléter titre et contenu…

edit post: french side

L'article en français

Ici dans l’exemple dans les copies d’écran, l’administration est en anglais mais peut être dans une autre langue. Cela n’influence pas la langue du contenu des articles que seul l’auteur choisi.

Une fois tout rédigé et sauvé, le fait d’afficher l’article doit faire apparaitre un environnement dans la langue correspondante où les termes de base du thème sont affichés dans cette langue.

meta sub-title in english

meta sub-title in english


les infos traduites

les infos traduites

Dans la prochaine étape, on va voir comment compléter les autres termes et leur traduction avec xili-dictionary. En effet, à ce stage seuls les termes du thème twentyten sont traduits mais pas les autres liés aux catégories ou aux menus….

Publié dans Mode d'emploi | Marqué avec , , , | Un commentaire

Thème enfant (fils) : le fichier functions.php

Publié le 20 novembre 2010 par Michel

Dans un thème fils, le fichier functions.php est très important. Contrairement aux autres fichiers du thème, celui-ci n’annule pas les fonctions présentes dans le thème parent qui seront toujours actives. Pensez-y !
Dans l’extrait présenté çi-dessous(actif dans dev.xiligroup.com), quelques éléments importants sont présentés :

<?php
/* functions for child of twentyten */
function twentyxilidev_setup () {
	register_nav_menus( array(
		'top-primary' => __( 'Top-Primary Navigation', 'twentyten' )
	) );
	load_theme_textdomain( 'twentyten', STYLESHEETPATH . '/langs' );
 
	$xili_functionsfolder = get_stylesheet_directory() . '/functions-xili' ; 
	if (file_exists($xili_functionsfolder . '/multilingual-functions.php') && class_exists('xili_language')) {
		require_once ($xili_functionsfolder . '/multilingual-functions.php');
 
	}
 
}
 
/* actions */
add_action( 'after_setup_theme', 'twentyxilidev_setup', 11 ); // after the parent
add_action('wp_head', 'special_head');
 
if(!is_admin()) {
	add_action('wp_print_scripts', 'xilifloom_theme_header');
	add_action( 'wp_print_scripts','scripts_add',20 );
}
 
define('XILI_CATS_ALL','0');
 
function special_head() {
	global $post; // for sliding
	// to change search form of widget
	if ( is_front_page() || is_category() || is_search() )
	 	add_filter('get_search_form', my_langs_in_search_form,10,1); // in multilingual-functions.php
}
 
// ....

La première fonction ‘twentyxilidev_setup’ activé par l’action after_setup_theme est important. Elle ajoute un nouvel espace menu. En relançant un loading text domain, seuls les fichiers .mo du sous-dossier du thème fils sont utilisés (et donc pas de modification de ceux du thème parent que l’on a initialement recopiés dans le fils).
L’appel add_action doit être fait après les autres d’où le numéro d”ordre >=11
Dans un extrait de la fonction ‘special_head’, un filtre ajoute les radio-boutons de langue sous le champ de saisie de recherche selon le contexte.

C’est dans ce fichier que l’on va pouvoir annuler des widgets ou des menus du thème parent et non utilisés dans le thème fils.

Ci-après le functions.php du thème twentyten-xili mis à disposition dès le prochain article :

<?php
 
/**
 *
 *
 */
function twentyten_xilidev_setup () {
	load_theme_textdomain( 'twentyten', STYLESHEETPATH . '/langs' ); // now use .mo of child
 
	$xili_functionsfolder = get_stylesheet_directory() . '/functions-xili' ; 
	if (file_exists($xili_functionsfolder . '/multilingual-functions.php') && class_exists('xili_language')) {
		require_once ($xili_functionsfolder . '/multilingual-functions.php');
	}
}
 
/* actions */
add_action( 'after_setup_theme', 'twentyten_xilidev_setup', 11 );
add_action( 'wp_head', 'special_head' );
 
define('XILI_CATS_ALL','0');
 
/**
 *
 *
 */
function special_head() {
	// to change search form of widget
	if ( is_front_page() || is_category() || is_search() )
	 	add_filter('get_search_form', my_langs_in_search_form,10,1); // in multilingual-functions.php
}
 
/**
 *
 *
 */
function single_lang_dir($post_id) {
	$langdir = ((function_exists('get_cur_post_lang_dir')) ? get_cur_post_lang_dir($post_id) : array());
	if ( isset($langdir['direction']) ) return $langdir['direction'];
} 
 
 
?>

La suite bientôt…

Publié dans Mode d'emploi | Marqué avec , , , | Un commentaire

Les widgets des liens recommandés : comment sélectionner selon la langue ?

Publié le 19 novembre 2010 par Michel

Sur ce site ici en bas à gauche et sur dev.xiligroup.com, on voit que les contenus de la liste des liens choisis varient selon la langue courante affichée, comment faire le réglage du widget ?

Sans codage php, cela devient possible depuis la version 1.8.5 de xili-language qui ajoute une taxinomie par langue des liens. En effet, comme les articles et pages, les liens (bookmark ou link) sont des objets que l’on peut regrouper selon la langue à laquelle ils sont affectés.
Moyennant une centaine de lignes supplémentaires php dans l’extension qui tirent partie des “hooks” disponibles, il est possible de faire une sélection selon la langue des liens affichés par le widget. Une taxinomie link_language est ajoutée dans la base (similaire à celle language des posts).

les liens avec langue

les liens avec langue

Comme pour les articles, l’écran d’édition des liens contient un boite où l’on peut cocher la langue choisie.
Il y a une pseudo-langue (Toute) qui existe et qui, affectée à un lien, permet son affichage quelque-soit la langue.
L’écran de réglage de xili-language dispose aussi (si le thème est compatible widget) une boite où l’on peut choisir les catégories de liens qui feront l’objet de sous-sélection selon la langue.

Pour ceux qui n’utilisent pas les widgets, la balise de thème est aussi personnalisable pour intégrer la sous-sélection selon la langue. Les praticiens php comprendront ce court exemple :

<?php wp_list_bookmarks( array( 'lang'=>the_curlang()  ) ) ; ?>
Publié dans Mode d'emploi | Marqué avec , | Laisser un commentaire