Advanced Custom Fields – Felder mit eigener CSS Klasse versehen

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 kostet aktuell 25 $ Dollar – für eine Website. Diese 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.

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

oder Beispiel Gruppe: Musik-CD
Als Felder in der Gruppe könnte man unterteilen in: Albumtitel, Interpret, Label, Genre, Einscheinungsdatum

Anschliessend 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, kann lässt sich der Wert des Felds “beschreibung” dann im aktuellen Beitrag anzeigen. Möchte man das eigene Text-Inhaltsfeld nun noch mit CSS schöner formatieren, dann ä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.

Als 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 die eigene CSS-Klasse zuweisen.

<img class="meincss" src="<?php echo get_field('meinbildfeld'); ?>">

 

0 Kommentare

Einen Kommentar hinterlassen


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.