In WordPress benutzerdefinierte Felder anlegen und ausgeben

Update: Dieser Beitrag wurde überarbeitet und erweitert - und mit neuem Datum wieder veröffentlicht
Nicht so leicht zu finden, aber auch WordPress Gutenberg bietet benutzerdefinierte Felder
Nicht so leicht zu finden, aber auch WordPress Gutenberg bietet benutzerdefinierte Felder

Wenn Sie in WordPress benutzerdefinierte Felder anlegen möchten, müssen Sie sich wahrscheinlich zuerst mal die entsprechende Metabox in der Beitragsbearbeitung zugänglich machen. Das ist wahrlich nicht schwer. Auch das eigentliche Anlegen eines solchen Custom Fields ist durchaus schnell erledigt. Das Ausgeben auf der Website hingegen erfordert schon ein wenig Fingerspitzengefühl.

Im Rahmen eines Kommentars kam jüngst die Frage auf, ob und wie sich seit dem Gutenberg Editor mit benutzerdefinierten Feldern arbeiten lässt.
Guter Anlass, diesen in die Jahre gekommenen Beitrag zu überarbeiten und mit Angaben für die Standardthemes Twenty Nineteen / Twenty / Twenty-One zu ergänzen.

Metabox für Benutzerdefinierte Felder hinzuschalten

Um überhaupt in WordPress benutzerdefinierte Felder anlegen und bearbeiten zu können, müssen Sie sich diese Metabox wahrscheinlich erst einmal hinzuschalten. Sollten Sie diese also nicht unterhalb des Texteingabefeldes sehen, klicken Sie in der Beitragsbearbeitung oben rechts auf Ansicht anpassen. Dort setzen Sie dann das passende Häkchen. Fortan wird WordPress diese Metabox für Sie immer direkt bereitstellen.

Metabox im Gutenberg Editor aktivieren

Das Vorgehen im Rahmen des Gutenberg Editors liest sich eigentlich ähnlich. Auch hier führt der Weg über Ansicht anpassen. Nur ist bei Gutenberg damit der Drei-Pünktchen-Button oben rechts neben dem Button für die Einstellungen gemeint.

Der Klick auf die drei Pünktchen legt ein Menü über die rechte Seitenspalte, das Sie wahrscheinlich schon kennen. Hier können Sie zum Beispiel den Vollbildmodus abschalten oder zum Code Editor wechseln. Ganz am Ende der Auswahl finden Sie die Voreinstellungen.

Der Klick auf die Voreinstellungen öffnet ein Fenster, das Ihnen Optionen für die Bereiche Allgemein, Design, Blöcke und Bedienfelder bietet. Und unter den Bedienfeldern finden Sie als Zusätzliche die benutzerdefinierten Felder, die WordPress nun Individuelle Felder nennt.

Der Weg lautet also: Ansicht anpassen > Voreinstellungen > Bedienfelder > Individuelle Felder.

Ob nun mit Classic oder Gutenberg Editor: Sind die Individuellen Felder einmal aktiviert, finden Sie die passende Metabox ganz unten in der Beitragsbearbeitung.

Wozu sind benutzerdefinierte Felder gut?

Metabox Individuelle Felder im Gutenberg Editor
Metabox Individuelle Felder im Gutenberg Editor

Benutzerdefinierte Felder bestehen aus zwei wesentlichen Angaben. Die erste betrifft den Namen des Feldes (linke Spalte), während die zweite für den tatsächlichen Inhalt, den Wert steht (rechte Spalte). Wert ist dabei der passende Begriff, denn so ein Feld kann durchaus mit 0 und 1 oder mit true im Gegensatz zu false arbeiten. So ein benutzerdefiniertes Feld kann aber auch sehr einfach gestrickt sein und nicht viel mehr als ein wenig Text ausgeben.

In der Tat arbeiten viele Themes und Plugins mit benutzerdefinierten Feldern. Wenn Sie mal auf Auswählen im Namen eines neu zu erstellenden Feldes klicken, werden Sie wahrscheinlich auf eine ganze Reihe von Namen stoßen. Bestenfalls können Sie die einem Theme oder Plugin sogar zuordnen. Aber wozu sie eigentlich gut sind und mit welchem Wert dieses Feld dann funktionieren könnte, ist meist nicht direkt ersichtlich.

Nun können Sie aber auch selbst benutzerdefinierte Felder anlegen. Das oft zitierte Beispiel lautet für den Namen Song und für den Wert den Titel des Stückes, das Sie während des Schreibens gehört haben. Nur habe ich mich da immer gefragt, wozu diese Mitteilung gut sein soll. Ein in meinen Augen besseres Beispiel ist die Angabe der passenden ISBN im Rahmen einer Buchrezension. Wann immer Sie also ein Buch besprechen, können Sie in Ihrem eigenen Feld mit dem Namen ISBN als Wert die konkrete ISBN des Buches angeben.

Sobald Sie ein solches Feld einmal angelegt haben, erscheint sein Name fortan in der Auswahl.

Drei Beispiele für benutzerdefinierte Felder

Im Folgenden zeige ich drei weitere Beispiele für eigene Felder, von denen ich denke, dass sie im passenden Kontext sinnvoll sein können:

  • ein Hinweis vor dem Beitragstext
  • eine zusätzliche kleine Überschrift zum Beitragstitel
  • ein werbender Hinweis direkt im Anschluss an den Beitragstext.

Wie im Fall der ISBN können die Werte für diese drei Felder pro Beitrag natürlich unterschiedlich sein. Es muss also nicht beim selben Hinweis oder derselben Überschrift bleiben. Das wäre nicht hilfreich.

Wenn Sie ein benutzerdefiniertes Feld ändern wollen, müssen Sie übrigens nicht den ganzen Beitrag aktualisieren. Es reicht, nach Eingabe der Änderungen das Feld zu aktualisieren. Schon ist die Änderung auch veröffentlicht. Gleiches gilt, wenn Sie Ihr Feld wieder löschen wollen.

Ein eigenes benutzerdefiniertes Feld anlegen

Wenn Sie in WordPress benutzerdefinierte Felder anlegen wollen, klicken Sie in der Metabox unterhalb des Namens auf Neu eingeben. Vergeben Sie dann einen Namen Ihrer Wahl, zum Beispiel Hinweis. Und fügen Sie schließlich den passenden Text in das Eingabefeld für den Wert ein. In meinem Beispiel lautet der Hinweistext: Dieser Beitrag erfordert HTML-Kenntnisse! Oder auch: Achtung, Achtung: Dieser Beitrag ist nichts für zarte Gemüter!

Wenn Sie nun auf Benutzerdefiniertes Feld hinzufügen klicken, ist die Arbeit zu knapp 50 Prozent schon getan. Denn nun müssen Sie erst noch dafür sorgen, dass dieses Feld auch auf der Website erscheint. Das funktioniert im Allgemeinen nicht aus sich heraus, sondern erfordert den Eingriff in die entsprechende Template-Datei.

Bemerke jedoch: Ohne Child Theme sollten Sie keine Änderungen an Ihren Template-Dateien vornehmen, sonst sind diese nach dem nächsten Theme-Update fort.

Benutzerdefinierte Felder auf der Website ausgeben

WordPress benutzerdefinierte Felder - Twenty Seventeen
WordPress benutzerdefinierte Felder – Twenty Seventeen

Benutzerdefinierte Felder können an vielerlei Stelle für die Website arbeiten. Sie können also innerhalb oder außerhalb des WordPress Loops erscheinen.

Innerhalb des Loops bedeutet, dass Sie in der content.php oder der content-single.php Ihre Änderung vornehmen. Außerhalb bedeutet, dass Sie in der single.php arbeiten.

Soll das Feld wie mein Hinweis vor dem Beitrag angezeigt werden, dann muss der Aufruf in der single.php geschehen.

Nehmen wir für die drei individuellen Felder das Standardtheme Twenty Seventeen zum Beispiel.
Im Anschluss zeige ich für das Vorgehen für die Themes Twenty Nineteen (Hinweis) / Twenty (Werbung) / Twenty-One (zusätzliche Überschrift).

außerhalb des Loops in der single.php

Ich möchte, dass mein Hinweis vor dem eigentlichen Beitrag erscheint. Deshalb muss der Aufruf, der für die Ausgabe des Hinweises sorgt, außerhalb des Loops stattfinden. Die mit echo beginnende Zeile sorgt durch die Angabe ‚hinweis‘ dafür, dass konkret nur das Feld mit dem Namen Hinweis angesprochen wird. Andere Felder mit anderen Namen bleiben außen vor. Wenn Ihr Hinweis also nicht Hinweis, sondern Tipp heißt, geben Sie das in der Zeile stattdessen an.

Den Aufruf fügen Sie in der single.php ein direkt vor dem php-tag, mit dem der Loop startet.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo '<div class="hinweis">';
echo get_post_meta($postid, 'hinweis', true);
echo '</div>';
wp_reset_query();
?>

CSS für den Hinweis

Durch die Vergabe eines DIVs mit der Klasse .hinweis lässt sich die Ausgabe nun auch formatieren. Und dies auch für den Fall, da Sie kein Hinweis-Feld für einen Beitrag vergeben. Ausgegeben wird das Feld zwar immer nur dann, wenn Sie im Rahmen eins Beitrages für ein solches einen Wert angeben. Die Formatierung (border-left) könnte aber verraten, dass hier eigentlich etwas erscheinen soll. Deshalb die Definition für den Fall, da der Container leer bleibt.

Die folgenden Definitionen können Sie im Rahmen des zusätzlichen CSS des Themes hinterlegen.

.hinweis {border-left: 5px solid #ccaaff; padding: 10px; margin-bottom: 30px;}
.hinweis:empty {border-left: none; padding: 0; margin-bottom: 0;}

innerhalb des Loops in der content.php

als zusätzliche Überschrift zum Beitragstitel

Eine zusätzliche Überschrift, die oberhalb des Beitragstitels erscheint, lässt sich ohne benutzerdefiniertes Feld gar nicht erstellen. Diese zusätzliche Angabe findet nun also innerhalb des Loops statt. Entsprechend ist es die content.php, die Sie im Verzeichnis /template-parts/post/ Ihres Twenty Seventeen Child Themes finden.

Den folgenden Code fügen Sie direkt vor der Abfrage if ( is_single() ) { the_title ... ein:

echo '<h4 class="untertitel">';
echo get_post_meta($post->ID, 'untertitel', true);
echo '</h4>';

Sobald Sie in einem Beitrag ein Feld anlegen mit dem Namen untertitel und einem entsprechenden Wert, wird dieser Code auch etwas ausgeben. In meinem Beispiel ist dies: Die Geschichte vom kleinen Duden. Oder aber auch: Die Geschichte vom hungrigen Löwen.

CSS für die zusätzliche Überschrift

Durch die Vergabe der Klasse .untertitel lässt sich diese zusätzliche Überschrift gut formatieren. Ich habe mich dabei an dem Format für die Meta-Angaben Autor und Datum orientiert.

.untertitel {
margin: 10px 0 0 0 ;
color: #767676;
font-size: 11px;
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.1818em;
padding-bottom: 0.25em;
text-transform: uppercase;}

für Werbung unterhalb des Beitragstextes, innerhalb des Loops

Das Beispiel der Werbung, die nun direkt unterhalb des Beitragstextes erscheinen soll, braucht einen weiteren Aufruf in der content.php. Den folgenden Code fügen Sie direkt vor dem schließenden DIV des .entry-content ein:

<?php echo get_post_meta($post->ID, 'werbung', true); ?>

Bei diesem Aufruf habe ich auf die Vergabe eines DIVs mit entsprechender Klasse verzichtet. Und zwar um zu zeigen, dass Sie im Rahmen des Wertes auch HTML benutzen können. Zum Beispiel, um ein zum konkreten Text passendes Bild einzubinden.

Sie müssten nun also ein Feld erstellen mit dem Namen werbung. Als Wert müssten Sie nun mehr als nur den eigentlichen Text eingeben.

Feldwert für die Werbung

<div class="eigenwerbe">
<img class="werbpic" src="https://...URL...apfel.jpg">
<b>Werbung:</b><br />
An apple a day keeps the doctor away.<br/>
Essen Sie mehr Äpfel!</div>

CSS für die Werbung

Auch diese kleine Werbeanzeige braucht nun natürlich etwas Formatierung. Die Definitionen für die beiden Klassen .eigenwerbe und .werbepic können Sie wie in den Beispielen zuvor im Rahmen des zusätzlichen CSS hinterlegen.

.eigenwerbe {background-color:#f2f2f2; width: 100%; padding: 10px; margin: 50px 0;}
.werbpic {float:left; margin-right: 7px; width:130px; height:auto;}

Benutzerdefinierte Felder mit weiteren WordPress Standardthemes

Twenty Seventeen ist mittlerweile nicht mehr so ganz taufrisch. Deshalb schauen wir uns das Ganze mal mit aktuelleren Twenty-Themes an.

Für jedes der oben genannten Felder-Beispiele folgt nun die Umsetzung mit jeweils einem der letzten drei Standardthemes. Starten wir mit dem Hinweis und Twenty-Nineteen.

Hinweis außerhalb des Loops – mit Twenty Nineteen

Hinweis außerhalb des Loops mit Twenty Nineteen

Der Aufruf des benutzerdefinierten Feldes lautet für Twenty Nineteen genauso wie für Twenty Seventeen. Auch hier findet er in der single.php statt. Und zwar nach dem öffnenden tag für den Main-Bereich, direkt vor dem Loop:

<div id="primary" class="content-area">
		<main id="main" class="site-main">
			<?php
			global $wp_query;
			$postid = $wp_query->post->ID;
			echo '<div class="hinweis">';
			echo get_post_meta($postid, 'hinweis', true);
			echo '</div>';
			wp_reset_query();?>
			
			<?php
			// Start the Loop.

Feldwert für den Hinweis

Auch im Rahmen dieses Hinweises kann man mit ein wenig HTML arbeiten. Dass die beiden Achtungs fett erscheinen, machen sie nicht aus sich heraus. Den Zeilenumbruch auch nicht. Der Feldwert für diesen Hinweis lautet also:

<b>Achtung, Achtung:</b><br>
Dieser Beitrag ist nichts für zarte Gemüter!

CSS für den Hinweis mit Twenty Nineteen

Weit komplexer sind die Anforderungen an das CSS bei Twenty Nineteen. Hier braucht es vor allem Anpassungen für Mobilgeräte. Ohne diese orientiert sich der Hinweis nämlich nicht an dem Contentbereich.

Überdies gibt die Angabe für die Schriftart den Text in dem Font aus, den die Überschriften nutzen. Wenn Sie weniger grelle Farben mögen, ändern Sie die Farbwerte für border-left und background.

.hinweis {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 20px;
margin: 1em;
padding: 10px;
border-left: 5px solid #ff3333;
background: #ffaaaa;
}

.hinweis:empty {border-left: none; padding: 0; margin-bottom: 0;}

@media only screen and (min-width: 768px) {
.hinweis {
max-width: calc(8 * (100vw / 12) - 28px);    
margin-left: calc(10% + 60px);
margin-right: calc(10% + 60px);
}

@media only screen and (min-width: 1168px) {
.hinweis {
max-width: calc(6 * (100vw / 12) - 28px);
}
}

Unterüberschrift innerhalb des Loops mit Twenty Twenty-One

Twenty Twenty-One zeigt eine Unterüberschrift - Custom Field innerhalb des Loops
Twenty Twenty-One zeigt eine zusätzliche Überschrift – Custom Field innerhalb des Loops

Anders als bei Twenty Seventeen habe ich für Twenty Twenty-One die zusätzliche Überschrift nicht vorangestellt. Nun steht sie unter dem Beitragstitel.

Auch anders als bei Twenty Seventeen: Der Code gehört hier in die content-single.php. Diese finden Sie im Verzeichnis /template-parts/content/.

In dem Template sehen Sie dann den Aufruf für den Header. Dort fügen Sie den Code für Ihr Custom Field nach dem Aufruf für den Beitragstitel ein.

Diesmal allerdings braucht es auch die umschließenden tags <?php?>. Außerdem nutze ich hier statt der Überschrift h4 einen normalen Absatz p. So bleibt die Hierarchie der Überschriften erhalten. Das dient vor allem der Barrierefreiheit.

<header class="entry-header alignwide">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
		<?php echo '<p class="untertitel">';
		echo get_post_meta($post->ID, 'untertitel', true);
		echo '</p>'; ?>
		<?php twenty_twenty_one_post_thumbnail(); ?>
	</header><!-- .entry-header -->

CSS für Twenty Twenty-One

Auch wenn aus der Überschrift h4 nun ein normaler Absatz p wurde, kann der Feldwert (Die Geschichte vom hungrigen Löwen) ja noch immer wie eine Überschrift aussehen. Konkret nutze ich die Werte, die ich schon bei Twenty Seventeen genannt habe. Allein der Farbwert ist einer des aktuelleren Themes.

.untertitel {
color: #28303d;
font-size: 11px;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.1818em;
padding-bottom: 0.25em;
text-transform: uppercase;}

innerhalb des Loops von Twenty Twenty: Werbung

Benutzerdefiniertes Feld im WordPress Theme Twenty Twenty - innerhalb des Loops
Benutzerdefiniertes Feld im WordPress Theme Twenty Twenty – innerhalb des Loops

Der Code für die kleine Werbung unterhalb des Beitragstextes gehört auch bei Twenty Twenty in die content.php. Diese Datei finden Sie im Verzeichnis /template-parts.

In dieser Datei erscheint das DIV für den Beitragsinhalt, also dem .entry-content. Der für den Aufruf der Werbung nötige Code gehört direkt vor das schließende tag dieses Bereiches.

<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' ) );
			}
			?>
	<?php echo get_post_meta($post->ID, 'werbung', true); ?>
	</div><!-- .entry-content -->

Feldwert für die Werbung

Der Feldwert ist in diesem Fall mal ein anderer. Keine Äpfel, die den Doktor fernhalten. Stattdessen Katzen, die glücklich machen.

<div class="eigenwerbe">
<a href="https://...URL.de"><img class="werbepic" src="https://...URL.../bild.jpg"></a>
<b>Werbung</b><br />
Katzen machen glücklich!<br />
Werden Sie glücklich und folgen Sie uns auf<br />
<a href="https://...URL.de">Luzis Revier</a></div>

CSS für Twenty Twenty

Das CSS entspricht hingegen weitgehend dem des alten Themes. Allein gibt es ein paar Anpassungen für das Bild. Und die Angabe für die Weite des Werbe-Bereichs ist auch nicht nötig.

.eigenwerbe {background-color:#f2f2f2; padding: 10px; margin: 50px auto;}
.werbepic {float:left; margin-right: 20px; padding: 10px; width:130px; height:auto;}

Fazit benutzerdefinierte Felder mit WordPress

Es braucht nicht immer ein Plugin. Zwar gibt es auch für diesen Bereich ein gutes Angebot, nämlich das WordPress Plugin Advanced Custom Fields. Für einfache Aufgaben wie in den beschriebenen drei Fällen lassen sich in WordPress benutzerdefinierte Felder aber auch ohne Zusatzfunktion anlegen und an entsprechender Stelle ausgeben. Und das eben auch mit Gutenberg!


Beitragsbild: Britta Kretschmer

4 Gedanken zu „In WordPress benutzerdefinierte Felder anlegen und ausgeben

  1. Wichtig wäre es ev. zu erwähnen, dass es durch den Gutenberg-Editor im Backend Änderungen bei den Benutzerdefinierten Feldern gibt. Sie werden ja nicht mehr standardmäßig angezeigt, d. h. man muss da selbst eine Lösung coden oder ein Plugin dafür nutzen.

  2. Hallo Raphael,

    stimmt wohl, auch dieser in die Jahre gekommene Beitrag wäre eine Überarbeitung wert.
    Als ich ihn schrieb, gab es noch keinen Gutenberg-Editor. Und der hat ja nun so ziemlich alles verändert. Benutzerdefinierte Felder (nun »Individuelle Felder«) gibt es aber immer noch, man muss sie nur hinzuschalten: Ansicht anpassen > Voreinstellungen > Bedienfelder.

    Danke für den Hinweis!
    LG, bk

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen