Tutorial - Mehrsprachige Webseiten

Einleitung

In diesem Tutorial wollen wir uns mit der Mehrsprachigkeit von Webseiten beschäftigen. Wir wollen unsere Seite so ändern, dass sie in verschiedenen Sprachen angezeigt werden kann. Dabei soll der Sprachwechsel schnell und einfach durch einen Klick möglich sein.

Um das zu erreichen, müssen wir drei Dinge tun:

1. die Gruppenstruktur im Backend anlegen oder anpassen
2. die Unterstützung für Mehrsprachigkeit im Frontend integrieren
3. und ggf. Änderungen am Frontend von DynPG machen um bestimmte Sprachen vollständig zu unterstützen.

Beispiel-Code

Begleitend zu diesem Tutorial gibt es Beispiel-Code an dem sie die Integration der Mehrsprachigkeit nachvollziehen können. Bevor dieser bei Ihnen funktioniert müssen Sie neben den Änderungen im Backend, die in diesem Tutorial beschrieben werden, auch noch die Konfigurationsdatei (config.php) des Beispiels ändern. Weitere Hinweise finden Sie an den entsprechenden Stellen im Tutorial.

Beispiel-Code: Download

Gruppenstruktur im Backend anlegen

Wenn man eine mehrsprachige Webseite erstellen möchte, legt man im Backend zuerst Gruppen für alle Sprachen an, die unterstützt werden sollen. Die Namen sollten sinnvollerweise an der jeweiligen Sprache orientiert sein. Jeder dieser Gruppen wird anschließend die Gruppenstruktur zugwiesen, wie sie später auf der Webseite erscheinen soll. Das bedeutet, wenn wir eine feste Struktur haben (z.B. Punkte für Home, News, Kontakt etc.) legen wir diese für jede Gruppe einmal an und verwenden dabei die enstprechenden Namen in der Sprache (z.B. News in Englisch und Aktuell in Deutsch). Die Gruppenstruktur könnte dann z.B. aussehen, wie folgt:

Mehrsprachigkeit in die Webseite integrieren

In der Webseite brauchen wir nun noch Links für die jeweilige Sprache und ein angepasstes dynamisches Navigationsmenü.

Sprach-Buttons

Zuerst wollen wir uns um die Umstellung der Sprache kümmern. Die Sprache der Webseite wird üblicherweise über einen GET-Parameter, wie z.B: lang, bestimmt und geändert. Daher verwenden wir für jede Sprache diesen Parameter und weisen ihm als Wert einen Bezeichner für die aktuelle Sprache zu. In unserem Beispiel wollen wir Deutsch und Englisch unterstützen, wobei Deutsch die standardmäßig eingestellte Sprache ist. Für die Sprach-Buttons können wir zum Beispiel den folgenden Code verwenden, den wir an einer beliebigen Stelle einfügen können:

<a href="index.php"><img src="img/de.jpg" alt="German" border="0"></a>
<a href="index.php?lang=en"><img src="img/en.jpg" alt="English" border="0"></a>

Hier werden zwei Bilder mit entsprechenden Links für die beiden Sprachen angelegt. Bei einem Klick auf die englische Flagge wird der GET-Parameter lang=en übergeben. Dies kann so auch für alle weiteren Sprachen übernommen werden (z.B. lang=es für Spanisch). Für Deutsch brauchen wir an dieser Stelle keinen Parameter, da diese Sprache immer dann verwendet werden soll, wenn kein gültiger Wert für lang existiert.

Anpassung des dynamischen Menüs

Im zweiten Schritt müssen wir nun im Navigationsmenü die zur Sprache gehörigen Navigationspunkte einblenden. Dazu expandieren wir einfach den zugehörigen Gruppen-Baum, den wir im vorher im Backend angelegt haben und blenden alle anderen Punkte aus. Genauer gesagt tun wir dies umgekehrt. Wir blenden von Anfang an die in der Hierarchie am höchsten liegenden Gruppen aus (d.h. im Beispiel die Gruppen mit den Namen de, en, usw.) und expandieren den entsprechenden Sprach-Baum der ausgewählten Sprache, welcher dann als einziger sichtbar ist.

Im Code sieht dies wie folgt aus:

navigation.php

<?php
    // DynPG menu settings
    $DynPG->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
 
    // language settings
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'min_depth', 1);  // hide top level groups
    // set the corresponding tree for the language
    if (isset($_GET['lang']) && $_GET['lang'] == 'en') {
        $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'expand_subtree', Array($enGroupID));
        $DynPG->setupLanguage('en');
    } else {
        $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'expand_subtree', Array($deGroupID));
        $DynPG->setupLanguage('de');	
    }
 
    $DynPG->SetupTemplate('uneditable'); 
    $DynPG->SetParam_A_Anytime(TRUE);                  // always show navigation
    $DynPG->SetParam_A_CategoryNavigation(FALSE);      // no breadcrumb navigation
    $DynPG->SetParam_A_PrintNavigation(FALSE);         // no print button
    $DynPG->SetParam_A_ArticleHeader(FALSE);           // no article header
    $DynPG->SetParam_A_Article($navigationArticleID);  // set article which contains the dynamic menu
 
    $DynPG->Write_Article();
    $DynPG->SetupTemplate('default');                  // always set template back to default if you changed it before
?>

Interessant sind die Zeilen 9 - 17. Hier werden zuerst die höchsten Gruppen ausgeblendet, indem die minimalie Tiefe für anzuzeigende Gruppen auf 1 gesetzt wird. Anschließend wird der GET-Parameter ausgewertet und der entsprechende Unterbaum expandiert. $enGroupID und $deGroupID stehen dabei für die IDs der jeweiligen Sprachgruppen im Backend. Diese müssen sie ggf. ersetzen oder sofern sie das Code-Beispiel benutzen, in der config.php abändern. Die IDs für die Gruppen finden Sie in der Gruppenübersicht des Backends in der ersten Spalte.

Spracheinstellung des Frontends

Wenn wir uns den obigen Code nocheinmal genauer anschauen, finden wir dort zwei Anweisungen der Form $DynPG->setupLanguage(XX):

navigation.php

<?php
    // language settings
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'min_depth', 1);  // hide top level groups
    // set the corresponding tree for the language
    if (isset($_GET['lang']) && $_GET['lang'] == 'en') {
        $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'expand_subtree', Array($enGroupID));
        $DynPG->setupLanguage('en');
    } else {
        $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'expand_subtree', Array($deGroupID));
        $DynPG->setupLanguage('de');	
    }
?>

Diese bewirken, dass das Frontend von DynPG auf die jeweilige Sprache umgestellt wird. So werden z.B. die weiterführenden Links bei Artikelübersichten von "mehr" auf "more" abgeändert. DynPG besitzt Sprachanpassungen an Deutsch, Englisch, Spanisch, Italienisch und Französisch, welche sich in jeweils separaten Dateien befinden. Im CMS-Ordner finden Sie diese Dateien unter "/localised/" und können sie ggf. dort ändern und anpassen.

Möchten Sie nun noch weitere Sprachen unterstützen, dann legen Sie einfach eine weitere Datei dieser Art an und passen Sie die Übersetzungen an die Sprache an. Machen Sie dazu eine Kopie von einer der vorhandenen Dateien und benennen Sie diese um. Hierbei ist die Struktur des Dateinamens von Bedeutung, da z.B. ein Befehl der Form $DynPG->setupLanguage('en'); das Laden der Datei "en.lang.php" auslöst. Möchten Sie nun also beispielsweise Italienisch als zusätzliche Sprache unterstützen, dann legen sie eine Datei "it.lang.php" an und passen Sie diese an. Anschließend können Sie die Sprache mit dem Befehl $DynPG->setupLanguage('it'); laden. Ein Befehl der Form $DynPG->setupLanguage(XX); wird also immer in das Laden der Datei "XX.lang.php" im localised-Ordner von DynPG umgesetzt.