CCDKI Theme

Modulares WordPress-Theme für CCDKI - Zentrum für digitale Kompetenz und Innovation

Ein anpassbares Theme basierend auf _tw mit Tailwind CSS, das Template Parts für flexible Inhaltsgestaltung nutzt.

Schnellstart

Installation

1. Diesen Ordner nach wp-content/themes in deine lokale Entwicklungsumgebung verschieben
2. npm install && npm run dev in diesem Ordner ausführen
3. Theme in WordPress aktivieren
4. ACF Pro Plugin installieren

Entwicklung

1. npm run watch ausführen
2. Tailwind Utility Classes nach Belieben hinzufügen
3. Template Parts in template-parts/ anpassen

Bereitstellung

1. npm run bundle ausführen
2. Die resultierende ZIP-Datei über "Theme hochladen" in WordPress installieren

Installation & Setup

Voraussetzungen

• WordPress 5.8+
• PHP 7.4+
• Node.js 16+ & npm (für Build-Prozess und Tailwind CSS)
• Advanced Custom Fields Pro Plugin
• Contact Form 7 Plugin (für Formulare)

Erste Schritte

# 1. Theme installieren
cd wp-content/themes/
git clone [repository] ccdki
# 2. Dependencies installieren
cd ccdki
npm install
# 3. Development starten
npm run dev
# 4. Production Build
npm run build

Template-Struktur

Template Parts für maximale Flexibilität:

• template-parts/components/ - Wiederverwendbare Komponenten (Hero, Timeline, Person-Tiles, etc.)
• template-parts/content/ - Haupt-Content Templates (Single, Page, etc.)
• template-parts/layout/ - Layout-Komponenten (Header, Footer)
• Jede Datei enthält ausführliche deutsche Dokumentation zur Funktionsweise

Styling

• Tailwind CSS für Utility-First Styling
• Custom CCDKI Farbschema (lila-500, d64blue-900, d64gray-500, etc.)
• Responsive Mobile-First Design
• Spezielle Design-Features: Clip-Path Styling, Container Queries

Funktionalität

• ACF Integration für flexible Inhaltsfelder
• Timeline Component mit Bildern und Videos
• AJAX-powered Filterung für Blog-Übersichten
• Contact Form 7 Integration für Formulare

Dokumentation

Grundlagen

Jede Template-Datei enthält:

• Funktionsbeschreibung - Was macht die Komponente
• ACF-Feldstruktur - Welche Custom Fields benötigt werden
• Usage Notes - Wie die Komponente konfiguriert wird
• Dependencies - Erforderliche Plugins und Template Parts

Template Parts

• Hero Section - Flexible Einstiegsbereiche mit Call-to-Actions
• Timeline - Chronik-Darstellung mit Clip-Path Design
• Person Tiles - Einheitliche Darstellung mit Social Media Integration
• Navigation - Desktop/Mobile System mit AJAX-Suche
• Post Components - Mit Job-Posts und Related Articles

Erweiterungen

• Multi-Language Ready - Vollständige i18n-Unterstützung
• Accessibility - ARIA-Labels und Screen Reader Support
• Performance - Optimierte Queries und AJAX-Loading
• Security - XSS-Prevention und Input-Validation

Anpassungen

ACF-Felder konfigurieren

Alle benötigten ACF-Feldgruppen sind in den Template Part Headers dokumentiert.

Neue Template Parts hinzufügen

1. Neue Datei in template-parts/components/ erstellen
2. Header-Dokumentation nach Vorlage hinzufügen
3. In entsprechende Page-Templates einbinden

Styling erweitern

1. Tailwind Classes in Templates nutzen
2. Custom CSS in style.css für spezielle Anforderungen
3. Neue Farben über Tailwind-Konfiguration