ACF-Dateifeld: Leitfaden zur Verwendung und Anzeige

Das Dateifeld ist eines von vielen ACF-Feldtypen und ermöglicht es Ihnen, Anhänge aus der Mediathek zu jeder Seite "hinzuzufügen".

Im Gegensatz zum Bildfeld, das nur die Auswahl von Bildern erlaubt (.png, .jpg, .gif und so weiter), können Sie im Dateifeld eine Datei mit beliebiger Endung aus Ihrer Medienbibliothek auswählen, einschließlich verschiedener Dateitypen wie .pdf und .doc

Im Gegensatz zum Bildfeld bietet es keine Vorschau der ausgewählten Datei, so dass Sie nur den Dateinamen und die Dateigröße sehen können. Normalerweise verwenden Entwickler diesen Feldtyp, um einen Link zum Herunterladen oder "Öffnen" einer Datei zu erstellen.

Das Feld unterstützt viele verschiedene Dateierweiterungen. Die Liste der zulässigen Erweiterungen für alle Dateitypen finden Sie auf der zugehörigen wordpress.org Seite.

Das ACF-Dateifeld hat 3 Optionen in der Einstellung Rückgabetyp: Dateiarray, Datei-URL und Datei-ID. Diese Einstellung hat keinen Einfluss auf das Aussehen des Feldes für Admin-Editoren. Sie steuert jedoch das Format des Wertes, den Sie im Code zurückerhalten, wenn Sie den Feldwert aus der Datenbank abfragen.

Deshalb würde ich vorschlagen, dass Sie die Option "Datei-ID" verwenden. Sie ist die beste Wahl für die Leistung und ermöglicht es Ihnen, zusätzliche Daten über den ausgewählten Anhang zu erhalten, wie den Dateinamen oder das Upload-Datum. Nehmen Sie Abstand von der Option "Datei-URL", es sei denn, Sie benötigen diese Option für ein bestimmtes Ziel. Denn damit erhalten Sie keine zusätzlichen Daten über den Anhang.

Wie bereits erwähnt, arbeitet das Dateifeld mit der Medienbibliothek zusammen und ermöglicht es Ihnen, alle Arten von Anhängen zu Seiten hinzuzufügen. Sie müssen jedoch wissen, dass "Hinzufügen" einer Datei eigentlich "Anhängen" bedeutet, nicht Kopieren. Das Feld ist nur der Vermittler zwischen einer Seite und der Mediathek und verbindet die ID der von Ihnen gewählten Datei mit der Post Meta der aktuellen Seite. Das heißt, es werden keine Duplikate oder physischen Kopien der Datei erstellt.

Auch wenn Sie einen neuen Anhang über das Dialogfeld zum Hochladen eines Feldes hochladen, wird die Datei wie ein gewöhnlicher Anhang in die Mediathek hochgeladen, wobei das Dateifeld nur die Anhang-ID speichert. Auf diese Weise können Sie eine Datei an viele Seiten "anhängen" und es werden keine Kopien erstellt.

Sie müssen Ihren Anhängen trotzdem eindeutige Namen geben, und Sie sollten wirklich versuchen, das mehrfache Hochladen derselben Datei zu vermeiden. Denn die Mediathek weiß nicht, ob es sich bei dem hochgeladenen Anhang um einen völlig neuen Anhang handelt oder ob er bereits existiert. Wenn Sie sich also nicht sicher sind, sollten Sie vor dem Hochladen kurz in der Mediathek nachsehen. Andernfalls werden Sie im Laufe der Zeit eine Menge Kopfschmerzen mit mehreren Kopien desselben Objekts haben.

Außerdem hat die Einstellung für das Rückgabeformat keinen Einfluss auf den gespeicherten Wert. Es handelt sich immer um eine Attachment-ID. Wenn Sie das Rückgabeformat "Datei-ID" nicht ausgewählt haben, wird das ACF-Plugin jedes Mal, wenn Sie das Feld abfragen, zusätzliche Arbeit leisten, um die gespeicherte Anhang-ID in ein anderes Format umzuwandeln, weshalb es für die Leistung besser ist, die native Option "Datei-ID" zu verwenden.

Shortcodes sind eine der mächtigsten und einfachsten WordPress-Funktionen, die es gibt. Mit Shortcodes können Sie PHP-Funktionen direkt in Ihrem Editor, wie Gutenberg, "aufrufen". So können Sie dynamische Inhalte darstellen.

Um einen Shortcode zu erstellen, müssten Sie PHP-Code schreiben. Aber das werden wir heute nicht tun, wir werden ein kostenloses Plugin namens ACF Views verwenden. Dieses Plugin nimmt uns die ganze Arbeit ab und ermöglicht es Ihnen, jedes ACF-Feld mit automatisch generierten Shortcodes anzuzeigen. Lesen Sie wie man ACF-Felder ohne Programmierung anzeigt, um alle Vorteile des Shortcode-Ansatzes zu erfahren.

Unten haben wir ein Video-Tutorial angehängt, das zeigt, wie man ACF-Felder auf einer einzelnen Seite mit Hilfe von Shortcodes anzeigen kann. Das Video ist für alle ACF-Feldtypen gleich. Weitere Video-Tutorials auf dem official YouTube channel.

Sie können das Video aber auch überspringen, denn weiter unten finden Sie eine vollständige Schritt-für-Schritt-Anleitung genau für das ACF-Dateifeld.

Wenn Sie der Anleitung folgen wollen, müssen Sie:

1. Installieren Sie das ACF Views Plugin auf Ihrer WordPress Seite. Und vergessen Sie nicht, es zu aktivieren. Es ist ein Add-on zu ACF, also müssen Sie auch
2. Installieren Sie das kostenlose Plugin Advanced Custom Fields (ACF) und aktivieren Sie es.

Nachdem Sie das ACF Views Plugin aktiviert haben, sehen Sie einen neuen Punkt in Ihrem Admin-Menü, der "ACF Views" heißt.

Dieser Eintrag hat ein Untermenü mit mehreren Einträgen, aber wir brauchen nur den einen mit der Bezeichnung "ACF Views".

Klicken Sie auf die Schaltfläche "Neu hinzufügen", um eine Ansicht zu erstellen.

Hinweis: Der Begriff "View" ist die Bezeichnung für den speziellen Post Type, den das Plugin bereitstellt. Jede Ansicht ist eine Liste von ACF-Feldern, die angezeigt werden sollen, so dass Sie viele verschiedene Ansichten haben können, um verschiedene Felder (oder Gruppen von Feldern) für verschiedene Beiträge/Seiten anzuzeigen.

Dann gib deiner Ansicht einen Namen, du kannst alles verwenden, was die Ansicht beschreibt. Dieser Name wird nur in der Liste der Ansichten angezeigt, damit sie leichter zu finden ist. Ich habe meine Ansicht "Seitenkatalog" genannt.

Nun müssen Sie Ihrer Ansicht ein neues Feld zuweisen. Klicken Sie auf die Schaltfläche "Feld hinzufügen" und wählen Sie Ihre "Gruppe" aus dem Dropdown-Menü. In meinem Fall hat die Gruppe den Namen "Seitenfelder". Dann wählen Sie das Zielfeld aus der Liste aus, ich habe "Katalog (Datei)" gewählt.

Hinweis: Der Feldtyp wird in den Klammern nach dem Dateinamen angezeigt. So können Sie den Typ eines jeden Feldes in der Dropdown-Liste leicht identifizieren.

Sie sollten auch den Typ als "Datei" sehen. Definieren Sie ein "Link Label" für unseren zukünftigen Link. Oder lassen Sie es leer, wenn Sie möchten, dass das Plugin es aus dem ausgewählten Anhang übernimmt.

Insgesamt kann jede Ansicht eine unbegrenzte Anzahl von ACF-Feldern haben, für unseren Fall werden wir nur eines verwenden.

Klicken Sie auf die Schaltfläche "Veröffentlichen", um Ihre Ansicht zu speichern und zu veröffentlichen. Sobald sie veröffentlicht ist, wirst du feststellen, dass Shortcodes in einem Block auf der rechten Seite deines View Bearbeitungsbildschirms generiert wurden. Jeder View hat seinen eigenen Shortcode mit einer eindeutigen ID (die Shortcode-Struktur ist für alle Views gleich, aber die Argumente sind eindeutig).

[acf_views view-id="xxxx" name="x"]

Nun müssen wir den Shortcode kopieren. Dazu klicken wir auf die Schaltfläche "In die Zwischenablage kopieren" auf dem ersten Shortcode.

Nachdem wir nun alles vorbereitet haben, können wir das Dateifeld anzeigen.

Besuchen Sie Ihre Zielseite, auf der das Dateifeld angezeigt werden soll. Vergessen Sie nicht, zu überprüfen, ob ein Anhang im Dateifeld vorhanden ist, und fügen Sie den Shortcode an der gewünschten Stelle im Seiteninhalt ein.

Um den Shortcode mit dem Gutenberg-Editor einzufügen, klicke einfach auf den Plus-Button in der oberen Leiste und wähle den Block "Shortcode" aus der Liste aus. Füge dann deinen Shortcode in den Block ein und klicke auf die Schaltfläche "Aktualisieren", um deinen Beitrag/deine Seite zu speichern.

Besuchen Sie die Seite, um das Ergebnis zu sehen. Wenn Sie alles richtig gemacht haben, sollte die ausgewählte Datei im Inhalt als Link mit der von Ihnen definierten Bezeichnung angezeigt werden. Oder mit dem Dateinamen der angehängten Datei, falls Sie ihn leer gelassen haben.

Wenn Sie Ihren Link nicht sehen können, gehen Sie zurück und bearbeiten Sie die Seite. Vergewissern Sie sich, dass Sie eine Datei an das ACF-Dateifeld angehängt haben, denn wenn das Feld leer ist, wird nichts angezeigt.

In den meisten Fällen müssen wir das Dateifeld in einen Link umwandeln, der den Benutzern angezeigt wird. Wenn sie versuchen, den Anhang herunterzuladen oder ihn in einer neuen Browser-Registerkarte zu öffnen, ist das für sie ganz einfach. Dazu müssen Sie die URL der Datei (und wahrscheinlich auch den Namen) ermitteln und dann den HTML-Code für den Link erstellen.

Der Code wird je nach ausgewähltem Rückgabetyp unterschiedlich sein. Nachfolgend finden Sie Beispiele.

1. PHP-Code zur Anzeige des Feldes "Datei" mit dem Rückgabeformat "ID":

<?php

// don't forget to replace 'file' with your field name
$fileID = get_field('file');
if ($fileID) {
   // $fileID is an ID (integer) of a Post with the Attachment type. 
   // we need to use the built-in WP functions to get necessary data
    $url = wp_get_attachment_url($fileID);
    $name = get_post($fileID)->post_title ?? '';
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", esc_attr($url), esc_attr($name), esc_html($name));
}

2. PHP-Code zur Anzeige des Feldes Datei mit dem Rückgabeformat "Array":

<?php

// don't forget to replace 'file' with your field name
$fileData = get_field('file');
if ($fileData) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='%s'>%s</a>", 
     esc_attr($fileData['url']), esc_attr($fileData['filename']), esc_html($fileData['filename']));
}

3. PHP-Code zur Anzeige des Feldes Datei mit dem Rückgabeformat "URL":

<?php

// don't forget to replace 'file' with your field name
$fileUrl = get_field('file');
if ($fileUrl) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='prices.pdf'>Prices.pdf</a>", esc_attr($fileUrl));
}

Wir haben das download-Attribut (weiterlesen) verwendet, um dem Browser eines Kunden mitzuteilen, dass diese Datei nicht geöffnet, sondern heruntergeladen werden muss. Der Wert des Attributs wird als Name für die herunterzuladende Datei verwendet. Entfernen Sie das Attribut, wenn Sie wollen, dass diese Datei geöffnet statt heruntergeladen wird.

Mit dem "URL"-Rückgabeformat müssen wir den Dateinamen hart codieren. Es gibt keine Möglichkeit, diesen Code für andere Dateien zu verwenden oder ihn ohne Codebearbeitung zu ändern. Deshalb ist es besser, immer das "ID"-Rückgabeformat zu wählen.

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

Sie haben einen genaueren Blick auf das ACF-Dateifeld geworfen, und wie man es verwendet und anzeigt. Wir haben die wichtigsten Aspekte aufgezeigt, die Sie bei der Verwendung dieses Feldtyps beachten müssen.

Es ist nützlich zu wissen, dass man mehrere Felder (sogar aus verschiedenen Gruppen) in einer einzigen Ansicht haben kann, und dass man die Feldausgabe mit Hilfe des CSS-Code-Feldes gestalten kann (siehe die Registerkarte "Erweitert" der Ansicht). Das Plugin fügt diesen CSS-Code nur auf Seiten hinzu, auf denen Sie den Shortcode verwenden. Sie brauchen also nicht nach einem Platz dafür zu suchen.

Besuchen Sie die ACF Views offizielle Website, um weitere Informationen über das Plugin zu erhalten. Sie finden dort auch Links zum YouTube-Kanal des Plugins, der Video-Tutorials und die Plugin-Dokumentation enthält. Diese Ressourcen werden Ihnen helfen, sich schneller mit dem Plugin vertraut zu machen.