Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Warum ich das Advanced Custom Fields Plugin so liebe ❤

Seit längerem gehört das Plugin Advanced Custom Fields zu meinen Lieblingsplugins, da es einfach so unglaublich vielfältig ist. Früher programmierte ich meine Custom Fields noch selbst, heute nutze ich die Library von ACF um noch viel mächtigere Custom Fields zu erstellen.

Was kann ACF?

Advanced Custom Fields (kurz ACF) ist ein Plugin um im Handumdrehen benutzerdefinierte Felder in allen denkbaren Formen für Beiträge, Seiten, Kategorien, Taxonomien und Post Types bereitzustellen. Es gibt hierfür ganz viele sinnvolle Verwendungen. Angenommen du hast eine Seite wo du Produkte vorstellst, so kannst du ACF dafür verwenden einige Produkteigenschaften als Benutzerdefinierte Felder vorzudefinieren.

Die Ausgabe im Template kannst du komplett selbst bestimmen, hierfür sind allerdings einige Kenntnisse in HTML/PHP notwendig. Und auch aus diesem Grund ist ACF eigentlich ein Hilfswerkzeug für Entwickler, als normaler Nutzer könnte die Implementierung etwas zu kompliziert werden.

Was kostet ACF?

Erstmal nichts, du kannst im WordPress Plugin Verzeichnis das Plugin kostenlos herunterladen und installieren, Einschränkungen gibt es hier keine. Die Entwickler bieten zusätzlich einige kostenlose und kostenfplichtige Add-Ons um das Plugin zu erweitern. Einige Add-Ons sind sehr nützlich, so z.B. das Repeater Field, dazu aber in einem späteren Artikel mehr.

Soviel erstmal zum Plugin, nun möchte ich dir ein paar Funktionen zeigen sowie erklären wie man die Felder anschließend in ein Theme integrieren kann.

Nach der Installation

Sobald du ACF installiert hast, erscheint im Backend ein neuer Menü Punkt Eigene Felder. Das Plugin ist gegliedert in Gruppen, d.h. man kann unendlich viele Gruppen von Benutzerdefinierten Feldern anlegen, welche nach versch. Kriterien zugeordnet werden. Fangen wir mal mit einem Beispiel an. Leg hierzu eine Gruppe an und nenn diese „Produkteigenschaften“. Jetzt kannst du die Felder hinzufügen, die Maske hierfür sieht so aus:

acf_1

Mit einem Klick auf Feld hinzufügen kannst du die nötigen Eigenschaften festlegen. Nehmen wir als Beispiel mal „Reichweite“. Damit man dem Produkt eine Reichweite (z.B. Funkgerät) zuweisen kann, ist ein einfaches Textfeld völlig ausreichend, es kann aber auch das Nummern-Feld genommen werden, bei diesem Felttyp können nur Zahlen eingegeben werden. Zusätzlichen können z.B. Steps und Min- bzw. Maximalwerte festgelegt werden, was sehr praktisch sein kann – gerade wenn man Fehleingaben seitens des Nutzer/Autors unterbinden möchte.

An dieser Stelle können natürlich viele weitere Felder deklariert werden, mögliche Felder-Variaten sind:

Grundlegend

  • Text
  • Textfeld
  • Nummer
  • E-Mail
  • Passwort

Inhalt

  • WSIWYG-Editor (ähnlich wie der Content-Editor)
  • Bild
  • Datei

Auswahlmöglichkeiten

  • Auswahlmenü
  • Checkbox
  • Radio Button
  • Ja/Nein

Beziehungen

  • Link zu Seite
  • Artikel
  • Beziehung
  • Artikel-Beziehung
  • Benutzer

jQuery

  • Google Map
  • Datum
  • Farbe

Layout

  • Nachricht
  • Tab

Einige Felder sind selbsterklärend und erhalten nach Auswahl noch einige Zusatzfelder die ausgefüllt werden müssen damit das Feld korrekt arbeiten kann. Nachdem du die Felder festgelegt hast, musst du ACF nur noch erklären wann diese Felder erscheinen sollten. Du kannst eine vielzahl von Bedingungen festlegen, das Eingabefeld sieht so aus:

acf_2

So würden die Felder nur bei normalen Beiträgen (Post Type = post) erscheinen welche in der Kategorie Allgemein hinterlegt sind, genial oder? Das ist noch nicht alles, du kannst quasi unendlich viele Kombinationen von Regeln festlegen um so die Felder auch nur dann bereitzustellen wenn diese wirklich benötigt werden.

Anschließend kannst du unter „Optionen“ noch einige optische Einstellungen wählen. Das wären: Sortierung, Stil usw. probier einfach mal die Optionen aus, so findest du die perfekte Darstellung für die Felder.

Näher eingehen möchte ich auf die „Beziehungs“-Felder, das ist für mich im täglichen Geschäft eines der Hauptgründe warum ACF einfach so super geil ist.

Angenommen du möchtest Beiträge (können auch verschiedene Post Types sein) mit einander verknüpfen. Das einfachste Beispiel wäre, das man Blogartikel untereinander verknüpfen möchte um diese als Related zu markieren, also als Ähnliche Beiträge.

Du musst einfach ein Feld mit dem Typ Beziehung erstellen. Anschließend kannst du einen Beitrag direkt in Backend mit einem anderen verknüpfen, das sieht nicht nur optisch gut aus sondern ist auch noch super-easy zu bedienen:

acf_3

In der linken Spalte sind alle Beiträge aufgelistet, sobald man einen Artikel auswählt wird dieser in die rechte Spalte verschoben. Nach dem Speichern ist der Beitrag in der Datenbank mit dem aktuellen Beitrag verknüpft und lässt sich somit später mit der ACF-Funktion im Template auslesen.

Ausgabe im Theme

Nun zum wichtigen Teil – wie gebe ich die Felder im Theme aus? Wenn du etwas in Erfahrung in PHP hast, ist das ganz einfach. Öffne zunächst das passende Template, wenn du z.B. die Felder auf der Beitragsseite ausgeben willst, wäre das (je nach Theme) die single.php. Dort fügst du an der passenden Stelle die folgende Funktion ein:

the_field('customfield_name');

So wird der Inhalt des Feldes „customfield_name“ direkt ausgegeben. Du kannst natürlich den Wert auch vorher ein eine Variable speichern:

$var = get_field('customfield_name');

Wenn du den Wert außerhalb der Loop ansprechen möchtest, geht das so:

$var = get_field('customfield_name', ID);

Anstelle der ID müsstest du dann die entsprechende Post ID übergeben.

Beziehungs-Feld ansprechen

Da ich oben als Beispiel das Feld „Beziehungen“ angesprochen habe, möchte ich dir noch erklären wie du dieses Feld im Theme ansprechen kannst. Nutzt dazu folgende PHP-Syntax:

$field = get_field('aehnliche_beitraege');
if($field ) {
	echo '<h2>Related Posts</h2><ul>';
	foreach($field as $item) {
		echo '<li><a href="'.get_permalink($item->ID).'" title="'.get_the_title($item->ID).'">'.get_the_title($item->ID).'</a></li>';
	}
	echo '</ul>';
}

That’s it. Nun werden alle Beiträge die verknüpft wurden, in einer HTML-Auflistung aufgelistet. Du kannst die Ausgabe natürlich komplett anpassen – hier ist alles Möglich.

Eine ausführliche Anleitung findest du dazu in der Dokumentation des Themes, dort werden auch noch viele weitere Möglichkeiten beschrieben.

Es gibt noch viele weitere Funktionen die ich nicht alle in einen Artikel quetschen möchte, daher werde ich so schnell wie Möglich noch weitere Artikel zu ACF verfassen. Weitere Interessanten Funktionen zu ACF wären:

  • Repeater Fields (AddOn)
  • Frontend Formulare
  • ACF vollständig in das Theme integrieren

Fazit

Das Plugin Advanced Cdustom Fields ist eine mächtige Wunderwaffe und gehört für mich als Entwickler zum Standardrepertoire. Mit Hilfe der Dokumenation ist eine Integration und eine individuelle Anpassung schnell durchgeführt.

Ich hoffe ich konnte dir mit diesem Artikel einen guten Ersten Blick gewähren und dir das Plugin näher bringen. Fragen / Anregungen oder Wünsche für den nächsten ACF-Artikel sind in den Kommentaren gerne gesehen! :-)

Advanced Custom Fields Download

Über Christian

Die Webentwicklung ist seit 2006 ein großer Teil meines Lebens und seit 2010 kann ich damit auch meine Brötchen verdienen. Ich beschäftige mich speziell mit WordPress und entwickle auch eigene Themes. Die Anpassungsfähigkeit von Wordpress begeistert mich immer wieder, daher möchte ich euch interessante Snippets und Plugins nicht vorenthalten.

WordPress Affiliate ThemeAnzeige

21 Kommentare

Avatar von Patrick

Patrick 22. Juli 2014 um 17:55

Hallo Christian,
interessantes Plugin, ich habe so etwas selbst schon mal mit der Pluginreihe von wp-types gemacht und empfand es als ziemlich praktisch. Allerdings ist für mich eine Sache essentiell, ich entwickle selbst WordPress-Themes, inwiefern muss das Plugin installiert sein um die angelegten CPTs zu verwenden? Kann ich auch alles damit erstellen und es dann wieder deeinstallieren?

Antworten
Avatar von Christian

Christian 23. Juli 2014 um 10:44

Hi Patrick,

für dich als Entwickler gibt es da ein sehr geiles Feature, du kannst ACF einfach komplett ins Theme integrieren so ist der Benutzer der das Theme installiert nicht darauf angewiesen das ACF installiert ist. Ich werde diese Integration noch in einem späteren Artikel zu ACF genauer erklären. Hier aber mal ein Artikel in Englisch über dieses Thema:

http://figurated.com/2013/09/29/how-to-integrate-advanced-custom-fields-into-your-premium-wordpress-theme/

Antworten
Avatar von Patrick

Patrick 23. Juli 2014 um 19:42

Super, vielen Dank!
Dann werde ich mal auf deine genaue Erklärung warten und schon mal den englischen Artikel aufsaugen :-D

Avatar von ConnieM

ConnieM 24. Juli 2014 um 6:39

ich mag keine „geilen“ Plugins, ich mag gute und funktionale Plugins ;=)

„Hier aber mal ein Artikel in Englisch über dieses Theme:“ <= da ist sicherlich "Thema" gemeint ;=)

muss denn der Schreibstil so schludrig sein?

naja, ist dein Blog…

Antworten
Avatar von Christian

Christian 24. Juli 2014 um 7:22

Hi,

mein Blog, meine Regeln. ;-)

Schreibfehler ist korrigiert, danke.

Gruß
Christian

Antworten
Avatar von Carlos

Carlos 3. August 2014 um 20:49

Hallo Cristian, sehr interessantes Beitrag zum Theme ACF, ich verwende es sehr oft. Was ich noch nicht geschafft habe, ist die Integration mit WP SEO von Yoast. Da erscheint immer der Teil von Inhalt als leer.
Kennst Du einen Weg, um das zu lösen?

Grüße
Carlos

Antworten
Avatar von Christian

Christian 3. September 2014 um 12:34

Hallo Carlos,

sorry, dein Kommentar lag im Spam.

Ersetzt du den kompletten Content mit einem ACF Feld? Dann ist das klar, davon rate ich dir aber ab. Ich würde ACF nur für Ergänzungen nutzen.

Gruß
Christian

Antworten
Avatar von Tobi

Tobi 12. Dezember 2014 um 21:31

Ich weiß nicht genau, ob ich das richtig verstanden habe, wofür dieses Plugin ist.
Kann ich mit dem Plugin beispielsweise auch ein zusätzliches Menü einbinden? :/

LG
Tobi :)

Antworten
Avatar von André

André 13. Dezember 2014 um 9:55

Hallo Tobi, wie meinst du das mit einem zusätzlichem Menü?

Das Plugin dient z.B. dazu den eigentlichen Content eines Post Types (Seite oder Beiträge) zu erweitern.

Das heißt, wenn du nun zum Beispiel eine Seite über Rezepte hast, kannst du die Zutaten über Custom Fields hinterlegen und diese an einer bestimmten Stelle ausgeben. Das hat dann mit dem eigentlichen Content nichts zu tun. Zeitgleich kannst du mit diesen Zutaten arbeiten, da du die Felder bzw. die Werte einzeln ansprechen kannst, was du nicht könntest, wenn die Daten mitten im Content in einer Tabelle wären (z.B.). Unterm Strich ist es ein sehr mächtiges Plugin mit dem du viel machen kannst. Hierzu am besten auch mal die Herstellerseite aufrufen oder den Artikel, wo ein spezielles Modul vorgestellt wird: http://drwp.de/advanced-custom-fields-repeater-field/

Gruß
André

Antworten
Avatar von Detlef

Detlef 14. Januar 2015 um 12:34

Hi André,
danke für die Vorstellung des Plugins…ich hab es jetzt mal im Testblog drin, komm da aber noch nicht ganz zu Streich.
Was ich vorhabe…im Blog habe ich einige Testberichte. Ich hab jetzt ein Customfield mit „Firma“ angelegt.
Nun hätte ich gerne eine Übersichtsseite mit dem Namen Testberichte.
Hier sollen dann im Grunde die ganzen Testberichte aufgelistet werden, welche mit dem Customfield „Firma“ belegt sind.
Am besten so, dass man folgende Struktur hat:

Firma A
– Artikel 1
– Artikel 2

Firma B
– Artikel 1
– Artikel 2

Geht das überhaupt mit den Customfields….??

Merci und Grüße
Detlef

Antworten
Avatar von Christian

Christian 17. Januar 2015 um 8:41

Hi Detelf,

das geht natürlich, ist aber, wie ich finde, etwas umständlich. Ich würde das ganze über Taxonomies lösen (http://www.wpbeginner.com/wp-tutorials/create-custom-taxonomies-wordpress/) – so werden die Beiträge besser in der Datenbank verknüpft und du kannst diese dann einfach per get_posts UND Taxonomy Parameters ansprechen (http://codex.wordpress.org/Template_Tags/get_posts#Taxonomy_Parameters).

Alternativ kannst du aber auch deine Customfield Struktur nutzen, hier musst du dann auf der Testseite mit einem get_posts und Meta Query (meta_key, meta_value) arbeiten.

Beide Varianten erfordern aber etwas Erfahrung mit WP Funktionen und PHP.

Gruß
Christian

Antworten
Avatar von Bartosz

Bartosz 19. Januar 2015 um 16:09

Hallo Christian,

danke für diesen Artikel, ich habe mir daraufhin auch eben jenes Plugin gekauft, weil es wirklich ungemein nützlich ist und – einmal eingerichtet – eine Menge Arbeit hinterher erspart. Ich nutze es auf meiner Seite um z.B. allen Objektiven in der Datenbank die dazugehörigen technischen Daten zu verpassen und hinterher in einer Tabelle ausgeben zu lassen. Die shortcodes lassen sich wunderbar in Tablepress einsetzen.

Was ich nur nicht hinbekomme, sind die eigenen Felder in den Kommentaren auszugeben. Ich möchte z.B. gerne, dass meine Besucher selbst etwas zu den Objektiven sagen, also Pros & Cons und ob sie das Objektiv weiterempfehlen würden. Die Felder in der Kommentareingabe sind sichtbar und funktionieren. Wie bekomme ich die aber bloß im Kommentar ausgegeben?

Beste Grüße
Bartosz

Antworten
Avatar von Christian

Christian 20. Januar 2015 um 14:14

Hallo Bartosz,

dafür habe ich leider auch keine Lösung parat. Zu der Frage sollte dir der Support des Plugins eventuell eine Antwort geben können. Die antworten dort sehr schnell und kompetent!

Gruß
Christian

Antworten
Avatar von Philipp

Philipp 18. April 2015 um 23:44

Danke für die ausführliche Erklärung und den Tipp! Versuche gerade ein paar Custom Fields mit dem Plugin anzulegen, allerdings komme ich bei einem Punkt nicht weiter. Ist es möglich, die in einem einzelnen Beitrag festgelegten Werte der custum fields dann im WordPress Editor auch direkt zu verwenden?

Laut Dokumentation sollte das funktionieren, wenn ich im Editor eingebe oder alternativ auch , wobei natürlich field_name ersetzt wurde. In diesem Fall wird bei mir aber nie ein Wert zurückgegeben. Mach ich was falsch bzw. ist solch eine Verwendung WordPress Editor überhaupt möglich? Oder geht das nur in den php-files?

Viele Grüße
Philipp

Antworten
Avatar von Christian

Christian 20. April 2015 um 7:51

Hi Philipp,

das ist kein Problem, schau dir mal das hier an:

http://www.advancedcustomfields.com/resources/shortcode/

Antworten
Avatar von Marcus

Marcus 19. April 2015 um 21:31

Hallo
Coole Sache – kannst du mir ev helfen, wie ich das in mein theme einbinde, zb die Funktion ja/nein

Ich möchte für Autos eine AUsstatungsliste anlegen und die dann je Seite ansprechen

Klima: ja/nein
Winterreifen: Ja/nein

Hab das daweil per „repeater“ aber da muss ich immer alles frisch eingeben !

THX

Antworten
Avatar von Christian

Christian 20. April 2015 um 7:54

Hi Marcus,

das ist im Prinzip kein Problem, hier ist ein Beispielcode:

$klima = get_field( 'mein_klima_feldname' );
$winterreifen = get_field( 'mein_winterreifen_feldname' );

<strong>Klima:</strong> <?php echo ('1' == $klima ? 'Ja' : 'Nein') ?>
<strong>Winterreifen:</strong> <?php echo ('1' == $winterreifen ? 'Ja' : 'Nein') ?>

Weitere Informationen findest du hier: http://www.advancedcustomfields.com/resources/get_field/

Antworten
Avatar von stefan

stefan 22. August 2015 um 14:18

Hallo Christian,

das Plugin scheint genau das zus ein, was ich schon ewig suche. Mein Problem ist, dass ich nicht die geringst Ahnung von Code und php-Datein habe. Meine Felder erscheinen nun also im Texteditor und ich kann sie schön ausfüllen, doch im Artikel selbst erscheinen sie dann nicht. Gibt es keine Möglichkeit die Felder wie Widgets einfach in der Theme-Anpassung dahin zuziehen, wo sie sein sollen (Sidebar)? Das Grandiose bei WordPress ist ja, dass man keine Programmierer-Skills braucht, dachte ich…. Danke schonmal für den super Service, der hier geboten wird! Top!

Antworten
Avatar von Dirk Schmidt

Dirk Schmidt 5. September 2015 um 19:40

Hallo,
ist dieses Plugin auch kompatibel mit der neuen WordPress Version 4.3?

Grüße
Dirk Schmidt

Antworten
Avatar von Christian

Christian 17. September 2015 um 10:33

Hallo Dirk,

natürlich. In der neusten Version des Plugins.

Gruß
Christian

Antworten
Avatar von Patrick

Patrick 22. Dezember 2015 um 14:36

Hallo
hast du dich mit dem Thema „Frontend Formulare“ auseinander gesetzt? Denn dies ist mein nächstes Thema und habe noch keinen Ansatz gefunden.

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*