TheCruiserTheme – Entwicklungsstand

Der erste dokumentierte Meilenstein umfasst die Grundstruktur des Headers und die Navigation des TheCruiserTheme.

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.

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

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.

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.

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.

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

Diese Bereiche bleiben als offen gekennzeichnet und werden erst dann als erreichte Meilensteine dokumentiert, wenn sie technisch oder gestalterisch ausreichend stabil sind.