====== TheCruiserTheme – Entwicklungsstand ====== [[themes:eigenentwicklungen:thecruisertheme:start|← TheCruiserTheme]] [[:start|⌂ Startseite]] Diese Seite dokumentiert den konkreten technischen Entwicklungsstand des eigenen WordPress-Themes **TheCruiserTheme** für TheCruiserBlog. Die Dokumentation wächst zusammen mit der tatsächlichen Entwicklung. Fertiggestellte oder ausreichend stabile Entwicklungsstände werden als Meilensteine festgehalten. Gestalterische und technische Bereiche, die sich noch in Entwicklung befinden, werden ausdrücklich als offen gekennzeichnet. ===== Meilensteine ===== ==== Meilenstein 1 – Header und Navigation ==== Der erste dokumentierte Meilenstein umfasst die Grundstruktur des Headers und die Navigation des TheCruiserTheme. === Header === Der Header ist derzeit grundsätzlich so aufgebaut: TCB-Logo → TCB-Banner → Hamburger-Menü Aktueller technischer Stand: * Das Logo wird über die WordPress-Funktion ''custom-logo'' eingebunden. * Die Höhe des Logos ist derzeit auf ''100px'' begrenzt. * Das TCB-Banner stammt aus der WordPress-Mediathek. * Für das Banner existiert im Customizer die eigene Einstellung ''TCB Header → TCB Banner''. * Unterhalb von ''768px'' wird das Banner ausgeblendet. * Der Inhalt des Headers ist auf maximal ''1200px'' Breite begrenzt. === Navigation === Für die Hauptnavigation ist die Menüposition **TCB Hauptnavigation** registriert. Die ursprünglich vorgesehene horizontale Navigation wurde während der Entwicklung verworfen. Stattdessen verwendet TheCruiserTheme auf allen Bildschirmgrößen ein Hamburger-Menü. Beim Öffnen erscheint die Navigation als Panel von rechts. Aktueller technischer Stand: * Panelbreite: ''min(320px, 85vw)'' * der Hintergrund wird beim Öffnen abgedunkelt * die Hintergrundseite kann bei geöffnetem Menü nicht gescrollt werden * Schließen über ''×'' * Schließen durch Klick auf das Overlay * Schließen mit der ''ESC''-Taste === Untermenüs === Für Untermenüs wird die vorhandene WordPress-Menühierarchie verwendet. * Untermenüs sind zunächst geschlossen. * Sie werden über einen markanten runden Pfeil geöffnet. * Ein geöffneter Hauptmenüpunkt wird hervorgehoben. * Beim Schließen des Navigationspanels werden geöffnete Untermenüs zurückgesetzt. ===== Sidebar ===== Für TheCruiserTheme ist ein eigener Widgetbereich für die Sidebar eingerichtet. Aktueller technischer Stand: * Bezeichnung: **TCB Sidebar** * technische ID: ''tcb-sidebar'' * eigene Theme-Datei ''sidebar.php'' * Standardaufteilung: Hauptinhalt mit rechter Sidebar * Breite der Sidebar: ''300px'' * unterhalb von ''768px'' werden Hauptinhalt und Sidebar untereinander dargestellt Die Sidebar ist damit technisch grundsätzlich eingebunden. Die endgültige inhaltliche und gestalterische Ausarbeitung ist noch nicht abgeschlossen. ===== JavaScript ===== Für die interaktive Steuerung der Navigation verwendet TheCruiserTheme eine eigene JavaScript-Datei: assets/js/navigation.js Die Datei übernimmt derzeit folgende Aufgaben: * Öffnen und Schließen des Navigationspanels * Steuerung des Overlays * Schließen der Navigation über die ''ESC''-Taste * Sperren des Scrollens der Hintergrundseite bei geöffnetem Navigationspanel * Öffnen und Schließen der Untermenüs * Zurücksetzen geöffneter Untermenüs beim Schließen des Navigationspanels Damit ist die interaktive Navigation von der eigentlichen HTML-Struktur und Gestaltung des Themes getrennt organisiert. ===== Relevante Theme-Dateien ===== Der aktuelle Entwicklungsstand des TheCruiserTheme verteilt sich auf folgende zentrale Theme-Dateien: TheCruiserTheme/ ├── assets/ │ └── js/ │ └── navigation.js ├── functions.php ├── header.php ├── index.php ├── page.php ├── sidebar.php ├── footer.php └── style.css Die Dateien haben im aktuellen Entwicklungsstand unterschiedliche Aufgaben: * ''functions.php'' → grundlegende Theme-Funktionen, Registrierung von Theme-Funktionen, Navigation und Sidebar sowie Customizer-Erweiterungen * ''header.php'' → Aufbau des Headers und Ausgabe der Navigation * ''index.php'' → grundlegende Ausgabe von Inhalten * ''page.php'' → Ausgabe einzelner WordPress-Seiten * ''sidebar.php'' → Ausgabe der TCB Sidebar * ''footer.php'' → Grundstruktur des Footers * ''style.css'' → Theme-Informationen und Gestaltung * ''assets/js/navigation.js'' → interaktive Steuerung der Navigation ===== Offene Entwicklungsbereiche ===== Diese Bereiche bleiben als offen gekennzeichnet und werden erst dann als erreichte Meilensteine dokumentiert, wenn sie technisch oder gestalterisch ausreichend stabil sind.