ACF Optionen Seite Merkmal

Wenn Sie Ihre WordPress-Website mit benutzerdefinierten Feldern und Optionen erweitern möchten, ist das Advanced Custom Fields (ACF) Plugin ein fantastisches Tool. 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, dies zu erreichen: die Verwendung der eingebauten Funktion oder die Programmierung. Sie können sich für die von Ihnen bevorzugte Variante entscheiden.

Seit Version 6.2 enthält ACF Pro eine integrierte Benutzeroberfläche zur 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 über die 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 wird. 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. Sie können nun benutzerdefinierte Felder hinzufügen und globale Website-Einstellungen 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 aus Ihrer Gruppe sehen.

Nachdem die Seite mit den Optionen eingerichtet und die Felder zugewiesen wurden, ist es nun an der Zeit, diese Felder im Frontend Ihrer Website zu präsentieren. Im Folgenden werden zwei Ansätze vorgestellt: Der erste nutzt Smart-Vorlagen, während der zweite den klassischen, manuellen Ansatz verfolgt. Es steht Ihnen frei, sich für die Methode zu entscheiden, die Ihren Wünschen entspricht.

Lassen Sie uns das Advanced Views Addon vorstellen.

Advanced Views bietet intelligente Vorlagen für die mühelose Anzeige von Inhalten. Es verfügt über integrierte Post-Queries und eine automatische Vorlagenerstellung, die eine schnelle Entwicklung bei gleichzeitiger Flexibilität ermöglichen.

Lassen Sie uns zunächst klären, was wir im Zusammenhang mit diesem Plugin unter "Vorlagen" verstehen: Advanced Views-Vorlagen basieren auf der Twig-Engine. Sie werden vielleicht denken: "Nicht schlecht, aber es erfordert immer noch das Abrufen von Feldern über PHP und das Schreiben von Markup von Grund auf, ganz zu schweigen vom Lesen der Twig-Dokumentation".

Hier glänzt das Plugin: "Smart Templates". Das bedeutet, dass wir keine Felder abrufen oder das Markup manuell von Grund auf neu erstellen müssen. Das Plugin bietet eine solide Grundlage, die die meisten Anwendungsfälle abdeckt. Wenn wir etwas Bestimmtes benötigen, können wir es leicht anpassen. Ist das nicht schön?

Werfen wir nun einen Blick auf die Grundlagen der Funktionsweise.

Das Plugin führt zwei neue Custom Post Types (CPTs) ein: ACF-Ansicht und ACF-Karte.

• Ansicht für Beitragsdaten und Advanced Custom Fields
  Wir erstellen eine Ansicht und weisen ein oder mehrere Beitragsfelder zu, das Plugin generiert dann einen Shortcode, mit dem wir die Feldwerte für die Benutzer anzeigen. Wir können die Ausgabe mit dem CSS-Feld gestalten, das in jeder Ansicht enthalten ist.
• Karte für die Auswahl von Beiträgen
  Wir erstellen eine Karte und weisen Beiträge (oder CPT-Elemente) zu, wählen eine Ansicht (die für die Anzeige der einzelnen Elemente verwendet wird) und das Plugin generiert einen Shortcode, den wir für die Anzeige der Beitragsliste verwenden. Die Liste der Beiträge kann manuell oder dynamisch mit Filtern zugewiesen werden.

Das Plugin bietet uns die Möglichkeit, mit den vertrauten WordPress-CPTs zu arbeiten, während es sich um die Abfrage und automatische Generierung von Twig-Markup-Vorlagen kümmert. Weitere Informationen über die Vorteile des Plugins finden Sie hier.

Installieren Sie das Advanced Views-Plugin auf Ihrer WordPress-Website und vergessen Sie nicht, es zu aktivieren. Außerdem muss das (kostenlose) ACF-Plugin installiert und aktiviert sein. Fahren Sie dann mit den nächsten Schritten fort.

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

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

1. Klicken Sie auf den Menüpunkt "Advanced Views", um die Seite Advanced 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. Drücken Sie die Schaltfläche "Veröffentlichen", um den Shortcode für die Ansicht zu generieren.
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 das HTML-Markup automatisch 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 Advanced 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 manipulieren.

Hier ist 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. Schauen Sie in die Liste der wichtigsten Feldtypen, um spezifische Anleitungen zu erhalten.

Für weitere Informationen sehen Sie sich das folgende Video an und lesen Sie den 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 im Kapitel "Hinter den Kulissen" erwähnt, speichert ACF die Werte der Optionsseitenfelder in der wp_options Tabelle. 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.

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

Wenn Sie z. B. Polylang verwenden, gibt es ein Addon, das dies übernimmt. Wenn Sie WPML verwenden, ist die Lösung 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 Advanced 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 kann.