Auch wenn mit den Gutenberg Editor die Inhalte mit variablen Blöcken vielseitige Inhalte erstellt werden können, bieten eigene Felder und Templates ein zusätzliches Universum an Möglichkeiten an. Im folgenden Beispiel wird eine kleiner Eventkalender gebaut. Jede Seite enthällt Felder für Eventtitel, Kurzbeschreibung, Beschreibung, Bilduploader und ein Zeit/Datumsfeld. Der Seitentyp lässt sich mit mit geringem Aufwand weiter ausbauen.
Plugin: Advanced Custom Fields
Die Installation dieser Erweiterung bietet die Möglichkeit eigene Eingabefelder, einen zusätzlichen Seitentyp zu erstellen.
Feldgruppe erstellen
- Im Dashboard > Plugins > Installieren, such das Plugin: Advanced Custom Fields
- Installiere und aktiviere das Plugin.
- Navigiere zum neuen Reiter "Individuelle Felder" > Feldgruppen > mit "Erstellen" eröffnest du eine neue individuelle Feldgruppe.
- Gib einen Titel ein
- Unter Position kannst du die Regel erzeugen, um die Felder deinem Template zuzuweisen: "Seiten-Template" ist gleich "Event-Template".
- Veröffentliche die Feldgruppe. Die weiteren Einstellungen kannst du jederzeit deinen Bedürfnissen anpassen.
Die Felder erstellen
- Mit "+Feld erstellen" baust du die einzelnen Eingabefelder. Benenne jeweils Beschriftung, Name und Typ.
- Beginne mit dem Feld für den Titel. Feldname: muss eine Variable sein. Feldtyp: "Text einzellig", weise dem Titel zudem den Wert "Erforderlich?: JA" zu.
- Die weiteren Felder - Beschriftung - Name - Typ:
- Veranstalter - event_kurzbeschreibung - Text einzellig
- Event Beschreibung - event_beschreibung - Text mehrzellig
- Event Bild - event_bild - Bild (Rückgabeformat URL)
- Event Ort - event_location - Text einzellig
- Event Datum - event_datum - Datums und Zeitauswahl
- Aktualisiere die Einträge. Erstelle eine neue Seite. Weise ihr das Template "Event" und untersuche die zusätzlich angelegten Felder
Die Felder im Template zur Anzeige bringen
Um die Felder nutzen zu können musst du sie zur Anzeige bringen. Dazu brauchst du ein "Child-Template" und darin ein eignes Untertemplate mit "Template-Part". Stelle sicher, dass du Child-Theme und die Dateien für den Template-Part bereitgestellt hast.
Das Event-Template wird ausschliesslich für Events benutzt. Sobald der neuen Seite das Event-Template zugewiesen wird, stehen die damit verlinkten Felder zur Eingabe des Events bereit. Der nächste Schritt ist nun, die einzelnen Felder im Template zur Anzeige zu bringen.
- Öffne die Datei "template-parts/content-event.php" im Editor
- Innerhalb des div-Elements "event-content" findest du die PHP-Platzhalter für
Titel "the_title()" und Inhalt "the_content()":<?php if ( is_singular() ) { the_title( '<h1 class="entry-title">', '</h1>' ); the_content( __( 'Continue reading', 'twentytwenty' ) ); } ?> - Der Codeblock für das Template enthällt die HTML-Elemente, die CSS Stile (direkt inline geschrieben) und die PHP-Platzhalter der Feld-Elemente der Feldgruppe Events
(Du erkennst die einzelnen Feld-Namen):- <?php the_field('event_titel'); ?>
- <?php the_field('event_kurzbeschreibung'); ?>
- <?php the_field('event_bild'); ?>
- <?php the_field('event_datum'); ?>
- <?php the_field('event_location'); ?>
- <?php the_field('event_beschreibung'); ?>
- Kopiere folgenden Codeblock und füge ihn in deine Datei ein:
<div class="eventblock"> <div class="event" style=""> <h2><?php the_field('event_titel'); ?></h2> <div class="loc" style="width:40%;float:right;margin-left:4%;"> <p><strong><?php the_field('event_kurzbeschreibung'); ?></strong></p> <img src="<?php the_field('event_bild'); ?>" alt="<?php the_field('event_titel'); ?>"> <p><strong><?php the_field('event_datum'); ?></strong></p> <p><?php the_field('event_location'); ?></p> </div> <div class="desc" style="width:50%;float-left:"> <p ><?php the_field('event_beschreibung'); ?></p> </div> <p style="clear:both;" style="border-bottom:1px solid #fff;"> </p> </div> </div> 