ACF Optionen Seite: Gebrauchsanweisung

Wenn Sie Ihre WordPress-Website mit benutzerdefinierten Feldern und Optionen erweitern möchten, ist das Advanced Custom Fields (ACF) Plugin ein fantastisches Tool, das Sie in Betracht ziehen sollten. Eine seiner herausragenden Funktionen ist die ACF-Optionen-Seite. Mit dieser leistungsstarken Funktion können Sie eine eigene Seite in Ihrem WordPress-Administrationsbereich erstellen, um globale Website-Einstellungen und andere damit verbundene Felder zu verwalten.

Nehmen wir an, Sie haben eine Website mit einem anpassbaren Theme und möchten einen zentralen Ort einrichten, an dem Administratoren die standortweiten Einstellungen steuern können. Die ACF-Optionen-Seite kann Ihre Lösung sein.

Sie können beliebige Felder aus dem reichhaltigen Angebot anfügen - vom einfachen Textfeld oder dem Bildfeld (z. B. Logo) bis hin zum Repeaterfeld - und so die standortweiten Optionen einfach verwalten. Die Möglichkeiten sind endlos!

Anders als bei der 'hart' kodierten Methode, können Sie mit der Optionsseite die Verwaltung dieser Einstellungen rationalisieren. Dadurch wird es für die Administratoren bequemer und effizienter, das Aussehen der Website zu pflegen.

Hinweis: Die Optionsseite ist eine Pro-Funktion und erfordert die Pro-Version des Advanced Custom Fields Plugins.

Um zu verstehen, wie die ACF-Optionen-Seite funktioniert, ist es wichtig zu wissen, wie ACF Daten speichert. Während ACF normalerweise Felder, die mit Beiträgen oder Seiten verbunden sind, in der wp_postmeta Tabelle Ihrer WordPress-Datenbank speichert, behandelt das Plugin in diesem Fall die Felder der Optionsseite anders. ACF speichert die Felder für die Optionsseite in der wp_options Tabelle. Diese Trennung ermöglicht eine bessere Organisation und Abfrage der Daten.

In der Praxis bedeutet dies für uns nur eine Änderung in Bezug auf das Abrufen von Werten: Sie müssen die "options"-Quelle als get_field() zweites Argument definieren, anstelle einer Post-ID.

Das Hinzufügen einer Optionsseite zu Ihrem WordPress-Administrationsbereich mit ACF ist ein unkomplizierter Prozess. Der Prozess besteht aus zwei Teilen:

1. Hinzufügen einer Optionsseite
2. Erstellen einer ACF-Feldgruppe und 'Anhängen' an die Optionsseite

Beginnen wir mit der ersten. Hier gibt es 2 Möglichkeiten: die Verwendung der eingebauten Funktion oder die Codierung. Sie können wählen, was Ihnen lieber ist.

Seit Version 6.2 enthält ACF Pro eine integrierte Benutzeroberfläche für die Erstellung von Optionsseiten. Zuvor war ein Addon für diese UI-Lösung erforderlich. Während die Verwendung dieses Addons nicht mehr so relevant ist wie früher, gibt es noch andere wertvolle ACF-Addons.

Schauen Sie sich das offizielle Video unten an, um zu sehen, wie Sie eine neue Optionsseite mithilfe der Benutzeroberfläche des Plugins hinzufügen.

Wenn Sie den kodierten Ansatz bevorzugen, öffnen Sie die Datei functions.php Ihres Themes und fügen Sie den unten stehenden Codeschnipsel ein. Wir verwenden die Funktion acf_add_options_page(), um die Optionsseite zu erstellen:

add_action('acf/init', function () {
    acf_add_options_page([
        'page_title' => 'Global Site Settings',
        'menu_title' => 'Site Settings',
        'menu_slug' => 'site-settings',
        'capability' => 'manage_options',
        'position' => 30,
        'icon_url' => 'dashicons-admin-generic',
    ]);
});

In diesem Beispiel erstellen wir eine Optionsseite mit dem Titel "Globale Site-Einstellungen" und dem Menütitel "Site-Einstellungen". Der Menü-Slug definiert die URL der Optionsseite. Wir setzen die Fähigkeit auf manage_options, um sicherzustellen, dass nur Administratoren darauf zugreifen können. Der Parameter position bestimmt die Platzierung der Optionsseite im WordPress-Adminmenü. Schließlich gibt die icon_url das Symbol an, das neben der Optionsseite im Menü angezeigt werden soll. Sie können jedes der verfügbaren Dashicons verwenden, indem Sie den entsprechenden Klassennamen angeben.

Speichern Sie die Änderungen in der Datei functions.php, und schon sind Sie fertig! Die Optionsseite wird nun im WordPress-Administrationsbereich angezeigt. Dort können Sie nun benutzerdefinierte Felder hinzufügen und die globalen Einstellungen der Website verwalten.

Nun ist es an der Zeit, unserer Optionsseite Felder zuzuweisen.

Erstellen Sie eine neue Feldgruppe in ACF und fügen Sie die erforderlichen Felder hinzu.

Wählen Sie dann unter den Einstellungen für den "Speicherort" der Feldgruppe die Regel "Optionsseite", um die Felder auf der Optionsseite anzuzeigen. So wie es im Screenshot unten gezeigt wird.

Speichern Sie die Feldgruppe, und schon sind Sie fertig! Jetzt können Sie Ihre Optionsseite besuchen und dort die Felder Ihrer Gruppe sehen.

Wir haben die Optionsseite hinzugefügt und die Felder zugewiesen. Jetzt müssen wir diese Felder, alle oder einige von ihnen, auf der Vorderseite unserer Website anzeigen. Im Folgenden stellen wir Ihnen 2 Methoden vor: die Shortcode-Methode (mit einem Plugin) und die andere mit Programmierung. Wählen Sie die Methode, die Sie bevorzugen.

Ein anderes ACF Addon, genannt ACF Views wird die Arbeit für uns erledigen. ACF Views ist ein kostenloses und intelligentes Addon, das es uns erlaubt, ausgewählte ACF-Felder (oder sogar Beiträge) überall mit Hilfe von Shortcodes anzuzeigen. Das HTML-Markup wird automatisch vom Plugin erstellt.

Der Ansatz des Plugins löst eine Reihe von Problemen auf einmal und nimmt uns eine Menge Arbeit ab.

Installieren Sie also das ACF Views Plugin aus dem WordPress.org Repository und aktivieren Sie es.

Wenn Sie das ACF Views-Plugin aktivieren, erscheint ein neuer Punkt im Admin-Menü, der "ACF Views" heißt. Dieser Punkt hat mehrere Unterpunkte, aber in unserem Fall werden wir nur mit dem Punkt "ACF Views" arbeiten.

Das folgende Video gibt einen Überblick darüber, wie eine neue ACF-Ansicht zu einer einzelnen Seite hinzugefügt werden kann. Während Sie sich das Video ansehen, bekommen Sie einen Eindruck davon, wie das Plugin funktioniert. Bitte beachten Sie jedoch, dass unser spezifisches Ziel etwas anders ist. Wir beabsichtigen, die Felder der Optionsseite anzuzeigen.

Um die Felder der Optionsseite anzuzeigen, folgen Sie den nachstehenden Textanweisungen:

1. Klicken Sie auf den Menüpunkt "ACF Views", um die Seite ACF Views aufzurufen.
2. Klicken Sie auf die Schaltfläche "Neu hinzufügen", um eine neue Ansicht zu erstellen.
3. Geben Sie Ihrer Ansicht auf der neuen Seite einen aussagekräftigen Namen. Nennen wir sie zum Beispiel "Site Settings".
4. Wählen Sie die Felder, die Sie anzeigen möchten, aus dem Dropdown-Menü.
5. Klicken Sie auf die Schaltfläche "Veröffentlichen", um den Shortcode für die Ansicht zu erstellen.
6. Kopieren Sie den generierten Shortcode und ändern Sie ihn so ab, dass der String 'options' an den Parameter 'object-id' als Argument übergeben wird. Ihr Shortcode wird also wie folgt aussehen: [acf_views view-id="5" name="Site Settings" object-id="options"]. Die Argumente view-id und name werden jedoch mit Sicherheit Ihre spezifischen Werte enthalten.
7. Fügen Sie den Shortcode an der entsprechenden Stelle ein. Dies kann eine beliebige Gutenberg-Seite oder sogar ein Widget sein. Denken Sie daran, das richtige Element zu verwenden, z. B. den Shortcode-Block des Gutenberg-Editors.
8. Speichern Sie und besuchen Sie die Seite, um das Ergebnis zu sehen.
9. Herzlichen Glückwunsch! Sie haben die Felder der Optionsseite erfolgreich angezeigt.

Anders als bei der Verwendung von benutzerdefiniertem Code müssen Sie sich nicht um den Namen, den Typ oder das Rückgabeformat des Feldes kümmern. Das Plugin generiert automatisch das HTML-Markup für Sie.

Zusätzlich können Sie CSS-Regeln anwenden, um die Ausgabe direkt in der Ansicht zu gestalten. Das Feld CSS-Code befindet sich auf der Registerkarte "Erweitert".

Während das ACF Views-Plugin eine hervorragende Lösung für die Anzeige von Feldern auf der Optionsseite bietet, bevorzugen einige Entwickler vielleicht einen eher praktischen Programmieransatz. In solchen Fällen ist die Verwendung von PHP-Code zum Abrufen und Anzeigen der Daten eine praktikable Option.

Es ist jedoch wichtig zu beachten, dass diese Methode ein höheres Maß an Programmierkenntnissen erfordert und für Anfänger nicht so benutzerfreundlich ist. Sie beinhaltet die Verwendung von Funktionen wie get_field(), um die Werte aus den Feldern der Optionsseite zu holen und sie dann manuell in Ihre PHP-Vorlagendateien einzugeben oder zu bearbeiten.

Hier ein einfaches Beispiel dafür, wie Sie ein Feld auf der Optionsseite mit PHP-Code anzeigen können:

// the code below expects the 'Image URL' Return Format 
$logoUrl = get_field('logo', 'options')?? '';
printf('<img src="%s" alt="logo">', $logoUrl);

Sie können dieselbe get_field()-Funktion wie in den anderen Fällen verwenden, indem Sie einfach den String 'options' als zweites Argument übergeben.

Die Komplexität dieses Ansatzes besteht darin, dass ACF über 30 Feldtypen hat und die Antwort von get_field nicht nur vom Feldtyp, sondern auch vom Feldrückgabeformat abhängt. In der Liste der wichtigsten Feldtypen finden Sie spezifische Anleitungen.

Weitere Informationen finden Sie im folgenden Video und im offiziellen ACF-Artikel.

Dieser Ansatz bietet zwar mehr Kontroll- und Anpassungsmöglichkeiten, erfordert aber ein tieferes Verständnis von PHP und WordPress-Entwicklung, was ihn für diejenigen, die eine intuitivere Lösung bevorzugen, weniger zugänglich macht.

Dies ist ein wichtiger Hinweis für mehrsprachige Websites, die Inhalte in mehreren Sprachen haben (oder haben werden).

Wie bereits im Kapitel "Hinter den Kulissen" erwähnt, speichert ACF die Werte der Optionsseitenfelder in der Tabelle wp_options. Dieser Unterschied bedeutet, dass Sie sie nicht auf die gleiche Weise übersetzen können wie normale Seiten oder Beiträge, indem Sie einen "anderen" Beitrag in einer bestimmten Sprache erstellen.

Das mag beängstigend klingen, aber keine Sorge, die meisten mehrsprachigen Plugins haben sich bereits darum gekümmert.

Wenn Sie zum Beispiel Polylang verwenden, gibt es ein Addon, das dies erledigt. Wenn Sie WPML verwenden, ist die Lösung bereits eingebaut, und Sie müssen nur die richtige Übersetzungsoption für Ihre ACF-Gruppe auswählen, um Felder übersetzbar zu machen.

Die Funktion der ACF-Optionen-Seite ermöglicht es WordPress-Administratoren, globale Website-Einstellungen und zugehörige Felder einfach zu verwalten.

Durch die Erstellung einer speziellen Optionsseite können Sie den Anpassungsprozess rationalisieren und die allgemeine Benutzerfreundlichkeit verbessern. Unabhängig davon, ob Sie das ACF Views-Plugin verwenden oder sich für eine PHP-Codierung entscheiden, bietet die Optionsseite die Möglichkeit, wichtige Aspekte Ihrer WordPress-Website zu zentralisieren und zu steuern.

Experimentieren Sie mit der Optionsseite und entdecken Sie, wie Sie die Verwaltung Ihrer Website effizienter und angenehmer gestalten können.