TheCruiserBlog – Indian Timeline ergänzt die redaktionellen Inhalte von TheCruiserBlog um eine interaktive chronologische Darstellung der Geschichte von Indian Motorcycle.

Die Zeitleiste führt von den Anfängen im Jahr 1901 bis in die Gegenwart und stellt ausgewählte historische Meilensteine mit Jahr, Epoche, Titel, Kurzbeschreibung, ausführlicher Beschreibung und ergänzender Notiz dar.

Besucher können die dargestellten Ereignisse nach Epochen filtern, nach Begriffen durchsuchen und über eine Vor- und Zurück-Navigation zwischen den sichtbaren Meilensteinen wechseln.

Die Timeline ist als eigenständiges WordPress-Plugin umgesetzt und wird über einen Shortcode in Seiten oder Beiträge eingebunden.

Version 1.0.0 unterstützt:

• chronologische Darstellung historischer Meilensteine
• Gliederung der Ereignisse in verschiedene Epochen
• Filterung nach Epoche
• Volltextsuche innerhalb der historischen Ereignisse
• Auswahl einzelner Meilensteine
• Detailansicht zum ausgewählten Ereignis
• Navigation zum vorherigen und nächsten sichtbaren Meilenstein
• Zurücksetzen von Suche und Epochenfilter über Gesamte Route
• Anzeige historischer Eckdaten
• individuelle Konfiguration von Titel und Einleitung
• konfigurierbare Farben für Hintergrund, alternativen Hintergrund, Text, Akzent und Hover
• Überschreiben von Titel und Einleitung über Shortcode-Attribute
• responsive Darstellung
• Unterstützung mehrerer Timeline-Instanzen auf einer Seite

Die historischen Ereignisse sind in Version 1.0.0 in fünf Epochen gegliedert:

Über den Epochenfilter können Besucher entweder alle Ereignisse oder gezielt die Meilensteine einer einzelnen Epoche anzeigen.

Die Epochenzuordnung ist Bestandteil der im Plugin hinterlegten historischen Daten.

Die Timeline stellt dem Besucher mehrere Möglichkeiten zur interaktiven Navigation zur Verfügung.

Zur Verfügung stehen:

• Epoche – filtert die Timeline nach einer der definierten historischen Epochen
• Meilenstein suchen – durchsucht die angezeigten historischen Daten nach einem eingegebenen Begriff
• Zurück – wechselt zum vorherigen sichtbaren Meilenstein
• Weiter – wechselt zum nächsten sichtbaren Meilenstein
• Gesamte Route – entfernt den Epochenfilter und den Suchbegriff und zeigt wieder alle Meilensteine an

Durch Anklicken eines Meilensteins wird dessen Detailansicht angezeigt.

Die Detailansicht enthält:

• Jahr
• Epoche
• Titel
• ausführliche Beschreibung
• ergänzende Notiz

Die Vor- und Zurück-Navigation berücksichtigt die aktuell durch Filter und Suche sichtbaren Meilensteine.

Die Indian Timeline wird über einen Shortcode in eine WordPress-Seite oder einen Beitrag eingebunden.

Standard:

[indian_timeline]

Ohne weitere Attribute verwendet die Timeline den im Backend hinterlegten Titel und die dort hinterlegte Einleitung.

Titel und Einleitung können für eine einzelne Shortcode-Instanz überschrieben werden:

[indian_timeline title="Unsere Geschichte" intro="Von 1901 bis heute."]

Folgende Shortcode-Attribute stehen zur Verfügung:

Werden die Attribute nicht angegeben, verwendet das Plugin die globalen Einstellungen.

Die globalen Einstellungen der Indian Timeline werden im WordPress-Backend unter

Einstellungen → Indian Timeline

verwaltet.

Folgende Einstellungen stehen zur Verfügung:

Die Einstellungen gelten global für die Timeline.

Titel und Einleitung können bei Bedarf für eine einzelne Einbindung über die Shortcode-Attribute title und intro überschrieben werden.

Indian Timeline 1.0.0 besitzt folgende vorkonfigurierte Standardwerte:

Die Standardwerte werden verwendet, solange für die jeweilige Einstellung kein abweichender Wert gespeichert wurde.

Indian Timeline 1.0.0 verwendet zwei unterschiedliche Formen der Datenhaltung.

Die globalen Einstellungen der Timeline werden über die WordPress Options API gespeichert. Hierzu gehören:

• Titel
• Einleitung
• Hintergrundfarbe
• alternativer Hintergrund
• Textfarbe
• Akzentfarbe
• Hover-Farbe

Die Einstellungen werden gemeinsam in der WordPress-Option

tcb_indian_timeline_settings

gespeichert.

Die historischen Meilensteine selbst werden in Version 1.0.0 nicht in der WordPress-Datenbank verwaltet.

Sie sind direkt in der PHP-Hauptdatei des Plugins hinterlegt.

Jeder Meilenstein enthält folgende Informationen:

• Jahr beziehungsweise Zeitraum
• Epoche
• Bezeichnung der Epoche
• Titel
• Kurzbeschreibung
• ausführliche Beschreibung
• ergänzende Notiz

Änderungen, Ergänzungen oder Korrekturen an den historischen Ereignissen erfordern daher in Version 1.0.0 eine Änderung des Plugin-Codes.

TheCruiserBlog – Indian Timeline 1.0.0 ist als eigenständiges WordPress-Plugin umgesetzt.

Die zentrale Plugin-Logik befindet sich in der Klasse TCB_Indian_Timeline.

Zu ihren Aufgaben gehören:

• Registrierung des Shortcodes [indian_timeline]
• Registrierung und bedarfsgerechtes Laden von CSS und JavaScript
• Bereitstellung der historischen Ereignisdaten
• Laden und Verarbeiten der globalen Einstellungen
• Registrierung der Einstellungsseite im WordPress-Backend
• Validierung der gespeicherten Einstellungen
• Erzeugung der HTML-Grundstruktur der Timeline

CSS und JavaScript werden zunächst bei WordPress registriert und erst bei der Ausgabe des Shortcodes eingebunden.

Die historischen Ereignisdaten werden von PHP als JSON-Daten an die jeweilige Timeline-Instanz übergeben. JavaScript übernimmt anschließend die interaktive Darstellung, Filterung, Suche und Navigation im Browser.

Für jede ausgegebene Timeline erzeugt WordPress eine eindeutige ID. Dadurch können mehrere Timeline-Instanzen unabhängig voneinander auf derselben Seite verwendet werden.

Das Frontend verwendet Vanilla JavaScript und benötigt keine externe JavaScript-Bibliothek.

TheCruiserBlog – Indian Timeline 1.0.0 besitzt eine kompakte Plugin-Struktur.

thecruiserblog-indian-timeline/
├── thecruiserblog-indian-timeline.php
├── readme.txt
│
└── assets/
    ├── css/
    │   └── timeline.css
    │
    └── js/
        └── timeline.js

Die einzelnen Dateien übernehmen folgende Aufgaben:

• thecruiserblog-indian-timeline.php – zentrale Plugin-Datei mit Plugin-Initialisierung, Shortcode, historischen Ereignisdaten, Einstellungen und HTML-Ausgabe
• readme.txt – Plugin-Dokumentation mit Installation, Shortcode-Verwendung und Versionsinformationen
• timeline.css – Gestaltung und responsive Darstellung der Timeline
• timeline.js – interaktive Darstellung, Suche, Epochenfilter, Auswahl und Navigation zwischen den Meilensteinen

Version 1.0.0 verwendet keine zusätzlichen PHP-Klassen- oder Include-Dateien. Die PHP-Funktionalität ist vollständig in der zentralen Plugin-Datei zusammengefasst.

Die Indian Timeline verwendet eine eigenständige Darstellung im Modern-Heritage-Stil.

Kennzeichnend sind:

• vertikale Timeline mit zentraler Verbindungslinie
• abwechselnde Anordnung der Meilensteine links und rechts der Zeitachse
• farblich hervorgehobene Jahresmarker
• Karten für die einzelnen historischen Meilensteine
• Hervorhebung des aktuell ausgewählten Meilensteins
• Hover-Effekte für interaktive Elemente
• eigener Detailbereich für den ausgewählten Meilenstein
• konfigurierbare Hintergrund-, Text-, Akzent- und Hover-Farben
• responsive Anpassung an kleinere Bildschirmbreiten

Bei einer Bildschirmbreite unter 700 Pixeln wechselt die Timeline von der wechselnden Links-/Rechts-Darstellung zu einer einheitlichen Anordnung mit links positionierter Zeitachse.

Bei einer Bildschirmbreite unter 480 Pixeln werden zusätzlich die Bedienelemente und historischen Eckdaten einspaltig dargestellt. Die Navigationsschaltflächen werden untereinander angeordnet.

Die Darstellung ist vollständig im Plugin-eigenen Stylesheet timeline.css definiert.