// BLOG

Kirby CMS - Internationalisation

Kirby gère nativement l'internationalisation de votre site web, que se soit côté Panel ou du côté de vos vues frontend. Dans cet article nous allons voir comment configurer votre installation Kirby pour activer l'internationalisation, comment traduire les textes des blueprints et les textes présents dans le code de vos templates.

Rédigé le 17.10.2022
Par Gilles Vauvarin

Internationalisation Traduction Kirby CMS

Activation de l'internationalisation

Comme c'est souvent le cas avec Kirby, l'activation d'une fonctionnalité et en l'occurence l'internationalisation, se fait dans le fichier de configuration /site/config/config.php

Pour activer l'internationalisation, il suffit d'ajouter dans le tableau retourné dans le fichier de configuration, l'indice "languages" et de lui attribuer la valeur "true" de la façon suivante :

// /site/config/config.php

<?php

return [
    'languages' => true,
];

Comment ajouter des langues

Attention, la première langue doit toujours être définie comme la langue par défaut. Veillez à ne définir qu'une seule langue par défaut.
Si vous activez l'internationalisation alors que votre site web contient déjà des contenus, la langue par défaut doit correspondre à la langue de ce contenu déjà existant.

Il y a deux manières d'ajouter une langue une fois l'internationalisation activée :

- Manuellement via un fichier PHP déposé dans un dossier /site/languages/

- Automatiquement via le panel en cliquant sur le sous-menu "Languages"

Manuellement via un fichier PHP

Si vous souhaitez ajouter le Français comme langue par défaut à votre site web via un fichier PHP, ajouter un fichier fr.php dans le dossier /site/languages/ et retourner un tableau avec les indices suivant :

// /site/languages/fr.php

return [
  'code' => 'fr',
  'default' => true,
  'direction' => 'ltr',
  'locale' => 'fr_FR',
  'name' => 'Français',
];

Vous noterez la ligne 'default' => true, qui définie ici le Français comme la langue par défaut.

Tout autre langage ajouté se fera de la même manière, c'est à dire en ajoutant un fichier PHP dans le dossier /site/languages/ avec l'indice "default" à "false" 'default' => false, Par exemple, si j'ajoute maintenant l'anglais à mon site :

// /site/languages/en.php

return [
  'code' => 'en',
  'default' => false,
  'direction' => 'ltr',
  'locale' => 'en_GB',
  'name' => 'English',
];
Attention, si vous n'utilisez pas du tout le Panel, vous devrez ajouter manuellement l'extension de langue à vos fichiers texte. L'extension de langue est obligatoire, sinon Kirby ne fonctionnera pas comme prévu. Exemple : home.fr.txt et home.en.txt

Automatiquement via le panel

Une fois l'internationalisation activée dans le fichier de configuration /site/config/config.php, un sous-menu "Languages" apparaît dans le menu principal de votre Panel. Vous pouvez alors ajouter des langues via un formulaire. Kirby se chargera d'ajouter les fichiers de langues PHP dans le dossier /site/languages avec les bonnes informations. Chaque langue, une fois ajoutée, peut être éditée ou supprimée depuis cette page du Panel.

Attention, lorsque vous supprimez une langue depuis la page "Languages" de votre Panel, tous les fichiers textes asssociés à cette langue seront supprimés. Si vous vous trompez de langue, vous pouvez perdre des contenus par inadvertance.

Lorsque vous saisissez vos contenus dans les différentes langues depuis le Panel (en switchant via le menu de langue), kirby créera automatiquement les fichiers textes avec la bonne extension xxx.fr.txt, xxx.en.txt dans le dossier /content

Gestion des URLs

Par défaut, Kirby ajoute le code langage à votre URL racine :

https://monsite.com/en pour le site en Anglais.
https://monsite.com/fr pour le site en Français.


Si vous souhaitez garder l'URL racine https://monsite.com pour la langue par défaut, il faut l'indiquer dans le fichier de la langue par défaut en ajoutant un indice 'url' => '/'

// /site/languages/en.php

<?php

return [
    'code' => 'en',
    'default' => true,
    'direction' => 'ltr',
    'locale' => 'en_GB',
    'name' => 'English',
    'url' => '/'
];

Vous pouvez également faire pointer votre site vers des URLs spécifiques pour chacune des langues à condition biensure d'avoir réservé ces URLs chez un Registrar et d'avoir fait pointer ces URLs vers l'IP du serveur qui héberge votre site Kirby.

// /site/languages/en.php

<?php

return [
    'code' => 'en',
    'default' => true,
    'direction' => 'ltr',
    'locale' => 'en_GB',
    'name' => 'English',
    'url' => 'hhtps://monsite.com'
];
// /site/languages/fr.php

<?php

return [
    'code' => 'fr',
    'default' => true,
    'direction' => 'ltr',
    'locale' => 'fr_FR',
    'name' => 'Français',
    'url' => 'hhtps://monsite.fr'
];

Enfin, pour des raisons de SEO, vous pouriez aussi vouloir traduire les mots utilisés dans le chemin de l'URL.

https://monsite.com/en/about en Anglais
https://monsite.com/fr/a-propos en Français

Pour cela, au niveau du Panel, cliquez sur le menu Settings de la page puis sur Change URL et changez le slug.

Gestion du format d'affichage des dates

Par défaut, Kirby utilise la fonction PHP date() pour formater et afficher les dates or celle-ci formate toujours les dates au format Anglais. Vous pouvez demander à Kirby, dans son fichier de configuration, d'utiliser plutôt strftime() qui vous permet de spécifier le format d'affichage des dates.

// /site/config/config.txt

<?php

return [
  'date.handler'  => 'strftime',
];

Détection automatique de la langue

Kirby à la capacité de détecter la langue de votre utilisateur ou utilistratice en se basant sur la provenance de la requête http et donc d'afficher le site dans la langue correspondante. Pour activer cette fonctionnalité, indiquez le dans le fichier de configuration.

// /site/config/config.txt

<?php

return [
  'languages.detect' => true,
];
Attention, la détection automatique de la langue ne fonctionne pas si vous avez déjà paramétré votre site pour accepter une URL racine pour la langue par défaut. Voir ci-dessus dans le chapitre "gestion des URLs".

Variables de langue

Dans vos templates, snippets, controllers, models ou dans le fichier de configuration, certaines chaînes de caractères peuvent provenir de votre code et non du fichier texte stocké dans le dossier /content. Par exemple les labels de vos boutons ou les messages d'erreurs/succés de vos formulaires. Pour traduire ces chaînes de caractères, nous allons utiliser des variables de langue qui seront définies dans les fichiers de langues présents dans le dossier /site/languages via l'indice "translations" :

<?php

// /site/languages/fr.php

return [
  'code' => 'fr',
  'default' => false,
  'direction' => 'ltr',
  'locale' => 'fr_FR',
  'name' => 'Français',
  'translations' => [
    'change' => 'Change',
    'confirm' => 'Confirmer',
    'copy' => 'Copier',
    'create' => 'Créer'
  ]
];
<?php

// /site/languages/de.php

return [
  'code' => 'de',
  'default' => false,
  'direction' => 'ltr',
  'locale' => 'de_DE',
  'name' => 'Deutsch',
  'translations' => [
    'change' => 'Ändern',
    'confirm' => 'OK',
    'copy' => 'Kopieren',
    'create' => 'Erstellen'
  ]
];

Ensuite, au sein de votre code, vous pourrez utiliser la fonction t() pour appeler ces variables :

// /site/templates/post.php

... 

<button class="btn info"><?= t('confirm') ?></button>

Vous pouvez indiquer en paramètre de la fonction t() une valeur par défaut. C'est cette valeur qui s'affichera si aucune variable n'a été définie :

// /site/templates/post.php

... 

<button class="btn info"><?= t('confirm' , 'OK') ?></button>

Traduction des blueprints

Les chaînes de caractères utilisées dans vos blueprints (title, status, label, help, placeholder, empty ...) peuvent être traduites directement dans le fichier YAML. Voici un exemple non exhaustif mais vous allez vite comprendre le principe :

title: 
  en: Evaluator
  fr: Evaluateur
description: 
  en: The evaluator can read and evaluate proposals
  fr: Les évaluateurs peuvent lire et évaluer les projets qui leur sont assignés

columns:
  - width: 1/2
    fields:
      userPosition:
        label: 
          en: Position
          fr: Position
        type: text
      userInstitution:
        label: 
          en: Institution
          fr: Institution
        type: select
        required: true
        options: query
        query: kirby.collection('institutions')
      userDepartment:
        label: 
          fr: Department
          en: Département
        type: text
      

  - width: 1/2
    fields:
      userTel:
        label: 
          en: Tel
          fr: Tel
        type: tel
      userWebsite:
        label: 
          en: Website
          fr: Site web
        type: url

Pour traduire les différents types de champs disponibles dans Kirby, je vous invite à consulter la documentation officielle.

Créer un switcher de langues front-end

Une fois l'internationalisation activée, les langues définies et les traductions effectuées, vous aurez besoin de mettre à disposition de vos utilisateurs et utilisatrices, le moyen de changer de langue dans les pages publiques de votre site web.

La méthode languages() disponible depuis l'objet $kirby va vous donner toutes les informations nécessaires pour construire un switcher de langue front-end :

<?php foreach($kirby->languages() as $language): ?>
   <a <?php e( $kirby->language() == $language, ' class="enabled" ', ' class="disabled" ' ) ?>  href="<?php echo $language->url() ?>" hreflang="<?php echo $language->code() ?>">
   <?= html( $language->name() ) ?>
   </a>
<?php endforeach ?>

Conclusion

Comme nous venons de le voir, Kirby CMS gère très bien nativement l'internationalisation. Si vous lisez l'anglais, je vous recommande de consulter les "Cookbooks" dédiés à la traduction qui sont disponibles sur le site de Kirby. Vous pouvez également jeter un oeil sur les plugins qui améliorent l'expérience utilisateur en terme de traduction.

Vidéo YouTube

Disponible prochainement ...