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.

How to: Is it possible to hide flags ?

Twenty Eleven Child theme presented here includes a settings sub-menu named “xili Options”.

2011-xili-options

Twenty Eleven xili-options

The first option – when checked – hide the flags set by style css. Only names of language appear.

The second option activate a line before metas to show links to another posts in other languages like below if displayed as single.