Slider¶

Überblick¶

Das Add‑on Slider ermöglicht die Verwaltung von Slides im Backend und die Ausgabe per Shortcode im Theme. Zusätzlich können reine Bild‑Slider direkt über eine Bildliste erstellt werden.

Slider im Backend anlegen¶

1. Backend → Slides → Neu hinzufügen
2. Titel vergeben (zur internen Zuordnung)
3. Unter Slides das HTML‑Template definieren
4. In Fields die gewünschten Felder pro Slide festlegen
5. Im Bereich Slides Einträge hinzufügen und befüllen

Shortcode im Backend:
Im Slider‑Editor wird der Shortcode angezeigt, z. B. [slider id="123" title="Mein Slider"].

Ausgabe im Content¶

Content‑Slider (mit Slides aus dem Backend)¶

[slider id="123"]

Optional kannst du zusätzliche Parameter setzen:

• class – CSS‑Klasse für den Wrapper
• ratio – Bootstrap‑Ratio (z. B. 16x9)
• lazy – Lazy‑Load via twtheme_dynamic_content (true/false)
• fullscreen – Vollbild‑Trigger (nur Desktop)

Beispiel: Slider mit dynamischen Inhalten aus einem Post Type¶

Im Slider‑Backend legst du eigene Fields an (z. B. headline, text, image) und nutzt sie im Template:

<article class="slide">
  <h3>%%headline%%</h3>
  <p>%%text%%</p>
  <div class="media">%%image|image%%</div>
</article>

Im Theme baust du den Slider und befüllst die Slides über Daten aus einem Post Type (hier: news):

// 1) Slider-Post laden (enthält Template + Felddefinitionen)
$slider_id = 123;

// 2) Inhalte aus einem Post Type holen
$items = get_posts([
  'post_type' => 'news',
  'posts_per_page' => 6,
  'post_status' => 'publish',
]);

// 3) Slides-Array im erwarteten Format bauen
$dynamic_slides = [];
foreach ($items as $item) {
  $dynamic_slides[] = [
    'slide-is-active' => 'on',
    'headline' => get_the_title($item),
    'text' => get_the_excerpt($item),
    'image' => get_post_thumbnail_id($item), // wird via %%image|image%% gerendert
  ];
}

// 4) Slider-Shortcode mit dynamischen Slides ausgeben
echo do_shortcode('[slider id="' . $slider_id . '"]');

// Hinweis: Slides werden über den Filter unten eingespeist.

Ergänze in der functions.php den Filter, der die dynamischen Slides an den Slider übergibt:

add_filter('twtheme_slider_slides', function ($slides, $atts, $slides_data) use ($dynamic_slides) {
  return $dynamic_slides; // vorhandene Slides überschreiben
}, 10, 3);

So wird der Slider mit Inhalten aus deinem Post Type befüllt, ohne dass du die Slides im Backend manuell anlegen musst.

Bild‑Slider (direkt aus IDs)¶

[slider images="12,34,56" thumbnails="true" caption="true"]

Weitere Optionen:

• image_size (z. B. large, medium)
• image_srcset (true/false)
• style (fit für object‑fit‑cover)

Slider‑Einstellungen (Splide)¶

Im Tab Splide Settings kannst du:

• Splide Options als JSON hinterlegen
• Arrows HTML überschreiben
• Additional JS hinzufügen (Slider‑ID wird im Backend angezeigt)

Feldtypen im Slider¶

Im Bereich Fields kannst du pro Slide folgende Feldtypen anlegen:

• Text – Einzeiliger Inhalt (z. B. Überschrift).
• Textarea – Mehrzeiliger Inhalt (z. B. Teaser).
• Zahl – Numerischer Wert (z. B. Preis, Sortierung).
• Bild – Bild aus der Mediathek.
• Template – HTML‑Override pro Slide (ersetzt das globale Template).
• Editor – WYSIWYG‑Inhalt (formatierter Text).

Barrierefreiheit¶

Unter Designations lassen sich ARIA‑Texte für Buttons, Pagination und Slides anpassen.

Anwendung im Frontend¶

Slider werden per Shortcode ausgegeben und als Splide‑Slider gerendert (Content‑ oder Bild‑Slider).

Entwicklertipps¶

• Slides sind ein eigener Post Type: slider
• Shortcode kann auch eine Gallery ersetzen (WP‑Gallery wird auf [slider] umgebogen)

Twtheme Hooks & Filter¶