WordPress- Themes erweitern . Mit erweiterten benutzerdefinierten Feldern können Sie individuelle Informationen hinzufügen. Beispielsweise verwendet ein WooCommerce-Plugin Felder für Produktdetails wie Preis und Farbe. Ein Veranstaltungs-Plugin verwendet Felder für Veranstaltungsort und -zeit. Benutzerdefinierte Felder bieten Ihnen die Flexibilität, relevante Daten zu speichern.
Die benutzerdefinierten Felder von WordPress ermöglichen es Nutzern, zusätzliche inhaltsbezogene Daten einzubinden, zu speichern und anzuzeigen. Als Metadaten-Container unterstützen sie verschiedene Funktionen in Plugins und Themes. Darüber hinaus können Nutzer benutzerdefinierte Felder erstellen, die auf ihre spezifischen Anforderungen zugeschnitten sind und so die personalisierte Datenverwaltung in WordPress erleichtern.
In diesem Blogbeitrag zeigen wir Ihnen, wie Sie erweiterte benutzerdefinierte Felder in verschiedenen Phasen der WordPress-Entwicklung das WordPress-Design .
Warum benötigt man benutzerdefinierte Felder in WordPress?
Ob Sie einen Onlineshop mit WooCommerce betreiben oder Termine mit einem Kalender-Plugin planen – benutzerdefinierte Felder bieten eine vielseitige Lösung, um Ihre Website individuell anzupassen. Sie ermöglichen es Ihnen, zusätzliche Daten über die Standardfelder für Beiträge oder Seiten hinaus zu speichern und so dynamischere und optisch ansprechendere Inhaltslayouts zu erstellen.
Lesen Sie auch : Über 40 der besten WooCommerce-Plugins
Zu den wichtigsten Vorteilen der Verwendung von benutzerdefinierten Feldern gehören:
Metadatenspeicherung: Speichern Sie relevante Metadaten für Beiträge, Seiten oder benutzerdefinierte Beitragstypen.
Verbesserte Inhaltsdarstellung: Inhalte werden übersichtlich und ästhetisch ansprechend präsentiert.
Plugin-Integration: Nahtlose Integration mit beliebten Plugins für SEO , E-Commerce, Caching , Events, Sicherheit , WordPress-Suche und mehr.
Individuelles Nutzererlebnis: Passen Sie die UX Ihrer Website für Kleinunternehmen , indem Sie spezifische Inhalte basierend auf benutzerdefinierten Feldern anzeigen.
Zukunftssichere Flexibilität: Einfache Anpassung an sich ändernde Inhaltsanforderungen ohne Modifizierung der WordPress-Kernstruktur.
Haben Sie eine unübersichtliche WordPress-Website, die Ihre Kunden abschreckt?
Unsere erfahrenen Designer können Ihr Website-Design mit erweiterten benutzerdefinierten Feldern für WordPress überarbeiten
Was sind die in WordPress integrierten benutzerdefinierten Felder?
Das Hinzufügen benutzerdefinierter Felder in WordPress ist einfach und effizient und verbessert die Inhaltsorganisation und Funktionalität. Dank der Optionen im klassischen Editor und im Block-Editor ist die Aktivierung integrierter benutzerdefinierter Felder in WordPress unkompliziert und ermöglicht die nahtlose Eingabe von Schlüssel-Wert-Paaren für eine erweiterte Anpassung.
So sollten Sie vorgehen:
Einrichtung des klassischen Editors: Zugriff auf die Bildschirmoptionen und Aktivierung benutzerdefinierter Felder für die Benutzeroberfläche des klassischen Editors.
Mehr erfahren : WordPress 6.2: Überarbeiteter Website-Editor, ablenkungsfreier Schreibmodus und aktualisierter Block-Einfüger
Einrichtung des Blockeditors: Navigieren Sie zum Bereich „Optionen“ und aktivieren Sie die benutzerdefinierten Felder für den Blockeditor.
Zugriff auf benutzerdefinierte Felder: Sobald die benutzerdefinierten Felder aktiviert sind, finden Sie den Abschnitt „Benutzerdefinierte Felder“ unterhalb Ihrer Inhalte.
Daten eingeben: Geben Sie Ihre benutzerdefinierten Feldinformationen mithilfe von Schlüssel/Wert-Paaren ein.
Integrierte Funktionalität: Die native Methode ist zwar funktional, aber möglicherweise nicht benutzerfreundlich. Überprüfen Sie die Optimierungsmöglichkeiten.
Plugins in Betracht ziehen: Viele entscheiden sich für das Advanced Custom Fields-Plugin, um eine intuitivere Bedienung zu ermöglichen.
Hinzufügen eigener Felder in Advanced Custom Fields: Eine Schritt-für-Schritt-Anleitung
Advanced Custom Fields (ACF) bietet eine zugängliche und kostengünstige Premium-Version. Die kostenlose Version deckt mit verschiedenen Feldtypen und benutzerfreundlichen Funktionen die meisten grundlegenden Anforderungen ab.
Die Pro-Version bietet praktische Funktionen wie Wiederholungsfelder für mehrere Dateninstanzen pro Beitrag, ACF-Blöcke für Gutenberg , flexible Inhaltsfelder für individuelle Layouts und Galeriefelder zum Hochladen mehrerer Bilder. ACF PRO ist ab 49 US-Dollar pro Jahr für die Nutzung auf einer einzelnen Website erhältlich und kann bei Bedarf flexibel erweitert werden.
Unabhängig davon, ob Sie die kostenlose oder die Pro-Version verwenden, erfolgt das Hinzufügen Ihrer Felder nach dieser Methode –
Eine neue Gruppe von Feldern erstellen
Nach der Installation und Aktivierung der barrierefreien Version von Advanced Custom Fields von WordPress.org gehen Sie zu Benutzerdefinierte Felder > Neu hinzufügen, um Ihre erste Feldgruppe zu erstellen.
Eine „Feldgruppe“ ist eine Gruppe von benutzerdefinierten Feldern, die gemeinsam in Ihrem WordPress-Dashboard angezeigt werden.
In diesem Beispiel erstellen wir eine Feldgruppe mit fünf benutzerdefinierten Feldern.
Benennen Sie Ihre Feldgruppe und wählen Sie aus, wo sie angezeigt werden soll. Bei Blogbeiträgen sollte sie standardmäßig im Beitragsfeld angezeigt werden. Wenn Sie sie jedoch an einer anderen Stelle, beispielsweise bei einem benutzerdefinierten Beitragstyp, anzeigen möchten, können Sie dies ändern. Sie können auch Regeln hinzufügen, um Ihre Felder an verschiedenen Stellen anzuzeigen.
Weiterlesen : Wie entwickelt man eine individuelle WordPress-Website?
Benutzerdefinierte Felder hinzufügen
Um fortzufahren, wählen Sie die Schaltfläche „+ Feld hinzufügen“, um Ihr erstes benutzerdefiniertes Feld einzufügen. Es werden Ihnen zahlreiche Optionen angezeigt, die Angabe aller Felder ist jedoch optional.
Die beiden Hauptauswahlmöglichkeiten sind:
Feldbezeichnung: Dies ist der im Editor angezeigte Name und dient als Grundlage für den im Code verwendeten Feldnamen. Die Änderung des Feldnamens ist optional.
Feldtyp: Wählen Sie den Datentyp aus, den Sie erfassen möchten, z. B. Zahl für numerische Daten oder E-Mail für E-Mail-Adressen.
Wählen Sie für das erste Feld den Feldtyp „Optionsfeld“. Geben Sie anschließend im Feld „Auswahlmöglichkeiten“ die gewünschten Optionen für die Optionsfeldauswahl ein. Passen Sie außerdem die Einstellungen wie Feldvoraussetzungen und Standardwerte nach Bedarf an.
Ein weiteres Szenario: Verwenden Sie ein benutzerdefiniertes Feld, um die Distanz eines Laufs zu erfassen. Wählen Sie in diesem Fall den Feldtyp „Zahl“. Zur besseren Benutzerfreundlichkeit können Sie die Distanzeinheit angeben und Minimal- und Maximalwerte für die Datenvalidierung festlegen.
Wiederholen Sie diese Schritte für alle weiteren benutzerdefinierten Felder, die Sie hinzufügen möchten. Nach Abschluss der Konfiguration sollte diese dem bereitgestellten Beispiel ähneln.
Konfigurieren und Veröffentlichen
Um den Vorgang abzuschließen, scrollen Sie nach unten zum Einstellungsbereich. Hier können Sie anpassen, wie Ihre Felder im WordPress-Editor angezeigt werden.
Normalerweise können Sie die Standardeinstellungen beibehalten, aber Sie können sie bei Bedarf natürlich anpassen. Beispielsweise können Sie Ihre benutzerdefinierten Felder über dem regulären WordPress-Editor anzeigen lassen. Sobald Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf „Veröffentlichen“, um Ihre Feldgruppe zu aktivieren.
Lesen Sie auch : WordPress-Problem „Veröffentlichung fehlgeschlagen. Die Antwort ist keine gültige JSON-Antwort.“ beheben
Informationen im WordPress-Editor erweitern
Nach der Veröffentlichung Ihrer Feldgruppe stehen Ihre benutzerdefinierten Felder beim Erstellen eines neuen Beitrags sofort zur Verfügung. Sie werden sowohl im klassischen TinyMCE-Editor als auch im neuen Block-Editor nahtlos unterhalb des Editors integriert.
Erweiterte benutzerdefinierte Felder im Frontend
Herzlichen Glückwunsch! Sie haben die Hälfte Ihrer Reise mit Advanced Custom Fields geschafft. Jetzt widmen wir uns einem entscheidenden Schritt: der Anzeige Ihrer benutzerdefinierten Felddaten im Frontend Ihrer Website.
Auch wenn Sie Ihren Blogbeiträgen benutzerdefinierte Felder hinzufügen, werden diese weiterhin wie normale Frontend-Beiträge angezeigt.
Lasst uns das ändern!
Hier sind drei Methoden, um Ihre Advanced Custom Fields-Daten anzuzeigen:
Theme-Vorlagendateien: Am besten geeignet für alle, die mit technischen Aspekten vertraut sind und gerne mit Vorlagendateien arbeiten. Alternativ AI-Vorlagen
Shortcode: Einfach und geeignet zum Einfügen von Felddaten in bestimmte Beiträge, erfordert jedoch manuellen Aufwand.
Elementor Pro: Eine Premium-Option, die die PHP-Arbeit überflüssig macht und ideal ist, wenn Sie einen visuellen Editor bevorzugen.
Wählen Sie die Methode, die Ihren Bedürfnissen entspricht, oder probieren Sie alle aus – Sie haben die Wahl!
Lesen Sie auch : Gutenberg vs. Elementor: Wer gewinnt im Jahr 2024?
Erweiterte benutzerdefinierte Felder mit Designvorlage
Die erste Methode, um Ihre benutzerdefinierten Feldinformationen anzuzeigen, besteht darin, die PHP-Funktionen von Advanced Custom Fields direkt in die Template-Dateien Ihres Child-Themes einzufügen. Diese Methode ist zwar etwas fortgeschrittener, gewährleistet aber eine einheitliche Darstellung der benutzerdefinierten Felder.
Suchen und bearbeiten Sie die einzelne Template-Datei für Ihren Beitragstyp (z. B. single.php oder content-single.php für das TwentyNineteen-Theme).
Verwenden Sie die Funktion the_field(), um Feldinformationen anzuzeigen, indem Sie HTML-Markup mit PHP kombinieren.
Platzieren Sie dies oberhalb des regulären Beitragsinhalts in Ihrer Theme-Vorlagendatei, und voilà! Ihre benutzerdefinierten Felddaten werden nahtlos oberhalb des WordPress-Inhalts angezeigt.
Weiterlesen : Wie konvertiert man HTML in ein WordPress-Theme?
Erweiterte benutzerdefinierte Felder mit einem Shortcode
Suchen Sie nach einer einfacheren Möglichkeit, Ihre benutzerdefinierten Felddaten anzuzeigen? Dann sollten Sie Shortcodes verwenden. Fügen Sie den Shortcode einfach ein, wann immer Sie ein benutzerdefiniertes Feld anzeigen möchten. Das ist zwar praktisch, erfordert aber manuelle Arbeit und bietet keine Automatisierung.
Hier ist ein Beispiel für einen Shortcode:
Wenn Sie dies in den WordPress-Editor einfügen, erhalten Sie das gleiche Frontend-Erscheinungsbild wie bei der Verwendung einer Theme-Vorlage.
Abschluss
Die Beherrschung von Advanced Custom Fields eröffnet Ihnen unzählige Möglichkeiten, die Funktionalität und die Darstellung Ihrer Inhalte auf Ihrer WordPress-Website zu verbessern. Ob Sie einen Online-Shop betreiben, Veranstaltungen organisieren oder einfach Ihre Website personalisieren möchten – mit Custom Fields können Sie einzigartige Daten nahtlos speichern und anzeigen.
Dank der intuitiven Benutzeroberfläche, der Feldtypen und Integrationsmöglichkeiten des Plugins erstellen Sie ansprechende Layouts, optimieren die Inhaltsverwaltung und bieten personalisierte Nutzererlebnisse. Benutzerdefinierte Felder ermöglichen es Ihnen, Ihre Website flexibel an deren Weiterentwicklung anzupassen, ohne die Kernstruktur verändern zu müssen. Nutzen Sie die Leistungsfähigkeit von Advanced Custom Fields und entdecken Sie eine Welt voller Anpassungsmöglichkeiten, die Ihre WordPress-Website auf ein neues Niveau an Professionalität und Eleganz hebt.
