Sprachschalter mit jQuery
Für WordPress gibt es verschiedene Möglichkeiten, wie Multisite und das Plugin WPML, für die Funktionalität der Mehrsprachigkeit.
Wenn man aber nicht die ganze Webseite, sondern nur eine Seite in einer zusätzlichen Sprache anbieten möchte, ist aus meiner Sicht eine schlankere Lösung gefragt.
In diesem Fall geht es um eine einzige WordPress Seite, die ich dem Webseitenbesucher in zwei Sprachen (DE & FR) zur Verfügung stellen möchte. Dieser soll über eine Selectbox die Sprache auswählen können und beim erneuten Laden der Seite soll die Seite in der vorher ausgewählten Sprache erscheinen.
Seiten Template erstellen
Um mir die Arbeit etwas zu vereinfachen, dubliziere ich mir die Datei page.php (mehr dazu) und benenne sie in page-language-switcher.php um. Wichtig ist, dass am Anfang der Datei folgender Bezeichnung steht:
/*
Template Name: mein Name des Templates
*/
Bei ‚mein Name des Templates‘ geben Sie dem Template einen passenden Namen. Ohne diese Zeile wird die Datei von WordPress nicht als Seitentemplate erkannt und erscheint unter Template bei den Seitenattribute auch nicht.
Seite erstellen
Der nächste Schritt ist über das Dashboard eine neue Seite zu erstellen und wie beschrieben, ist unter den Seitenattribute nun das vorher erstelle Template ‚mein Name des Templates‘ auszuwählen.
Der Content in Deutsch und Französisch wird nun im WP Editor in zwei Behälter mit entsprechenden Klassen verpackt:
<div class="german">
german Content
</div><!-- End .german -->
<div class="french">
french Content
</div><!-- End .french -->
HTML und CSS
Als nächstes füge ich das HTML und die Styleangaben der Selectbox dem Template hinzu:
<style type="text/css">
.language {
position: absolute;
top: 5px;
right: 5px;
}
.german {
display: inline;
}
.french {
display: none;
}
</style>
und an der entsprechenden Stelle, wo die Selectbox erscheinen soll, das HTML:
<div class="language">
Language:
<select id="select">
<option id="german" value="german">Deutsch</option>
<option id="french" value="french">français</option>
</select>
</div><!-- End .language -->
jQuery
Das jQuery Script sorgt mit einem Cookie dafür, dass die ausgewählte Sprache gespeichert und beim erneuten Laden der Seite ausgelesen wird. Ist kein Cookie vorhanden, wird die initalisierte Sprache angezeigt.
jQuery(document).ready(function( $ ) {
var languageSelect = document.getElementById('LanguageSelect');
var selectedLanguage = readCookie('language');
var initLanguage = "german";
if ((selectedLanguage == 'german') ||
(selectedLanguage == 'french') {
$(".language select").val(selectedLanguage);
var sel = $(".language select").val(selectedLanguage);
} else {
$(".language select").val(initLanguage);
var sel = $(".language select").val(initLanguage);
}
if (selectedLanguage == 'german') {
$(".german").css("display", "inline");
$(".french").css("display", "none");
} else if (selectedLanguage =='french') {
$(".german").css("display", "none");
$(".french").css("display", "inline");
}
$(".language select").bind('change', function() {
//on change set cookie and...
setCookie('language', this.value, 365);
//change css depending on what is selected
var sel = $(".language select").val();
if (sel=='german') {
$(".german").css("display", "inline");
$(".french").css("display", "none");
} else if (sel=='french') {
$(".german").css("display", "none");
$(".french").css("display", "inline");
}
});
});
function saveLanguage(cookieValue) {
var sel = document.getElementById('LanguageSelect');
setCookie('language', cookieValue, 365);
}
function setCookie(cookieName, cookieValue, nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0)
nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
Und das war es auch schon mit dem einfachen Sprachenumschalter über eine Selectbox – dieser ist natürlich nach Belieben erweiterbar…
