WordPress Theme Development

Entwickler-Guide: Erstellen Sie WordPress Themes mit CockpitOS Integration für Shopping Center Websites.

Überblick

Das CockpitOS WordPress Theme-System ermöglicht es Entwicklern, professionelle Shopping Center Websites zu erstellen, die automatisch mit dem CockpitOS Dashboard synchronisiert werden.

Theme-Architektur

Theme-Komponenten:

my-cockpit-theme/
├── theme.json              # WordPress Block Editor v2 Specification
├── style.css               # Theme-Styles mit CSS-Variablen
├── functions.php           # CockpitOS Integration
├── index.php               # Basis-Template
├── assets/                 # Theme-Assets
│   ├── css/theme.css
│   ├── js/theme.js
│   └── images/logo.png
├── elementor-widgets/      # Custom Elementor Widgets
│   ├── shops-grid.php
│   ├── events-list.php
│   └── news-feed.php
└── elementor-templates/    # Vorgefertigte Templates
    ├── homepage.json
    ├── shops-archive.json
    └── events-archive.json

Theme erstellen

Schritt 1: theme.json (WordPress Block Editor v2)

{
  "version": 2,
  "title": "CockpitOS Shopping Center Theme",
  "description": "Professionelles Theme für Shopping Center",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#2563eb",
          "name": "Primary"
        },
        {
          "slug": "secondary", 
          "color": "#64748b",
          "name": "Secondary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "slug": "heading",
          "fontFamily": "Inter, sans-serif",
          "name": "Heading Font"
        }
      ]
    }
  },
  "customTemplates": [
    {
      "name": "elementor_canvas",
      "title": "Elementor Canvas"
    }
  ]
}

Schritt 2: CSS-Variablen für Dashboard-Integration

/*
Theme Name: CockpitOS Shopping Center Theme
Description: Professionelles Theme mit CockpitOS Integration
Version: 1.0.0
Author: Ihr Name
CockpitOS: true
*/

/* CSS-Variablen für Dashboard-Integration */
:root {
  /* Werden vom CockpitOS Plugin überschrieben */
  --cockpit-primary-color: #2563eb;
  --cockpit-secondary-color: #64748b;
  --cockpit-accent-color: #f59e0b;
  --cockpit-heading-font: 'Inter', sans-serif;
  --cockpit-body-font: 'Inter', sans-serif;
}

/* Theme nutzt CSS-Variablen */
body {
  font-family: var(--cockpit-body-font);
  color: #1a202c;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cockpit-heading-font);
  color: var(--cockpit-primary-color);
}

.btn-primary {
  background-color: var(--cockpit-primary-color);
  border-color: var(--cockpit-primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  body { font-size: 14px; }
}

Schritt 3: functions.php mit CockpitOS Integration

<?php
// Theme-Setup
function my_cockpit_theme_setup() {
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
    add_theme_support('custom-logo');
    add_theme_support('elementor');
    add_theme_support('elementor-canvas');
    
    // CockpitOS Integration
    add_theme_support('cockpit-os');
    add_theme_support('cockpit-widgets');
    add_theme_support('cockpit-dynamic-tags');
}
add_action('after_setup_theme', 'my_cockpit_theme_setup');

// Scripts & Styles
function my_cockpit_theme_scripts() {
    wp_enqueue_style('theme-style', get_stylesheet_uri());
    wp_enqueue_style('theme-css', get_template_directory_uri() . '/assets/css/theme.css');
    wp_enqueue_script('theme-js', get_template_directory_uri() . '/assets/js/theme.js', ['jquery'], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_cockpit_theme_scripts');

// CockpitOS Theme Configuration
function my_cockpit_theme_config() {
    return [
        'name' => 'CockpitOS Shopping Center Theme',
        'version' => '1.0.0',
        'widgets' => [
            'shops-grid',
            'events-list', 
            'news-feed',
            'hero-section'
        ],
        'dynamic_tags' => [
            'shop-name',
            'center-logo',
            'event-title',
            'content-areas'
        ],
        'features' => [
            'responsive',
            'elementor',
            'dashboard-sync'
        ]
    ];
}

// Theme bei CockpitOS Plugin registrieren
if (function_exists('cockpit_os_register_theme')) {
    cockpit_os_register_theme('my-cockpit-theme', my_cockpit_theme_config());
}

Elementor Widgets entwickeln

Shop-Grid Widget Beispiel:

<?php
class CockpitOS_Shops_Grid_Widget extends \Elementor\Widget_Base {
    
    public function get_name() {
        return 'cockpit-shops-grid';
    }
    
    public function get_title() {
        return 'CockpitOS Shops Grid';
    }
    
    public function get_categories() {
        return ['cockpit-os'];
    }
    
    protected function register_controls() {
        $this->start_controls_section('content_section', [
            'label' => 'Inhalt',
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]);
        
        $this->add_control('columns', [
            'label' => 'Spalten',
            'type' => \Elementor\Controls_Manager::SELECT,
            'default' => '3',
            'options' => [
                '2' => '2 Spalten',
                '3' => '3 Spalten',
                '4' => '4 Spalten',
            ],
        ]);
        
        $this->end_controls_section();
    }
    
    protected function render() {
        $settings = $this->get_settings_for_display();
        $shops = $this->get_shops_from_api();
        
        echo '<div class="cockpit-shops-grid columns-' . $settings['columns'] . '">';
        foreach ($shops as $shop) {
            echo '<div class="shop-item">';
            echo '<h3>' . $shop['name'] . '</h3>';
            echo '<p>' . $shop['description'] . '</p>';
            echo '</div>';
        }
        echo '</div>';
    }
    
    private function get_shops_from_api() {
        // API-Call zum CockpitOS Dashboard
        $api_client = new CockpitOS_API_Client();
        return $api_client->get_shops();
    }
}

Theme hochladen

1. Theme als ZIP verpacken

zip -r my-cockpit-theme.zip my-cockpit-theme/

2. Dashboard-Upload

1. Dashboard: /dashboard/digital-experience/websites/themes/management
2. Upload Tab: ZIP-Datei per Drag & Drop
3. Automatische Verarbeitung und BunnyCDN-Upload
4. Theme wird in Datenbank registriert

3. Center-Anpassungen

1. Theme-Konfiguration: /dashboard/digital-experience/websites/themes/config
2. Farben, Fonts, Logo pro Center anpassen
3. WordPress Plugin synchronisiert automatisch

Dashboard-Integration

CSS-Variablen werden automatisch gesetzt:

/* Dashboard generiert für Center A: */
:root {
  --cockpit-primary-color: #1e40af;    /* Blau */
  --cockpit-heading-font: 'Inter';     /* Arial */
}

/* Dashboard generiert für Center B: */
:root {
  --cockpit-primary-color: #7c3aed;    /* Lila */
  --cockpit-heading-font: 'Tahoma';    /* Tahoma */
}

WordPress Plugin Integration

• Lädt Theme-Daten: GET /api/centers/{centerId}/theme-customization
• Generiert CSS-Variablen automatisch
• Synchronisiert Content-Areas für Dynamic Tags
• Caching für Performance (5 Minuten)

Best Practices

1. CSS-Variablen verwenden

/* Gut */
.button { background: var(--cockpit-primary-color); }

/* Schlecht */
.button { background: #2563eb; }

2. Elementor-Kompatibilität

add_theme_support('elementor');
add_theme_support('elementor-canvas');

3. Responsive Design

@media (min-width: 768px) {
  .container { max-width: 1200px; }
}

4. API-Integration

// Immer CockpitOS API Client verwenden
$api_client = new CockpitOS_API_Client();
$data = $api_client->get_shops();

---

Ihr WordPress Theme ist jetzt bereit für CockpitOS Integration!

Das Theme wird automatisch mit center-spezifischen Anpassungen geladen und synchronisiert.