Articles

Erweiterte benutzerdefinierte Felder Tutorial: Your Ultimate Guide

WordPress benutzerdefinierte Felder sind ein wichtiger Teil dessen, was macht WordPress ein flexibles Content-Management-System, anstatt „nur eine Blogging-Plattform“.

Wenn es um WordPress Custom Fields geht, ist das Freemium Advanced Custom Fields Plugin einer der bekanntesten Namen. Es erleichtert die Arbeit mit benutzerdefinierten Feldern in allen Aspekten und ist auch das Thema unseres heutigen Beitrags.

Insbesondere erklären wir, warum erweiterte benutzerdefinierte Felder so wertvoll sind, und zeigen Ihnen dann Schritt für Schritt, wie Sie sie auf Ihre WordPress-Site anwenden können.

Hier ist alles, was Sie in diesem Beitrag finden:
Es gibt viel zu erzählen, also tauchen wir ein …

Was ist Advanced Custom Fields Plugin?

Advanced Custom Fields — oft als ACF abgekürzt — wurde von Elliot Condon entwickelt und ist ein WordPress-Plugin, mit dem Sie benutzerdefinierte WordPress-Felder zu einer Site hinzufügen und verwalten können. Es ist sowohl als kostenloses Plugin als auch als Premium-Plugin namens ACF PRO ab 25 US-Dollar für lebenslange Updates und für 1 Site erhältlich.

Unterstützung

Was sind benutzerdefinierte WordPress-Felder? Was lassen sie dich tun?

Mit benutzerdefinierten WordPress-Feldern können Sie zusätzliche Informationen zu einem Inhalt in WordPress hinzufügen, speichern und anzeigen. Auf technischer Ebene helfen Ihnen benutzerdefinierte Felder beim Speichern von Metadaten.

Auch wenn Sie mit diesem Begriff nicht vertraut sind, bieten benutzerdefinierte Felder einen Großteil der Funktionen in Ihren bevorzugten Plugins und Themes.

WooCommerce, die beliebteste Methode zum Erstellen eines E-Commerce-Shops, verwendet beispielsweise benutzerdefinierte Felder, um zusätzliche Informationen zu einem Produkt zu speichern, z. B .:

  • Preis
  • Gewicht
  • Farbe

Wenn Sie über ein WordPress-Ereigniskalender-Plugin verfügen, verwendet dieses Plugin benutzerdefinierte Felder, um zusätzliche Informationen zu einem Ereignis zu speichern, z:

  • Ort
  • Start- / Endzeit
  • Preis

Sie können auch Ihre eigenen benutzerdefinierten Felder erstellen, um Informationen zu speichern, die für Ihre individuellen Bedürfnisse relevant sind.

Wie cool sind benutzerdefinierte Felder in WordPress, äh? 👨💻Erfahren Sie, wie Sie sie mit dem erstaunlichen @wp_acf in unserem neuesten Leitfaden nutzen können! 💪Click to Tweet

Wann sollten Sie benutzerdefinierte Felder verwenden?

Nun fragen Sie sich vielleicht, warum Sie überhaupt benutzerdefinierte Felder benötigen.

Wenn Sie beispielsweise ein Ereignis auf Ihrer WordPress-Site veröffentlichen möchten, können Sie diese Informationen nicht einfach als normalen Text in den WordPress-Editor einfügen?

Nun, ja, du könntest. Die Verwendung benutzerdefinierter Felder ist jedoch aus mehreren Gründen ein besserer Ansatz:

  • Einfachere Eingabe — Anstatt Dinge von Grund auf neu einzugeben, erleichtert eine übersichtliche benutzerdefinierte Feldgruppe die Eingabe von Daten erheblich. Anstatt beispielsweise ein Datum einzugeben, können Sie das Datum einfach in einer Datumsauswahl auswählen.
  • Konsistenz – Die Informationen, die Sie in Ihre benutzerdefinierten Felder eingeben, werden immer entsprechend Ihrer Einrichtung angezeigt, was bedeutet, dass sie auf Ihrer gesamten Website konsistent sind.Einfache Updates und Wartung – Wenn Sie etwas daran ändern möchten, wie diese Informationen in Zukunft angezeigt werden, können Sie nur eine Sache aktualisieren, anstatt jeden Beitrag einzeln bearbeiten zu müssen.

WordPress enthält integrierte Funktionen für benutzerdefinierte Felder

WordPress enthält tatsächlich integrierte Funktionen zum Hinzufügen benutzerdefinierter Felder zu Ihren Inhalten. Im klassischen TinyMCE-Editor können Sie dies über den Bereich Bildschirmoptionen aktivieren. Im neuen Blockeditor können Sie ihn auch über den Optionsbereich aktivieren:

Zugriff auf benutzerdefinierte Felder im Blockeditor

Zugriff auf benutzerdefinierte Felder im Blockeditor

Anschließend können Sie Ihre benutzerdefinierten Felddaten mithilfe von Schlüssel / Wert-Paaren eingeben:

Die integrierte WordPress Custom fields Funktionalität

Die integrierte WordPress Custom fields Funktionalität

Diese native Custom fields Funktionalität ist voll funktionsfähig, aber es ist nicht die benutzerfreundlichste Art, Dinge zu tun, weshalb sich viele Leute stattdessen dem Advanced Custom Fields Plugin zuwenden.

Advanced Custom Fields macht es viel einfacher

Einfach gesagt, Advanced Custom Fields macht es viel einfacher, mit benutzerdefinierten Feldern in WordPress in … so ziemlich allen Aspekten zu arbeiten.

Es vereinfacht die Schnittstelle zum Hinzufügen und Verwalten von benutzerdefinierten Feldern in Ihrem WordPress-Dashboard und vereinfacht auch den Prozess zum Anzeigen von Informationen aus benutzerdefinierten Feldern im Frontend Ihrer Website. Diese Tatsache hilft nur zu erklären, warum es auf mehr als 1 Million Websites mit einer 4,9-Sterne-Bewertung auf über 1.000 Bewertungen aktiv ist.

Im Backend können Sie benutzerfreundliche Meta-Boxen erstellen, die vorgewählte Feldtypen enthalten. Anstelle dieser generischen Schlüssel-Wert-Paar-Schnittstelle (wie oben gesehen) können Sie Datumsauswahl, Kontrollkästchen und ähnliches verwenden:

Erweiterte benutzerdefinierte Felder im Blockeditor

Erweiterte benutzerdefinierte Felder im Blockeditor

Insgesamt bietet Advanced Custom Fields mehr als 30 verschiedene Feldtypen, die Sie jedem Bereich in Ihrem Dashboard hinzufügen können, einschließlich Beiträgen, Benutzern, Taxonomien, Medien, Kommentaren und sogar benutzerdefinierten Optionsseiten.

Hier finden Sie detaillierte Informationen zu den einzelnen Feldtypen.Erweiterte benutzerdefinierte Felder machen es auch viel einfacher, diese Informationen anzuzeigen, mit gut dokumentierten Funktionen, Shortcodes, Gutenberg-Blöcken und mehr.

Oder Sie können Integrationen mit anderen Tools finden, wie einige Drag-and-Drop-WordPress-Seitenersteller.

Erweiterte benutzerdefinierte Felder Free vs Pro: Welche benötigen Sie?

Advanced Custom Fields gibt es sowohl in einer kostenlosen als auch in einer erschwinglichen Premium-Version.

Für die meisten grundlegenden Anwendungen ist die kostenlose Version völlig in Ordnung. Sie haben Zugriff auf fast alle Feldtypen sowie auf alle oben beschriebenen zeitsparenden und benutzerfreundlichen Funktionen.

Wenn Sie nur einige zusätzliche Informationen zu Ihren Inhalten speichern möchten, ist die kostenlose Version alles, was Sie brauchen.

Nachdem das gesagt wurde, fügt die Pro—Version einige ziemlich praktische Funktionen hinzu, mit denen Sie erweiterte benutzerdefinierte Felder auf interessantere Weise verwenden können:

  • Repeater-Felder – Mit diesen können Sie bestimmte Felder / Gruppen von Feldern Post-für-Post wiederholen. Wenn Sie beispielsweise Informationen zu einem Sprecher zu einem Ereignis hinzufügen, hilft Ihnen ein Repeater-Feld bei der Bewältigung der Situation, in der mehr als ein Sprecher vorhanden ist (Sie können die Felder für den Sprecher einfach so oft wie nötig „wiederholen“, sodass Sie Randfälle behandeln können, in denen mehrere Sprecher vorhanden sind).
  • ACF-Blöcke – Zeigen Sie Ihre Felder als Block Gutenberg und nicht als Meta-Box an. Dies ist besonders praktisch, wenn Sie eine Website für einen Kunden erstellen und ihm eine einfache Möglichkeit zur Eingabe und Visualisierung benutzerdefinierter Felddaten bieten möchten.
  • Flexibles Inhaltsfeld – Erstellen Sie Layouts aus anderen Feldern. Es ist wie ein leichter Seitenersteller, der auf benutzerdefinierten Feldinformationen basiert.
  • Galeriefeld – Laden Sie mehrere Bilder in ein einzelnes Feld hoch.

Es gibt auch einige andere Unterschiede, wie Optionsseiten, die Möglichkeit, Felder zu klonen, Verbesserungen an den Beziehungsfeldern und andere kleinere Verbesserungen.

Hier finden Sie alle ACF PRO-Funktionen.

ACF PRO beginnt bei 25 US-Dollar für die lebenslange Verwendung auf einer einzelnen Site. Oder Sie können $ 100 für die lebenslange Nutzung auf unbegrenzten Websites bezahlen.

Beginnen Sie im Zweifelsfall mit der kostenlosen Version, bis Sie genau herausgefunden haben, welche Funktionen Sie benötigen. Sie können jederzeit später aktualisieren, wenn nötig.

Erweiterte benutzerdefinierte Felder Tutorial: So fügen Sie Ihre Felder hinzu

Lassen Sie uns nun in das eigentliche Tutorial für erweiterte benutzerdefinierte Felder eintauchen und Ihnen zeigen, wie Sie Ihren ersten Satz benutzerdefinierter Felder erstellen und anzeigen.

Nehmen wir für dieses Beispiel an, Sie haben einen Blog über Running. Sie sind wie … wirklich in Laufen und Sie möchten Ihre täglichen Workouts mit Ihren Lesern teilen. Insbesondere möchten Sie mit jedem Blogbeitrag einen Lauf teilen:

  • Zweck — nehmen wir an, Sie haben zwei verschiedene Arten des Laufens: „Geschwindigkeitsarbeit“ und „Konditionierung“.
  • Distanz – wie lange dein Lauf war.
  • Startzeit – wann Sie Ihren Lauf gestartet haben.
  • Endzeit – wenn Sie Ihren Lauf beendet haben.
  • Ort — wo dein Lauf stattgefunden hat.

Um diese Informationen zu sammeln, sollten Sie fünf benutzerdefinierte Felder hinzufügen.

Es ist wichtig zu beachten, dass die Prinzipien, die Sie in diesem Tutorial für erweiterte benutzerdefinierte Felder lernen, für jeden Anwendungsfall gelten. Wir wählen nur ein bestimmtes Beispiel aus, weil es hilft, ein greifbares Beispiel zu haben, mit dem man sich verbinden kann.

Wir werden dieses Tutorial in zwei Teile unterteilen:

  1. So fügen Sie Ihre benutzerdefinierten Felder im Backend hinzu und verwalten sie.
  2. So zeigen Sie benutzerdefinierte Feldinformationen im Frontend Ihrer Site an.

Erstellen Sie eine neue Feldgruppe

Sobald Sie die kostenlose Version von Advanced Custom Fields WordPress.org , gehen Sie zu Custom Fields > Add New , um Ihre erste Feldgruppe zu erstellen.

Wie der Name schon sagt, ist eine „Feldgruppe“ eine Gruppe von einem oder mehreren benutzerdefinierten Feldern, die zusammen in Ihrem WordPress-Dashboard angezeigt werden.

In diesem Beispiel erstellen Sie eine Feldgruppe, die fünf benutzerdefinierte Felder enthält.

Geben Sie Ihrer Feldgruppe einen Namen, und wählen Sie dann den Speicherort aus. In diesem Beispiel möchten wir diese benutzerdefinierten Felder für reguläre WordPress-Blogposts anzeigen, damit Sie sie als Standardbeitrag belassen können.

Wenn Sie Ihre benutzerdefinierten Felder jedoch an anderer Stelle anzeigen möchten, z. B. neben einem benutzerdefinierten Beitragstyp oder mit einer Taxonomie, möchten Sie dies ändern. Sie können auch mehrere Regeln einrichten, um Ihre Felder an mehreren Stellen anzuzeigen:

Erstellen Sie eine neue ACF-Feldgruppe

Erstellen Sie eine neue ACF-Feldgruppe

Fügen Sie benutzerdefinierte Felder hinzu

Klicken Sie anschließend auf die Schaltfläche + Feld hinzufügen, um Ihr erstes benutzerdefiniertes Feld hinzuzufügen:

Neues Feld hinzufügen

Neues Feld hinzufügen

Dies öffnet viele Optionen, aber Sie müssen nicht unbedingt alles ausfüllen.

Die zwei wichtigsten Optionen sind:

  • Feldbezeichnung — dies wird im Editor angezeigt. Es wird auch verwendet, um den Feldnamen zu generieren, den Sie im Code verwenden. Sie müssen den Feldnamen nicht ändern (obwohl Sie dies bei Bedarf tun können).
  • Feldtyp – Dies ist die Art von Informationen, die Sie sammeln möchten. Sie möchten beispielsweise, dass ein Nummernfeld Nummerninformationen oder ein E-Mail-Feld eine E-Mail-Adresse erfasst.

Für dieses erste Feld möchten Sie einen Optionsfeldtyp:

Konfigurieren eines Feldes

Konfigurieren eines Feldes

Weiter unten können Sie die Optionen für die Auswahl des Optionsfelds in das Auswahlfeld eingeben:

optionen

Optionsfeld eingeben Optionen

Es gibt auch eine Reihe anderer Optionen, die Sie treffen können, z. B. ob ein Feld erforderlich ist oder nicht, und einen Standardwert. Fühlen Sie sich frei, diese an Ihre Bedürfnisse anzupassen.

Schauen wir uns ein anderes Beispiel an: ein benutzerdefiniertes Feld, um die Entfernung des Laufs zu erfassen. Dieses Mal möchten Sie einen Nummernfeldtyp:

Erstellen eines Nummernfelds

Erstellen eines Nummernfelds

Sie können die Dinge auch etwas benutzerfreundlicher gestalten, indem Sie die Entfernungseinheit anhängen. Wenn Sie möchten, können Sie auch eine Validierung mit einem Minimalwert und einem Maximalwert hinzufügen. Zum Beispiel machst du wahrscheinlich keine 1.000-Meilen-Läufe (und wenn du es tust … OMG, du bist der ultimative Forrest Gump)!

Weitere Feldeinstellungen

Weitere Feldeinstellungen

Wiederholen Sie den Vorgang einfach für alle anderen benutzerdefinierten Felder, die Sie erfassen möchten. Wenn Sie fertig sind, sollte es ungefähr so aussehen:

5 verschiedene ACF-Felder

5 verschiedene ACF-Felder

Einstellungen konfigurieren und veröffentlichen

Scrollen Sie zum Abschluss zum Einstellungsfeld. Hier können Sie steuern, wie Ihre Felder im WordPress-Editor angezeigt werden.

Meistens können Sie diese als Standardwerte belassen. Aber fühlen Sie sich frei, die Dinge zu ändern, wenn Sie wollen. Sie können beispielsweise Ihre benutzerdefinierten Felder über dem regulären WordPress-Editor anzeigen:

Konfigurieren der ACF-Feldgruppeneinstellungen

Konfigurieren der ACF-Feldgruppeneinstellungen

Sobald Sie Ihre Auswahl getroffen haben, Veröffentlichen Sie Ihre Feldgruppe, um sie live zu schalten.

Melden Sie sich für den Newsletter an

Wir haben unseren Traffic mit WordPress um 1,187% gesteigert. Wir zeigen Ihnen, wie.

Schließen Sie sich über 20.000 anderen an, die unseren wöchentlichen Newsletter mit Insider-WordPress-Tipps erhalten!

Jetzt abonnieren

Fügen Sie einige Informationen im WordPress-Editor hinzu

Sobald Sie Ihre Feldgruppe veröffentlicht haben, werden Ihre Felder angezeigt, wenn Sie einen neuen Beitrag erstellen.

Standardmäßig werden sie sowohl im klassischen TinyMCE-Editor als auch im neuen Block-Editor zusammen unter dem Editor angezeigt:

Erweiterte benutzerdefinierte Felder im Blockeditor

Erweiterte benutzerdefinierte Felder im Blockeditor

Die Informationen, die Sie hier eingeben, werden zum einfachen Abrufen in der WordPress-Datenbank Ihrer Site gespeichert (das sehen Sie im nächsten Teil unseres Tutorials für erweiterte benutzerdefinierte Felder).

Erkundung der bedingten Logik

Bevor wir fortfahren, machen wir einen kurzen Umweg.Sehen Sie, einer der Gründe, warum Advanced Custom Fields so beliebt ist, ist wegen all der interessanten Implementierungen, die es erlaubt.

Und eine leistungsstarke Option hier ist die bedingte Logik, mit der Sie Felder basierend auf der Beantwortung eines vorherigen Felds ein- / ausblenden können.

Schauen wir uns ein kurzes Beispiel an, wie das funktioniert …

Angenommen, Sie möchten über Essen, Ihre Reisen oder etwas anderes als Laufen bloggen. Wenn Sie über ein nicht ausgeführtes Thema schreiben, ist es nicht sinnvoll, die benutzerdefinierten Felder für Informationen zum Lauf anzuzeigen, oder?Was wäre, wenn Sie, anstatt automatisch alle benutzerdefinierten Felder anzuzeigen, die Sie gerade erstellt haben, ein benutzerdefiniertes Feld mit der Aufschrift „Ist dieser Beitrag ein Lauf?”:

Beispiel für bedingte Logik

Beispiel für Bedingte Logik

Wenn Sie das Kontrollkästchen aktivieren, werden die Felder mit den Ausführungsinformationen automatisch angezeigt. Wenn Sie es deaktiviert lassen, bleiben sie ausgeblendet:

Die anderen Felder werden angezeigt, wenn sie aktiviert sind

Die anderen Felder werden angezeigt, wenn sie aktiviert sind

Das ermöglicht Ihnen die bedingte Logik!

Um dies einzurichten, würden Sie Ihre Feldgruppe bearbeiten und ein neues True / False-Feld für „Is this a run?”:

Hinzufügen eines True /False-Felds

Hinzufügen eines True/False-Felds

Dann würden Sie die vorhandenen Felder bearbeiten und die bedingte Logik aktivieren, sodass jedes Feld nur angezeigt wird, wenn das „Ist das ein Lauf?“ feld ist aktiviert:

Bedingte Logik zu anderen Feldern hinzufügen

Bedingte Logik zu anderen Feldern hinzufügen

So zeigen Sie erweiterte benutzerdefinierte Felder im Frontend an

Ok, wir sind auf halbem Weg durch unsere Reise mit erweiterten benutzerdefinierten Feldern. Sie können jetzt Informationen zu Ihren benutzerdefinierten Feldern hinzufügen, sie dem relevanten Beitragstyp zuordnen und in Ihrer Datenbank speichern.

Es gibt jedoch noch ein potenzielles Problem: Die Informationen aus Ihren benutzerdefinierten Feldern werden noch nirgendwo im Frontend angezeigt!Das heißt, obwohl Sie dem Editor einige benutzerdefinierte Felder für Ihre Blog-Beiträge hinzugefügt haben, sieht Ihr Blog-Beitrag im Frontend immer noch wie ein normaler Blog-Beitrag aus:

Keine benutzerdefinierten Felder im Frontend

Keine benutzerdefinierten Felder im Frontend

Lassen Sie uns das beheben.

Müde von WordPress-Problemen und einem langsamen Host? Wir bieten erstklassigen Support von WordPress-Experten, die 24/7 verfügbar sind, und blitzschnelle Server. Schauen Sie sich unsere Pläne an

Es gibt verschiedene Möglichkeiten, wie Sie erweiterte benutzerdefinierte Felddaten im Frontend Ihrer Site anzeigen können. Die genaue Methode, die Sie wählen, hängt von Ihren Bedürfnissen und Ihrem Wissensstand ab. Hier sind drei verschiedene Möglichkeiten, dies zu erreichen:

  1. Die Vorlagendateien Ihres Themes — Dies erfordert ein wenig technisches Wissen, ist aber meistens der beste Ansatz, insbesondere wenn Sie mit den Vorlagendateien Ihres Themes arbeiten möchten.
  2. Mit einem Shortcode – dies ist super einfach und eine gute Option, wenn Sie nur benutzerdefinierte Felddaten von Fall zu Fall einfügen möchten. Es erfordert jedoch viel mehr manuelle Arbeit, da Sie jedem Beitrag Shortcodes hinzufügen müssen.
  3. Mit Elementor Pro – das ist großartig, weil es die Notwendigkeit, mit PHP zu arbeiten, vollständig eliminiert, aber es ist ein Premium-Produkt und es bedeutet auch, dass Sie Elementor Pro für Ihre Vorlagen verwenden müssen.

Sie können oben klicken, um direkt zu einer bestimmten Methode zu springen, oder Sie können alle durchlesen. Bis zu Ihnen.

Hinzufügen erweiterter benutzerdefinierter Felder in Theme-Vorlagendateien

Die erste Möglichkeit, Ihre benutzerdefinierten Feldinformationen anzuzeigen, besteht darin, die PHP-Funktionen erweiterter benutzerdefinierter Felder direkt zu den Vorlagendateien Ihres untergeordneten Themes hinzuzufügen.

Dies ist ein wenig fortgeschritten, da Sie sich mit den Vorlagendateien Ihres Themas befassen müssen, aber es stellt sicher, dass Ihre benutzerdefinierten Felder jedes Mal automatisch an derselben Stelle angezeigt werden.

Insbesondere müssen Sie die einzelne Vorlage für den betreffenden Beitragstyp bearbeiten.

Für einen normalen Blogbeitrag ist dies Single.PHP. Oder einige Themen teilen die Dinge in Vorlagenteile auf. Für das TwentyNineteen-Thema müssen Sie beispielsweise den Inhalt bearbeiten -single.PHP-Vorlage Teil.

Wenn Sie sich hier verloren fühlen, möchten Sie vielleicht eine andere Methode verwenden.

Sobald Sie die Theme-Vorlagendatei für Ihren einzelnen Beitrag gefunden haben, können Sie die Funktion the_field() von Advanced Custom Fields verwenden, um die Informationen eines Felds anzuzeigen. Zum Beispiel

<?php the_field('FIELD_NAME'); ?>

Erfahren Sie hier mehr darüber.

Um beispielsweise das Feld „Zweck“ anzuzeigen, verwenden Sie

<?php the_field('purpose'); ?>

Sie können den Feldnamen finden, wenn Sie eine Feldgruppe bearbeiten:

Wo finde ich den Namen des ACF-Feldes

Wo finde ich den Namen des ACF-Feldes

Wenn Sie also ein wenig HTML-Markup mit PHP kombinieren, erhalten Sie möglicherweise Folgendes, um alle Felder anzuzeigen:

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

über dem regulären Post-Inhalt fügen Sie dies Ihrer Theme-Vorlagendatei über the_content () hinzu:

Wo Sie Code in die Theme-Vorlagendatei einfügen können

Wo Sie Code in die Theme-Vorlagendatei einfügen können

Und jetzt, nach dem Aktualisieren des Blogbeitrags, können Sie die benutzerdefinierten Felddaten über dem regulären WordPress-Inhalt sehen:

Sie können jetzt Felder im Frontend sehen

Sie können jetzt Felder im Frontend sehen

Weitere Informationen finden Sie in der vollständigen Dokumentation von Advanced Custom Fields.

So zeigen Sie erweiterte benutzerdefinierte Felddaten mit einem Shortcode an

Um die Daten Ihrer benutzerdefinierten Felder viel einfacher anzuzeigen, können Sie auch Shortcodes verwenden. Der Nachteil hierbei ist jedoch, dass Sie den Shortcode jedes Mal hinzufügen müssen, wenn Sie ein benutzerdefiniertes Feld anzeigen möchten. Es gibt keine einfache Möglichkeit, diese Aufgabe zu automatisieren.

Der Shortcode lautet wie folgt:

Wenn Sie dies beispielsweise im WordPress-Editor eingegeben haben:

Verwenden von Shortcodes zum Anzeigen von ACF-Daten

Verwenden von Shortcodes zum Anzeigen von ACF-Daten

Dann würde das Frontend Ihrer Site genau so aussehen wie die vorherige Theme-Template-Methode:

The shortcodes look identical to the theme template fileDie Shortcodes sehen identisch mit der Theme-Vorlagendatei aus

Die Shortcodes sehen identisch mit der Theme-Vorlagendatei aus

So zeigen Sie erweiterte benutzerdefinierte Felder mit Elementor Pro an

Elementor ist einer der beliebtesten WordPress-Seitenersteller. Sie können Ihre Designs mithilfe der visuellen Drag-and-Drop-Bearbeitung erstellen. Nebenbei bemerkt, Elementor ist einer der offiziellen Partner von Kinsta.

Mit Elementor Pro, dem kostenpflichtigen Add-On, können Sie auch die Vorlagendateien Ihres Themas erstellen, einschließlich einer Option zum Einfügen dynamischer benutzerdefinierter Felddaten aus erweiterten benutzerdefinierten Feldern in Ihre Designs.

Dies ist eine großartige Option, wenn Sie die Flexibilität haben möchten, benutzerdefinierte Felddaten automatisch in Ihre Vorlagen aufzunehmen, sich aber nicht wohl fühlen, wenn Sie direkte Codeänderungen an den Vorlagendateien Ihres Themas vornehmen.

Um zu beginnen, gehen Sie zu Templates > Theme Builder und erstellen Sie eine neue Elementor-Vorlage für Ihre Post-Single:

Erstellen Sie eine neue Elementor-Einzelvorlage

Erstellen Sie eine neue Elementor-Einzelvorlage

Sie können die regulären Elementor-Widgets für Ihren Beitragstitel und Ihren Beitragsinhalt hinzufügen. Um dann die benutzerdefinierten Felddaten anzuzeigen, fügen Sie reguläre Texteditor-Widgets hinzu. Der einzige Unterschied hier, anstatt den Text zu bearbeiten, würden Sie die dynamische Option auswählen:

Die Option Elementor Pro "Dynamic""Dynamic" option

Die Option Elementor Pro „Dynamic“

Danach können Sie das ACF-Feld aus der Dropdown-Liste auswählen:

Select "ACF Field"Wählen Sie „ACF-Feld“

Wählen Sie „ACF-Feld“

Von dort aus können Sie das spezifische Feld auswählen, das Sie mit erweiterten benutzerdefinierten Feldern hinzugefügt haben:

Wählen Sie das spezifische Feld aus, das Sie anzeigen möchten

Wählen Sie das spezifische Feld aus, das Sie anzeigen möchten

Und Sie können auch die erweiterte Akkordeon-Registerkarte zum Voranstellen oder Anhängen von Informationen verwenden, mit der Sie Beschriftungen und Einheiten hinzufügen können:

Informationen voranstellen oder anhängen

Informationen voranstellen oder anhängen

Einfach, oder? Jetzt wiederholen Sie einfach für andere benutzerdefinierte Felder!

Zusammenfassung

Mithilfe erweiterter benutzerdefinierter Felder können Sie Ihre Seiten und Blogbeiträge mit einer benutzerfreundlichen Lösung mit mehr Daten und Informationen anreichern. Mehr: Sie können damit beginnen, zusätzliche Informationen für jeden Inhalt Ihrer Website zu sammeln und diese dann im Frontend für Ihre Besucher anzuzeigen.

Dazu haben Sie 3 Möglichkeiten:

  • Die Vorlagendateien Ihres Themas
  • Mit einem Shortcode
  • Mit Elementor Pro

Das Wissen, das Sie in diesem Beitrag erworben haben, lässt Sie das tiefe Potenzial von WordPress freisetzen, um 100% benutzerdefinierte Websites zu erstellen, die weit über die Blogging-Wurzeln von WordPress hinausgehen.

Die einzige Frage ist:

Was werden Sie mit erweiterten benutzerdefinierten Feldern erstellen? Teilen Sie es uns in den Kommentaren unten mit

Wenn Ihnen dieser Artikel gefallen hat, werden Sie die WordPress-Hosting-Plattform von Kinsta lieben. Laden Sie Ihre Website auf und erhalten Sie 24/7 Support von unserem erfahrenen WordPress-Team. Unsere von Google Cloud betriebene Infrastruktur konzentriert sich auf automatische Skalierung, Leistung und Sicherheit. Lassen Sie uns Ihnen den Kinsta-Unterschied zeigen! Schauen Sie sich unsere Pläne an