Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 CMS 6.2 Grundkurs

Sprachmenüs generieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Werden mehrere Sprachen innerhalb eines gemeinsamen Seitenbaums genutzt, sind Verlinkungen zwischen den Sprachvarianten einer Seite möglich. Über automatisch generierte Sprachmenüs können Besucher der Website unmittelbar zur entsprechenden Seite wechseln.

Transkript

Bei der Verwendung einer mehrsprachigen Website im Einbaummodell, wo also jede Seite jeweils in der Originalsprache und einer übersetzten Sprache verfügbar ist, ist es relativ einfach, innerhalb der Seiten von einer Sprache in die andere Verlinkungen zu generieren. Hierzu ändert sich in unserem Fall lediglich der Parameter L. Im oberen rechten Bereich wollen wir hier ein Sprachmenü hinzufügen. Wir begeben uns als Erstes zum TypoScript. Wir bearbeiten den Setup-Modus. Und fügen ein neues Objekt für unser Sprachmenü ein. Es handelt sich hier um ein HMENU. Und dieses hat verschiedene Eigenschaften. Außen soll es umschlossen werden von einem div. Dem geben wir eine ID, zum Beispiel auch sprachmenue. Der Modus jenes Menüs ist language. Und die verfügbaren Sprachen sollen sein 0 für unsere Standardsprache Deutsch sowie 1 für Englisch. Die einzelnen Menüelemente sollen als Textmenü dargestellt werden. Den Normalzustand jedes Menüeintrags wollen wir nun entsprechend konfigurieren. Zum einen sollen zwischen den Menüeinträgen Trenner verwendet werden. Hierfür sagen wir, dass hinter jedem Menüeintrag ein senkrechter Strich verwendet werden soll. Hierbei handelt es sich um ein HTML-Sonderzeichen. Außer bei dem letzten Element. Hier soll kein Trenner angezeigt werden. Standardmäßig werden in einem Sprachmenü die Titel der entsprechenden Seite angezeigt. Wir wollen hier allerdings diese Einträge überschreiben, und zwar mit den Werten Deutsch und Englisch. Damit wäre die Grundkonfiguration des Sprachmenüs auch schon fertig. Als Nächstes müssen wir noch das Template ergänzen. Sie finden in unserem Template die entsprechende Stelle unterhalb von fileadmin sys Private, in Layouts. Und hier wollen wir im oberen Bereich innerhalb unseres Menüs das Sprachmenü ergänzen. Wir können das Menü entweder wie hier im Fall von menu über eine Variable ausgeben, oder mittels ViewHelper direkt über den ObjectPath. Hier verwenden wir ein cObject. Und der typoscriptObjectPath lautet obj.sprachmenue. Wir speichern und betrachten das Ergebnis im Frontend. Hier wird unser Sprachmenü bereits ausgegeben, allerdings noch ohne Trenner. Und da hat sich an dieser Stelle noch ein Tippfehler eingeschlichen. Da fehlt natürlich noch ein Gleich-Zeichen. Wir speichern erneut und rufen auf. Sie können jetzt zwischen der deutschen und der englischen Seite wechseln. Wir wollen als Nächstes noch verschiedene Menüzustände hinzufügen. Ergänzen Sie hierzu eine Kopie des Normal-Zustandes auf das aktuell ausgewählte Element. Und diese Eigenschaft können wir dann entsprechend konfigurieren. Der aktuell ausgewählte Spracheintrag soll nicht erneut verlinkt werden. Das ist mit diesem Parameter doNotLinkIt möglich. Und zusätzlich wollen wir noch einen span hinzufügen. Damit lässt sich das Element als aktiv markieren und dieses später im CSS entsprechend hervorheben. Außerdem wollen wir noch einen weiteren Zustand ergänzen. Dies ist ein Sonderfall für ein Sprachmenü. Es gibt hier noch den USERDEF1-Zustand. Dies soll entsprechend eine Kopie des aktuellen Zustands sein. Und abweichend wollen wir hier einen anderen wrap setzen. Sofern eine Seite in einer bestimmten Sprache also nicht verfügbar ist, können wir auch dies im CSS entsprechend hervorheben. Abschließend müssen wir den aktuellen Zustand noch aktivieren. Hier oben fehlt ein ACT = 1. Dabei handelt es sich um eine ganz normale Konfiguration für ein TMENU. Wir speichern und rufen die Seite im Frontend auf. Sie sehen hier nun, dass die deutsche Sprache hervorgehoben ist. Wechseln wir auf Englisch, wechselt auch entsprechend unsere Hervorhebung. Sehen wir uns dies auf einer Unterseite an, hier für die Seite Projekte zum Beispiel; dort existiert keine englische Übersetzung, wir haben diesen Eintrag entsprechend ausgegraut. Das CSS hierzu haben wir entsprechend im Vorfeld vorbereitet. Wir können kurz mal mit Firebug einen Blick auf unsere Links werfen. Und Sie sehen hier, Deutsch hat nur einen span und ist nicht verlinkt, da es jetzt die aktuelle Sprache ist und hier kein separater Link benötigt wird. Und für Englisch ist kein Link angegeben, da diese Seite nicht in Englisch verfügbar ist. Bei der Verlinkung zwischen den Sprachen wechselt entsprechend der L-Parameter in unserer URL von 0 auf 1. Hier sehen wir, dass 0 der Parameter für die deutsche Sprache ist. Sie haben hier gesehen, wie einfach es möglich ist, ein Sprachmenü zu ergänzen und die unterschiedlichen Zustände der Sprachen hervorzuheben.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!