Der grundlegende Leitfaden für benutzerdefinierte WordPress-Felder

Wenn es eine Funktion von WordPress gibt, die es von anderen Content-Management-Systemen (CMS) unterscheidet, dann ist es die Anpassung. Benutzerdefinierte Felder in WordPress sind ein integrierter Bestandteil des CMS, mit dem Sie nicht nur die angezeigten Metadaten und Informationen erweitern, sondern auch die Funktionalität und den Nutzen eines Beitrags oder einer Seite vollständig ändern können. Wir möchten Ihnen helfen, die Grundlagen zu verstehen. Wir werden besprechen, was benutzerdefinierte Felder sind, warum sie nützlich sind und einige Beispiele aus der Praxis für ihre Verwendung bereitstellen.

Abonnieren Sie unseren Youtube-Kanal

Was sind benutzerdefinierte WordPress-Felder?

Kurz gesagt, mit benutzerdefinierten WordPress-Feldern können Sie Seiten bestimmte Elemente hinzufügen. Es kann eine bestimmte Art von Bild oder Byline oder Autorenbiografie sein, vielleicht eine Bewertung oder sogar etwas wie, wie der Codex-Eintrag in benutzerdefinierten Feldern sagt, Stimmung, aktuelles Lesen, Hören oder Wetterfelder.

Diese Felder bilden die sogenannten Metadaten für Ihren Beitrag (im Grunde alles, was nicht im Hauptinhalt Ihres Artikels enthalten ist). Standardmäßig verfügt WordPress über Meta-Boxen für allgemeine Informationen wie Tags, Kategorien, Permalink, vorgestellte Bilder usw. Wenn Sie weitere hinzufügen möchten, verwenden Sie benutzerdefinierte Felder.

Vielleicht möchten Sie sogar Informationen hinzufügen, die jeder der Autoren in Ihrem Team ausfüllen muss, um einen Beitrag zu veröffentlichen.

Sie können ein erforderliches Feld erstellen, das die Veröffentlichung des Beitrags erst zulässt, wenn bestimmte Kriterien abgehakt sind. Denken Sie also daran, dass diese benutzerdefinierten Felder nicht nur für Informationen im Frontend dienen. Sie können auch für das Backend nützlich sein.

Hinzufügen von benutzerdefinierten Feldern zu einem WordPress-Beitrag

Standardmäßig sind benutzerdefinierte WordPress-Felder im Seiten- und Post-Editor deaktiviert. Wenn Sie den Blockeditor verwenden, können Sie sie ganz einfach aktivieren. Klicken Sie einfach auf das Zahnradsymbol in der oberen rechten Ecke des Bildschirms. Wählen Sie Optionen .

Aktivieren Sie dann benutzerdefinierte Felder am unteren Rand des angezeigten Bildschirms. Sie müssen die Seite neu laden, also stellen Sie sicher, dass Sie Ihre Arbeit zuerst speichern.

Sobald Sie aktiviert und neu geladen haben, werden Ihre benutzerdefinierten Felder-Meta-Boxen am unteren Rand des Bildschirms angezeigt. Unterhalb des Inhaltseditors des Bildschirms.

Während benutzerdefinierte WordPress-Felder unglaublich mächtig sind, sind die Standardfelder auf einen Textwert beschränkt. Es braucht PHP und Entwicklung, um sie robuster zu machen. Glücklicherweise gibt es Plugins, die das für dich tun, und wir werden dir zeigen, wie du sie zum Laufen bringst. Wenn Sie in einigen Beiträgen nur ein Textfeld benötigen und kein Plugin möchten, können Sie unten das Hinzufügen der benutzerdefinierten WordPress-Felder zum Frontend Ihres Themes überspringen. Dies gilt sowohl für die Standardfelder als auch für diejenigen, die von Plugins wie Advanced Custom Fields generiert werden.

Verwenden des Plugins für erweiterte benutzerdefinierte Felder

Wie bei den meisten Dingen in WordPress haben Sie bei der Implementierung zwei Optionen. Sie können die PHP-Dateien manuell bearbeiten, um benutzerdefinierte Feldfunktionen hinzuzufügen, oder Sie können ein Plugin verwenden. In diesem Fall empfehlen wir dringend, die Plugin-Route zu gehen. Wenn Sie jedoch das Bedürfnis verspüren, das PHP zu bearbeiten und in den Code einzusteigen, können Sie dies unter Aussehen – Theme-Editor tun. Hier ist die WP Codex-Seite zu benutzerdefinierten Feldern, um Sie in Schwung zu bringen. Es verlinkt auf die verschiedenen Template-Tags und Hooks, die Sie benötigen, damit es funktioniert.

Aber auch hier empfehlen wir dringend, das Advanced Custom Fields-Plugin anstelle des Optimierens von Code zu verwenden. Das Plugin ermöglicht alles, was Sie sich von benutzerdefinierten Feldern wünschen (und noch mehr), sodass wir das Rad nicht neu erfinden müssen. Wenn es funktioniert, funktioniert es. Benutze es.

Sobald ACF installiert und aktiviert wurde, sehen Sie in der linken Seitenleiste des WordPress-Admin-Panels einen Eintrag für benutzerdefinierte Felder . Es enthält drei Optionen: Feldgruppen , Neu hinzufügen und Tools .

Feldgruppen können als Mengen betrachtet werden. Alles, was Sie in derselben Box anzeigen möchten, wird in dieselbe Gruppe aufgenommen. Mit Neu hinzufügen können Sie sowohl eine neue Gruppe als auch ein neues benutzerdefiniertes Feld hinzufügen. In Tools können Sie verschiedene vorhandene Sätze benutzerdefinierter Felder von anderen WordPress-Sites importieren und exportieren.

Die Grundlagen von ACF

Das Erstellen der Felder selbst ist ziemlich einfach. Wechseln Sie in das Fenster Neu hinzufügen.

Unabhängig davon werden benutzerdefinierte ACF-Felder in eine Feldgruppe aufgenommen . Dies bedeutet nur die spezifischen Felder, die in derselben Box enthalten sind. Sie können es also benennen, wie es im Post-Editor erscheinen soll. Jedes Mal, wenn Sie der Gruppe einen einzelnen Eintrag hinzufügen möchten, klicken Sie auf die Schaltfläche Feld hinzufügen. Tun Sie dies jedes Mal, wenn Sie ein anderes Feld in derselben Meta-Box haben möchten. Die Standortregeln bestimmen, wo und wann die Box angezeigt wird. Da in diesem Beispiel der Beitragstyp gleich dem Beitrag ist, bedeutet dies, dass er nur in Beiträgen angezeigt wird. Keine Seiten oder andere benutzerdefinierte Beitragstypen.

Als Nächstes können Sie die Einstellungen für das Feld selbst auswählen. Was es tun wird und welche Funktion es auf der Site erfüllen wird.

Grundsätzlich wählst du deine Platzierung (unter dem Beitragsinhalt im Editor, Sidebar, über dem Inhalt etc.) sowie die Platzierung für den Text und die Felder selbst. Der Bereich " Auf dem Bildschirm ausblenden" ist der interessanteste. Je nachdem, wie Sie Ihre benutzerdefinierten Felder verwenden möchten, können Sie alle anderen Meta-Boxen aus Ihren Entwürfen ausschließen. Wählen Sie die Bedingungen für die Darstellung dieses benutzerdefinierten Felds aus, und bestimmen Sie dann, welche anderen Felder gegebenenfalls damit angezeigt werden. Darüber werden Sie sich oft nicht einmal Gedanken machen.

Erstellen benutzerdefinierter Felder mit ACF

Nachdem Sie Ihre Feldgruppe benannt haben, können Sie auf die Schaltfläche Feld hinzufügen klicken. Sie können eine beliebige Anzahl von Feldern in derselben Gruppe haben, aber stellen Sie sicher, dass sie alle aufeinander bezogen sind. Sie können mit ACF fast jedes Eingabefeld erstellen, das Sie sich vorstellen können.

Nehmen wir für dieses Beispiel an, dass wir eine WordPress-Site der Popkultur betreiben, die Filme ansieht und benutzerdefinierte Felder eine Bewertung anzeigen möchten, um aufzulisten, ob der Film gestreamt wird und wenn ja, wo er zu finden ist.

Diese befinden sich alle unter derselben Feldgruppe, jedoch unterschiedlichen Feldern. Wie Sie oben sehen können, wird die Datei Is It Streaming? Das Feld ist als Optionsfeld mit einem Ja/Nein-Selektor eingerichtet, der vor der Veröffentlichung erforderlich ist. Darüber hinaus möchten wir, dass ein bedingtes Feld angezeigt wird, wenn das Feld als Ja markiert ist . Dies geschieht einfach durch erneutes Drücken von Feld hinzufügen.

Wenn der Schalter Bedingte Logik aktiviert ist, müssen Sie nur auswählen, welchem ​​Feld es unterliegt und wie der Wert sein muss. Ist es in diesem Fall Streaming? muss gleich Ja sein.

Im Post-Editor sieht der Eintrag für benutzerdefinierte Felder wie folgt aus:

Und wenn Sie Ihren Beitrag veröffentlichen, werden die von Ihnen eingegebenen Metadaten Teil des Beitrags. Aber es gibt noch ein Problem. Sie können es nicht sehen und Ihre Besucher auch nicht.

So zeigen Sie benutzerdefinierte Felder im WordPress-Front-End an

Selbst wenn Sie all dies perfekt gemacht haben, werden die von Ihnen eingegebenen Daten nicht ohne ein wenig Feinabstimmung im Frontend Ihrer Site angezeigt. Wo würde es schließlich auftauchen? In vielen Fällen bietet Ihr Design die Möglichkeit, Metadaten und benutzerdefinierte Felder anzuzeigen, aber diese unterscheiden sich von Design zu Design. Überprüfen Sie Ihre Designoptionen für die Dokumentation.

Eine weitere Möglichkeit, benutzerdefinierte Felder im Frontend anzuzeigen, sind die integrierten ACF-Shortcodes. In ACF ist zwar kein Customizer oder Builder integriert, Sie können den folgenden Shortcode jedoch nur für Textfelder verwenden .

Da es jedoch auf Textfelder beschränkt ist, kann es für viele Benutzer nur eingeschränkt verwendet werden. Sie können auch in PHP einsteigen und den ACF-Code verwenden, wie in den Dokumentationsbeispielen. Sie können auch auf ACF Pro upgraden und Zugriff auf den integrierten Gutenberg-Block erhalten, der das benutzerdefinierte Feld genau so anzeigt, wie Sie es im Builder gestalten.

Aber wie gesagt, viele Themes sind heutzutage vollgepackt mit der Integration von benutzerdefinierten Feldern, und wir zeigen Ihnen, wie das in Divi gehandhabt wird.

So zeigen Sie benutzerdefinierte Felder im Front-End mit Divi . an

Denken Sie zunächst daran, dass viele Divi-Module Shortcodes rendern können. So oft können Ihre in ACF erstellten benutzerdefinierten Textfelder einfach mit ihren Shortcodes eingefügt werden, wie oben erwähnt.

Für unser obiges Beispiel, das bedingte Logik und Optionsfelder verwendet, verwenden wir die dynamische Inhaltsfunktion von Divi. Es ist auch super einfach zu bedienen. Wir zeigen Ihnen dies mit dem Divi Theme Builder, aber Sie können es in buchstäblich jedem Modul verwenden, das es im regulären Divi-Builder unterstützt. Klicken Sie auf das Schwarze + und wählen Sie das gewünschte Modul aus. Dazu ist es das Textmodul.

Suchen Sie als Nächstes den Teil des Moduls, in den Sie das benutzerdefinierte Feld einfügen möchten. Suchen Sie nach dem Symbol für dynamische Inhalte auf der rechten Seite eines Ortes, der die Funktion unterstützt.

Klicken Sie darauf, um aus dem Dropdown-Menü alle verfügbaren Arten von dynamischem Inhalt auszuwählen, einschließlich aller benutzerdefinierten Felder. Sie können ganz unten sein.

Divi bietet Ihnen die Möglichkeit, Ihrem Feldinhalt grundsätzlich Vorher/Nachher-Beschriftungen hinzuzufügen. Wir möchten, dass unserer als Teil des Beitrags natürlich gelesen wird. Ist dieser Film also zum Online-Streaming verfügbar? wird vor dem Wert platziert, wenn das Feld gerendert wird. Außerdem haben wir am Ende ein nachgestelltes Leerzeichen hinzugefügt, um unser Label vom ACF-Wert zu trennen.

Da Sie pro Modulbereich nur einen dynamischen Inhalt haben können, wiederholen Sie diesen Vorgang für andere Felder. Beachten Sie jedoch, dass das benutzerdefinierte Feld zwar bedingt ist, das Divi-Modul jedoch nicht . Wenn Sie also ein Vorher/Nachher-Label für ein Bedingungsfeld verwenden, wird dieses Label immer noch angezeigt. Wenn Sie sie leer lassen, wird überhaupt kein Wert gerendert.

Darüber hinaus ermöglicht die Option Raw HTML aktivieren das Rendern von Code, den Sie in das ACF-Feld eingeben, z. B. Links zu den verschiedenen Plattformen usw.

Einpacken

Wie Sie sehen, sind benutzerdefinierte WordPress-Felder, obwohl sie ziemlich kompliziert erscheinen, eine Funktion, für die kein Entwickler benötigt wird. Installieren Sie einfach ACF und beginnen Sie mit der Anpassung, wie Sie und Ihr Team Informationen eingeben. Egal, ob es sich um eine Bewertungswebsite, einen E-Commerce-Marktplatz oder sogar nur um einen freundlichen Blog handelt, in dem Sie teilen möchten, was in Ihrem Leben vor sich geht, die Möglichkeit, die Metadaten Ihrer Beiträge und Seiten zu optimieren und zu perfektionieren, kann Ihre Website auf ein neues Niveau heben.

Wofür verwenden Sie benutzerdefinierte WordPress-Felder?

Ausgewähltes Bild von SurfsUp / shutterstock.com