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

Möchten Sie benutzerdefinierte Meta-Boxen für Ihre WordPress-Beiträge, Seiten und benutzerdefinierten Beitragstypen erstellen?

WordPress fügt Ihren Inhalten automatisch Metadaten hinzu, z. B. das Veröffentlichungsdatum, Kategorien und Tags. Sie können jedoch auch Ihre eigenen Metadaten hinzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einzigartige Informationen zu Ihrem Inhalt hinzufügen können, indem Sie ein benutzerdefiniertes Metadatenfeld in WordPress erstellen.

Was ist eine benutzerdefinierte Meta-Box in WordPress?

Wenn Sie Beiträge und Seiten oder benutzerdefinierte Beitragstypen in WordPress erstellen, hat dieser Inhalt normalerweise seine eigenen Metadaten. Diese Metadaten sind Informationen, die sich auf den Inhalt beziehen, wie Datum und Uhrzeit, Name des Autors, Titel und mehr.

Sie können auch Ihre eigenen Metadaten hinzufügen, indem Sie das Standardfeld für benutzerdefinierte Felder verwenden.

Profi-Tipp: Sie können das Feld Benutzerdefinierte Felder im Beitragseditor nicht sehen? Dann sehen Sie sich unsere Anleitung an, wie man benutzerdefinierte Felder in WordPress anzeigt.

Das Feld „Benutzerdefinierte Felder“ ist eine gute Lösung, wenn Sie nur ein paar Beiträgen benutzerdefinierte Metadaten hinzufügen möchten. Wenn Sie jedoch vorhaben, Ihrem Inhalt viele einzigartige Informationen hinzuzufügen, ist es sinnvoll, ein benutzerdefiniertes Metadatenfeld zu erstellen.

Tatsächlich fügen viele der beliebten WordPress-Plugins benutzerdefinierte Meta-Boxen in den Bearbeitungsbildschirm für Beiträge und Seiten ein. In der folgenden Abbildung sehen Sie, wie einfach es ist, Ihrem Beitrag SEO-Informationen hinzuzufügen, indem Sie ein von AIOSEO bereitgestelltes benutzerdefiniertes Metakästchen verwenden.

Sehen wir uns nun an, wie Sie ganz einfach benutzerdefinierte Meta-Boxen in WordPress-Beiträge und -Post-Typen einfügen können.

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

Der einfachste Weg, benutzerdefinierte Meta-Boxen zu WordPress hinzuzufügen, ist die Verwendung von Advanced Custom Fields. Mit diesem Plugin können Sie alle Arten von zusätzlichen Informationen an Ihre Beiträge und Seiten anhängen und diese Daten dann den Besuchern über einen Shortcode anzeigen.

Als Erstes müssen Sie das Advanced Custom Fields-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Erstellen einer benutzerdefinierten Meta-Box

Besuchen Sie nach der Aktivierung die Seite ACF “ Feldgruppen in der WordPress-Administrationsleiste.

Klicken Sie hier auf die Schaltfläche „Neu hinzufügen“.

Sie können nun die benutzerdefinierten Felder erstellen, die im Metadatenfeld erscheinen sollen.

Zu Beginn müssen Sie einen Titel in das Feld eingeben, das standardmäßig „Feldgruppentitel“ anzeigt. Dieser Titel erscheint im WordPress-Inhaltseditor und wird als Titel für Ihr Metafeld verwendet.

Trotzdem sollten Sie etwas Beschreibendes verwenden, insbesondere wenn Sie einen WordPress-Blog mit mehreren Autoren verwalten oder das Dashboard mit anderen Personen teilen.

Sobald das erledigt ist, können Sie das erste Feld zu Ihrem Metakasten hinzufügen.

Benutzerdefinierte Felder zur WordPress-Meta-Box hinzufügen

Öffnen Sie zunächst die Dropdown-Liste „Feldtyp“ und wählen Sie die Art des Feldes aus, das Sie hinzufügen möchten, z. B. das Datumsauswahl-, das Kontrollkästchen- oder das Textfeld.

Danach geben Sie eine Bezeichnung für das Feld ein.

Bei erweiterten benutzerdefinierten Feldern wird diese Beschriftung vor dem Feld angezeigt, damit die Benutzer wissen, welche Informationen sie eingeben müssen.

Erweiterte benutzerdefinierte Felder generieren den „Feldnamen“ automatisch, so dass Sie dieses Feld leer lassen können.

Anschließend können Sie einen „Standardwert“ eingeben. Dieser wird der Seite, dem Beitrag oder dem benutzerdefinierten Beitragstyp automatisch hinzugefügt, wenn der Benutzer keine eigenen Informationen hinzufügt.

Je nach Art des Feldes, das Sie erstellen, werden möglicherweise weitere Optionen angezeigt. Wenn Sie zum Beispiel „Bild“ aus dem Dropdown-Menü „Dateityp“ ausgewählt haben, können Sie das Bildformat wählen.

Die meisten dieser Optionen sind selbsterklärend, so dass Sie den Anweisungen auf dem Bildschirm folgen können, um das benutzerdefinierte Feld zu konfigurieren.

Wenn Sie mit der Einrichtung des Feldes zufrieden sind, klicken Sie auf die Schaltfläche „Feld schließen“, um den Abschnitt zu schließen.

Sie können nun weitere Felder zum benutzerdefinierten Metakasten hinzufügen, indem Sie auf die Schaltfläche „Feld hinzufügen“ klicken.

Dann konfigurieren Sie das Feld einfach nach demselben Verfahren wie oben beschrieben.

Hinzufügen einer benutzerdefinierten Meta-Box zum WordPress-Inhaltseditor

Wenn Sie mit der Einrichtung des benutzerdefinierten Metakästchens zufrieden sind, müssen Sie festlegen, wo und wann das Metakästchen erscheinen soll.

Blättern Sie dazu zum Abschnitt „Einstellungen“ und klicken Sie dann auf die Registerkarte „Standortregeln“.

Erweiterte benutzerdefinierte Felder können das Feld zu allen Arten von Inhalten hinzufügen. Zum Beispiel können Sie die Meta-Box bei bestimmten Beitragstypen, Kategorien, Taxonomien, Navigationsmenüs und mehr anzeigen.

Verwenden Sie einfach die Dropdown-Menüs, um auszuwählen, wo das Metakästchen in Ihrem WordPress-Dashboard erscheinen soll. Wenn Sie beispielsweise Gastbeiträge akzeptieren, können Sie das Feld zu allen Beiträgen in der Kategorie „Gastbeiträge“ hinzufügen.

Klicken Sie anschließend auf die Registerkarte „Präsentation“.

Hier können Sie den Stil der Metabox auswählen, wo sie in Ihrem WordPress-Blog erscheint und wo die Beschriftung und die Anweisungen angezeigt werden sollen.

Wenn Sie mehrere Boxen am selben Ort hinzufügen möchten, können Sie die Reihenfolge ändern, indem Sie in das Feld „Bestellnummer“ tippen.

So kann beispielsweise die Anzeige der wichtigsten Metakästen am oberen Rand des Bildschirms den redaktionellen Workflow verbessern.

Wenn Sie unsicher sind, können Sie dieses Feld auf 0 setzen.

Auf diesem Bildschirm sehen Sie auch eine Liste mit allen Feldern, die WordPress normalerweise auf dem Bearbeitungsbildschirm für Beiträge anzeigt.

Wenn Sie ein Feld ausblenden möchten, aktivieren Sie einfach das entsprechende Kästchen. Wenn Sie zum Beispiel benutzerdefinierte Felder verwenden, um ein Autoreninformationsfeld zu erstellen, können Sie das Standardfeld „Autor“ ausblenden.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie auf „Änderungen speichern“, um die Feldgruppe zu aktivieren.

Sie haben nun erfolgreich ein benutzerdefiniertes Metakästchen für Ihren WordPress-Beitrag, Ihre Seite oder Ihren benutzerdefinierten Beitragstyp erstellt. Je nach Ihren Einstellungen können Sie nun den Beitragseditor besuchen, um das benutzerdefinierte Metakästchen in Aktion zu sehen.

Anzeige Ihrer benutzerdefinierten Meta-Box-Daten im WordPress-Theme

Sie haben nun erfolgreich ein benutzerdefiniertes Metafeld zum WordPress-Dashboard hinzugefügt. Alle Informationen, die Benutzer in das Metafeld eingeben, werden in der WordPress-Datenbank gespeichert, wenn sie den Beitrag speichern oder veröffentlichen. Diese Informationen werden jedoch nicht standardmäßig auf Ihrer Website angezeigt.

Stellen wir also sicher, dass die benutzerdefinierten Metadaten in Ihrem WordPress-Theme angezeigt werden, damit die Besucher sie sehen können.

Sie können dies mit Hilfe von Shortcodes oder durch Bearbeiten Ihrer WordPress-Theme-Dateien tun.

Wie man benutzerdefinierte Metadaten mit Shortcode anzeigt

DasHinzufügen eines Shortcodes in WordPress ist die einfachste Methode, mit der Sie genau steuern können, wo die Informationen auf Ihrer Website erscheinen.

Wenn Sie z. B. ein Feld „Sternebewertung“ erstellt haben, können Sie diese Informationen nach dem Titel des Beitrags, innerhalb des Inhalts, in der Fußzeile oder an einem anderen Ort anzeigen, indem Sie einfach einen Shortcode hinzufügen.

Allerdings müssen Sie jeder Seite, jedem Beitrag oder jedem benutzerdefinierten Beitragstyp manuell einen Shortcode hinzufügen. Das kann viel Zeit und Mühe kosten, vor allem wenn Sie viele Inhalte haben.

Um den Shortcode eines Feldes zu erhalten, gehen Sie zu ACF “ Feldgruppen. Bewegen Sie dann den Mauszeiger über die Feldgruppe, die Sie anzeigen möchten, und klicken Sie auf den Link „Bearbeiten“, wenn er erscheint.

Sie sehen nun alle Felder, aus denen sich diese Gruppe zusammensetzt.

Notieren Sie für jedes Feld, das Sie anzeigen möchten, den Wert im Feld „Name“.

Wechseln Sie anschließend zu der Seite, dem Beitrag oder dem benutzerdefinierten Beitragstyp, auf der/dem Sie die benutzerdefinierten Metadaten anzeigen möchten.

Sie können nun auf das „+“-Symbol klicken und „Shortcode“ eintippen.

Wenn der richtige Block angezeigt wird, klicken Sie darauf, um ihn zu Ihrem Layout hinzuzufügen.

Sie können nun den folgenden Shortcode in den Block einfügen, wobei Sie "article_byline" durch den Namen des Feldes ersetzen müssen, das Sie anzeigen möchten

Sie können nun diese Schritte wiederholen, um dem Beitrag mehrere benutzerdefinierte Felder hinzuzufügen.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie entweder auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“. Besuchen Sie jetzt einfach Ihre WordPress-Website, um die benutzerdefinierten Metadaten in Aktion zu sehen.

So zeigen Sie benutzerdefinierte Metadaten an, indem Sie Ihr WordPress-Theme bearbeiten

Wenn Sie benutzerdefinierte Metadaten auf jeder Seite, jedem Beitrag oder jedem benutzerdefinierten Beitragstyp an der gleichen Stelle anzeigen möchten, können Sie Code zu Ihren WordPress-Theme-Dateien hinzufügen.

Das kann Ihnen langfristig Zeit sparen, ist aber nicht die anfängerfreundlichste Methode. Außerdem verlieren Sie den gesamten benutzerdefinierten Code, wenn Sie Ihr WordPress-Theme das nächste Mal aktualisieren, weshalb wir empfehlen, ein Child-Theme zu erstellen. Sie können dann Ihren benutzerdefinierten Code in das Child-Theme einfügen.

Wenn Sie Ihre Theme-Dateien noch nicht bearbeitet haben, werfen Sie einen Blick auf unsere Anleitung für Anfänger zum Kopieren und Einfügen von Code in WordPress.

Sie müssen die Datei bearbeiten, in der Sie die benutzerdefinierten Metadaten anzeigen möchten. Dies hängt von Ihrem Thema ab, aber normalerweise müssen Sie die Datei single.php, content.php oder page.php Ihrer Website bearbeiten.

Sobald Sie die richtige Datei haben, müssen Sie den Code in die WordPress-Schleife einfügen. Um diese Schleife zu finden, suchen Sie einfach nach dem folgenden Code, der in etwa so aussieht:

	<?php while ( have_posts() ) : the_post(); ?>

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

	<?php endwhile; // end of the loop. ?>

Der Code Ihres benutzerdefinierten Feldes sollte zum Beispiel so aussehen:

	<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Beachten Sie, dass wir den Code in eine h2-Überschrift mit einer CSS-Klasse eingebettet haben. So können wir das benutzerdefinierte Feld später formatieren und gestalten, indem wir benutzerdefinierte CSS zu unserem Thema hinzufügen.

Hier ein weiteres Beispiel:

<blockquote class="article-pullquote">
 
<?php the_field('article_pullquote'); ?>
 
</blockquote> 

Wenn Sie Code zu Ihrem Thema hinzufügen, vergessen Sie nicht, die Feldnamen zu ersetzen.

Danach können Sie jeden Beitrag besuchen, für den Sie bereits Daten in die benutzerdefinierten Felder eingegeben haben. Sie sehen nun Ihre einzigartigen Metadaten in Aktion.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man benutzerdefinierte Meta-Boxen in WordPress-Beiträge und -Post-Typen einfügt. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Erstellung automatisierter Workflows auf Ihrer WordPress-Website oder für unsere Expertenauswahl der besten SEO-Plugins und -Tools, die Sie verwenden sollten.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.