So fügen Sie benutzerdefinierte Meta-Boxen zu WordPress-Beiträgen und Beitragstypen hinzu

WordPress fügt Ihren Inhalten automatisch Metadaten hinzu, wie z. B. das Veröffentlichungsdatum, Kategorien und Schlagwörter. Möglicherweise möchten Sie jedoch auch Ihre eigenen benutzerdefinierten Metadaten hinzufügen.

Ob Sie zusätzliche Informationen sammeln, Ihren redaktionellen Prozess optimieren oder die Benutzeroberfläche verbessern müssen, Metaboxen können ein leistungsstarkes Werkzeug für flexibles Content-Management sein.

Bei WPBeginner verwenden wir benutzerdefinierte Meta-Boxen, um die Funktionalität unserer Beiträge und Seiten zu verbessern. Dies hat uns ein tieferes Verständnis der Vor- und Nachteile der Hinzufügung benutzerdefinierter Felder zur Optimierung von Inhalten verschafft.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrem Inhalt einfach einzigartige Informationen hinzufügen können, indem Sie eine benutzerdefinierte Metadaten-Box 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, Autorenname, Titel und mehr.

Sie können auch Ihre eigenen Metadaten mit dem Standardfeld benutzerdefinierte Felder hinzufügen.

Profi-Tipp: Die Box für benutzerdefinierte Felder wird im Beitragseditor nicht angezeigt? Dann lesen Sie unseren Leitfaden, wie Sie beheben, dass benutzerdefinierte Felder in WordPress nicht angezeigt werden.

Die Box für benutzerdefinierte Felder ist eine gute Lösung, wenn Sie nur wenigen Beiträgen benutzerdefinierte Metadaten hinzufügen möchten. Wenn Sie jedoch vorhaben, viele einzigartige Informationen zu Ihren Inhalten hinzuzufügen, ist es sinnvoll, eine benutzerdefinierte Metadatenbox zu erstellen.

Tatsächlich fügen viele der beliebten WordPress-Plugins benutzerdefinierte Metadatenfelder zum Bearbeitungsbildschirm für Beiträge und Seiten hinzu. Im folgenden Bild sehen Sie, wie einfach es ist, SEO-Informationen zu Ihrem Beitrag hinzuzufügen, indem Sie ein benutzerdefiniertes Metadatenfeld verwenden, das von AIOSEO bereitgestellt wird.

Nachdem dies gesagt ist, sehen wir uns an, wie Sie ganz einfach benutzerdefinierte Meta-Boxen in WordPress-Beiträgen und Beitragstypen hinzufügen können.

So fügen Sie benutzerdefinierte Meta-Boxen zu WordPress-Beiträgen und Beitragstypen hinzu

Der einfachste Weg, benutzerdefinierte Meta-Boxen zu WordPress hinzuzufügen, ist die Verwendung von Advanced Custom Fields. Dieses Plugin ermöglicht es Ihnen, alle Arten von zusätzlichen Informationen an Ihre Beiträge und Seiten anzuhängen und diese Daten dann über einen Shortcode für Besucher anzuzeigen.

Das Erste, was Sie tun müssen, ist das Plugin Advanced Custom Fields zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

Eine benutzerdefinierte Meta-Box erstellen

Besuchen Sie nach der Aktivierung die Seite ACF » Feldgruppen in der WordPress-Admin-Seitenleiste.

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

Sie können nun die benutzerdefinierten Felder erstellen, die im Metadatenfeld angezeigt werden.

Zuerst müssen Sie einen Titel in das Feld eingeben, das standardmäßig 'Field Group Title' anzeigt. Dieser wird im WordPress-Content-Editor angezeigt und dient als Titel Ihrer Meta-Box.

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

Sobald dies erledigt ist, können Sie das erste Feld zu Ihrer Meta-Box hinzufügen.

Benutzerdefinierte Felder zur WordPress-Metabox hinzufügen

Öffnen Sie zunächst das Dropdown-Menü „Feldtyp“ und wählen Sie den Feldtyp aus, den Sie hinzufügen möchten, z. B. den Datums-Picker, das Kontrollkästchen oder das Textfeld.

Geben Sie danach eine Bezeichnung für das Feld ein.

Advanced Custom Fields zeigt diese Beschriftung vor dem Feld an, sodass Benutzer besser verstehen, welche Informationen sie eingeben müssen.

Advanced Custom Fields generiert den 'Feldnamen' automatisch, sodass Sie dieses Feld leer lassen können.

Wenn Sie damit fertig sind, möchten Sie vielleicht einen 'Standardwert' eingeben. Dieser wird automatisch zur Seite, zum Beitrag oder zum benutzerdefinierten Beitragstyp hinzugefügt, wenn der Benutzer keine eigenen Informationen eingibt.

Möglicherweise sehen Sie weitere Optionen, abhängig von der Art des Feldes, das Sie erstellen. Wenn Sie beispielsweise „Bild“ aus dem Dropdown-Menü „Dateityp“ ausgewählt haben, können Sie das Bildformat auswählen.

Die meisten dieser Optionen sind selbsterklärend, sodass 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 minimieren.

Sie können jetzt weitere Felder zur benutzerdefinierten Meta-Box hinzufügen, indem Sie auf die Schaltfläche „Feld hinzufügen“ klicken.

Konfigurieren Sie dann einfach das Feld, indem Sie denselben oben beschriebenen Prozess befolgen.

Eine benutzerdefinierte Meta-Box zum WordPress-Content-Editor hinzufügen

Wenn Sie mit der Einrichtung der benutzerdefinierten Metabox zufrieden sind, müssen Sie definieren, wo und wann die Metabox angezeigt werden soll.

Scrollen Sie dazu zum Abschnitt „Einstellungen“ und klicken Sie dann auf den Tab „Standortregeln“.

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

Verwenden Sie einfach die Dropdown-Menüs, um auszuwählen, wo die Meta-Box in Ihrem WordPress-Dashboard angezeigt werden soll. Wenn Sie beispielsweise Gastbeiträge akzeptieren, möchten Sie die Box möglicherweise zu allen Beiträgen in der Kategorie „Gastbeiträge“ hinzufügen.

Klicken Sie danach auf den Tab 'Präsentation'.

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

Wenn Sie planen, mehrere Boxen an derselben Stelle hinzuzufügen, können Sie die Reihenfolge, in der sie erscheinen, ändern, indem Sie in das Feld 'Reihenfolge-Nr.' eingeben.

Zum Beispiel kann das Anzeigen der wichtigsten Meta-Boxen am oberen Bildschirmrand Ihren redaktionellen Workflow verbessern.

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

Auf diesem Bildschirm sehen Sie auch eine Liste aller Felder, die WordPress normalerweise auf dem Beitragsbearbeitungsbildschirm anzeigt.

Wenn Sie ein Feld ausblenden möchten, aktivieren Sie einfach das entsprechende Kontrollkästchen. Wenn Sie beispielsweise benutzerdefinierte Felder verwenden, um eine Autoreninformationsbox zu erstellen, möchten Sie möglicherweise das Standardfeld 'Autor' ausblenden.

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

Sie haben nun erfolgreich eine benutzerdefinierte Metabox für Ihren WordPress-Beitrag, Ihre Seite oder Ihren benutzerdefinierten Beitragstyp erstellt. Abhängig von Ihren Einstellungen können Sie nun den Beitragseditor aufrufen, um die benutzerdefinierte Metabox in Aktion zu sehen.

Anzeigen Ihrer benutzerdefinierten Metabox-Daten im WordPress-Theme

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

In diesem Sinne stellen wir sicher, dass die benutzerdefinierten Metadaten in Ihrem WordPress-Theme erscheinen, damit die Besucher sie sehen können.

Sie können dies mit einem Shortcode oder durch Bearbeiten Ihrer WordPress-Theme-Dateien tun.

Benutzerdefinierte Metadaten mit Shortcode anzeigen

Das Hinzufügen eines Shortcodes in WordPress ist die einfachste Methode und ermöglicht es Ihnen, genau zu steuern, wo die Informationen auf Ihrer Website erscheinen.

Wenn Sie beispielsweise ein Feld „Sternebewertung“ erstellt haben, können Sie diese Informationen nach dem Beitragstitel, im Inhalt, in der Fußzeile oder an einer beliebigen anderen Stelle anzeigen, indem Sie einfach einen Shortcode hinzufügen.

Sie müssen jedoch manuell einen Shortcode zu jeder Seite, jedem Beitrag oder jedem benutzerdefinierten Beitragstyp hinzufügen. Dies kann viel Zeit und Mühe kosten, insbesondere wenn Sie viele Inhalte haben.

Um den Shortcode eines Feldes zu erhalten, gehen Sie zu ACF » Feldgruppen. Fahren Sie dann mit der Maus ü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 diese Gruppe besteht.

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

Wenn Sie damit fertig sind, gehen Sie zu der Seite, dem Beitrag oder dem benutzerdefinierten Beitragstyp, auf dem Sie die benutzerdefinierten Metadaten anzeigen möchten.

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

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

Sie können nun den folgenden Shortcode zum Block hinzufügen und dabei "article_byline" durch den Namen des Feldes ersetzen, das Sie anzeigen möchten.

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

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie entweder auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“. Besuchen Sie nun 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 an derselben Stelle auf jeder Seite, jedem Beitrag oder jedem benutzerdefinierten Beitragstyp anzeigen möchten, können Sie Code zu Ihren WordPress-Theme-Dateien hinzufügen.

Dies kann Ihnen auf lange Sicht Zeit sparen, ist aber nicht die anfängerfreundlichste Methode. Sie verlieren auch den gesamten benutzerdefinierten Code bei der nächsten Aktualisierung Ihres WordPress-Themes, weshalb wir die Erstellung eines Child-Themes empfehlen. Sie können dann Ihren benutzerdefinierten Code zum Child hinzufügen.

Wenn Sie Ihre Theme-Dateien noch nie bearbeitet haben, werfen Sie einen Blick auf unseren Leitfaden für Anfänger zum Thema 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 Theme 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 ungefähr so aussieht:

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

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

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

Zum Beispiel sollte Ihr benutzerdefinierter Feldcode etwa so aussehen:

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

Beachten Sie, wie wir den Code in eine h2-Überschrift mit einer CSS-Klasse eingeschlossen haben. Dies ermöglicht es uns, das benutzerdefinierte Feld später zu formatieren und zu gestalten, indem wir benutzerdefiniertes CSS zu unserem Theme hinzufügen.

Hier ist ein weiteres Beispiel:

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

Vergessen Sie nicht, die Feldnamen zu ersetzen, wenn Sie Code zu Ihrem Theme hinzufügen.

Sobald dies erledigt ist, können Sie jeden Beitrag besuchen, in den Sie bereits Daten in die benutzerdefinierten Felder eingegeben haben. Sie sehen nun Ihre eindeutigen Metadaten in Aktion.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie benutzerdefinierte Meta-Boxen in WordPress-Beiträgen und Beitragstypen hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Anzeigen von Blog-Beitrags-Metadaten in Ihren WordPress-Themes und unser Tutorial zum Anpassen von WordPress-Auszügen (ohne Code) sehen.

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