Erste Schritte mit erweiterten benutzerdefinierten Feldern

In diesem Tutorial werde ich Ihnen die Grundlagen der Verwendung des ACF-Plugins (Advanced Custom Fields) zeigen. ACF ist ein ziemlich großes Plugin, daher wird in diesem Artikel nicht alles erklärt, was es bietet, aber es sollte ausreichen, um mit dem Hinzufügen eigener Metadaten und deren Anzeige in Ihrem Thema zu beginnen. 

Zum Zeitpunkt des Schreibens gibt es zwei Versionen von ACF: 4 und 5. Dieser Artikel basiert auf Version 4, sollte jedoch auch gelten, wenn Sie Version 5 verwenden.

Was ist erweiterte benutzerdefinierte Felder?

Advanced Custom Fields ist eine Benutzeroberfläche zum Hinzufügen von benutzerdefinierten Feldern oder Metadaten zu WordPress. Mit benutzerdefinierten Feldern können Sie Ihre Posts oder Seiten mit mehr Daten erweitern. Schauen wir uns ein allgemeines Szenario an:

Sie haben einen Beitragstyp aufgerufen Film Und Sie möchten eine Bewertung von zehn Punkten zusammen mit anderen Daten am Ende jeder Ihrer Bewertungen anhängen. Jetzt können Sie diese Daten einfach in Ihren Post einfügen, aber wenn Sie diese Daten später auf andere Weise verwenden möchten? Vielleicht möchten Sie die Bewertung über Ihre Bewertung verschieben. In diesem Fall müssten Sie jede Bewertung manuell bearbeiten und diese Bewertung manuell verschieben - nicht großartig.

WordPress verfügt über integrierte Funktionen zum Erstellen benutzerdefinierter Felder, diese enthalten jedoch nur grundlegende Funktionen und erfordern die programmgesteuerte Erstellung von Feldern. ACF verfügt über viele integrierte Feldtypen, darunter einige:

• Text
• Email
• WYSIWYG-Editor
• Bild
• Datei
• Kästchen auswählen
• Datumsauswahl
• Farbwähler

Zusätzlich zu den integrierten Feldern bietet ACF Ihnen eine Auswahl von Regeln, mit denen Sie bestimmen können, wo Felder in Ihrem WordPress-Administrator angezeigt werden. Dies ist sehr nützlich, um den Admin-Bereich so sauber wie möglich zu halten. Beispielsweise können Sie eine Gruppe benutzerdefinierter Felder nur anzeigen, wenn es sich um einen Beitragstyp handelt Bewertungen und Ihre Seitenvorlage ist vorgestellte Rezension.

Fertig machen

Bevor Sie mit dem Hinzufügen einiger Felder beginnen, müssen Sie das ACF-Plugin installieren. Gehen Sie dazu vom WordPress-Dashboard aus zu Plugins> Neu hinzufügen. Von dem Plugin hinzufügen Bildschirm suchen nach Erweiterte benutzerdefinierte Felder und klicken Sie auf Installieren. Stellen Sie sicher, dass Sie das Plugin aktivieren. Wenn es richtig installiert wurde, sollten Sie nun ein sehen Benutzerdefinierte Felder Menü in Ihrem WordPress-Admin.

In Anlehnung an das Thema einer Filmkritik-Website werden wir einige relevante Felder erstellen. Um diesem Tutorial folgen zu können, benötigen Sie einen benutzerdefinierten Beitragstyp Film. Um zu erfahren, wie Sie Post-Typen erstellen, gehen Sie zu diesem anderen großartigen Tuts + -Artikel. Die hier gezeigten Methoden funktionieren jedoch für viele andere Arten von benutzerdefinierten Feldern, und die Logik zum Erstellen und Anzeigen von Feldern bleibt gleich.

Feldgruppen erstellen

Feldgruppen sind genau das, was sie sagen: Feldgruppen. Am Beispiel eines Posttyps aufrufen Film, Wir möchten möglicherweise die folgenden Daten angeben:

• Jahr der Veröffentlichung
• Direktor
• Bewertung von zehn
• IMDb-Link

Diese Felder gehören logisch zu einer Gruppe, da sie sich alle auf den gleichen Beitragstyp beziehen. Mit den obigen Feldern können wir uns überlegen, welche Feldtypen wir für diese Daten benötigen.

• Jahr der Veröffentlichung: Nummer
• Direktor: Text
• Bewertung von zehn: Nummer
• IMDb-Link: Text (es gibt keinen URL-Feldtyp)

Klicken Sie auf, um mit dem Hinzufügen einer Feldgruppe zu beginnen Benutzerdefinierte Felder Menü in Ihrem WordPress-Dashboard. Klicken Sie jetzt auf Neue hinzufügen Taste. Sie werden nun mit der Neue Feldgruppe hinzufügen Bildschirm. Bevor wir irgendetwas anderes tun, geben wir unserer Feldgruppe einen Namen, indem Sie das Titelfeld eingeben Filmdaten.

Als Nächstes können wir alle unsere Felder hinzufügen. Drücke den Feld hinzufügen Taste, um zu beginnen. Sie sehen jetzt ein Formular mit den folgenden Feldern:

• Feldbezeichnung ist der Name, der beim Bearbeiten erscheint. Ich finde es nützlich, auf jedem meiner Felder mit demselben Präfix zu beginnen, z. Filmjahr, Regisseur, usw.
• Feldname ist der Name, den Sie in Ihrem Code verwenden, um das Feld anzuzeigen. Nach dem Eingeben der Feldbezeichnung sollte diese automatisch ausgefüllt werden. Dies ist ein einzelnes Wort ohne Leerzeichen, Bindestriche und Bindestriche sind jedoch zulässig. Zum Beispiel, Filmjahr als Feldbeschriftung würde sich in verwandeln movie_year als Feldname.
• Feldtyp ist ein einfaches Textfeld (obwohl ACF auch erweiterte Optionen bietet).
• Feldanweisungen sind Anweisungen, die Autoren sehen können, wenn sie die Daten auf dem Bearbeitungsbildschirm hinzufügen, z. "Das Filmjahr sollte immer das US-Veröffentlichungsdatum sein".
• Erforderlich ist eine Radiobox, in der Sie Ja oder Nein wählen. Wenn Sie "Ja" wählen, muss das Feld ausgefüllt werden, um auf der Nachbearbeitungsmaske gespeichert zu werden.
• Standardwert ist der Wert, der automatisch angezeigt wird, wenn ein neuer Beitrag erstellt wird.
• Platzhaltertext erscheint innerhalb Ihrer Eingabe auf dem Bearbeitungsbildschirm.
• Voranstellen definiertWas erscheint vor der Eingabe auf dem Bearbeitungsbildschirm.
• Anhängen legt fest, was nach der Eingabe auf dem Bearbeitungsbildschirm angezeigt wird.
• Formatierung gibtSie haben zwei Möglichkeiten: "HTML in Tags konvertieren" (Standardeinstellung) oder "keine Formatierung". HTML in Tags konvertieren bedeutet, dass jeglicher HTML-Code in Ihrer Eingabe auf dem Bildschirm dargestellt wird. Keine Formatierung bedeutet, dass HTML ignoriert wird.
• Zeichenbegrenzung erlaubt es uns, die Anzahl der Zeichen für eine Eingabe zu begrenzen. Zum Beispiel auf unserer Jahr Eingabe sollten wir die Zeichen auf vier beschränken.
• Bedingte Logik ist eine erweiterte Funktion, die wir in diesem Artikel nicht näher betrachten werden.

Diese Felder werden alle für angezeigt Text Feldtyp Auf einigen anderen Feldtypen werden einige dieser Optionen möglicherweise nicht angezeigt, oder es gibt einige zusätzliche Optionen. Da werden wir auch die verwenden Nummer Feldtyp stehen uns einige zusätzliche Optionen zur Verfügung:

• Mindestwert ist der Mindestwert, der im Feld zulässig ist. Für unser Ergebnis von zehn Feldern wäre es vernünftig, diesen Wert auf Eins zu setzen, da wir nichts als Null bewerten werden.
• Höchster Wert ist der maximal zulässige Zahlenwert im Feld. Wieder könnten wir dies für unser Score-of-Ten-Feld verwenden und den Wert zehn haben, da wir nicht wollen, dass dieser Wert überschritten wird.
• Schrittlänge Definiert den Wert, um den sich eine Zahl erhöht, wenn ein Pfeil gedrückt wird. Im Falle der Filmmusik wäre es eine gute Idee, diese als eins festzulegen.

So setze ich meine Felder ein:

• Feldbezeichnung: Filmjahr
• Feldname: movie_year
• Feldtyp: Nummer
• Erforderlich: Ja
• Mindestwert: 1900
• Höchster Wert: 2050

Beachten Sie die Mindest- und Höchstwerte hier. Ich habe diese Werte so eingestellt, dass sie einige grundlegende Validierungen enthalten. Es ist unwahrscheinlich, dass wir einen Film älter als 1900 und einen neueren als 2050 zu Lebzeiten der Website haben werden.

• Feldbezeichnung: Regisseur
• Feldname: Regisseur
• Feldtyp: Text
• Erforderlich: Ja
• Formatierung: Keine Formatierung

Da wir unsere Ausgabe in unserem HTML-Format formatieren, möchten wir nicht, dass Editoren hier HTML-Elemente hinzufügen können, die unser Layout beeinträchtigen könnten. Daher wurde hier "keine Formatierung" gewählt.

• Feldbezeichnung: Film Score
• Feldname: movie_score
• Feldtyp: Nummer
• Erforderlich: Ja
• Mindestwert: 1
• Höchster Wert: 10
• Schrittlänge: 1

Wieder haben wir hier einen minimalen und einen maximalen Wert gesetzt, um Validierung hinzuzufügen. Unsere Punktzahlen sind von zehn, und wir möchten nicht, dass die Redakteure eine höhere Punktzahl als diese einfügen können. Ebenso möchten wir keine eingefügten Werte, die niedriger als eins sind.

• Feldbezeichnung: Film-IMDb-Link
• Feldname: movie_imdb_link
• Feldtyp: Text
• Feldanweisungen: Fügen Sie hier die vollständige IMDb-URL ein. z.B. http://www.imdb.com/title/tt2015381/
• Erforderlich: Ja
• Formatierung: Keine Formatierung

Ich habe dieser Eingabe einige Feldanweisungen hinzugefügt, da es keine gibt URL Feldtyp, so dass es schwer zu überprüfen ist. Die Anweisungen sollen es Redakteuren erleichtern, die Verwendung des Feldes zu verstehen.

Nachdem Sie alle Felder hinzugefügt haben, klicken Sie auf die Schaltfläche Aktualisieren Taste. Sobald Sie auf diesen geklickt haben, sind Sie wieder im Feldgruppe bearbeiten Seite. Es gibt nur ein paar weitere Dinge, die wir auf diesem Bildschirm tun müssen, damit Ihre Felder korrekt funktionieren.

Unterhalb des Feldbereichs befindet sich eine Box Ort-Auf diese Weise können wir steuern, wo unsere benutzerdefinierten Felder angezeigt werden. Wir möchten nur, dass unsere benutzerdefinierten Felder angezeigt werden, wenn der Beitragstyp ist Film. Wählen Sie in der ersten Dropdown-Liste aus Post-Typ, in der zweiten Dropdown-Liste auswählen entspricht, und in der dritten Auswahl Film.

Als letztes müssen wir festlegen, wo unser benutzerdefiniertes Feld auf dem Bearbeitungsbildschirm angezeigt wird. Scrollen Sie dazu etwas weiter nach unten Optionen Sektion. Auf diese Weise können wir auswählen, wo die Metabox des benutzerdefinierten Felds angezeigt wird und um welchen Typ es sich handelt. Außerdem haben wir die Möglichkeit, andere Elemente aus unserem Bearbeitungsbildschirm auszublenden.

Die Optionen sind wie folgt:

• Best.-Nr: Wenn Sie mehrere Feldgruppen haben, werden diese in der Reihenfolge vom niedrigsten zum höchsten erstellt.
• Position hat drei Optionen:
• Seite
• Hoch (nach Titel)
• Normal (nach Inhalt)
• Stil: Standard oder nahtlos (siehe Abbildung unten für den Unterschied zwischen diesen beiden).
• Auf dem Bildschirm ausblenden: Dies ist eine Liste von Kontrollkästchen, in denen Sie Dinge ausblenden können, die Sie möglicherweise nicht benötigen, z. B. Tags, Kategorien oder Kommentare.

Die Optionen, die ich verwendet habe, sind:

• Position: Seite
• Stil: Normal

Der Rest wurde als Standardeinstellung beibehalten.

Sie können die Richtigkeit Ihrer Felder überprüfen, indem Sie einen neuen Beitrag erstellen (in diesem Fall in der Film Post-Typ). Wenn alles gut funktioniert hat, sehen Sie Ihre Metabox. Jetzt ist es an der Zeit, einige Testdaten hinzuzufügen.

Felder zum Thema hinzufügen

Nachdem Sie nun Ihre Feldgruppen erstellt haben und über einige Testdaten verfügen, können Sie damit beginnen, die Daten in Ihrem Thema oder untergeordneten Thema anzuzeigen.

Sie können das Standard-WordPress verwenden get_post_meta () funktionieren mit ACF, es wird jedoch empfohlen, dass Sie die eigenen Funktionen von ACF verwenden, da ACF die Werte abhängig von dem von Ihnen erstellten Feldtyp formatiert. Wir werden ACFs verwenden das Feld() Funktion. Diese Funktion zeigt Ihr benutzerdefiniertes Feld an und übernimmt einen Parameter des Feldnamens, zum Beispiel:

Lassen Sie uns unsere Metadaten angehen. Wir haben all diese Informationen in einer einzigen div.

 
 
: 
 
: 
 
: / 10
 
"target =" _ blank ">
 
 
 

Dieser Code ist ziemlich einfach - wir verwenden den _e Funktion, um unsere Zeichenfolgen zu internationalisieren und sie wiederzugeben, und dann das ACF verwenden das Feld() Methode, um den Wert des von uns erstellten Felds wiederzugeben. All dies wurde in einer ungeordneten Liste innerhalb eines div Element mit einer Klasse von Bewertungen-Meta, So können wir es mit unserem CSS anvisieren.

Wohin geht dieser Code? In diesem Fall erstellen Sie am besten eine neue Vorlage für Ihren Beitragstyp. Erstellen Sie dazu eine Kopie Ihres Themas single.php Datei und benennen Sie es single-postname.php-in unserem Fall single-movie.php. Jeden single.php sieht anders aus, aber alle sollten eines gemeinsam haben: eine WordPress-Schleife. Ihre WordPress-Schleife sollte ungefähr so ​​aussehen:

Ihre benutzerdefinierten Felder können außerhalb der Schleife liegen, und die genaue Position der Felder hängt davon ab, wie die Seite aussehen soll. In meinem Fall (unter Verwendung des Standard-Themas "Twenty Fourteen") habe ich sie direkt unter die Schleife gestellt und ein paar grundlegende Styling-Elemente für das verwendet .Bewertungen-Meta CSS-Klasse.

Fazit

Wir haben die Grundlagen des Advanced Custom Fields-Plugins behandelt. Das heißt, wir haben einige Felder hinzugefügt und zeigen sie jetzt auf unserer Website an. ACF hat jedoch noch viel mehr zu bieten und wir haben gerade die Oberfläche zerkratzt. Es gibt viele weitere Feldtypen, die Sie verwenden können, sowie erweiterte Funktionen wie z. B. bedingte Logik.

Bitte zögern Sie nicht, Fragen, Kommentare und allgemeines Feedback im untenstehenden Formular zu hinterlassen!