Wenn ein Abschnittsmenü automatisch nummeriert werden soll
Bei der Gestaltung einer Website sind es manchmal ganz kleine Anforderungen, die eine individuelle Lösung benötigen. So sollte ein Abschnittsmenü nicht nur die Überschriften der jeweiligen Themen anzeigen, sondern die Menüpunkte zusätzlich fortlaufend nummerieren.
Das Besondere daran: Die Zahlen sollten nicht von Hand eingetragen werden müssen. Wenn später ein neuer Abschnitt hinzukommt, ein bestehender entfernt oder die Reihenfolge verändert wird, sollte sich auch die Nummerierung automatisch anpassen.
Eine überschaubare Aufgabe, für die wir eine möglichst einfache Lösung suchten. Schließlich sollte die redaktionelle Pflege der Website dadurch nicht komplizierter werden.
Die Anforderung
Automatische Nummerierung ohne zusätzliche RedaktionsarbeitIn TYPO3 lassen sich Abschnittsmenüs erstellen, die automatisch auf bestimmte Inhaltsbereiche einer Seite verweisen. Die Menüeinträge orientieren sich dabei an den vorhandenen Inhalten. Werden neue Abschnitte ergänzt oder bestehende entfernt, passt sich das Menü entsprechend an.
Für die gewünschte Gestaltung sollten die einzelnen Menüpunkte zusätzlich eine fortlaufende Nummerierung erhalten. Dabei war wichtig, dass die Zahlen nicht manuell eingetragen werden müssen, sondern sich automatisch aus der Reihenfolge der Menüeinträge ergeben.
Eine manuelle Nummerierung hätte den Nachteil, dass bei jeder Änderung der Reihenfolge oder beim Einfügen neuer Abschnitte auch die Zahlen angepasst werden müssten. Das würde nicht nur zusätzlichen Pflegeaufwand verursachen, sondern könnte auch schnell zu Fehlern führen.
Unser Ziel war deshalb eine Lösung, die sich nahtlos in die vorhandene TYPO3-Struktur einfügt. Die Redaktion sollte weiterhin wie gewohnt Inhalte anlegen, verschieben und entfernen können, ohne sich Gedanken über die Nummerierung machen zu müssen. Zusätzliche Eingabefelder oder Anpassungen im Backend wollten wir dafür möglichst vermeiden.
Unsere Lösung
CSS übernimmt das ZählenStatt die Zahlen im Backend zu hinterlegen, haben wir die vorhandenen Möglichkeiten von CSS genutzt. Mit sogenannten CSS-Countern lassen sich Elemente einer Website automatisch durchnummerieren.
Das Prinzip ist einfach: Zu Beginn des Menüs wird ein Zähler zurückgesetzt. Jeder Menüpunkt erhöht ihn anschließend um eins. Die aktuelle Zahl wird automatisch vor dem jeweiligen Link angezeigt.
Die eigentliche Herausforderung bestand darin, den Zähler an den richtigen Stellen einzusetzen. Schließlich sollte die Nummerierung nur die Menüeinträge erfassen und nicht versehentlich zusätzliche Überschriften oder andere Elemente mitzählen.
Wir haben die SCSS-Regeln deshalb gezielt auf die vorhandene Struktur des TYPO3-Abschnittsmenüs abgestimmt.
Das Schöne an dieser Lösung: Das Abschnittsmenü selbst musste nicht verändert werden. Weder zusätzliche Inhaltselemente noch neue Backend-Felder waren erforderlich.
Die Redaktion kann weiterhin ganz normal mit den vorhandenen Inhalten arbeiten. Die Nummerierung entsteht erst bei der Darstellung im Browser.
Kleine Anpassung, dauerhaft weniger Pflegeaufwand
Das Ergebnis ist ein Abschnittsmenü, dessen Nummerierung automatisch mit den vorhandenen Einträgen wächst.
Wird ein weiterer Abschnitt eingefügt, erhält er die passende Zahl. Ändert sich die Reihenfolge, wird auch die Nummerierung entsprechend angepasst. Es spielt keine Rolle, ob das Menü drei, fünf oder zehn Einträge enthält.
Auch die Gestaltung bleibt flexibel. Zahlenformat, Schriftgröße, Farbe und Abstände lassen sich über das Stylesheet an das jeweilige Webdesign anpassen.
Besonders praktisch ist, dass wir für diese Aufgabe weder JavaScript noch eine zusätzliche TYPO3-Erweiterung benötigten. Die vorhandenen Funktionen des Content-Management-Systems konnten unverändert weiterverwendet werden.
Genau solche Lösungen mögen wir: Eine kleine technische Anpassung, die nicht nur eine individuelle Gestaltung ermöglicht, sondern gleichzeitig die spätere Pflege der Website vereinfacht.
Du wünschst Dir individuelle Funktionen für Deine Website?
Nicht jede besondere Anforderung benötigt gleich eine umfangreiche Erweiterung. Oft lassen sich vorhandene Funktionen gezielt anpassen, damit eine Website genau so aussieht und funktioniert, wie Du es Dir vorstellst.
Wir entwickeln individuelle Weblösungen, die sich an Deinen Anforderungen orientieren und gleichzeitig eine möglichst einfache Pflege ermöglichen.