SliderStudio

Leichtgewichtiges WordPress-Plugin fuer moderne Hero- und CTA-Slider.

SliderStudio fokussiert sich im MVP bewusst auf einen klaren Anwendungsfall: schnell editierbare, performante Slider mit sauberem Frontend-Markup und ohne jQuery-Abhaengigkeit.

Zweck

SliderStudio richtet sich an Agenturen, Freelancer und Website-Betreiber, die:

• Hero-Slider schnell aufsetzen wollen
• keine ueberladenen Layer-Builder brauchen
• auf stabile, serverseitig gerenderte Ausgabe setzen

MVP Funktionsumfang

Admin

• Custom Post Type sliderstudio_slider
• Eigener Builder-Screen mit Drei-Spalten-Layout
• Slide-CRUD: anlegen, bearbeiten, duplizieren, loeschen
• Drag-and-drop Sortierung der Slides
• Media Library Integration fuer Hintergrundbilder
• Versionierte JSON-Speicherung in einem Meta-Key
• Duplizieren kompletter Slider aus der Listenansicht

Frontend

• Serverseitiger Renderer (robust bei unvollstaendigen Daten)
• Zwei Transition-Typen:
  • fade
  • slide
• Autoplay, Pause on Hover, Pfeile, Dots, Touch-Swipe
• Responsives Verhalten mit mobilen Overrides
• Frontend ohne jQuery
• Verbesserte A11y-Grundlagen (ARIA, Tastatur-Navigation, Live-Status)

Integration

• Shortcode: [sliderstudio id="123"]
• Gutenberg Block: SliderStudio (dynamischer Block mit serverseitiger Ausgabe)

Voraussetzungen

• WordPress 6.4 oder neuer
• PHP 7.4 oder neuer

Installation

Variante A: Als Plugin-Ordner

1. Projekt nach wp-content/plugins/sliderstudio kopieren.
2. Im WordPress-Backend unter Plugins aktivieren.

Variante B: ZIP Upload

1. Projekt als ZIP packen.
2. WordPress: Plugins > Installieren > Plugin hochladen.
3. Aktivieren.

Schnellstart

1. Im Backend SliderStudio oeffnen.
2. Neuen Slider erstellen.
3. Slides anlegen und Inhalte pflegen:
   • Hintergrundbild
   • Headline
   • Beschreibung
   • optionaler Button
4. Design- und Verhaltenssettings setzen.
5. Slider speichern.
6. Per Shortcode oder Block in Inhalte einbinden.

Nutzung per Shortcode

Grundsyntax:

[sliderstudio id="123"]

Hinweise:

• id muss eine gueltige Slider-ID sein.
• Ungueltige oder fehlende IDs werden defensiv behandelt (keine Frontend-Ausgabe statt Fehler).
• Frontend-Assets werden nur geladen, wenn der Slider tatsaechlich gerendert wird.

Nutzung per Gutenberg Block

Im Block-Editor steht der Block SliderStudio zur Verfuegung.

Verhalten im Editor:

• Auswahl eines veroeffentlichten Sliders per Select
• Hinweis bei leerer Auswahl
• Hinweis bei ungueltiger Auswahl
• Schlanke Platzhalter-Darstellung mit Slider-Info

Wichtig:

• Die eigentliche Ausgabe passiert serverseitig im Render-Callback.
• Frontend-Assets werden auch hier nur bei erfolgreicher Ausgabe eingebunden.

Technische Architektur (Kurzform)

Zentrale Komponenten:

• sliderstudio.php
  • Plugin Entry Point, Konstanten, Bootstrap
• includes/class-sliderstudio-plugin.php
  • Zentrale Initialisierung aller Module
• includes/class-sliderstudio-post-type.php
  • CPT und Listenansicht/Row-Action Logik
• includes/class-sliderstudio-document.php
  • Versioniertes Dokumentenmodell, Sanitizing, Persistenz
• includes/class-sliderstudio-admin.php
  • Builder-Screen, Editor-Assets, Save-Wiring
• includes/class-sliderstudio-renderer.php
  • Serverseitiges Frontend-Markup
• includes/class-sliderstudio-assets.php
  • Registrierung und bedingtes Laden von Frontend-CSS/JS
• includes/class-sliderstudio-shortcode.php
  • Shortcode-Integration
• includes/class-sliderstudio-block.php
  • Gutenberg-Block-Registrierung und Render-Callback

Datenmodell

Speicherung in einem Meta-Key:

• _sliderstudio_document

Dokumentstruktur (vereinfacht):

{
    "version": 1,
    "slides": [
        {
            "id": "slide_001",
            "background_image_id": 123,
            "background_image_url": "https://example.com/uploads/hero.jpg",
            "headline": "...",
            "text": "...",
            "button_label": "...",
            "button_url": "https://...",
            "button_new_tab": false
        }
    ],
    "settings": {
        "transition": "fade",
        "autoplay": true,
        "autoplay_delay": 5000,
        "animation_duration": 600,
        "show_arrows": true,
        "show_dots": true
    }
}

Alle Eingaben werden serverseitig validiert und sanitizt.

Performance, Sicherheit, Accessibility

Performance

• Kein jQuery im Frontend
• Frontend-Assets werden nur bei tatsaechlicher Ausgabe eingebunden
• Serverseitiges Markup als stabile First Paint Basis

Sicherheit

• Save-Flow mit Nonce und Capability-Checks
• Defensiver Umgang mit unvollstaendigen/ungueltigen Daten
• Kontextspezifisches Escaping in der Ausgabe

Accessibility

• Buttons fuer Navigationselemente
• ARIA-Attribute fuer Carousel/Slides/Pagination
• Tastatursteuerung (Links/Rechts, Home/End)
• Verbesserte Statusansagen fuer Screenreader

Bekannte MVP Grenzen

Der aktuelle MVP ist absichtlich fokussiert und enthaelt nicht:

• freies Layer-System
• Video-Slides oder dynamische Datenquellen
• Timeline- oder Element-Animationen
• komplexe responsive Breakpoint-Editoren
• direkte Integrationen in Elementor, Divi, WPBakery
• Import/Export Workflows

Entwicklerhinweise

• Coding-Style orientiert sich an WordPress Coding Standards.
• Textdomain: sliderstudio
• Prefixes:
  • Funktionen/Hooks/Handles: sliderstudio_
  • Klassen: SliderStudio_

Support und Weiterentwicklung

SliderStudio befindet sich im MVP-Stadium. Erweiterungen (z. B. Presets, weitere Slide-Typen, tiefere Block-Features) sind als naechste Ausbaustufen vorgesehen.