So erstellen und verwenden Sie benutzerdefinierte Felder in WordPress

Veröffentlicht: 2023-02-17

Benutzerdefinierte WordPress-Felder sind eine großartige Möglichkeit, den typischen Post- oder Seiteninhalt auf Ihrer Website zu erweitern. Sie sind Metadaten, die an einen Beitrag oder eine Seite auf Ihrer WordPress-Site angehängt werden, was bedeutet, dass Sie mit dieser Methode zusätzliche Informationen jeglicher Art zu Ihren Inhalten hinzufügen können.

Benutzerdefinierte Felder sind in einem Schlüssel/Wert-Format organisiert und werden zum Hinzufügen von Daten über mehrere Posts oder Seiten hinweg verwendet. Der Schlüssel ist ein Name, der für Konsistenz sorgt und das spezifische Feld identifiziert, z. B. „Artikel“. Das ist immer gleich. Ein Wert ist die Information, die im Feld angezeigt wird. Der Wert ist je nach eingegebener Information in den Posts unterschiedlich.

Hinzufügen von benutzerdefinierten Feldern zum Beitrag

Die folgenden Schritte zeigen Ihnen, wie Sie benutzerdefinierte Felder in Ihren Beiträgen verwenden. Wenn Sie sie lieber auf Seiten verwenden möchten, gelten die gleichen Ideen, müssen jedoch in Vorlagendateien implementiert werden, die für das Erstellen von Seiten und nicht für Beiträge verantwortlich sind.

1. Gehen Sie zum Post-Editor-Bildschirm und aktivieren Sie „Benutzerdefinierte Felder“.

2. Suchen Sie das Feld Benutzerdefinierte Felder als Teil Ihrer Post-Bearbeitung. Wenn Sie sich auf einer Beitragsseite befinden, sehen Sie unten einen neuen Abschnitt mit der Überschrift „Benutzerdefinierte Felder“.

Schauen wir uns nun ein sehr einfaches Beispiel für benutzerdefinierte WordPress-Felder in Aktion an. Bei diesem Beispiel für einen Fitness-Blog wird sich die Sache ändern. Wir verwenden die benutzerdefinierten Felder, um verschiedene Arten körperlicher Aktivität in Beiträgen zu verfolgen und aufzulisten.

3. Fügen Sie den Schlüssel hinzu, in diesem Fall „Art der Übung“. Wir werden dieses Feld verwenden, um dem Beitrag spezifische Details hinzuzufügen. Klicken Sie auf „Neu eingeben“ und geben Sie den Schlüssel in das Feld ein.

4. Fügen Sie den Wert hinzu. Lassen Sie uns für dieses Mal mit Zumba gehen. Denken Sie daran, dass dies nur in diesem bestimmten Beitrag angezeigt wird. Auf einem anderen Posten können Sie einen anderen Wert eingeben, z. B. „Ellipsentrainer“ oder eine andere Art von Übung.

5. Speichern Sie den Beitrag.

In diesem Moment werden Sie eigentlich nicht viel sehen. Sie müssen noch einige Formatierungen hinzufügen, um die Informationen anzuzeigen. Bisher werden diese zusätzlichen Informationen in der Datenbank gespeichert, sodass sie zur Anzeige abgerufen werden können. Für dieses Tutorial habe ich mich dafür entschieden, diese benutzerdefinierten Felder in Posts (anstelle von Seiten) anzuzeigen, damit ich die grundlegendste Methode zum Formatieren von allem durchgehen werde.

Anzeigen der benutzerdefinierten Felder im Beitrag

Die Verwendung von Vorlagenänderungen zum Hinzufügen der benutzerdefinierten Felder als wiederkehrende Site-Daten ist eine effiziente Möglichkeit, die Dinge anzugehen. Angenommen, Sie beginnen damit, die benutzerdefinierten Felder am Anfang Ihres Beitrags anzuzeigen, entscheiden aber später, dass es unten besser aussehen würde. Durch die Verwendung von Vorlagenänderungen ist diese Änderung einfach durchzuführen, da durch das Ändern der Vorlage die gesamte Website aktualisiert wird. Wenn Sie diese Methode nicht verwenden und die Informationen stattdessen einzeln in jedem Beitrag speichern, müssten Sie jeden einzelnen Beitrag bearbeiten, um die Änderung vorzunehmen, was Änderungen viel schwieriger macht.

In diesem Beispiel wird das benutzerdefinierte Feld vor dem Beitrag angezeigt, damit der Leser den Übungstyp direkt sehen kann, bevor er den gesamten Beitrag liest. Um es auf diese Weise anzuzeigen, werden die Daten vor der WordPress-Schleife aufgerufen.

Hinweis: Diese Anpassungen sollten natürlich in einem untergeordneten Design vorgenommen werden, und wir verwenden die Datei single.php . Wie immer werden Anpassungen wie diese am besten in einer Entwicklungsumgebung getestet.

1. Öffnen Sie die Datei single.php und fügen Sie diesen Code außerhalb der WordPress-Schleife hinzu:

 &lt;?php the_meta(); ?&gt;

Es wird etwa so angezeigt:

Wenn Sie dies lieber an einer anderen Stelle auf der Seite anzeigen möchten, versuchen Sie, dieses Snippet in der Schleife oder nach der Schleife zu platzieren. Wenn Sie beispielsweise die Funktion innerhalb des <main> -Tags platzieren, werden die benutzerdefinierten Feldinformationen als Teil des Hauptinhalts angezeigt.

 &lt;div class="content-area"&gt; &lt;main class="site-main" role="main"&gt;

Dieser Ansatz funktioniert, um auch andere benutzerdefinierte Felder anzuzeigen, die Sie erstellt haben.

Eine Sache, die zu diesem Beispiel erwähnt werden sollte: Das Child-Theme wurde aus dem WordPress-Eltern-Theme Twenty Fifteen erstellt, das sehr beliebt ist. Wenn du damit experimentierst, wo die benutzerdefinierten Felder angezeigt werden sollen, gibt es möglicherweise andere Vorlagen, die du neben der single.php Datei in deinem Child-Theme benötigst. Um die Informationen im Beitrag anzuzeigen, wurde dem Child-Theme eine content.php hinzugefügt. Das obige Snippet wurde in den Inhalt der Seite eingefügt, sodass es als Teil des Beitrags angezeigt wurde.

2. Gestalten Sie die Felder. Wenn Sie zum Inspektor gehen, sehen Sie einige neue Klassen, die der Seite hinzugefügt wurden.

So sieht das Beispiel mit den zwei verschiedenen benutzerdefinierten Feldern aus:

Art der Übung: Zumba
Tageszeit: Morgens

Es ist ziemlich einfach, mit einer Liste zu arbeiten. Mit etwas Styling wird es besser in den Stil der Website integriert aussehen. Mit nur ein paar einfachen CSS-Modifikationen können wir die Textfarbe und das Listendesign anpassen.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Weitere Anpassungen von benutzerdefinierten Feldern

Das Styling im vorherigen Beispiel wird gut funktionieren, aber wir tun noch mehr. Die folgenden Beispiele zeigen Ihnen, wie benutzerdefinierte Felder mit zusätzlichen Anzeigeoptionen für bestimmte Anwendungsfälle angepasst werden können. Das benutzerdefinierte Feld als Teil des Beitrags lesen zu lassen und den Kontext mit einer hilfreichen Überschrift festzulegen, ist eine großartige Ergänzung des Beitrags. Wenn Sie Schritt für Schritt vorgehen, achten Sie darauf <?php the_meta(); ?> <?php the_meta(); ?> , die Sie im vorherigen Beispiel hinzugefügt haben.

Für dieses Beispiel wurden die Dinge leicht modifiziert. Der Schlüssel wurde zu „Übungen“ vereinfacht, damit er einfacher zur Vorlage hinzugefügt werden kann, und das Code-Snippet wurde in die content.php-Datei des untergeordneten Themas eingefügt, sodass es im Beitragsinhalt angezeigt wird, anstatt davor oder danach .

 &lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', false); ?&gt; &lt;h3&gt;Today's exercise:&lt;/h3&gt; &lt;ul&gt; &lt;?php foreach($exercises as $exercise) { echo '&lt;li&gt;'.$exercise.'&lt;/li&gt;'; } ?&gt; &lt;/ul&gt;

Das benutzerdefinierte Feld wird jetzt unter der Überschrift „Heutige Übung:“ in einem Listenformat angezeigt. Dies wurde als <h3> festgelegt, kann aber leicht angepasst werden, um ein anderer Überschriften- oder Absatzstil zu sein. Wenn Sie es nicht im Listenformat wünschen, kann das auch beliebig strukturiert werden.

Bedingter Brauch

Felder

Es kann vorkommen, dass das benutzerdefinierte Feld nicht enthalten ist. Angenommen, es gibt einen Beitrag ohne Ausübungswert. Auf diese Weise können Sie Fallback-Informationen anzeigen, sodass sie nicht einfach leer bleiben.

 &lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', true); ?&gt; &lt;h3&gt;Today's exercise:&lt;/h3&gt; &lt;ul&gt; &lt;?php if ($exercises) { ?&gt; &lt;?php echo '&lt;li&gt;' .$exercises. '&lt;/li&gt;'; ?&gt; &lt;?php } //if there is nothing for exercises then display else { ?&gt; &lt;li&gt;Today was a rest day.&lt;/li&gt;

Das Plugin für erweiterte benutzerdefinierte Felder

Wenn Sie diesem Tutorial folgen, können Sie benutzerdefinierte Felder ganz einfach zum Laufen bringen. Wenn Sie jedoch lieber ein Plugin verwenden möchten, um benutzerdefinierte Felder hinzuzufügen, stehen auch dafür Optionen zur Verfügung. Erweiterte benutzerdefinierte Felder sind eine sehr beliebte Option. Dies ersetzt die Standardschnittstelle für benutzerdefinierte Felder in WordPress. Das aus diesem Tutorial erstellte Endprodukt könnte auch mit diesem Plugin erstellt werden.

Feldgruppen

Das Advanced Custom Fields-Plugin ermöglicht Feldgruppen, was erwähnenswert ist, da sie eng mit dem obigen Tutorial verwandt sind. Im Wesentlichen haben wir eine sehr einfache Version einer Mini-Feldgruppe erstellt. Erweiterte Gruppen benutzerdefinierter Felder enthalten benutzerdefinierte Felder, Standortregeln und Anzeigeoptionen. Jede Feldgruppe verwendet ihre Standortregeln, um die Felder bei Bedarf am richtigen Ort anzuzeigen. Wie bei der manuellen Vorgehensweise können Sie mit diesen Anzeigeoptionen die Seite nach Ihren Wünschen anpassen. Mit diesem Plugin stehen viele Feldgruppen zur Auswahl.

Dies kratzt kaum an der Oberfläche dessen, was mit diesem Plugin getan werden kann. Um sich ein vollständiges Bild zu machen, besuchen Sie unbedingt die Website für erweiterte benutzerdefinierte Felder.

Benutzerdefinierte Felder sind eine sofort einsatzbereite Funktion von WordPress. Indem Sie nur ein paar Vorlagenänderungen vornehmen, können Sie diese Funktionalität ganz einfach zu Ihrer Website hinzufügen. Diese Schritte decken die Grundlagen ab und mit ein wenig Experimentieren werden Sie ein klares Verständnis dafür haben, wie benutzerdefinierte Felder implementiert werden. Berücksichtigen Sie bei der Planung Ihres nächsten Projekts unbedingt die Flexibilität, die benutzerdefinierte Felder bieten. Sie können verschiedene Arten von Inhalten aufnehmen und gleichzeitig Änderungen auf der gesamten Website vereinfachen.