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.
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 das 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 der Code für ein neu angelegtes Text-Feld namens „beschreibung“:
<?php the_field('beschreibung');?>Wird der Code in ein WordPress-Template wie beispielsweise die single.php eingefügt, lässt sich der Wert des benutzerdefinierten Feldes „beschreibung“ im jeweiligen Beitrag ausgeben. Soll dieses zusätzliche Textfeld anschließend per CSS formatiert werden, kann der Code wie folgt erweitert werden:
<div class="meincss"><?php the_field('beschreibung');?></div>Im Stylesheet wird nun noch die neue CSS-Klasse „meincss“ definiert.
Beispiel: .meincss {font-size: 1rem; color: #990000;}
Advanced Custom Fields: Image-Feld mit eigener CSS Klasse versehen
Handelt es sich um ein Bild-Inhaltsfeld, kann man mit folgendem PHP-Aufruf ebenfalls eine eigene CSS-Klasse zuweisen.
<img class="meincss" src="<?php echo get_field('meinbildfeld'); ?>">