De nombreux sites (et thèmes) ont besoin d’un sélecteur de langue personnalisé, qui se fondra dans le design. Ce tutoriel explique comment concevoir des sélecteurs de langue personnalisés, en utilisant uniquement des modèles HTML et sans écrire de PHP.

Introduction aux modèles Twig pour les sélecteurs de langue

Twig est un moteur de modélisation, qui vous permet de créer avec de l’HTML et du pseudocode.

Voici, par exemple, un modèle Twig :




<div class="[ css_classes ] my-custom-switcher">



<ul>

   {% for code, language in languages %}



<li class="[ language.css_classes ] my-custom-switcher-item">

           <a href="[ language.url ]">

               {% if language.flag_url %}

                   <img src="[ language.flag_url ]" alt="[ language.code ]" title="[ language.flag_title ]">

               {% endif %}

               [ language.native_name ]

               ([ language.display_name ])

           </a>

       </li>



   {% endfor %}

   </ul>



</div>



Ce que le modèle fait :

  1. Ouvre le conteneur DIV et les étiquettes UL pour le sélecteur de langue.
  2. Parcourt les différentes langues.
  3. Crée un élément de liste (LI) pour chaque langue.
  4. À l’intérieur de l’élément de liste, crée un lien vers la langue.
  5. Si la langue a un drapeau, il l’affiche.
  6. Affiche le nom de la langue.
  7. Ferme toutes les balises imbriquées.

Simple, non ? Voyons comment vous pouvez créer de tels modèles pour vos propres sélecteurs de langue.

Ajout d’un modèle de sélecteur de langue à votre thème

WPML vous permet d’ajouter au thème un répertoire avec des modèles de sélecteur de langue. Si vous élaborez un thème à vendre, vous pouvez inclure ces modèles avec votre thème, pour que tout le monde puisse les utiliser. Si vous personnalisez un thème, vous devez créer ces modèles de sélecteur de langue personnalisés dans un thème enfant afin que vos modifications ne soient pas perdues à chaque mise à jour de thème.

Le modèle de sélecteur de langue doit aller dans la structure de dossiers suivante :

my-theme/wpml/templates/language-switchers/my-template

Structure des répertoires pour vos fichiers de sélecteur de langue

Structure des répertoires pour vos fichiers de sélecteur de langue

Cela signifie que vous devez créer un dossier appelé « wpml » à l’intérieur de la racine de votre thème (ou thème enfant). Créez les dossiers templates/language-switchers. À l’intérieur du répertoire language-switchers, vous pouvez créer des sous-répertoires pour les différents modèles que vous créez (dans notre exemple « my-template »).

À l’intérieur du répertoire du modèle (« my-template« ), vous devez disposer des fichiers suivants, avec les noms suivants :

  • Fichier template.twig (obligatoire)
  • Fichier config.json (obligatoire)
  • Fichiers CSS files (facultatif)
  • Fichier JS (facultatif)
  • Répertoire de drapeaux (facultatif)

Concevoir le fichier template.twig

Le fichier template.twig est le modèle que vous concevez. Il utilise la syntaxe Twig. Dans le modèle, vous pouvez utiliser ces variables :

current_language_code (chaîne)

css_classes           (chaîne)

langues            (tableau)

code          (chaîne)

url           (chaîne)

flag_url      (chaîne)

flag_title   (chaîne)

native_name   (chaîne)

display_name  (chaîne)

is_current    (bool)

css_classes   (chaîne)

Définition des options dans le fichier config.json

Chaque sélecteur de langue doit comporter un fichier appelé config.json, qui fournit des informations WPML sur le sélecteur.

Voici les champs pour ce fichier :

  • name (obligatoire) : le nom du modèle. Pas besoin de le préfixer, WPML le fera avec le nom du thème ou du plug-in. C’est le seul champ obligatoire.
  • version (facultatif) : la version de votre modèle. Ceci est recommandé car il va forcer l’actualisation des feuilles de style et des ressources javascript.
  • css (facultatif) : par défaut, il analysera et mettra en file d’attente tous les fichiers CSS existants dans le répertoire du modèle. Toutefois, vous pouvez passer un tableau JSON de fichiers CSS à l’intérieur du répertoire de modèle. Exemple : « css »: [« style.css », « responsive.css »] .
  • js (facultatif) : par défaut, il analysera et mettra en file d’attente tous les fichiers JS existants dans le répertoire du modèle. Toutefois, vous pouvez passer un tableau JSON de fichiers JS à l’intérieur du répertoire de modèle.

    Exemple : « js »: [« script.js », « click-script.js »]. Notez que le script doit être écrit en Javascript uniquement sauf si le thème ou le plug-in inclut lui-même une autre bibliothèque autonome.

  • flags_dir (facultatif) : par défaut, il recherchera un répertoire « flags » existant dans le dossier modèle ou celui spécifié, s’il est défini.
  • flag_extension (facultatif) : l’extension de fichier pour les fichiers de drapeaux (png, svg, jpg, gif).
  • for (facultatif) : par défaut, le modèle sera disponible pour tous les emplacements (“menus”, « sidebars », « footer », « post_translations », « shortcode_actions »). Toutefois, vous pouvez spécifier un ou plusieurs de ces emplacements dans un tableau JSON.

    Exemple : « for »: [« sidebars », « post_translations »] .

  • settings (facultatif) : vous pouvez remplacer les paramètres utilisateur dans l’interface graphique d’administration en forçant certains paramètres. Passez simplement un objet JSON avec la valeur requise (0 ou 1) pour display_flags , display_names_in_native_lang , display_names_in_current_lang ou display_link_for_current_lang.

    Exemple : « settings »: {« display_link_for_current_lang »: 1} .

Voici l’exemple le plus simple d’un fichier config.json :


{

"name":           "My custom switcher",

}

Et voici un exemple plus complet, avec des champs supplémentaires (facultatifs) :


{

"name":           "Vertical List",

"version":         "1.0",

"css":            ["style.css"],

"js":             ["script.js"],

"flags_dir":      "super-flags",

"flag_extension": "png",

"for":            ["sidebars", "shortcode_actions"],

"settings":       {"display_link_for_current_lang": 1}

}

Exemple de sélecteurs de langue

Sélecteur de langue du menu

Envisageons que vous vouliez créer une langue personnalisée, qui apparaîtra dans le menu, comme celle-ci :

Sélecteur de langue personnalisé avec codes ISO

Sélecteur de langue personnalisé avec codes ISO

Le menu contiendra uniquement le code ISO pour chaque langue (en majuscules).

  1. Créez un nouveau dossier de modèle dans notre thème : mytheme/wpml/templates/language-switchers/menu-iso-codes/
  1. Dans ce dossier, ajoutez un fichier config.json avec le contenu ci-dessous :


{

"name" : "ISO codes for menus",

"for": ["menus"]

}

En principe, vous définissez le nom du modèle (qui sera répertorié dans les choix disponibles) et le contexte dans lequel ce modèle sera disponible (uniquement pour les menus).

  1. Maintenant, ajoutez le fichier template.twig avec le contenu ci-dessous :


[ code|upper ]

Comme il s’agit d’un modèle de menu, il vous suffit de rendre le contenu de l’élément de menu. Ici, nous affichons le code de langue après traitement par le filtre supérieur de twig (voir la documentation sur la page http://twig.sensiolabs.org/doc/filters/upper.html).

Remarque : Il est toujours possible de modifier les options d’affichage (drapeau, langue native, …) dans l’interface d’administration de WordPress, mais cela n’aura aucun effet sur le rendu car notre modèle personnalisé ne le gère pas. Pour éviter toute confusion pour l’utilisateur, nous pouvons forcer la désactivation de ces paramètres. Voici un fichier config.json amélioré :


{

"name" : "ISO codes for menus",

"for": ["menus"],

"settings": {

   "display_flags": 0,

   "display_names_in_native_lang": 0,

   "display_names_in_current_lang": 0

 }

}

Et voici le rendu dans l’interface utilisateur d’administration :

Sélecteur de langue personnalisé du côté développement

Sélecteur de langue personnalisé du côté développement

Obtenir la source : Vous pouvez trouver les fichiers de cet exemple sur notre page GitHub dédiée.

Sélecteur de langue en liste horizontale

Vous souhaitez afficher un sélecteur de langue minimaliste à l’horizontale avec uniquement des drapeaux et le nom de la langue comme titre de lien. En outre, vous utiliserez votre propre collection de drapeaux SVG.

Sélecteur de langue horizontal avec drapeaux seulement

Sélecteur de langue horizontal avec drapeaux seulement

  1. Créez votre dossier de modèle personnalisé dans mytheme/wpml/templates/language-switchers/custom-flags-with-titles/
  1. Importez votre collection de drapeaux dans le dossier mytheme/wpml/templates/language-switchers/custom-flags-with-titles/flags/.

(source https://github.com/lipis/flag-icon-css)

Remarque : La collection de drapeaux doit inclure un fichier pour chaque code de langue, comme ceci : “en.svg”, “fr.svg”, “es.svg”, “pt-pt.svg”, …

  1. Créez un fichier config.json comme le suivant :


{

"name": "Custom flags with titles",

"for": ["sidebars"],

"flag_extension": "svg",

"settings": {

  "display_flags": 1,

  "display_names_in_native_lang": 1,

  "display_names_in_current_lang": 1

 }

}

Vous définissez simplement l’extension de fichier pour les drapeaux (« svg »), mais il n’est pas nécessaire de définir le dossier de drapeaux puisque nous utilisons le nom de dossier par défaut (« drapeaux »).

  1. Créez un fichier template.twig comme le suivant :




<div class="[ css_classes ] custom-flags-with-titles">



<ul>

     {% <b>for</b> code, language <b>in</b> languages %}



<li class="[ language.css_classes ] item-custom-flags-with-titles">

           <a href="[ language.url ]">

              <img src="[ language.flag_url ]" title="[ language.flag_title ]">

           </a>

        </li>



     {% <b>endfor </b>%}

  </ul>



</div>



  1. Pour avoir quelques styles CSS, vous devez également créer un fichier style.css comme suit :


.custom-flags-with-titles li {

  list-style: none;

  float: left;

  margin: 0 3px;

}



.item-custom-flags-with-titles img {

  max-width: 32px;

  height: auto;

}

Obtenir la source : Vous pouvez trouver les fichiers de cet exemple sur notre page GitHub dédiée.