Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Html] [JavaScript] [Css] {WordPress] Afficher le contenu d'une page en plusieurs langues grâce à une feuille de style

En identifiant la langue utilisée par le navigateur, il est fort simple d'afficher une page dans différentes langues grâce à Cascading Style Sheets (Css, c'est-dire les feuilles de style en cascade).

Cette solution utilise un code réduit en JavaScript.

En Php, côté serveur, nous aurions pu recourir à $_SERVER['HTTP_ACCEPT_LANGUAGE'] ou, mieux, à la fonction locale_accept_from_http et internationaliser nos chaînes de caractères avec la bibliothèque gettext mais ce travail est fastidieux.

Nota.

  • Il est déconseillé de représenter une langue avec un drapeau. Tous les francophones ne sont pas français, par exemple.
  • À l'usage, il nous paraît plus simple d'appeler les fonctions JavaScript directement dans le code Html, et cette pratique est validée par le W3C : la syntaxe est réduite et nous n'avons pas ainsi à nous occuper des gestionnaires d'évènements gérés différement selon les navigateurs.
  • L'identification de la langue en JavaScript avec navigator.language est loin d'être parfaite, car il existe des différences entre les navigateurs, voire entre utilisateurs. Aussi, dans le code en JavaScript, appliquons-nous la langue française si nous ne pouvons pas identifier correctement l'information. (Les codes des langues et des pays respectent la norme Iso 639-1 ou 3166-1, c'est-à-dire qu'ils comportent deux - voire trois ? - lettres.) Si la langue ne correspond pas à celle de l'utilisateur, il pourra cliquer sur le bouton ad hoc et le script fonctionnera normalement.
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Calendrier</title>
<style>
body {
font-family: sans-serif;
margin: 0 auto;
padding: 1em;
width: 1024px;
}
.french {
display: block;
}
.userlang-fr .english {
display: none;
}
.userlang-fr .spanish {
display: none;
}
.userlang-en .english {
display: block;
}
.userlang-en .french, .userlang-en .spanish {
display: none;
}
.userlang-es .spanish {
display: block;
}
.userlang-es .french, .userlang-es .english {
display: none;
}
.switch {
align-content: space-between;
display: flex;
justify-content: space-around;
}
.btn {
border: none;
color: white;
cursor: pointer;
font-size: 1em;
padding: 1em 2em;
text-align: center;
text-decoration: none;
}
.btn-french {
background-color: #4caf50;
}
.btn-english {
background-color: #008cba;
}
.btn-spanish {
background-color: #f44336;
}
</style>
</head>
<body>
<div class="switch">
<button id="target-fr" class="btn btn-french" onclick="selectLang(this.id)">Français</button>
<button id="target-en" class="btn btn-english" onclick="selectLang(this.id)">English</button>
<button id="target-es" class="btn btn-spanish" onclick="selectLang(this.id)">Español</button>
</div>
<h1 class="french">Calendrier</h1>
<h1 class="english">Calendar</h1>
<h1 class="spanish">Calendario</h1>
<p class="french">Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi</p>
<p class="english">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
<p class="spanish">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>
<p class="french">Janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
<p class="english">January, February, March, April, May, June, July, August, September, October, November, December</p>
<p class="spanish">Enero, Febrero, Marzo, Abril, Mayo, Junio, Julio, Agosto, Septiembre, Octubre, Noviembre, Diciembre</p>
<script>
var targetLang = navigator.language;
if (targetLang.length < 2 || targetLang.length > 3) {
document.querySelector('html').classList.add('userlang-fr');
} else {
document.querySelector('html').classList.add('userlang-' + targetLang);
}
function selectLang(id) {
document.querySelector('html').classList.remove('userlang-' + targetLang);
targetLang = id.substr(7);
document.querySelector('html').classList.add('userlang-' + targetLang);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.