ACF oEmbed-Feld

Über das oEmbed-Feld von ACF

Advanced Custom Fields ist eines der besten Plugins zum Verwalten von Metafeldern und benutzerdefinierten Beitragstypen (CPTs). Das oEmbed-Feld ist einer der ACF-Feldtypen, mit dem Sie Medien in Ihre WordPress-Site einbetten können.

Entwickelt, um mit der integrierten oEmbed-Funktion von WordPress zu arbeiten, ermöglicht es Ihnen, Inhalte von Drittanbietern, wie Videos, Bilder, Social-Media-Beiträge usw., einfach in Ihre WordPress-Beiträge oder -Seiten einzubetten, indem Sie einfach die Einfüge-URL verwenden des Inhalts. WordPress erkennt automatisch das URL-Format und ruft den entsprechenden Einbettungscode für die angegebene Ressource ab. Betrachten Sie es als eine einfachere Version der Funktion „Vorschau laden“ in sozialen Medien, auf Websites wie Facebook.com oder Linkedin.com. Wenn Sie einen neuen Beitrag schreiben und einen Link einfügen, werden das Bild, der Titel und mehr eingefügt.

Werfen wir einen Blick auf das, was im Hintergrund passiert.

Hinter den Kulissen von ACF

Das ACF-oEmbed-Feld vereinfacht das Einbetten von Inhalten Dritter in benutzerdefinierte Felder. Es bietet eine benutzerfreundliche Oberfläche, die es Inhaltsredakteuren ermöglicht, die URL der Ressource einzugeben, die sie einbetten möchten, und ACF kümmert sich um die Generierung des entsprechenden Einbettungscodes für diese Ressource. Dadurch entfällt für Benutzer die Notwendigkeit, die Einbettungscodes manuell zu suchen, zu kopieren und einzufügen oder sich um die technischen Details der Einbettung von Inhalten und/oder Medien zu kümmern.

Wenn Sie ein oEmbed-Feld in ACF erstellen, können Sie die Einbettungsgröße definieren. Mithilfe dieser Einstellungen können Sie das Erscheinungsbild und Verhalten der eingebetteten Inhalte auf Ihrer Website steuern. Aber machen Sie sich keine allzu großen Sorgen, ignorieren Sie die Einbettungsgröße vorerst einfach.

Zeigen Sie ACF oEmbed mit einem Shortcode an

Nachdem wir nun wissen, was hinter den Kulissen passiert, fahren wir mit den Schritten zum Anzeigen eingebetteter Inhalte fort.

Wir wissen, dass, wenn Sie die URL beispielsweise von Twitter oder YouTube in das ACF-oEmbed-Feld einfügen (während Sie einen Beitrag oder eine Seite bearbeiten), eine Zeichenfolge zurückgegeben wird, die den eingebetteten HTML-Code enthält, der von der Funktion wp_oembed_get() erhalten wurde. Das ist großartig, aber wie stellt man diesen Inhalt dar?

Advanced Views ist die Antwort und führt intelligente Vorlagen mit automatischer Vorlagengenerierung und integrierten Post-Abfragen ein.

Dies ist die benutzerfreundlichste Methode zum Anzeigen von ACF-Feldern, eine einfach zu wartende Methode, da nicht viel Codierung erforderlich ist und Sie auch Ihr Design nicht ändern müssen.

Lass uns eintauchen.

Anleitung Schritt für Schritt

Wenn Sie mitmachen möchten, suchen Sie mithilfe der integrierten Plugin-Installationsfunktion nach erweiterten Ansichten.

Schritt 1. Erstellen eines Betrachten

Wenn das Advanced Views-Framework aktiviert ist, erscheint im Admin-Menü ein neues Element mit dem Namen „Advanced Views“. Der Eintrag verfügt über mehrere Unterpunkte, in unserem Fall werden wir jedoch nur mit dem Unterpunkt „Erweiterte Ansichten“ arbeiten.

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 hinzuzufügen Betrachten.

Auf der neuen Seite erfahren Sie Betrachten ein Name, es kann alles sein, was das beschreibt Betrachten. Ich habe mich angerufen Betrachten “Videobibliothek”.

Zuteilung von Feldern

Es ist an der Zeit, Ihnen das oEmbed-Feld zuzuweisen Betrachten. Klicken Sie auf die Schaltfläche „Feld hinzufügen“ und wählen Sie Ihre „Gruppe“ aus dem Dropdown-Menü aus. In meinem Fall habe ich die Gruppe „Videos von YouTube“ genannt.

Fahren Sie dann mit der Auswahl des Zielfelds aus der Liste fort. Ich habe „Video“ ausgewählt.

Klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Datei zu speichern und zu veröffentlichen Betrachten. Anschließend werden Shortcodes generiert und auf der rechten Seite des Ansichtsbearbeitungsbildschirms angezeigt. Weitere Informationen zu den verschiedenen Shortcodes und deren Verwendung finden Sie in den Dokumenten zu „Erweiterte Ansichten“.

Kopieren Sie den ersten Shortcode ohne Objekt Identifikation Parameter in die Zwischenablage kopieren.
Z.B [acf_views view-id=”456″ name=”video library”]

Schritt 2. Fügen Sie den Shortcode ein

Du bist fast fertig.

Gehen Sie zu Ihrer Zielseite (der Seite, auf der Sie Ihre ACF-Felder gefunden haben) und klicken Sie dann auf den Titel, um die Seite zu bearbeiten, und fügen Sie den kopierten Shortcode an einer beliebigen Stelle im Seiteninhalt ein.

Für den Gutenberg-Editor: Klicken Sie auf die Plus-Schaltfläche in der oberen Leiste, wählen Sie den Block „Shortcode“ aus der Liste aus und fügen Sie dann Ihren Shortcode in den Block ein. Wenn Sie Gutenberg als Standardeditor haben, können Sie wahrscheinlich einfach den Shortcode einfügen, dann weiß er, welcher Block verwendet werden soll.

Jetzt müssen Sie nur noch das Video-URL-Feld ausfüllen.

In meinem Fall habe ich ein oEmbed-Feld „Video“ und aus der Standard-$post$-Gruppe „Titel“ und „Auszug“.

Wenn die Miniaturansicht Ihres Videos mit Titel und Auszug nicht angezeigt wird, gehen Sie zurück und bearbeiten Sie die Seite. Stellen Sie beispielsweise sicher, dass Sie die Felder ausgefüllt und die Seite gespeichert haben. Wenn sie ausgefüllt sind, gehen Sie dann weiter zurück zu Ihrer Ansichtsbearbeitung, wo Sie die Felder zugewiesen haben. Überprüfen Sie dann noch einmal, ob sie der richtigen Feldgruppe zugeordnet sind. Wenn Sie die Felder auf der Seite oder im Beitrag nicht ausgefüllt haben, wird daher nichts angezeigt.

ACF oEmbed mit PHP-Code anzeigen

Wie Sie sehen, ist die Anzeige des eingebetteten Inhalts mit einem Shortcode einfach und unkompliziert, insbesondere wenn Sie viele Felder anzeigen müssen.

Schauen wir uns nun die andere Methode mit PHP-Code an.

Der folgende PHP-Code kann zum Anzeigen eines oEmbed verwendet werden.

// todo use your field name instead of 'oembed'
$oembedHtml = get_field('oembed') ?: '';

if ($oembedHtml) {
    printf('<div class="embed-container">%s</div>', $oembedHtml);
}

Im folgenden Code haben wir dem iframe src zusätzliche Parameter hinzugefügt, die etwas mehr Kontrolle darüber geben, was mit den Steuerelementen des Videoplayers oder dem Seitenverhältnis des Inhalts geschieht.

// todo use your field name instead of 'oembed'
$oembedHtml = get_field('oembed') ?: '';

if ($oembedHtml) {
    preg_match('/src="(.+?)"/', $oembedHtml, $matches);
    $src = $matches[1] ?? '';

    $params = [
        // todo use your arguments here
        'controls' => 0,
        'hd' => 1,
        'autohide' => 1
    ];
    $newStr = add_query_arg($params, $src);
    $oembedHtml = str_replace($src, $newStr, $oembedHtml);

    printf('<div class="embed-container">%s</div>', $oembedHtml);
}

Beachten Sie, dass wir in diesem Codebeispiel nur gezeigt haben, wie ein einzelnes oEmbed-Feld angezeigt wird. Wenn Sie mehr Felder haben, müssen Sie den entsprechenden Code schreiben, um diese anzuzeigen.

Um weitere Informationen zu erhalten, schauen Sie sich das Video unten an und lesen Sie den offiziellen ACF-Artikel.

Responsive Einbettungen

Mit einigen zusätzlichen CSS-Stilen können Sie jetzt responsive Einbettungen erstellen.

Hinweis: Jeder Anbieter wie Vimeo, Dailymotion, Google Maps oder YouTube erfordert möglicherweise unterschiedliche CSS-Stile. Daher ist es am besten, Stile für jeden einzelnen Fall zu erstellen.

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie ACF oEmbed-Felder auf zwei Arten verwenden und anzeigen können, zuerst mit einem einfachen Shortcode und dann mit etwas PHP-Code. Die Shortcode-Methode ist offensichtlich viel einfacher, erfordert keine Codierung und macht die zukünftige Pflege des PHP-Codes überflüssig.

Beachten Sie, dass a Betrachten kann eine beliebige Anzahl von Feldern unterschiedlichen Typs enthalten, was bedeutet, dass Sie Betrachten Erweiterte Ansichten unterstützen jederzeit alle verfügbaren Feldtypen mit erweiterten Einstellungen für komplexe Feldtypen, wie z. B. ACF Repeater.

Weitere Informationen zu dem Plugin, das wir in unserem Shortcode-Beispiel verwendet haben, finden Sie auf der offiziellen Plugin-Seite.

Jetzt werde ich einige Medien einbetten!