In diesem Tutorial sollen die Grundlagen vermittelt werden, wie man eine mehrsprachige Webseite mit REDAXO entwickeln kann. Zur Veranschaulichung dient die Redaxo Demo (4.3.x – UTF8), die im Downloadpaket enthalten ist.
Die verwendete Redaxo Version ist 4.3.2.
Mehrsprachige Webseiten entwickeln
Ziel des Tutorials
Das Template
Im Backend im Hauptmenü ist der Navigationspunkt “Sprachen” (1) (unter “System”) auszuwählen.
Dort können – durch Klick auf das Icon “Sprache hinzufügen” (2) – weitere Sprachen hinzugefügt werden.
Die ID der Sprache (3) wird automatisch vergeben. In dem Beschreibungsfeld (4) macht es Sinn eine vernünftige Beschreinbung einzutragen :-). Je nach spätere Ausgabe (des Sprachwählers,der URL etc.) kann hier natürlich auch z.B.: “deutsch” mit “de” abgekürzt werden, denn der hier gewählte Wert beeinflusst auch die generierte URL.
Jetzt muss nur noch auf “Sprache hinzufügen” (5) geklickt werden.
Die unterschiedlichen Sprachen stehen jetzt in der Strukturverwaltung zur Verfügung.
Die Struktur
Nach Klick auf “Struktur” (1) sind im Backend die Sprachen auswählbar (2). Die gerade aktive Sprache wird etwas dunkler dargestellt. Hier finden sich auch die vorher eingegebenen Bezeichnungen der Sprache wieder.
Bei der Einrichtung einer weiteren Sprache werden alle Kategorien und Artkel aus der ursprünglichen Sprache (ID 0) in die Struktur der neuen Sprache übernommen und offline geschaltet (1).
Wird eine Kategorie (oder ein Artikel) erstellt, geschiet dies in allen Sprachversionen. Der Status ist überall “offline”.
Achtung: Wird ein Artikel oder eine Kategorie in einer Sprachversion gelöscht, so wird der betreffende Artikel bzw. die Kategorie auch in allen anderen Sprachen gelöscht!
Eine unterschiedliche Darstellung der Kategorien bzw. Artikel kann man erreichen, indem man einfach die betreffenden Kategorien bzw. Artikel online oder offline schaltet. Der online/offline Status muss selbstverständlich in der Navigation berücksichtigt werden.
Die nächsten Screenshots sollten dies verdeutlichen. Zur besseren Unterscheidung wurden die Navgationspunkte auf der englischen Seite ein wenig umbenannt.
1. Screen: Backend Struktur “deutsch” (ein Naviagtionspunkt offline)
2. Screen: Frontend Struktur “deutsch”
3. Screen: Backend Struktur “englisch” (drei Navigationspunkte online)
4. Screen: Frontend Struktur “englisch”
Sprachwähler einbauen
Selbstverständlich soll es auf der Webseite die Möglichkeit geben, zwischen den einzelnen Sprachen wechseln zu können.
(NACHTRAG: Bitte beachtet hier, dass es inzwischen ein sehr gutes Template von Robert gibt!!)
Hierzu wird ein Template “Sprachwahl” erstellt.
Für dieses Beispiel nutzen wir einfach ein Template aus dem REDAXO Downloadbereich. Dort (und auch im Forum) finden sich mehrere Beispiele, einen Sprachwechsler zu realisieren.
Es muss also eine neues Template (das Template muss nicht “aktiv” (1) sein) mit folgendem Code angelegt werden:
Sprachwahltemplate
<?php
# Rex Version: 4.1
# Sprachwahltemplate
# erstellt 24. März 2008
# Update 27.03.2008
# // -> Current Language hat Style Möglichkeit über <span class="current_lang"></span>
# www.groog.de
#
#
# REX Version. 4.2
# UPDATE 22.10.09 - kreischer.de
# Current Language: SPAN entfernt = LI mit Klasse
# Überflüssiges LI am Ende entfernt
# Trenner mit LI und Klasse versehen
# XHTML 1.0 Strict!
#
$qry = 'SELECT name FROM rex_clang';
$sql = new sql(); $sql->setQuery($qry);
for($i = 0; $i < $sql->getRows(); $i++) {
# Sprachen in einem Array definieren
if($i <= "0"){
$sprachen = array($sql->getValue("name"));
}else{
array_push($sprachen,$sql->getValue("name"));
}
$sql->next();
}
echo ' <ul id="lang">'."\r\n";
for($i=0;$i<=count($sprachen)-1;$i++){
# Sprachen ausgeben
if($this->getValue("clang") == $i){ # current
$link = ' <li class="current_lang">'.$sprachen[$i].'</li>'."\r\n";
}else{
$link = ' <li><a href="'.rex_getUrl($this->getValue("article_id"),$i).'">'.$sprachen[$i].'</a></li>'."\r\n";
}
# Wenn die letzte Position erreicht ist, kein | ausgeben
$end = count($sprachen) - 1;
if($i < $end){
$link .= '<li class="trenner"> | </li>';
}
# End if-else
echo $link;
}
# End For
echo ' </ul>'."\r\n";
?>
Nach dem Speichern des Templates wird automatisch eine Template ID (1) vergeben. In unserem Fall ist es die ID 4.
Diese ID müssen wir uns merken.
In dem Template der Webseite (in diesem Beispiel ist das das Template “default” mit der ID 1) wird nun das Sprachwahltemplate an der gewünschten Stelle eingefügt. In diesem Beispiel fügen wir das in den Kopfbereich der Website ein.
Das Template wird mittels
REX_TEMPLATE[4]
eingefügt (1). Die 4 ist hier die Template ID des vorhin erstellten Sprachwahltemplates.
Nach dem Speichern des Templates erscheint nun der Sprachwähler (hier leider mit etwas wenig Kontrast :-)) auf der Webseite (1).
Hier (2) ist schön zu sehen, dass eine ul-Liste erstellt wird. Die aktive Sprache erhält die Klasse “current_lang”.
Wenn die Listenpunkte mit der Klasse “trenner” nicht gewünscht sind, kann man das natürlich das im Sprachwahltemplate anpassen.
Und per CSS kann diese ul-Liste kann selbstverständlich formatiert werden.
Die Kür: Ersetzungen mit einem Output Filter
Bei mehrsprachigen Webseite gibt es sicherlich immer einige Inhalte, die durch Redakteur der Website nicht einfach geändert werden können. Hierzu verwenden wir ein Addon, mit dem Platzhalter definiert werden können, welche in den entsprechenden Sprachen ersetzt werden.
Für dieses Tutorial verwendem wir das Addon “Output Filter” (OPF 1.1.1) von Jan Kristinus. Dieses Addon ist im Downloadbereich zu finden.
Nach dem Installieren und Aktivieren des Addons (1) erscheint im Menue “AddOns” der Navigationspunkt “Platzhalter ersetzen” (2).
Nach Auswahl des Addons (1) können durch Klick auf das Icon “Platzhalter hinzufügen” (2) neue Platzhalter definiert werden.
In diesem Beispiel werden die Platzhalter durch drei vorangehende und abschliessende # in dem Feld “Platzhalter” (1) definiert. Mann kann auch andere Zeichen nehmen; wichtig ist nur, dass diese Zeichen sonst nirgends vorkommen.
Der Text, der erscheinen soll, wird im Feld “Ersetzung” (2) definiert. Nurn muss das Formular noch gespeichert (3) werden.
Jetzt kann eine andere Sprache ausgewählt werden (1), um dort die gewünschten Platzhalter zu editieren (2).
Jetzt muss man nur noch den ersetzten Text editieren (1), und die Änderungen werden gespeichert (2).
In Templates (oder Modulen) werden die definierten Platzhalter jetzt ersetzt.
Redaxo Template
<div id="logo">
<a href="<?php echo $REX['HTDOCS_PATH'] ?>index.php" title="###startseite###">REDAXO Demo</a>
</div>
Im Frontend werden die Platzhalter ersetzt.
Frontend Source "deutsch"
<div id="logo">
<a href="./index.php" title="Link zur Starseite">REDAXO Demo</a>
</div>
Frontend Source "englisch"
<div id="logo">
<a href="./index.php" title="Back to home">REDAXO Demo</a>
</div>
Viel Erfolg!