In WordPress benutzerdefinierte Felder anlegen und ausgeben

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.

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 und setzen dann das passende Häkchen. Somit wird WordPress diese Metabox für Sie immer direkt bereitstellen.

Benutzerdefinierte Felder bestehen aus zwei wesentlichen Angaben. Die erste betrifft den Namen des Feldes, während die zweite für den tatsächlichen Inhalt, den Wert steht. Wert ist dabei der passende Begriff, denn so ein Feld kann durchaus mit 0 und 1 oder einem 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.

Wozu sind benutzerdefinierte Felder gut?

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 mein Augen besseres Beispiel ist die Angabe der passenden ISBN im Rahmen einer Buchrezension. Wann immer Sie also ein Buch besprechen, können Sie auf diese Weise dem Beitrag ein Custom Field mit dem Namen ISBN  und dem Wert, der die konkrete ISBN benennt, hinzufügen. Sobald Sie ein solches Feld einmal angelegt haben, erscheint sein Name fortan in der Auswahl.

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

  • ein Hinweis vorweg
  • eine vorangestellte 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 verändern wollen, reicht es übrigens aus, nach Eingabe der Änderungen das Feld zu aktualisieren – und schon ist die Änderung auch veröffentlicht. Gleiches gilt, wenn Sie Ihr Feld wieder löschen wollen. In beiden Fällen ist es also gar nicht nötig, zusätzlich noch auf den Aktualisieren Button des Beitrags zu klicken.

Ein eigenes benutzerdefinierte 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! 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
In WordPress benutzerdefinierte Felder anlegen und auslesen

Benutzerdefinierte Felder können an vielerlei Stelle für die Website arbeiten. Sie können also innerhalb oder außerhalb des WordPress Loops erscheinen. Nehmen wir das aktuelle Theme Twenty Seventeen zum Beispiel, dann findet der Loop unter anderem in der content.php statt. Soll das Feld aber wie in meinem Hinweis-Fall vor dem Beitrag angezeigt werden, dann muss der Aufruf in der single.php geschehen. Und zwar vor dem Aufruf des Loops, der ja für die Ausgabe der einzelnen Beiträge verantwortlich ist.

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 des folgenden Codes 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 ein solches anlegen. 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 Unterüberschrift zum Beitragstitel

Auch wenn der Begriff Unterüberschrift vielleicht etwas unglücklich gewählt ist: 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.

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

Der Aufruf eines weiteren Feldes, zum Beispiel zum Zwecke der Eigenwerbung, das nun direkt unterhalb des Beitragstextes erscheinen soll, braucht es 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 eines benutzerdefinierten Feldes auch HTML benutzen können. Somit ist es möglich, im konkreten Fall auch mal ein Bild einzubetten.

Sie müssten nun also ein Feld erstellen mit dem Namen werbung und würden als Wert mehr als nur den eigentlichen Text eingeben. Sagen wir:

<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;}

Fazit

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.


Beitragsbild: Britta Kretschmer

Schlagwörter: , , , , , ,

Teilen Sie diesen Artikel mit anderen:

Schreibe einen Kommentar

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