Im Blogbeitrag auf webstandard.kulando.de „CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“ habe ich beschrieben, wie man die Ladegeschwindigkeit durch den Einsatz von zusammengefügten Bildern optimieren kann. Diesen Quell-Code nehmen wir als Ausgangsbasis um die Länder- oder Sprachauswahl in TYPO3 umzusetzen.
Sprachen in TYPO3 anlegen
In TYPO3 müssen zuerst die verschiedenen Sprachen als Datensätze auf der Rootebene angelegt werden. Wir verwenden hier den Single-Tree-Ansatz für die Sprachwahl, nachlesen kann man das unter: http://typo3.org/documentation/tips-tricks/multi-language-sites-in-typo3 (Englisch).
Für das Tutorial habe ich zu der default-Sprache Englisch noch 4 weitere Sprachen eingerichtet. Die Bezeichner des Menüs legen wir im root-template in den Typoscript-Constants an:
text { lang0 = Groß Britannien lang1 = Italien lang2 = Deutschland lang3 = Frankreich lang4 = Spanien langId0 = gb langId1 = it langId2 = de langId3 = fr langId4 = es }
Zudem müssen einige Parameter im Typoscript-Setup für die richtige Ausgabe der Sprache eingerichtet werden.
#default-Sprache Groß Britannien (englisch) config { uniqueLinkVars = 1 linkVars = L(1-4) sys_language_uid = 0 sys_language_overlay = 1 sys_language_mode = content_fallback language = en locale_all = en_GB.UTF-8 htmlTag_langKey = en }
Desweiteren müssen dann für die weiteren Sprachen Typoscript-Conditions im Setup angelegt werden.
#Italien [globalVar = GP:L = 1] config { htmlTag_langKey = it sys_language_uid = 1 language = it locale_all = it_IT } # Überschreiben des aktuellen Menüpunktes, wenn Sprache ausgewählt - muss natürlich aufs eigene System angepasst werden page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId1}"> |</strong> [global] #Deutschland [globalVar = GP:L = 2] config { htmlTag_langKey = de sys_language_uid = 2 language = de locale_all = de_DE } page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId2}"> |</strong> [global] #Frankreich [globalVar = GP:L = 3] ... [global] #Spanien [globalVar = GP:L = 4] ... [global]
Länderauswahl mit Typoscript erstellen
Das Menü ist eine Spezialform vom Typ „language“. An das HMENU müssen die Web-Site-Sprache IDs bei value eingetragen werden (die default-Sprache 0 & die weiteren Sprach-IDs die angelegt wurden, bzw. angezeigt werden sollen). Hier das Typoscript im Ganzen:
lib.flagmenu = HMENU lib.flagmenu { #Spezialform von HMENU - language special = language #Web-Site-Sprache IDs der zu verwendenden Datensätze special.value = 0,1,2,3,4 1 = TMENU 1 { wrap = <ul class="flagmenu">|</ul> noBlur = 1 NO { #die Bezeichner werden mithilfe der Konstanten neu generiert #der Optionsplit "||" trennt die Menüpunkte voneinander stdWrap.cObject = TEXT stdWrap.cObject.value = {$text.lang0} || {$text.lang1} || {$text.lang2} || {$text.lang3} || {$text.lang4} allWrap = <li>|</li> #zu den Links werden Parameter über die dataWrap Funktion eingefügt – die Klasse „flags“ sowie die eindeutige Link-ID ATagParams.dataWrap = class="flags" id="{$text.langId0}"| || class="flags" id="{$text.langId1}"| || class="flags" id="{$text.langId2}"| || class="flags" id="{$text.langId3}"| || class="flags" id="{$text.langId4}"| } #Aktiver Zustand ACT < .NO ACT { allWrap = <li class="active">|</li> #aktive Sprachen werden nicht verlinkt doNotLinkIt = 1 #der Bezeichner wird mit strong gewrappt linkWrap = <strong class="flags" id="{$contentpage.langId0}">|</strong> } #Spezialfall – wenn Übersetzung nicht vorhanden #die Generierung des Menüpunktes wird „entfernt“ USERDEF1 < .NO USERDEF1 { #keinen Wrap allWrap = | #Bezeichner auf leer setzen stdWrap.cObject.value = #keinen Link erzeugen doNotLinkIt = 1 } } }
Fazit:
Für ein Sprachauswahl bietet TYPO3 über die Spezialform des HMENUs mittlerweile eine gute Möglichkeit per Typoscript ein Menü zu generieren. Es sind keine zusätzlichen PHP-Skripte oder Extensions mehr nötig. Durch CSS und Optionsplit im Typoscript kann man auch verschiedene Flaggen zu den Links einfügen, die auch auf Ladezeit der Website optimiert sind.
Dieser Artikel ist die Kurzform meines Original-Tutorial aus dem TYPO3-Magazin TY-MA 03. Im Artikel sind auch einige Tipps zur Einrichtung der Sprachen im TYPO3 Backend beschrieben.
Das TYPO3-PDF-Magazin kann man direkt auf http://ty-ma.de bestellen.
Hi,
vielen Dank für das ausführliche Tutorial. Ein kleiner Fehler ist allerdings drin: Der Aktiv- und der Userdef-Status muss explizit aktiviert werden.
lib.flagmenu.1.ACT = 1 und
lib.flagmenu.1.USERDEF1 = 1 führen zum Ziel 🙂