WPLake > Blog > ACF-Link-Feld: Leitfaden zur Verwendung und Anzeige
  • English
  • Español
  • Français
  • Italiano

ACF-Link-Feld: Leitfaden zur Verwendung und Anzeige

Zeit zum Lesen: 6 Minuten

-

Aktualisiert 25.08.23

-

ACF Anleitungen Plugins
Erfahren Sie, wie das Link-Feld funktioniert und sich verhält. Zeigen Sie den Feldwert mithilfe von Kodierung oder einem Shortcode an, mit automatischer Markup-Generierung.

Inhaltsübersicht

Über das Feld Link

#Link kopiert

Das ACF-Link-Feld ist eines von vielen ACF-Feldtypen und ermöglicht die Auswahl und Speicherung einer beliebigen Web-URL innerhalb einer Seite. Entwickler verwenden es üblicherweise für verschiedene Arten von Links und Schaltflächen.

Das Link-Feld verwendet das eingebaute WordPress-Link-Popup. Neben dem eigentlichen Link bietet es auch ein Feld zur Definition eines Link-Labels mit einigen Einstellungen, die den Link steuern. Zum Beispiel die Einstellung, ob der Link in einem neuen Tab geöffnet werden soll oder nicht.

Wenn Sie einen Link zu einer internen Datei erstellen möchten, z.B. eine .pdf, die in die Mediathek hochgeladen wurde, müssen Sie das ACF-Dateifeld anstelle des Linkfeldes verwenden.

Fügen Sie das Feld "Link" zu einer beliebigen ACF-Gruppe hinzu, indem Sie auf die Schaltfläche "Feld hinzufügen" klicken und im Dropdown-Menü "Feldtyp" "Link" auswählen.

Formate zurückgeben

#Link kopiert

Das Link-Feld hat eine Rückgabeformat-Einstellung mit zwei Optionen: "Link Array" und "Link URL". Die hier gewählte Option hat keinen Einfluss auf das Aussehen des Feldes für Administratoren oder Redakteure. Da die Felder im Popup immer noch gleich aussehen, liegt das daran, dass die Einstellungen für das Rückgabeformat die Codierungsseite steuern. Hier meinen wir die Antwort, die Sie im Code von der get_field() Funktion erhalten, wenn Sie das Feld abfragen.

Wir empfehlen, dass Sie immer die Option "Link Array" verwenden. Die zweite Option "Link URL" erlaubt es Ihnen nicht, die Beschriftung zu erhalten oder die "Ziel"-Einstellung (in einem neuen Tab öffnen) zu haben. Das bedeutet, dass Sie diese Argumente in Ihren Vorlagendateien "hart codieren" müssen. Dadurch können Sie sie später nicht mehr über das Popup ändern.

Wenn Sie der Zielseite ein Link-Feld hinzugefügt haben, können Administratoren und Redakteure eine URL auswählen, die dann auf der Seite gespeichert wird.
Das eingebaute WordPress-Link-Popup ermöglicht es, eine Linkbeschriftung und die Einstellung "Link in einem neuen Tab öffnen" zu definieren
Nach dem Einrichten einer URL können Sie die Details jederzeit bearbeiten. Klicken Sie auf das "Stift"-Symbol, um die Link-Felder zu bearbeiten, oder auf das "X"-Symbol, um sie zu entfernen.

Hinter den Kulissen von ACF

#Link kopiert

Hinter den Kulissen speichert das ACF-Link-Feld Ihre Auswahl in der Beitrags-Meta der aktuellen Seite (oder des Beitrags). In der Datenbank speichert das Meta-Feld Daten als Array (unabhängig vom Rückgabeformat). Dies dient dazu, alle Link-Felder, d.h. URL, Link-Text und die Option "in neuem Tab öffnen", für die Verwendung verfügbar zu halten. Aus diesem Grund haben wir die Verwendung des Rückgabeformats "Link Array" vorgeschlagen. Es entspricht dem Datenbankformat und liefert alle verfügbaren Informationen über den Link.

Link-Feld mit einem Shortcode anzeigen

#Link kopiert

Der Weg über den Shortcode ist recht flexibel, hat aber eine Reihe von Nachteilen.

  1. Es dauert seine Zeit
  2. Sie müssen den Rückgabetyp kennen
  3. Sie müssen sich bestimmte Schlüsselnamen im Antwort-Array merken
  4. Sie müssen manuell die richtige Seitenvorlage in Ihrem Thema finden und diese anpassen

Es gibt aber noch einen anderen Weg, einen Weg, der es Ihnen erlaubt, das ACF-Link-Feld (oder jeden anderen Feldtyp) anzuzeigen, ohne es zu kodieren. Dies ist möglich dank des kostenlosen ACF Views Plugins, das dies sehr einfach macht und Ihnen eine Menge Zeit spart.

Das Plugin kümmert sich um das HTML-Markup. Wir müssen nur die ACF-Felder auswählen, die angezeigt werden sollen, dann den automatisch generierten Shortcode kopieren und ihn an einer beliebigen Stelle auf unserer Seite einfügen. Dann ist von unserer Seite aus nichts weiter erforderlich. 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 gerne überspringen, denn weiter unten finden Sie eine ausführliche Schritt-für-Schritt-Anleitung genau für das ACF-Linkfeld.

Lassen Sie uns eintauchen.

Wenn Sie uns folgen wollen, müssen Sie das ACF Views-Plugin auf Ihrer WordPress-Website installieren und es aktivieren. Denken Sie daran, dass das Plugin ein Add-on zum ACF-Plugin ist. Stellen Sie also sicher, dass das ACF-Plugin ebenfalls installiert und aktiviert ist. Die gute Nachricht ist, dass Sie beide Plugins kostenlos herunterladen und verwenden können.

Nun sind Sie bereit, machen wir weiter.

Schritt 1. Erstellen einer Ansicht

#Link kopiert

Wenn Sie das Plugin ACF Views 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.

Die Seite ACF Views enthält eine Liste von Views, wobei zu Beginn natürlich keine View Einträge vorhanden sind.

Klicken Sie auf diesen Menüpunkt, um die Seite Ansichten zu öffnen, und klicken Sie dann 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.

Auf der neuen Seite gibst du deiner Ansicht einen Namen. Das kann alles sein, was die Ansicht beschreibt. Dieser Name wird nur in der Admin-Liste der Ansichten angezeigt, damit sie leichter zu finden ist. Ich habe meine Ansicht "Seitenlink" genannt.

Ziel-ACF-Felder können einfach aus der Felderliste ausgewählt werden

Zuweisung von Feldern

#Link kopiert

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".

Wählen Sie dann das Zielfeld aus der Liste aus. In meinem Fall heißt das Feld "Mehr lesen".

Hinweis: Der Feldtyp wird zur leichteren Identifizierung in Klammern angegeben.

In diesem Fall sollten Sie sehen, dass der Typ ein "Link" ist. Sie können bei Bedarf ein "Link Label" definieren oder es leer lassen, wenn Sie möchten, dass das Plugin es dynamisch aus den Daten des Links übernimmt.

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

Klicken Sie auf "Veröffentlichen", um Ihre Ansicht zu speichern und zu veröffentlichen. Nach der Veröffentlichung siehst du, dass die 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"]

Kopieren Sie nun den Shortcode, und klicken Sie auf die Schaltfläche "In die Zwischenablage kopieren" des ersten Shortcodes.

Schritt 2. Fügen Sie den Shortcode ein

#Link kopiert

Alles ist bereit, um das ACF-Link-Feld anzuzeigen. Besuchen Sie Ihre Zielseite (mit dem Link-Feld) und stellen Sie sicher, dass das Feld eine ausgewählte URL enthält. Fügen Sie dann den Shortcode an einer beliebigen Stelle im Seiteninhalt ein.

Wenn du den Gutenberg-Editor verwendest: Klicke auf den Plus-Button in der oberen Leiste und wähle den "Shortcode"-Block aus der Liste. Fügen Sie dann Ihren Shortcode in den Block ein und klicken Sie auf die Schaltfläche "Aktualisieren", um Ihren Beitrag/Ihre Seite zu speichern.

Gutenberg-Block mit einem ACF Views Shortcode.

Dann besuchen Sie Ihre Seite, um das Ergebnis zu sehen. Wenn Sie alles richtig gemacht haben, sollten Sie den Link mit der von Ihnen definierten Bezeichnung sehen. Oder mit der Bezeichnung aus dem Feld, falls Sie es leer gelassen haben.

ACF Link Feld auf einer Seite angezeigt.

Wenn Sie Ihren Link nicht sehen, dann gehen Sie zurück und bearbeiten Sie die Seite. Vergewissern Sie sich, dass Sie im Feld ACF-Link eine URL ausgewählt haben, und speichern Sie die Seite, denn wenn das Feld leer ist, wird nichts angezeigt.

Link-Feld mit PHP-Code anzeigen

#Link kopiert

Um das Link-Feld anzuzeigen, müssen Sie ein HTML-Markup für den Link erstellen und Daten aus Ihrem Feld einfügen. Der Code ist je nach ausgewähltem Rückgabetyp unterschiedlich. Nachfolgend finden Sie Beispiele.

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

<?php

// don't forget to replace 'link' with your field name
$linkData = get_field('link');

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format  
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title']));
}

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

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

Beim "URL"-Rückgabeformat müssen wir die Beschriftung unseres Links hart codieren. Das bedeutet, dass man es nicht ändern kann, ohne den Code zu ändern. Deshalb ist es besser, immer das "Array"-Rückgabeformat zu wählen.

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

ACF Link field with code, video cover

Abschließende Gedanken

#Link kopiert

Wir haben Ihnen gezeigt, wie Sie das ACF-Link-Feld verwenden können, seine Optionen und zwei Möglichkeiten, es anzuzeigen. Jetzt können Sie das Feld ganz einfach überall verwenden.

Vergessen Sie nicht, dass ein View im ACF Views Plugin mehrere Felder unterstützt, was bedeutet, dass Sie jederzeit weitere Felder zu Ihrem View hinzufügen können. Das Plugin unterstützt auch alle verfügbaren Feldtypen.

In der Tat können Sie die Ausgabe der Felder gestalten, ohne Ihr Theme zu ändern: Verwenden Sie das CSS-Code-Feld (siehe Registerkarte "Erweitert" der Ansicht). Das dort hinzugefügte CSS wird nur auf Seiten ausgegeben, auf denen Sie den Shortcode verwenden. Sie brauchen also nicht mehr nach einem Ort zu suchen, an dem Sie Ihren CSS-Code einfügen können.

Um weitere Informationen über das Plugin zu erhalten, besuchen Sie die ACF Views offizielle Website. Dort finden Sie Links zum YouTube-Kanal des Plugins (mit Video-Tutorials) und zur Dokumentation des Plugins. Diese Ressourcen sind für jeden nützlich, der das Plugin noch nicht kennt.

Über den Autor
Maxim Akimov

Certified WordPress expert from Ukraine with over 7 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

Got it