Erste Schritte mit benutzerdefinierten WordPress-Feldern

Benutzerdefinierte Felder von WordPress sind eine wirklich großartige Funktion, die oft vernachlässigt wird. Sie ermöglichen es Ihnen, einem Bereich Ihrer Seite oder Ihres Beitrags „Metadaten“ hinzuzufügen, die sich auf allen Seiten oder Beiträgen wiederholen. Dies kann Ihnen eine Menge Zeit sparen, wenn Sie eine Website haben, auf der Sie die gleiche Art von Informationen auf mehreren Seiten veröffentlichen möchten.

Schauen Sie sich zum Beispiel einen regelmäßigen Blog-Beitrag auf Ihrer WordPress-Website an. Die Chancen stehen gut, dass Sie irgendwo auf der Seite einen Autorennamen und ein Datum sehen, das zeigt, wann der Artikel veröffentlicht wurde. Dies sind Metadaten und erscheinen in jedem Beitrag auf Ihrer Website.

Wie können Sie also Ihre eigenen Metadaten zu Ihren Beiträgen oder Seiten hinzufügen? Ganz einfach… mit einem benutzerdefinierten WordPress-Feld!

Natürlich könnten Sie diese Informationen in jedem Post manuell über den Seiten-/Post-Editor hinzufügen, aber dies ist zeitaufwändig und erfordert normalerweise eine sorgfältige Formatierung, wenn Sie sicherstellen möchten, dass alle Posts gleich aussehen. Wenn Sie viele Inhalte veröffentlichen, kann es lästig werden, dies jedes Mal tun zu müssen.

Die WordPress-Seiten- und Post-Editoren bieten sofort eine Menge Funktionalität und Flexibilität, wenn es um den Kerninhalt geht, der auf einer Seite oder einem Post erscheint. Aber wussten Sie, dass WordPress Benutzern auch die Möglichkeit bietet, Inhalte hinzuzufügen, die „außerhalb“ des Hauptbeitrags oder Seiteninhalts liegen? In diesem Artikel werden wir die Verwendung von benutzerdefinierten WordPress-Feldern beschleunigen, die Ihnen helfen, Ihre Posts besser zu organisieren und nützliche Informationen für Ihre Leser in einem großartig aussehenden Format hinzuzufügen.

Lass uns anfangen!

Was sind benutzerdefinierte Felder und Metadaten?

Inhalte wie Beiträge, Seiten, Benutzer, Kommentare und benutzerdefinierte Beitragstypen enthalten Metadaten, die in Ihrer Datenbank unter der Postmeta-Tabelle in einem Schlüssel/Wert-Paar gespeichert werden.

Die Informationen, die Sie normalerweise unter einem Post- oder Seitentitel sehen, wie der Name des Administrators, das Datum oder der Kommentarzähler, sind in den Metadaten des Posts enthalten.

Das benutzerdefinierte Feld ist ein zusätzliches Feld, in dem Sie zusätzliche Informationen für Ihren Beitrag hinzufügen können, und bildet auch einen Teil der Metadaten des Beitrags.

Benutzerdefinierte Felder gelten für Seiten, Beiträge oder benutzerdefinierte Beitragstypen und bestehen ebenfalls aus Schlüssel/Wert-Paaren. Der Schlüssel ist der „Name“ des Metadatenelements und der Wert sind die Daten, die mit dem Schlüssel verknüpft sind und für jeden Beitrag unterschiedlich sein können.

In WordPress können Sie benutzerdefinierte Felder hinzufügen, indem Sie die integrierte benutzerdefinierte Feldfunktion verwenden, oder Sie können noch einen Schritt weiter gehen, indem Sie ein benutzerdefiniertes Feld-Plugin verwenden, das die Kontrolle über ein benutzerdefiniertes Feld weiter verbessert. Wir werden uns beide Optionen in diesem Artikel ansehen.

Fügen Sie benutzerdefinierte Felder mit benutzerdefinierten WordPress-Feldern hinzu

Die eingebauten Einstellungen für benutzerdefinierte WordPress-Felder sind standardmäßig ausgeblendet, was erklärt, warum Sie möglicherweise nicht wussten, dass diese Funktion existiert. Um es zu verwenden, müssen wir es zuerst aktivieren.

Wenn Sie den klassischen WordPress-Editor verwenden (dh nicht Gutenberg), öffnen Sie einen neuen Beitrag und gehen Sie zum Anfang dieses Beitrags. Auf der rechten Seite sehen Sie ein Feld mit der Aufschrift „Bildschirmoptionen“. Klicken Sie darauf und ein Dropdown-Menü mit Kontrollkästchen darin wird angezeigt. Darin sollten Sie eines mit der Aufschrift „Benutzerdefinierte Felder“ sehen. Markieren Sie dies, um sie zu aktivieren.

Wenn Sie Gutenberg verwenden, klicken Sie auf das „drei Punkte“-Symbol, das oben rechts in einem Beitrag erscheint. Es erscheint ein Menü und unten in diesem Menü sollte „Optionen“ stehen. Klicken Sie darauf und ein neues Popup-Menü mit Kontrollkästchen wird angezeigt. In dieser Liste sollten Sie eines mit der Aufschrift „Benutzerdefinierte Felder“ sehen. Aktivieren Sie dieses Kontrollkästchen und schließen Sie dann das Popup-Menü.

Nächste Schritte – Hinzufügen Ihrer benutzerdefinierten Felder

Das Hinzufügen Ihrer benutzerdefinierten Felder ist eigentlich ziemlich einfach. Nachdem Sie sie wie oben beschrieben aktiviert haben, gehen Sie zum Ende Ihres Beitrags und Sie sollten einen neuen Abschnitt namens (Sie haben es erraten) „Benutzerdefinierte Felder“ sehen.

Im Abschnitt "Benutzerdefinierte Felder" sehen Sie zwei Felder, "Name" und "Wert". Das Feld „Name“ enthält einige vorbelegte Standardwerte, die sich auf vorhandene Felder beziehen, die zu Ihrer WordPress-Website hinzugefügt wurden. In unserem Fall möchten wir unser eigenes neues Feld hinzufügen. Klicken Sie dazu auf den Text „Neu eingeben“, der sich unter dem Feld „Name“ befindet.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

In diesem Beispiel möchten wir einen Link zu einer externen Website erstellen, die als Quelle für einen von uns verfassten Artikel verwendet wurde. Wir nennen dieses Feld „Quelle“. Klicken Sie auf den Text „Neu eingeben“ und geben Sie dann „Quelle“ ein, gefolgt von einer URL zu einer Website Ihrer Wahl im Abschnitt „Wert“. Das wird so aussehen:

Beim nächsten Mal brauchen Sie nicht auf den Text „Neu eingeben“ zu klicken und „Quelle“ manuell einzugeben. Es erscheint nun in der Dropdown-Liste der Werte.

Wenn Sie Zugriff auf Ihre Datenbank haben (z. B. über phpMyAdmin), können Sie die Postmeta-Tabelle öffnen, die Tabelle nach der von Ihnen bearbeiteten Post-ID filtern und Sie sollten das neue benutzerdefinierte Feld mit seinem Wert sehen.

Nachdem wir nun bestätigt haben, dass das benutzerdefinierte Feld ordnungsgemäß für den Beitrag gespeichert ist, sehen wir uns an, wie wir es im Frontend unseres Beitrags anzeigen können, wo unsere Website-Besucher es sehen können!

Anzeigen der Werte der benutzerdefinierten Felder

Um unseren neuen benutzerdefinierten Feldwert in unserem Beitrag anzuzeigen, müssen wir etwas Code zu unserer Vorlagendatei für einzelne Beiträge hinzufügen. Normalerweise ist dies in der singular.php -Datei zu finden, die sich im Hauptordner des Themes befindet. In unserem Fall (Theme Twenty Twenty) befindet es sich in der Datei /wp-content/themes/twentytwenty/template-parts/content.php .

Wir werden die Kernfunktion get_post_meta verwenden, die WordPress bereitstellt, um das Metafeld eines Beitrags aus der Datenbank abzurufen. Die Struktur der Funktion ist wie folgt:

 get_post_meta( $post_id, $key, $single )

Das einzige erforderliche Argument ist die $post_id . Das $key Argument ist der abzurufende Metaschlüssel und das $single Argument definiert, ob ein einzelner Wert zurückgegeben wird, und ist nutzlos, wenn $key überhaupt nicht definiert ist.

Wenn nur die $post_id deklariert wird, ist das Ergebnis ein Array mit allen Schlüsseln, die sich auf den jeweiligen Beitrag beziehen. Wenn Sie also einfach get_post_meta( $post_id ) einfügen, erhalten Sie etwa Folgendes:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Wenn Sie get_post_meta( $post_id, 'filed1_key' ) , erhalten Sie so etwas wie Array ( [0] => value1 ) und wenn Sie get_post_meta( $post_id, 'filed1_key', true ) wie zuvor verwenden, erhalten Sie nur value1 .

Außerdem möchten Sie in einigen Beiträgen möglicherweise das Quellfeld nicht definieren, daher müssen wir in den Code eine Prüfung einfügen, um zu sehen, ob das Feld für den Beitrag vorhanden ist.

In Anbetracht dessen würde der Code, den wir verwenden müssen, wie folgt aussehen:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Wir fügen den Code direkt nach dem Inhalt des Beitrags ein, sodass der Code innerhalb des HTML-Div mit der Klasse „entry-content“ so aussieht:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Sehen wir uns nun an, was wir erreicht haben, indem wir einen neuen Beitrag öffnen und uns ansehen, wie dieser Inhalt im Frontend erscheinen würde.

Wir erinnern Sie daran, dass Sie, wenn Sie Schwierigkeiten haben, die Vorlagendatei zu finden, die Ihrer einzelnen Beitragsansicht entspricht, das WordPress-Vorlagenhierarchiediagramm konsultieren können.

Natürlich wird es noch einiges zu tun geben, um diese Ausgabe zu stylen. Dies würde den Rahmen dieses Artikels sprengen, aber wir werden es in einem zukünftigen Beitrag behandeln.

Hinzufügen von benutzerdefinierten Feldern mit einem Plugin

Das Advanced Custom Fields-Plugin ist eines der besten verfügbaren Plugins, mit dem Sie schnell benutzerdefinierte Felder zu Ihrer WordPress-Website hinzufügen und eine weitere Kontrolle über Ihre benutzerdefinierten Felddaten erhalten. Mit dem Builder können Sie ganz einfach benutzerdefinierte Felder erstellen, die dann zu Ihren Beiträgen, Benutzern, Taxonomien, Medien, Kommentaren und sogar benutzerdefinierten Optionsseiten hinzugefügt werden können.

Erstellen Sie Ihre benutzerdefinierten Felder mit ACF

Gehen Sie nach der Installation und Aktivierung des ACF-Plugins zu „Benutzerdefinierte Felder > Feldgruppen“, wo die registrierten Felder angezeigt werden.

Klicken Sie auf die Schaltfläche „Neu hinzufügen“, um mit der Erstellung Ihrer Felder zu beginnen. Diese können dann auch zu Gruppen zusammengefasst werden.

Es stehen Ihnen unzählige Optionen zur Verfügung, die das Verhalten Ihrer benutzerdefinierten Felder verbessern. Neben der Grundkonfiguration, die die Feldbezeichnung und den Namen enthält, können Sie auch den Typ des Felds definieren, festlegen, ob das Feld erforderlich ist, den Standardwert ändern, den Platzhaltertext ändern und natürlich die Beitragstypen auswählen, von denen es eingefügt wird mit logischem Argument.

Außerdem sind einige weitere Einstellungen verfügbar, mit denen Sie das Erscheinungsbild des Felds ändern können (sehr hilfreich), und eine Liste mit Kontrollkästchen, mit denen Sie festlegen können, was auf den entsprechenden Bearbeitungsbildschirmen ausgeblendet werden soll.

Genial, oder?

Außerdem können Sie im ACF-Tools-Menü Gruppen von Feldern in einem JSON-Format exportieren oder importieren, um die Arbeit zu beschleunigen, wenn diese bereits an anderer Stelle erstellt wurden.

Ein ausgearbeitetes Beispiel mit erweiterten benutzerdefinierten Feldern

Angenommen, wir haben einen benutzerdefinierten Beitragstyp mit dem Namen „Bücher“ erstellt und möchten jedem Buchbeitrag einige benutzerdefinierte Felder wie Genre, Buchautor und Erscheinungsjahr hinzufügen. Als erstes sollten wir die Gruppe von Feldern und die enthaltenden Felder wie folgt erstellen:

Wie Sie sehen, verwenden nicht alle Felder den gleichen Typ.

• Das Feld Autor ist ein einfaches Textfeld, in das wir den vollständigen Namen des Autors eintragen.
• Das Genre-Feld ist ein Auswahlfeld und muss mehrere Werte annehmen. Ein Buch kann mehr als einem Genre zugeordnet werden.
• Die vordefinierten Auswahlmöglichkeiten für das Genre müssen in der Auswahlbox jeweils in einer eigenen Zeile eingefügt werden.

Das Cover-Feld sollte ebenfalls ein Einzelwert-Auswahlfeld mit den vordefinierten Auswahlmöglichkeiten sein.

Lassen Sie uns jetzt loslegen und einen Buchbeitrag bearbeiten. Die Felder erscheinen schön gruppiert in der Seitenleiste.

Wenn Sie die Position der Feldgruppe ändern möchten, gehen Sie bitte zu den entsprechenden Einstellungen:

Füllen Sie die Felder sowie einige Testinhalte für den Artikel aus und aktualisieren Sie den Beitrag. Wenn Sie an dieser Stelle die Vorderansicht des Buchposts besuchen, werden Sie feststellen, dass immer noch nichts in Bezug auf unsere benutzerdefinierten Felder angezeigt wird.

Zeigen Sie Ihre benutzerdefinierten ACF-Felder an

Sie können die benutzerdefinierten Felder ganz einfach in der Vorlage Ihres Designs anzeigen, indem Sie die benutzerfreundlichen Funktionen des ACF-Plugins verwenden. Zwei davon sind:

• get_field() – Gibt den Wert eines bestimmten Felds zurück.
• the_field() – Zeigt den Wert eines bestimmten Felds an.

Dies sind die am häufigsten verwendeten Funktionen mit dem ACF-Plugin. Wenn Sie die vollständige Liste der Plugin-Funktionen sehen möchten, können Sie die offizielle Dokumentation besuchen, um mehr zu erfahren.

Um Ihr benutzerdefiniertes Feld in der Post-View-Vorlage auszugeben, müssen Sie also etwas Code hinzufügen, ähnlich wie wir es bei der Verwendung der standardmäßigen benutzerdefinierten WordPress-Felder getan haben. Stattdessen verwenden wir diesmal jedoch die Funktionen des ACF-Plugins. Da wir das Twenty Twenty-Theme verwenden, müssen wir die content.php-Datei im twentytwenty/template-parts/ bearbeiten. Direkt nach dem Schließen des inneren Abschnitts fügten wir die folgenden Zeilen hinzu:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

In der Vorderansicht sehen wir nun die benutzerdefinierten Felder.

Das Genre-Feld wird jedoch nicht korrekt angezeigt. Das liegt daran, dass es mehrere Werte enthält, daher gibt die get_field Funktion ein Array zurück. Um dies zu beheben, müssen wir das Array in eine Reihe seiner Werte konvertieren. Dies ist in PHP einfach, indem die Funktion implode() verwendet wird.

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Wenn Sie einige Felder, aber nicht alle in bestimmten Posts selektiv anzeigen möchten, können Sie dies tun, indem Sie einige ACF-Shortcodes verwenden. Öffnen Sie dazu Ihren Beitrag und fügen Sie dann für jedes Feld einen Shortcode-Gutenberg-Block hinzu und geben Sie einen Shortcode wie diesen ein:

 [acf field="MY_CUSTOM_FIELD"/]

Ersetzen Sie MY_CUSTOM_FIELD durch den Namen des Felds und das sollte perfekt funktionieren.

Wie wir sehen können, bietet uns die Verwendung des Advanced Custom Fields-Plugins eine fantastische Flexibilität, um benutzerdefinierte Felder zu erstellen und sie dort anzuzeigen, wo wir wollen.

Fazit

Die Funktion „Benutzerdefinierte Felder“ in WordPress wird von Entwicklern in der gesamten Branche verwendet, um ihren Websites eine bessere Struktur und Lesbarkeit zu verleihen. Es ist eine weitere herausragende WordPress-Funktion, die wieder einmal erklärt, warum WordPress so beliebt ist. Hoffentlich hat Ihnen dieser Artikel die Informationen gegeben, die Sie benötigen, um Ihre eigenen benutzerdefinierten Felder zu Ihrer Website hinzuzufügen. Viel Spaß beim Entwickeln!

Siehe auch

WordPress Admin-Listentabellen: Fügen Sie benutzerdefinierte Filter hinzu
Hinzufügen von benutzerdefinierten Feldern zu WordPress-Menüelementen