Advanced Custom Fields (kurz ACF) ist ein bekanntes Plugin, um WordPress mit benutzerdefinierten Feldern schnell und einfach zu erweitern. Das ist sehr praktisch, wenn man seine Webseite um zusätzliche Inhalte in Artikeln, Seiten oder beispielsweise eigenen Inhalts-Typen (Custom-Post-Types) ergänzen will.
Die kostenlose Version von Advanced Custom Fields kann man sich hier herunterladen:
https://de.wordpress.org/plugins/advanced-custom-fields/
Die kostenpflichtige PRO-Version von Advanced Custom Fields erhält weitere Felder wie z.B. ein Repeaterfeld (für wiederholende Blocks), ein Gallery Feld um mehrere Bild zu verwalten, ein Flexible Content Feld, erweiterte Import- und Exportfunktionen, zusätzliche PHP-/JavaSript-Funktionen für mehr Anpassungen und vieles mehr. Für viele Zwecke genügt allerdings auch die kostenlose ACF-Version. Hat man das Plugin herunterladen und in WordPress aktiviert, dann kann man gleich damit loslegen.
Neue ACF Feldgruppe und Felder anlegen
Zuerst legt man in Advanced Custom Fields eine Feldgruppe an, innerhalb einer Feldgruppe kann man dann ein neues Feld erstellen (Einzeilig, Mehrzeilig, Bild, Checkbox usw.) oder auch mehrere Felder gruppieren.
Beispiel Gruppe: Bücher
Als Felder in der Gruppe könnte man unterteilen in: Buchtitel, Verlag, Autor, ISBN
Beispiel Gruppe: Musik-CD
Als Felder in der Gruppe könnte man unterteilen in: Albumtitel, Interpret, Label, Genre, Erscheinungsdatum
Anschließend müssen die angelegten ACF-Felder noch in euer WordPress-Theme mit eingebaut werden. Hier gibt es dazu einige Code-Beispiele: https://www.advancedcustomfields.com/resources/code-examples/
Advanced Custom Fields Text-Feld mit eigener CSS-Klasse versehen
Hier als Beispiel mal der Code für ein neu angelegtes Text-Feld namens „beschreibung“:
<?php the_field('beschreibung');?>Kopiert man sich den Code in ein WordPress-Template wie die „single.php“ Datei, dann lässt sich der Wert des Felds „beschreibung“ im aktuellen Beitrag anzeigen. Möchte man das eigene Text-Inhaltsfeld nun noch mit CSS schöner formatieren, so ändert man den Code wie folgt ab:
<div class="meincss"><?php the_field('beschreibung');?></div>Im Stylesheet muss man nun natürlich noch die neue CSS-Klasse „meincss“ definieren.
Beispiel: .meincss {font-size: 20px; color: #990000;}
Advanced Custom Fields: Image-Feld mit eigener CSS Klasse versehen
Handelt es sich um ein Bild-Inhaltsfeld, dann kann man mit folgendem PHP-Aufruf ebenfalls eine eigene CSS-Klasse zuweisen.
<img class="meincss" src="<?php echo get_field('meinbildfeld'); ?>">