Hinzufügen von benutzerdefinierten Meta-Boxen in WordPress-Posts und Beitragstypen

Möchten Sie benutzerdefinierte Meta-Boxen für Ihre WordPress-Beiträge, Seiten und benutzerdefinierten Beitragstypen erstellen? Benutzerdefinierte Metaboxen werden häufig verwendet, um eine bessere Benutzeroberfläche zum Hinzufügen benutzerdefinierter Felder (Metadaten) in Ihren Inhalt bereitzustellen. In diesem Artikel wird erklärt, was eine benutzerdefinierte Meta-Box ist und wie Sie benutzerdefinierte Meta-Boxen in WordPress-Posts und Post-Typen problemlos hinzufügen können.

Was ist eine benutzerdefinierte Meta-Box in WordPress??

Benutzerdefinierte Meta-Box ist eine benutzerfreundlichere Benutzeroberfläche zum Hinzufügen benutzerdefinierter Felder (Metadaten) in Ihren Posts, Seiten und anderen benutzerdefinierten Beitragstypen.

WordPress verfügt über eine benutzerfreundliche Oberfläche, mit deren Hilfe Sie Inhalte wie Posts und Seiten oder benutzerdefinierte Posttypen erstellen können.

Normalerweise besteht jeder Inhaltstyp aus dem tatsächlichen Inhalt und seinen Metadaten. Metadaten sind Informationen zu diesem Inhalt wie Datum und Uhrzeit, Name des Autors, Titel und mehr. Sie können auch Ihre eigenen Metadaten hinzufügen, indem Sie benutzerdefinierte Felder verwenden.

Das Hinzufügen von Metadaten mithilfe des Standardfelds für benutzerdefinierte Felder ist jedoch nicht sehr intuitiv. Hier kommen benutzerdefinierte Meta-Boxen ins Spiel.

Mit WordPress können Entwickler eigene benutzerdefinierte Meta-Boxen auf Post-Edit-Bildschirmen erstellen und hinzufügen. So fügen die beliebtesten Plugins verschiedene Optionen in Ihren Bildbearbeitungsbildschirmen hinzu.

Beispielsweise ist das SEO-Titel- und Meta-Beschreibungsfeld in Yoast SEO Plugin eine benutzerdefinierte Meta-Box:

Lassen Sie uns jedoch sehen, wie Sie benutzerdefinierte Meta-Boxen in WordPress-Posts und -Post-Typen problemlos hinzufügen können.

Erstellen von benutzerdefinierten Meta-Boxen in WordPress

Zunächst müssen Sie das Plug-In für erweiterte benutzerdefinierte Felder installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Bei der Aktivierung fügt das Plugin Ihrer WordPress-Admin-Leiste einen neuen Menüpunkt mit der Bezeichnung "Benutzerdefinierte Felder" hinzu. Wenn Sie darauf klicken, gelangen Sie zur Seite mit benutzerdefinierten Feldern.

Diese Seite ist leer, da Sie noch keine benutzerdefinierten Felder erstellt haben. Fahren Sie fort und klicken Sie auf die Schaltfläche "Neu hinzufügen", um fortzufahren.

Sie gelangen auf die Seite 'Neue Feldgruppe hinzufügen'.

Hier müssen Sie einen Titel für Ihre Feldgruppe angeben. Dieser Titel wird als Titel Ihrer Meta-Box verwendet.

Danach können Sie Ihre Felder hinzufügen. Klicken Sie einfach auf die Schaltfläche "+ Feld hinzufügen", um Ihr erstes Feld hinzuzufügen.

Dadurch wird das Formular für die Feldeinstellungen geöffnet. Zuerst müssen Sie ein Etikett für Ihr Feld angeben. Dieses Label wird vor dem Feld in Ihrer Meta-Box angezeigt.

Danach müssen Sie den Feldtyp auswählen. Das erweiterte Plug-In für benutzerdefinierte Felder ermöglicht Ihnen die Auswahl aus einer ganzen Reihe von Optionen. Dazu gehören Text, Textbereiche, Optionsfelder, Kontrollkästchen, vollständiger WYSIWYG-Editor, Bilder und mehr.

Als Nächstes müssen Sie Feldanweisungen bereitstellen. Diese Anweisungen teilen den Benutzern mit, was sie in das Feld einfügen müssen.

Darunter finden Sie weitere Optionen für Ihr Feld. Sie müssen diese Optionen sorgfältig prüfen und an Ihre Bedürfnisse anpassen.

Klicken Sie anschließend auf die Schaltfläche zum Schließen des Felds, um das Feld auszublenden.

Wenn Sie Ihrer Metabox weitere Felder hinzufügen müssen, klicken Sie auf die Schaltfläche '+ Feld hinzufügen', um ein weiteres Feld hinzuzufügen.

Wenn Sie mit dem Hinzufügen von Feldern fertig sind, können Sie zum Standortabschnitt scrollen. Hier können Sie festlegen, wann und wo Ihre Meta-Box angezeigt werden soll.

Erweiterte benutzerdefinierte Felder enthält eine Handvoll vordefinierter Regeln, aus denen Sie auswählen können. Sie können beispielsweise Posttypen, Postkategorie, Taxonomie, übergeordnete Seite usw. auswählen.

Als Nächstes werden die Einstellungen für die MetaBox-Optionen angezeigt.

Zuerst müssen Sie die Bestellnummer auswählen. Wenn Sie für einen Ort mehrere Feldgruppen definiert haben, können Sie die Bestellnummer auswählen, die angezeigt werden soll. Wenn Sie sich nicht sicher sind, belassen Sie es als 0.

Als Nächstes müssen Sie die Position der Meta-Box auf der Seite auswählen. Sie können wählen, ob Sie es nach dem Inhalt, vor dem Inhalt oder in der rechten Spalte anzeigen möchten.

Darunter müssen Sie einen Stil für Ihre Meta-Box auswählen. Sie können es wie alle anderen WordPress-Meta-Boxen auswählen oder es kann nahtlos gewählt werden (ohne Meta-Box)..

Wenn Sie sich nicht sicher sind, wählen Sie die Option Standard (WP-Meta-Box).

Zuletzt wird eine Liste von Feldern angezeigt, die normalerweise auf einem Nachbearbeitungsbildschirm angezeigt werden. Wenn Sie ein bestimmtes Feld in Ihrem Beitragsbildschirm ausblenden möchten, können Sie es hier überprüfen. Wenn Sie sich nicht sicher sind, sollten Sie sie nicht aktivieren.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Veröffentlichen", um Ihre Feldgruppe live zu machen.

Herzlichen Glückwunsch, Sie haben Ihre benutzerdefinierte Meta-Box erfolgreich für Ihren WordPress-Beitrag oder -Typ erstellt.

Abhängig von Ihren Einstellungen können Sie jetzt Ihren Beitrag oder Ihren Beitragstyp besuchen, um Ihre benutzerdefinierte Meta-Box in Aktion zu sehen.

Mit dieser benutzerdefinierten Meta-Box können Sie Metadaten in Ihre Posts oder Posttypen einfügen. Diese Daten werden in Ihrer WordPress-Datenbank gespeichert, wenn Sie den Beitrag speichern oder veröffentlichen.

Anzeigen Ihrer benutzerdefinierten Meta-Box-Daten in WordPress-Theme

Bisher haben wir erfolgreich eine benutzerdefinierte Meta-Box erstellt und in unserem Post-Edit-Bildschirm angezeigt. Der nächste Schritt besteht darin, die in diesen Feldern gespeicherten Daten in Ihrem WordPress-Design anzuzeigen.

Zuerst müssen Sie die zuvor erstellte benutzerdefinierte Feldgruppe bearbeiten. Auf der Seite "Feldgruppe bearbeiten" werden Ihre benutzerdefinierten Felder und deren Namen angezeigt.

Sie benötigen diese Feldnamen, um sie auf Ihrer Website anzuzeigen.

Erweiterte benutzerdefinierte Felder können Sie dies auf zwei verschiedene Arten tun.

Erstens können Sie einen Kurzcode verwenden, um ein benutzerdefiniertes Feld in Ihrem Beitrag anzuzeigen.

[acf field = "article_byline"]

Sie können sie auch anzeigen, indem Sie Code in Ihre WordPress-Designdateien einfügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick in unsere Anleitung für Anfänger, wie Sie Code in WordPress kopieren und einfügen.

Sie müssen die Designdatei bearbeiten, in der Sie die Daten aus diesen Feldern anzeigen möchten. Zum Beispiel single.php, content.php, page.php usw..

Sie müssen sicherstellen, dass Sie den Code in die WordPress-Schleife einfügen. Der einfachste Weg, um sicherzustellen, dass Sie den Code in die Schleife eingeben, besteht darin, in Ihrem Code nach einer Zeile zu suchen, die folgendermaßen aussieht:

Sie können Ihren Code nach dieser Zeile und vor der Zeile einfügen, die die Schleife beendet:

Ihr benutzerdefinierter Feldcode würde ungefähr so ​​aussehen:

Dieser Code zeigt die Daten an, die in das Artikelfeld der benutzerdefinierten Meta-Box eingegeben wurden.

Beachten Sie, wie wir den Code in eine h2-Überschrift mit einer CSS-Klasse eingepackt haben. Dies hilft uns später beim Formatieren und Gestalten des benutzerdefinierten Felds, indem Sie benutzerdefiniertes CSS in unser Design einfügen.

Hier ist ein anderes Beispiel:

Vergessen Sie nicht, die Feldnamen durch Ihre eigenen Feldnamen zu ersetzen.

Sie können jetzt den Beitrag besuchen, in dem Sie die Daten bereits in Ihre benutzerdefinierten Felder eingegeben haben. Sie könnten dann Ihre benutzerdefinierten Metadaten sehen.

Advanced Custom Fields ist ein sehr leistungsfähiges Plugin mit vielen Optionen. Dieses Tutorial zerkratzt nur die Oberfläche. Wenn Sie weitere Hilfe benötigen, vergessen Sie nicht, die Plugin-Dokumentation zur weiteren Erweiterung zu lesen.

Wir hoffen, dass Sie in diesem Artikel erfahren haben, wie Sie benutzerdefinierte Meta-Boxen in WordPress-Posts und Post-Typen hinzufügen. Vielleicht möchten Sie auch unsere Schritt-für-Schritt-Anleitung, wie Sie die Geschwindigkeit und Leistung von WordPress für Anfänger steigern können.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.