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

-

ACF Anleitungen Plugins

-

Aktualisiert 06.10.23

Erfahren Sie, wie das Link-Feld funktioniert und sich verhält. Zeigen Sie den Feldwert manuell oder mit intelligenten Vorlagen an, und profitieren Sie von der automatischen Generierung von Markups.

Inhaltsübersicht

Über das Feld Link

#Link kopiert

Das ACF-Feld Link ist einer von vielen ACF-Feldtypen und dient der Auswahl und Speicherung von Web-URLs innerhalb einer Seite. Es wird häufig von Entwicklern für verschiedene Arten von Links und Schaltflächen verwendet.

Das Feld Link nutzt das eingebaute WordPress-Link-Popup und bietet nicht nur den eigentlichen Link, sondern auch ein Feld zur Definition eines Link-Labels. Außerdem bietet es Einstellungen, mit denen Sie das Verhalten des Links steuern können, z. B. ob er in einem neuen Tab geöffnet werden soll oder nicht.

Wenn Sie jedoch einen Link zu einer internen Datei erstellen möchten, z. B. zu einer .pdf-Datei, die in die Mediathek hochgeladen wurde, sollten Sie das Feld ACF-Datei anstelle des Feldes Link verwenden.

Sie können das Feld "Link" in jede ACF-Gruppe aufnehmen, indem Sie auf die Schaltfläche "Feld hinzufügen" klicken und "Link" aus dem Dropdown-Menü "Feldtyp" wählen.

Rückgabeformate

#Link kopiert

Das Feld Link bietet eine Einstellung für das Rückgabeformat mit zwei Optionen: "Link Array" und "Link URL". Es ist wichtig zu beachten, dass die von Ihnen gewählte Option keinen Einfluss auf die Darstellung des Feldes für Administratoren oder Redakteure hat. Die Felder im Popup bleiben unverändert. Diese Einstellung wirkt sich in erster Linie auf den Codierungsaspekt aus, insbesondere auf die Antwort, die Sie im Code erhalten, wenn Sie die Funktion get_field() verwenden, um das Feld abzufragen.

Wir empfehlen die Verwendung der Option "Link Array". Die Option "Link URL" bietet keinen Zugriff auf die Beschriftung oder die "Ziel"-Einstellung (zum Öffnen des Links in einer neuen Registerkarte). Das bedeutet, dass Sie diese Argumente in Ihren Vorlagendateien hart kodieren müssen, was eine spätere Änderung über das Popup erschwert.

Nach dem Hinzufügen eines Link-Feldes auf der Zielseite können Administratoren und Redakteure eine URL auswählen, die dann auf der Seite gespeichert wird.
Das in WordPress eingebaute Link-Popup ermöglicht es Ihnen, eine Linkbeschriftung und die Einstellung "Link in einem neuen Tab öffnen" zu definieren.
Nachdem Sie eine URL eingerichtet haben, können Sie die Details jederzeit bearbeiten. Klicken Sie auf das 'Stift'-Symbol, um die Link-Felder zu bearbeiten, oder klicken Sie 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 im Post-Meta-Feld der aktuellen Seite (oder des Beitrags). In der Datenbank speichert das Meta-Feld Daten als Array, unabhängig vom Rückgabeformat. Dieses Array-Format speichert alle Link-Felder, einschließlich der URL, des Link-Textes und der Option "In neuer Registerkarte öffnen" für die zukünftige Verwendung. Aus diesem Grund empfehlen wir die Verwendung des Rückgabeformats "Link Array", da es mit dem Datenbankformat übereinstimmt und Zugriff auf alle verfügbaren Informationen über den Link bietet.

Link-Feld mit intelligenten Vorlagen anzeigen

#Link kopiert

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: "Intelligente Vorlagen". Das bedeutet, dass wir keine Felder abrufen oder Markup manuell von Grund auf 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?

Grundlagen

#Link kopiert

Schauen wir uns nun an, wie es funktioniert.

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 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, mit dem wir die Gruppe von Beiträgen anzeigen können. Die Liste der Beiträge kann manuell oder dynamisch mit Filtern zugewiesen werden.

Das Plugin bietet uns den Komfort, mit 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. Sie müssen auch das (kostenlose) ACF-Plugin installieren und aktivieren. Fahren Sie dann mit den nächsten Schritten fort.

Schritt 1. Erstellen einer Ansicht

#Link kopiert

Wenn Sie das ACF-Views-Plugin aktivieren, sehen Sie in Ihrem Verwaltungsmenü einen neuen Eintrag mit dem Titel "Advanced Views".

Innerhalb des Untermenüs finden Sie mehrere Einträge, aber derjenige, den Sie verwenden müssen, heißt 'Advanced Views'.

ACF Views provides list management via the familiar interface.
Ihre Liste sieht genauso aus, aber sie enthält keine View Elemente.

Besuchen Sie die Registerkarte ACF-Ansichten und klicken Sie auf die Schaltfläche 'Neu hinzufügen', um eine Ansicht zu erstellen.

Geben Sie einen Namen für Ihre Ansicht an. Es kann alles sein, was die Ansicht beschreibt, da dieser Name in der Liste der Ansichten angezeigt wird, wodurch sie leichter zu identifizieren ist. Wir haben zum Beispiel unsere Ansicht "Seitenlink" genannt.

ACF Views allow to assign multiple fields within your View.

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 heißt die Gruppe "Seitenfelder".

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

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

In diesem Fall sollte der Feldtyp "Link" lauten. Sie können bei Bedarf eine "Link-Beschriftung" definieren oder sie leer lassen, wenn Sie möchten, dass das Plugin sie dynamisch aus den Daten des Links aufnimmt.

Insgesamt kann jede Ansicht eine unbegrenzte Anzahl von ACF-Feldern aufnehmen, aber in unserem Fall werden wir nur eines verwenden.

Klicken Sie auf 'Veröffentlichen', um Ihre Ansicht zu speichern und zu veröffentlichen. Sobald sie veröffentlicht ist, werden Sie feststellen, dass Shortcodes in einem Block auf der rechten Seite des Bearbeitungsbildschirms Ihrer Ansicht generiert worden sind. Jede Ansicht hat ihren eigenen Shortcode mit einer eindeutigen ID (die Shortcode-Struktur ist für alle Ansichten 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 an der richtigen Stelle 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 hat. Fügen Sie dann den Shortcode an der gewünschten Stelle im Seiteninhalt ein.

Wenn Sie den Gutenberg-Editor verwenden, klicken Sie auf die Plus-Schaltfläche in der oberen Leiste und wählen Sie den Block "Shortcode" 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 Advanced Views-Shortcode.

Besuchen Sie dann 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, die aus dem Feld übernommen wurde, falls Sie es leer gelassen haben.

Feld ACF Link, das auf einer Seite angezeigt wird.

Wenn Sie Ihren Link nicht sehen, 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 "Array" Rückgabeformat:

<?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 der "URL" Rückgabeformat:

<?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));
}

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

Um weitere Informationen zu erhalten, sehen Sie sich das unten stehende Video an und lesen Sie den 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, welche Optionen es bietet und wie Sie es anzeigen können. Jetzt können Sie das Feld ganz einfach überall verwenden.

Vergessen Sie nicht, dass eine Ansicht im Advanced Views Plugin mehrere Felder unterstützt, was bedeutet, dass Sie jederzeit weitere Felder zu Ihrer Ansicht hinzufügen können. Das Plugin unterstützt außerdem alle verfügbaren Feldtypen.

Sie können die Ausgabe der Felder sogar gestalten, ohne Ihr Theme zu ändern: Verwenden Sie das CSS-Codefeld (siehe Registerkarte "Erweitert" der Ansicht). Das dort hinzugefügte CSS wird nur auf Seiten angewendet, 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.

Weitere Informationen über das Plugin finden Sie auf der offiziellen Website von Advanced Views. Dort finden Sie Links zum YouTube-Kanal des Plugins (mit Video-Tutorials) und zur Dokumentation des Plugins. Diese Ressourcen sind für alle nützlich, die das Plugin noch nicht kennen.

Über den Autor
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 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.

0 Kommentare

    Hinterlassen Sie einen Kommentar

    Antwort an 

    Bitte seien Sie rücksichtsvoll, wenn Sie einen Kommentar hinterlassen.

    Nicht öffentlich gezeigt

    Got it