Information importante : date des articles et versions

Mis en avant

Ce site est né il y a deux ans (avec la sortie du thème 2012) pour expliquer comment réaliser un thème enfant multilingue de twentytwelve. Depuis, le noyau a beaucoup évolué. Il en est de même pour xili-language.

Le thème exemple twentytwelve-xili proposé au téléchargement en version 2.0 utilise les dernières techniques (classes etc…) et est compatible 3.5+. Il est expliqué techniquement (activation des classes sur le site de twentythirteen-xili.

Ici, les articles qui concernent les versions antérieures sont laissées à titre pédagogique. Ceux concernant la galerie ou le diaporama Floom restent valides

Donc pensez à scruter la date de l’article et les versions en cause !

M.

Galerie avec les nouvelles propriétés de l’extension xili-language v. 2.7

Dans cette galerie, les images sont titrées et décrites en français tout en partageant le même fichier média que la version dans les autres langues :

Comment est-ce possible ?

Toujours selon les principes qui régissent xili-language, sans créer de tables, un clone d’un attachement est réalisé et utilise les mêmes fichiers (principal, icône,…) tout en ayant titre et légende dans la langue choisie au moment du clonage de l’attachement original. Si l’article original à qui est attaché la série d’images (par exemple) a déjà ses articles traduits, au moment du clonage des images, les clones seront d’emblée attachés aux articles traduits… logique “cms’ !!!

En anglais, quelques infos sur le tableau de bord et la liste des médias depuis xili-language en version 2.7.

Galerie avec le nouveau carrousel du jetpack (v 1.5)

Grâce au nouveau module “carrousel” de l’extension JetPack de WordPress.com, voici quelques images récentes prises avec le récent Nex 7 de Sony (cliquer une image pour activer le carrousel).

Dans la galerie liée au texte, s’affiche le texte “Légende (caption)” (3e ligne lors de la saisie des textes liés à chaque image)

Dans le carrousel, il y a successivement la légende (caption), le titre et la description et à gauche les éléments EXIF.

© dev.xiligroup.com – droits de reproduction réservés – msc 2012-07

Quoi de neuf dans la prochaine version (2.6) de xili-language ?

Quoi de neuf dans la prochaine version (2.6) de xili-language ?

  1. Amélioration de la méthode (et mécanismes) pour changer la langue d’un article,
  2. Ajout de style (et drapeaux) possible dans l’interface auteur,
  3. Plusieurs lieux possibles pour stocker les fichiers style de l’interface,
  4. etc…

Style
La conception laisse une grande liberté au webmestre pour choisir les drapeaux associés à une langue. Hormis quelques-uns à titre d’exemple, ils ne sont pas fournis.

Dashboard xili-language 2.6

Dashboard xili-language 2.6

xili-language v 2.4.1 mis en ligne

Cette nouvelle version 2.4.1 de xili-language, tout en restant compatible avec les précédentes, apportent quatre éléments nouveaux

  • Les réglages dans le tableau de bord sont subdivisés en quatre onglets.
    4 tabs to organize settings
  • Le texte du readme (et visible dans le dépot) a été complètement réorganisé et sera progressivement enrichi.
  • adjonction automatique du fichier rtl.css pour les langues à sens de droite à gauche (arabe, persan, hébreu,…) – ce fichier est présent dans les thèmes de référence twentyten et twentyeleven.
  • nouvelle option pour gérer la traduction des dates précédement trouvées dans le serveur mais maintenant possible à partir de la classe de base de WP : wp_locale lire avec attention le keynote !

* une nouvelle version de twentyeleven-xili est dispo ici.

Mise à jour du thème twentyeleven-xili (0.9.7) : option pour créer un menu de navigation par langue

Pour des sites web multilingues, il est parfois nécessaire d’avoir un contenu du menu de navigation adapté à chaque langue avec pour chacun un ordre et des pages ou liens selon le contexte du langage.

Theme Locations

Theme Locations

Jusqu’à ce jour dans twentyeleven, la seule façon était de modifier le code (header) et d’ajouter les déclarations (register) de ces nouveaux menus dans (functions.php). (as in middle of this topic of forum)
Prérequis : xili-language version 2.3
Ici, via l’exemple du thème enfant twentyeleven-xili (twentyeleven-xili 0.9.7), cela est très facile grâce aux options du thème (xili Options).

Theme multilingual Options

Theme multilingual Options

Dans les emplacements pour menu (voir plus et ci-dessous) si un contenu de menu n’est pas attaché à un emplacement, le contenu attaché au menu de la langue racine (couramment en_us) est affiché.

Theme menu contents

Theme menu contents

Cette nouvelle version de ce thème enfant est aussi un démonstrateur pour les webmestres et créateurs de thème – comme cela fonctionne ?

Deux filtres (et fonctions) ont été ajoutés dans le fichier functions.php du thème enfant :

Le premier déclare les menus (leur emplacement) pour chacune des langues disponibles :

/**
 * filter to create one menu per language for dashboard
 * detect the default one created by theme ($menu_locations[0])
 * @since 0.9.7
 */
 
add_action ( 'init', 'xili_create_menu_locations',100 );
 
function xili_create_menu_locations () {
	$xili_theme_options = xili_twentyeleven_get_theme_options() ; 
	if ( $xili_theme_options['nav_menus'] == 'nav_menus' ) {  // ok for automatic insertion of one menu per lang...
		$menu_locations =  array_keys( get_nav_menu_locations()); 
		if ( class_exists('xili_language') ) {
			global $xili_language ;
			$default = 'en_us'; // currently the default language of theme in core WP
			$language_xili_settings = get_option('xili_language_settings');
			$language_slugs_list =  array_keys ( $language_xili_settings['langs_ids_array'] ) ;
			foreach ( $language_slugs_list as $slug ) {
				$one_menu_location = $menu_locations[0].'_'.$slug ;
				if ( $slug != $default && !isset($menu_locations[$one_menu_location]) ) {
					register_nav_menu ( $one_menu_location,  sprintf( __('Menu for %s','twentyeleven'), $slug ) );
				}
			}
		} 
	}
}

Le second, lors de la construction de la page et de son menu, affiche le contenu défini par le webmestre dans le tableau de bord des menus :

/**
 * filter to avoid modifying theme's header and changes 'virtually' location for each language
 * @since 0.9.7
 */
 
add_filter ( 'wp_nav_menu_args', 'xili_wp_nav_menu_args' ); // called at line #145 in nav-menu-template.php
 
function xili_wp_nav_menu_args ( $args ) {
	if ( class_exists('xili_language') ) {
		global $xili_language ;
		$default = 'en_us'; // currently the default language of theme as in core WP
		$slug = the_curlang();
		if ( $default != $slug ) {
			$theme_location = $args['theme_location'];
			if ( has_nav_menu ( $theme_location.'_'.$slug ) ) { // only if a menu is set by webmaster in menus dashboard
				$args['theme_location'] = $theme_location .'_'.$slug ;
			}	
		}
	}	
	return $args;
}

En guise de conclusion

En mettant à disposition cette nouvelle version du thème enfant twentyeleven-xili :

  1. les webmestres du thème twentyeleven peuvent aisément configurer un menu de navigation spécifique pour chaque langue, (twentyten-xili v. 2.0 a maintenant cette possibilité.)
  2. les webmestres agiles en php et les concepteurs de thèmes peuvent facilement trouver les exemples pour enrichir leur thème avec des fonctionnalités multilingues.

Bon codage !

Pour les questions utiliser les commentaires ci-dessous ou mieux le forum dev.xiligroup

Entête de thème : Créer un menu de navigation inter-langages.

Les menus de navigation

Les menus de navigation

Dans cet article, avec en exemple un site motorisé avec la trilogie xili-language, est présenté comment un menu sélecteur de langues est ajouté à l’entête du thème avec les outils “menus de navigation de WP” et quelques modifications du code source du fichier header.php.

En haut à droite, le menu des langues (1) est ajouté au menu essentiel (2) dans un div ici nommé xili_language

Header file

<body <?php body_class(); ?>>
 <div class="wrapper">
  <div class="page">
   <div id="xili_language">
     <?php   
      echo '<div><ul>';
	wp_nav_menu( array( 'container_class' => 'xl', 'theme_location' => 'languages_nav' ) );
	echo '</ul></div>';
	?>
   </div>

functions file

// This theme uses wp_nav_menu() in two (3 with if) locations.
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'ipseite' ),
		'primaire' => __( 'French Primary Navigation', 'ipseite' ),
		'languages_nav' => __( 'Languages Navigation', 'ipseite' ),
	) );

Style.css file

Pour ce menu avec le container classxl‘, quelques styles sont créés. Prenez note que les drapeaux sont en “background” et que le texte est rejeté dans l’espace négatif donc hors vue ;-) .

#xili_language { width: auto; color: #666; height:35px;  padding:0px 0px 20px 0;
}
#xili_language .xl {
	font-size: 13px;
	line-height: 18px;
	margin:0;
	width: 100%;
	padding:0;
	height:35px;
	display: block;
}
#xili_language .xl ul {
	list-style: none;
	float:right;
}
#xili_language .xl li {
	float: left; display:inline;
	padding:1px 2px;	
}
#xili_language a {color: #666; 
	text-transform: uppercase;
	font-size: 10px;
	display: block; text-decoration: none;
	letter-spacing: 1px;
}
ul#menu-languages li.lang-fr_fr, ul#menu-languages li.lang-en_us, ul#menu-languages li.lang-de_de, ul#menu-languages li.lang-es_es {text-indent:-9999px; width:18px; }
ul#menu-languages li.lang-fr_fr a {background: transparent url('images/flags/fr_fr.png') no-repeat center 5px;}
ul#menu-languages li.lang-en_us a {background: transparent url('images/flags/en_us.png') no-repeat center 5px;}

/* li#menu-xlang-separator a {display:none;} */

Dashboard: Appearance Menus

Si les zones (location) sont bien déclarées (register) dans functions.php (voir plus haut), il est facile d’affecter un menu à une zone. A droite ici le menu dénommé languages est sauvé (et vide ici).

appearance menus

appearance menus

Dashboard: xili-language settings

xili-language special settings

xili-language special settings

En haut, xili-language a détecté que 3 zones sont déclarées (voir functions.php plus haut). En cochant, le webmestre définit la zone où la sélection des langues (et les drapeaux) sera automatiquement ajoutée.

En bas, les pages ‘contact us’ ‘nous contacter’ sont automatiquement sélectionnées selon la langue cible et insérées avant les drapeaux.
(après cochage, n’oubliez pas de mettre à jour)

COPYRIGHTS:

le site web Ipseite appartient à la société Ipseite spécialisée en DAM (digital and media asset management).

ipseites characters

ipseites characters

Le design, les personnages, et la conception graphique sont nés de l’imagination et du “crayon” de Gérald Morales de WebOcube et co-fondateur de l’équipe xiligroup. Le Data-design et l’architecture des données sont de l’équipe xiligroup. Reproduction interdite sauf autorisation expresse des auteurs.

Installation bbPress 2.0 : la (nouvelle) guerre des styles

[cet article est obsolète et concerne bbPress 2.0.x]

En remplacement du thème bbPress par défaut, la mise en place d’un style personnalisé risque de vous donner quelques boutons tant la doc est légère ou les échanges sur le forum bbPress obscurs. C’est bien le style.css qui fait l’enfant dans WP.

Retour d’expérience

A la différence de bbPress 1.0, l’installation de la version 2.0 est une extension et l’ensemble est étroitement imbriqué avec WP. Cela nécessite donc un peu d’organisation. De plus, comme dans la V1, le thème en v2 que l’on crée, a besoin de tous les fichiers thème bbPress ; il n’y a pas de parenté avec le thème bbPress par défaut.

Objectif : insérer un forum au look personnalisé sans toucher les fichiers du thème principal du site et en partant des fichiers par défaut du forum v2 (présents dans le dossier bbp-theme de l’extension).

Le theme bbPress par défaut est un thème enfant du thème twentyten. Ici on va faire en sorte que les forums s’insèrent proprement dans le thème twenty-eleven qui, on le verra, n’est pas tout à fait prêt à recevoir le forum. Ici la méthode des shortcodes du forum n’est pas utilisée ni celle qui consiste à modifier un thème existant dont on a la maîtrise et où on peut ajouter et modifier des fichiers notamment functions.php et l’ajout de add_theme_support( ‘bbpress’ );.

Précautions :
1) l’extension bbPress doit être activé AVANT les changements de thème.
2) le thème twentyeleven doit être présent et actif au départ.

  • Etape 1 : création d’un dossier dénommé ici “bbp-theme” dans le dossier themes qui va contenir tous les fichiers pour que les forums s’affichent correctement.
  • Etape 2 : copier tous les fichiers du thème par défaut dans ce nouveau dossier “bbp-theme”.
  • Etape 3 : en modifiant le fichier style (notamment la ligne * Template: twentyeleven ) on va indiquer qu’il est le thème enfant de twenty-eleven. Le screenshot.png est affublé du logo bbPress avec un logiciel image.

En revenant sur l’administration des thèmes, on voit apparaitre des nouveaux thèmes ‘enfant’ : celui par défaut pour twentyten et celui que l’on vient de créer pour twenty-eleven.

Si l’extension bbPress est bien activé, il est possible d’activer ce nouveau theme enfant de twentyeleven qui contient tous les fichiers nécessaires pour l’affichage des forums.

La page web est alors accessible via un lien tel que

http://www.exemple.fr/?post_type=forum

puisque les forums sont stockés dans les custom post de type forum.

Si, dans l’admin, un forum au moins était en place, on voit la liste mais quelques défauts d’affichage notamment des problèmes de largeur et une barre latérale en mauvaise position.

Pourquoi ?

  • N’oublions pas que les fichiers bbPress proviennent d’un modèle par défaut pour twentyten.
  • Dans twentyeleven, les pages “singular” donc “single” s’affiche sans sidebar comme dans twentyten.

Ici, sans modifier le dossier du parent “twentyeleven”, on va ajouter quelques lignes de style dans style.css de bbp-theme et modifier l’id des divs dans les fichiers bbPress qui ont été recopiés.

Feuille de style du theme enfant.
Quand une page web du forum est affichée, une classe bbPress est ajouté à body donc on va pouvoir rétablir la place pour la sidebar (div #secondary).

/**
 * Theme Name: bbPress 2011 (Child for Twenty Eleven)
 * Theme URI: http://bbpress.org
 * Description: Adds bbPress forums to the twentyeleven theme
 * Author: WordPress, bbPress teams and dev.xiligroup
 * Author URI: http://dev.xiligroup.com/
 * Version: 1.2
 * Tags: bbpress, black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
 * Template: twentyeleven
 *
 ** example child bbPress + 2011
 *
 **/
 
.bbPress.singular #content,
.bbPress.left-sidebar.singular #content {
	margin: 0 34% 0 7.6% !important;
	width: 58.4% !important ;
	position: relative !important;
	width: auto !important;
}
 
.bbPress #primary {
	float: left; 
	margin: 0 -26.4% 0 0 !important;
	width: 100%;
}
 
.bbPress.singular div.entry-content {
	width: 100% !important;
}
 
.bbPress.singular .entry-title { font-size:26px; }

Dans twentyten la boite principale a l’id “container”. Pour que les fichiers de bbPress fonctionnent pour twentyeleven, il faut donc modifier l’id en replacant “container” par “primary” dans ces fichiers recopiés dans bbp-theme (une bonne douzaine…).


Pour modifier les couleurs et d’autres aspects du forum proprement, il faut modifier le bbpress.css dans le sous-dossier css du theme bbp-theme.

par exemple les couleurs des fonds des infos encadrées (class bbp-template-notice).

Avantages de l’approche :

  • pas de modification du thème dans l’extension bbPress
  • pas de modification du thème ici twentyeleven
  • départ sur une base complète de fichiers bbPress
  • contrôle total des modifications – ici dans le thème ‘enfant’ au dossier bbp-theme.

Defaut identifié – si wp est installé dans un sous-dossier, la redirection des logins/logouts dans les widgets et meta est incorrecte. trac 1645.

Prochain exemple : enrichir le thème enfant multiliingue twentyeleven-xili pour qu’il inclut correctement des forums. En effet, il n’est pas possible de faire le thème enfant d’un theme enfant… Pas de grand-parents chez WP ;-)

Le thème enfant multilingue twenty eleven : où trouver les fichiers langues ?

où trouver les fichiers langues ?

Chaque kit WP 3.2 est livré avec sa langue et dans le theme “twenty eleven”, le fichier (.mo, .po) pour le theme dans la même langue. Pour les trouver dans d’autres langages, il faut donc visiter le site wordpress.org pour chacun de ces langages à introduire dans le site multilingue. Comme ces fichiers seront augmentés ou modifiés par xili-dictionary pour ajouter les données du site proprement dites, il convient de les placer dans le sous-dossier du thème enfant comme présenté ci-dessous :

2011 theme folders

les dossiers du thème Twenty ten eleven