7 Dinge, von denen Sie nicht wussten, dass Sie sie mit erweiterten benutzerdefinierten Feldern tun können

Advanced Custom Fields (ACF) ist fast gleichbedeutend mit WordPress-Entwicklung. Dieses Plugin, das mehr als 4,5 Millionen Websites unterstützt, hat WordPress dabei geholfen, zu neuen Höhen zu wachsen. Du kennst das Plugin. Sie haben wahrscheinlich mit dem Plugin gebaut. Aber nutzen Sie es voll aus?

In dieser Sitzung werfen wir einen schnellen Blick auf einige der weniger bekannten Möglichkeiten, wie Sie ACF nutzen können, um Ihre bisher dynamischsten, leistungsstärksten und ansprechendsten WordPress-Erfahrungen zu erstellen.

Lautsprecher:

• Iain Poulson, leitender Produktmanager bei WP Engine
• Rob Stinson, Produktmarketing-Manager bei WP Engine

Sitzungsfolien:

Transkript:

Iain Poulson: Hallo und willkommen zu unserer Sitzung zum Plug-in „Advanced Custom Fields“. Ich bin Iain Poulson, der Produktmanager für ACF bei WP Engine, und ich bin hier bei Rob Stinson, unserem Produktmarketingmanager. Heute werden wir Sie durch eine ziemlich schnelle Sitzung mit sieben Dingen führen, von denen Sie nicht wussten, dass Sie sie mit dem Advanced Custom Fields-Plug-in tun können, einige Dinge, die ziemlich neu sind, und einige Dinge, die weniger bekannt sind. Und die Funktionalität, die wir um eine fiktive Seite drehen werden, die Rob entworfen hat, also sind wir eher Fans von echten Beispielen als von abstraktem Zeug, aber wir sind auch große Fans von Filmen.

Diese Seite ist also eine Feier der besten Zeit des Kinos, wahrscheinlich wohl der Filme der 90er Jahre, und so basiert die Seite darauf, die beliebtesten und beliebtesten Filme der 90er Jahre anzuerkennen und auszuzeichnen. Die Website muss Filme präsentieren und es den Benutzern ermöglichen, für ihren Favoriten zu stimmen, und im wahren Rob-Stil sieht die Website großartig aus. Fangen wir also an und fangen von vorne an und installieren ACF. Sag mir wie, Rob.

ROB Stinson: Cool, danke, Iain. Ja, danke, Mann. Es sieht ziemlich gut aus, nicht wahr? Es war eine gute Zeit, es zu entwerfen, hatte etwas Spaß. Also haben wir den Vertrag gewonnen. Wir haben das Projekt und wir starten die Dinge, und das erste, was wir getan haben, war, wenn festgestellt wurde, dass dies erstens für ACF sinnvoll ist. Wir müssen eine ganze Reihe von benutzerdefinierten Feldern für einige benutzerdefinierte Beitragstypen einrichten und einige interessante Vorlagen und ähnliches erstellen. ACF ist hier das Werkzeug für den Job. Also müssen wir natürlich zuerst ACF installieren, und das ist hier die Nummer eins. Wir wissen also normalerweise, dass Sie das Plug-in einfach als ZIP-Datei herunterladen und in den WordPress-Admin hochladen können, nett und einfach.

Das ist die Standardmethode zum Installieren eines Plug-Ins, aber wir wissen auch, dass Entwickler heutzutage ihre Abhängigkeiten gerne etwas anders verwalten. Ich mag es normalerweise, es innerhalb des Codes zu verwalten, und in der PHP-Welt wird das normalerweise mit Composer gemacht. Jetzt können Sie mit Composer seit einiger Zeit ganz einfach WordPress-Plugins aus dem WordPress.org-Repo installieren, aber mit Premium-Plugins wie ACF Pro war dies etwas schwieriger.

Aber die neueste Version vor ein paar Wochen, eigentlich vor ungefähr einem Monat, wir haben tatsächlich die Möglichkeit aktiviert, ACL Pro jetzt über Composer zu installieren, was fantastisch ist, also werden wir das jetzt tun. Dazu müssen Sie in Schritt Nummer eins die ACF Pro Composer Repo-URL zu Ihrer composer.JSON-Datei hinzufügen. Schritt Nummer zwei ist, dass Sie eine auth.JSON-Datei für Ihre Anmeldeinformationen erstellen und diese im Stammverzeichnis Ihres Projekts platzieren, sowohl lokal als auch auf dem Weg zu dem Ort, an dem wir bereitstellen, und dem Anmeldeinformationen, die Sie für diese Datei benötigen, sind jetzt in Ihrem Kontobereich auf advancedcustomfields.com verfügbar.

Wenn Sie sich also anmelden, sehen Sie einen Lizenzbereich, und es gibt ein paar zusätzliche Registerkarten und ähnliches, Sie können tatsächlich den gesamten Code greifen, das Ganze kopieren und einfügen, oder Sie können den einzelnen Benutzernamen greifen und Passwort, und bringen Sie es in die Datei, die Sie erstellt haben, die Datei auth.JSON.

Und im dritten Schritt führen wir den Composer-Befehl aus, das ist nett und einfach, ein 3-Schritte-Prozess, aber fantastisch, weil es bedeutet, dass Entwickler, wie ich schon sagte, eine etwas feiner abgestimmte Kontrolle darüber haben, wie sie verwalten ihre Abhängigkeiten ihres Projekts, Sie können dies jetzt mit ACF Pro tun, was fantastisch ist. Natürlich gibt es mehr Dokumentation dazu, also um tiefer zu gehen und zu sehen, wie alles entpackt wird, springen Sie zu den Dokumenten auf der Website, und Sie sollten bereit sein. Cool, ich kotze Iain für Nummer zwei.

Iain Poulson: Richtig, lassen Sie uns jetzt über das Einrichten der Daten für die Site sprechen. Benutzerdefinierte Post-Typen sind also ziemlich grundlegend in WordPress, wenn es darum geht, eine Website zu erstellen, bei der es nicht nur um Posts oder Seiten geht. Es ist die Funktion für benutzerdefinierte Posttypen, die in jeder WordPress-Version vor langer Zeit enthalten war, die es in ein richtiges CMS verwandelt, und es ist normalerweise der erste Schritt, den Entwickler tun, wenn sie die Websites erstellen. Und das war schon immer etwas, das außerhalb von ACF passiert ist. In der Vergangenheit registriert man entweder einen Beitragstyp mit Code oder verwendet dafür ein anderes Plugin, aber es ist der Teil der Reise, der sich recht gut mit ACF verbindet. Als Teil von ACF 6.1 kommt diese Funktionalität also in das Plugin, also ist es der natürliche Ausgangspunkt der Reise.

Sie möchten eine Website mit Datenstrukturdaten erstellen, Sie werden einen Beitragstyp erstellen. Sie fügen Felder hinzu, und dann fügen Sie möglicherweise einige Taxonomien hinzu, und dann beginnen Sie mit der Bearbeitung dieser Daten. Also ja, das ist etwas, was wir in 6.1 eingebaut haben, und es ist ziemlich aufregend, diesen vollen Baufluss im CMS zu haben. Suchen wir also nach der VHS-Award-Site. Wir müssen unsere Daten strukturieren und WordPress dazu bringen, das zu tun, was wir tun sollen. In Bezug auf den Beitragstyp werden wir also einen benutzerdefinierten Beitrag erstellen, da wir keine Beiträge und Seiten verwenden möchten Typ für Film, um die Filmdaten, das Datenobjekt oder das Datenmodell zu speichern, aber in WordPress-Begriffen ist das offensichtlich ein benutzerdefinierter Beitragstyp.

Wir möchten die Filme mit einer Taxonomie klassifizieren, damit wir es den Benutzern ermöglichen können, Filme eines bestimmten Genres leicht zu sehen, und dann erhalten Sie die einfache Front-End-Ansicht, die einfachen URLs, mit denen Sie auf bestimmte Filme zugreifen können Genres. Und wir brauchen einige zusätzliche Felder, um strukturierte Daten rund um einen Film zu speichern, also wollen wir zum Beispiel, dass der Regisseur ein Textfeld ist. Wir brauchen das Jahr, in dem der Film herauskam, als Zahl, und wir brauchen irgendeine Art von Beziehung, um Filme miteinander in Beziehung zu setzen, und natürlich müssen wir die Anzahl der Stimmen speichern, die er bekommen wird, und das ist das Zahlenfeld.

Schauen wir uns also kurz in ACF 6.1 an, wie wir das machen werden. Dies ist also der ACF 6.1-Bildschirm, und Sie werden feststellen, dass er etwas anders ist, wir haben das Menü in der Seitenleiste. Es ist jetzt ACF, nicht nur benutzerdefinierte Felder, und dies ist der Beitragstyp-Bildschirm. Das bin also nur ich, der den Film-Post-Typ einrichtet. Es ist hier der einfachste Arbeitsablauf, einfach ein Singular-Label für den Post-Typ hinzuzufügen, der Film ist, das Plural-Label, und es wird automatisch der Post-Typ-Schlüssel generiert. Die öffentliche Einstellung ist standardmäßig aktiviert, weil ich möchte, dass sie im Frontend sichtbar ist, der Beitragstyp, und ich möchte sie im Admin bearbeiten können.

Sobald das gespeichert und hinzugefügt ist, ist das Schöne an der Verbindung hier mit ACF die Tatsache, dass der nächste Schritt auf der Reise darin besteht, dass wir den Beitragstyp erstellt haben, wollen wir Felder zum Beitragstyp hinzufügen oder wollen wir vorhandene Felder mit dem Beitragstyp verknüpfen oder eine Taxonomie erstellen? Also können wir das alles von diesem Punkt hier aus tun, also müssen wir natürlich diese Felder hinzufügen. OK, wenn Sie also auf diesen Hinweis klicken, um neue Felder zum Beitragstyp Film hinzuzufügen, erhalten wir den Feldgruppen-Editor, und er ist unten in der Einstellungs-Metabox vorbelegt.

Die Standortregeln sind also bereits so eingestellt, dass Sie diese Felder anzeigen, wenn Sie den Beitragstyp des Films bearbeiten, und dann können Sie fortfahren und Ihre Felder hinzufügen, was ich hier im Screenshot bereits getan habe. Wir haben also den Regisseur, das Jahr und die Stimmen und die zugehörigen Filme. Dann können wir natürlich die benutzerdefinierte Taxonomie registrieren, über die wir gesprochen haben, das Genre hinzufügen und die Genre-Taxonomie mit dem Beitragstyp von Filmen verbinden. Aber das sind Felder, die wir hinzugefügt haben und die an das Filmobjekt angehängt sind, aber was ist mit Feldern, die wir zum Speichern von Daten benötigen, die möglicherweise globaler oder standortweiter sind? Rob, was haben wir dafür?

Rob Stinson: Cool, danke dafür, Iain, sieht gut aus. Unser Inhaltsmodell kommt gut voran, aber wir sind noch nicht fertig. Jetzt haben wir bereits die Installation von ACF Pro über Composer behandelt und uns gerade benutzerdefinierte Beitragstypen und benutzerdefinierte Taxonomien in ACF angesehen. Nun diese zwei Dinge, die sehr, sehr frisch sind, aber das dritte, was ich jetzt behandeln möchte, ist ein Oldie, aber ein Goodie. Und so ist es jetzt schon seit einigen Jahren im Plugin, aber nicht jeder weiß davon, und nicht jeder versteht den Wert davon, also werden wir uns jetzt globale Felder mit der Optionsseite ansehen.

Jetzt denken Sie normalerweise an ein benutzerdefiniertes Feld und wie es Daten für einen bestimmten Beitrag, eine Seite oder einen benutzerdefinierten Beitragstyp speichert. Aber manchmal müssen wir Daten speichern, die mit der gesamten Site verknüpft sind, und ein großartiges Beispiel auf unserer wunderbaren VHS-Award-Site ist diese Art von Top-Benachrichtigungs- oder Werbeleiste. Und dies ist eine Leiste, die wir auf jeder einzelnen Seite der Site-Startseite beibehalten möchten, Sie gehen zu einer Filmseite, sie ist da. Sie gehen auf die About-Seite, eine Kontaktseite oder eine Blog-Seite, diese kleine Leiste befindet sich auf der gesamten Website, egal wohin der Benutzer navigiert, also macht es keinen Sinn, diese relevanten Daten mit einem Beitrag oder einem zu verknüpfen Film.

Es ist etwas, das mit der Website in Verbindung gebracht werden sollte. Wir möchten diese Leiste also ein- und ausschalten können, weil wir Dinge einrichten möchten, aber vielleicht möchten wir sie zu bestimmten Jahreszeiten einschalten. Wir haben vielleicht eine bestimmte Promotion oder eine Kampagne, also wollen wir die Möglichkeit haben, ein boolesches Feld zu haben, damit wir dieses Ding ein- und ausschalten können. Außerdem möchten wir in der Lage sein, den Text der aufgerufenen Aktion selbst oder in der Schaltfläche zu aktualisieren, daher sind benutzerdefinierte Felder dafür natürlich sehr sinnvoll.

Um nun eine Optionsseite einzurichten, was die Funktion in ACF ist, die uns dies ermöglicht, ist Schritt Nummer eins, normalerweise in Ihrer .PHP-Datei, oder Sie können sie natürlich woanders registrieren, vielleicht a Plug-in, das Sie entwickeln. Aber Sie werden die Optionsseite selbst registrieren, und es gibt ein paar kleine Konfigurationen in den Einstellungen, die Sie dort vornehmen können. Sie können eine einzelne Optionsseite haben, aber Sie können auch mehrere haben, und Sie haben sie irgendwie verschachtelt, also untergeordnete Seiten oder übergeordnete Seiten und ähnliches, sodass Sie interessante Dinge tun können.

Für uns ist unsere ziemlich einfach. Wir richten hier nur eine Benachrichtigungsleiste ein, also brauchen wir nur die einzelne Seite, also ist Schritt eins, diese Optionsseite zu registrieren. Im zweiten Schritt würden wir wie gewohnt eine Feldgruppe erstellen. Wir würden es Promo-Leistenfelder oder so ähnlich oder Benachrichtigungsleistenfelder nennen, und Sie können dort sehen, dass ich mein Boolesches Feld oben habe, also ist die Promo-Leiste aktiv oder wahr oder falsch. Und dann habe ich ein Textfeld für die Nachricht, ein Textfeld für den Schaltflächentext, ein URL-Feld für den Schaltflächenlink, und dann haben wir möglicherweise auch einen Benachrichtigungstyp, aber vielleicht möchten wir Benachrichtigungen oder einen Werbestil haben Notizen, und vielleicht machen wir ein interessantes bedingtes Styling, basierend auf dem, was dort ausgewählt ist.

Also fügen wir unsere Feldgruppe hinzu, und wir fügen unsere Felder hinzu, und Schritt drei ist direkt darunter. Wie Sie wissen, können wir in den Standortregeln jetzt auswählen, dass die Optionsseite gleich ist – und Sie sehen die Site-Einstellungen, die ich dort habe – das ist die Optionsseite, die ich in Schritt Nummer eins registriert habe. Und nach all dem sehen wir jetzt im WordPress-Admin auf der linken Seite, in unserer Admin-Leiste haben wir Site-Einstellungen, und wir klicken darauf, und wir sehen alle Felder, wie wir es erwarten würden.

Und wir können die Benachrichtigungsleiste ein- oder ausschalten. Wir können den Text aktualisieren, die Schaltfläche aktualisieren, und dann werden diese Daten unserem Templating zur Verfügung gestellt, sodass das Templating-Erlebnis mit Datenfeldern auf einer Optionsseite im Großen und Ganzen dasselbe ist, wie Sie es sonst tun würden. Es gibt ein paar kleine Nuancen, wie Sie speziell auf die Tatsache abzielen, dass dies eine Optionsseite und kein Beitrag ist, aber springen Sie in die Dokumentation auf advancedcustomfields.com, und sie führt Sie durch den gesamten Umgang damit. Nummer vier, ich werde es dir zurückwerfen, Iain.

Iain Poulson: Danke, Rob, ja. Ich möchte jetzt nur darüber sprechen, wie wir Felder programmgesteuert bei ACF registrieren. Das Erstellen von Feldern in ACF ist also super einfach mit der Benutzeroberfläche des Feldeditors, die Art von Dingen, die wir kennen und lieben, wir haben früher gesehen, aber es gibt andere Möglichkeiten, Felder zu definieren. Mit ACF können wir sowohl JSON- als auch PHP-Dateien mit Felddefinitionen exportieren, die zum Erstellen von Feldern verwendet werden können.

Aber wussten Sie, dass es in der ACF-Community tatsächlich ein Paket namens ACF-Builder gibt, mit dem Sie Felder mithilfe einer Art flüssiger API mit PHP-Code erstellen können? Es ist eigentlich ein Paket eines Drittanbieters und heißt ACF Builder Package von StoutLogic. Ja, der GitHub-Link ist da. Grundsätzlich können Sie damit Felder direkt aus dem Code erstellen, ohne die Feinheiten zu kennen, wie ACF die Felddaten in PHP benötigt. Es verwendet eine wirklich ausdrucksstarke Art, dies zu tun. Es macht es wiederverwendbar und tragbar.

Sie können die Felddefinitionen festschreiben, da es mit PHP-Dateien an Ihre Versionskontrolle einfach ist, zusammenzuarbeiten. Es ist einfach, es an Ihren Bereitstellungsmechanismus zu senden, und Sie nehmen auch die Benutzeroberfläche des Feldgruppeneditors weg, sodass Sie diese Felder im Code definieren, der dann verhindert, dass Clients die Benutzeroberfläche berühren müssen. Schauen wir uns also kurz an, wie wir Tu es. Um es zu installieren, weil es ein Paket ist – wir haben vorher über Composer gesprochen. Dies ist ein Composer-Paket, das Sie mit dem folgenden Befehl installieren können: Composer akquiriert StartLogic, den Anbieter ACF Builder, und dann sieht der Code so aus.

Sie instanziieren gewissermaßen eine Instanz des Fields Builder und geben ihm den Slug dessen, was die Feldgruppe wäre. Und dann sagen Sie, in dieser Feldgruppe fügen wir ein Textfeld namens Director hinzu. Lassen Sie uns ein Zahlenfeld mit dem Namen Jahr hinzufügen, und dann, was wichtig ist, werden wir den Ort festlegen, an dem die Feldgruppe im Beitragstyp des Films angezeigt wird.

Und all dies tut viel für Sie, ohne dass Sie darüber nachdenken müssen, also geben Sie ihm den Director-Namen für die Feldbezeichnung, und es wird fortfahren und natürlich den Slug oder den Schlüssel für das Feld erstellen, ohne dass Sie es tun müssen um das hinzuzufügen, also nimmt es viel Tippen, viel Nachdenken und viel fehleranfälliges Erstellen weg. Und dann laden Sie im zweiten Teil diese Felddefinition in ACF, und es baut die Feldgruppe für Sie auf.

Rob Stinson: In Ordnung, also Nummer 5 hier, bidirektionale Beziehungen. Nun, das ist interessant. Ich glaube, ich erinnere mich an dieses spezielle Projekt, an dem ich damals in meiner Agenturzeit gearbeitet habe, wo ich das tatsächlich herausgefunden habe, und es war eine Art Wendepunkt. Wenn Sie dies also noch nicht mit ACF gemacht haben, achten Sie darauf, denn dies ist eine wirklich nützliche Sache. Schauen wir uns also ein Beispiel an. Wenn wir uns natürlich unsere VHS-Preisverleihungsseite ansehen, haben wir eine Liste von sagen wir 100 Filmen, und es gibt natürlich verschiedene Möglichkeiten, diese Dinge zu verbinden.

Wir haben unsere benutzerdefinierte Genre-Taxonomie schon einmal. Wir haben möglicherweise ein paar verschiedene Felder, die Dinge wie Tags oder Gruppierungen handhaben, daher sind bidirektionale Beziehungen nützlich, wenn Sie eine bestimmte Art von wechselseitiger Verbindung zwischen zwei Beiträgen oder in unserem Fall zwei Filmen erstellen möchten. Sagen wir für unser Beispiel einfach, wir haben diese drei Filme in unserer Datenbank und sie sind alle animiert, also wollen wir eine bidirektionale Beziehung zu ihnen herstellen.

Das heißt, wir haben hier unseren ersten Film, „Toy Story“, einen großartigen Film, und wir stellen fest, dass es zwei andere verwandte Filme gibt, die wir damit in Verbindung bringen möchten. Wir könnten also ein Beziehungsfeld für unseren benutzerdefinierten Beitragstyp erstellen, nämlich Filme, und wir hätten dort ein Beziehungsfeld, und wir würden den Film „Der König der Löwen“ und Prinzen Monon auswählen – es tut mir so leid. Ich stolpere immer wieder über dieses Wort. Ich schlachte es ab, aber der Film heißt „Prinzessin Mononoke“. Hahaha. Bitte hasse mich nicht. Ich kämpfe nur aus irgendeinem Grund damit, dieses Wort auszusprechen.

Und wir stellen fest, dass diese beiden Filme verwandt sind, also wählen wir sie aus dem Beziehungsfeld aus. Nun, in diesem Fall wäre es sinnvoll, dass zum Beispiel „Der König der Löwen“ mit „Toy Story“ verwandt ist und daher „Toy Story“ mit „Der König der Löwen“ verwandt ist. Also würden wir normalerweise zum „König der Löwen“-Bearbeitungsbildschirm gehen und dann würden wir „Toy Story“ finden und es dort hinzufügen, aber wir verdoppeln unsere Arbeit dort. Eine bidirektionale Beziehung schafft also automatisch diese Verbindung für uns, was wirklich, wirklich nützlich ist.

Wenn wir also beispielsweise „Der König der Löwen“ zu „Toy Story“ hinzufügen, wird „Toy Story“ automatisch zu „König der Löwen“ hinzugefügt, und das ist wirklich sehr nützlich. Es spart Content-Erstellern und Content-Managern viel Zeit. Es verringert das Risiko des Vergessens, oder vielleicht entfernen Sie einen aus einem Beitrag und vergessen dann, ihn aus dem anderen zu entfernen. Es vereinfacht die Bearbeitung von Inhalten wirklich, wirklich, also eine wirklich nützliche Sache, die verwendet werden kann, besonders auf interessanten Seiten wie dieser. Wie machen wir das? Nun, es gibt derzeit zwei Möglichkeiten, dies zu tun, und ich werde vielleicht über eine dritte Sache sprechen, die später in diesem Jahr auf den Weg kommt.

Nummer eins ist, wie es gemacht wird, Sie können dies im Code tun. Nur wenn das ACF Pro-Plug-in installiert ist, können Sie dafür Code schreiben. Und Sie können eine Funktion schreiben, die sich in den ACF-Aktualisierungswertfilter einklinkt, und dieser Filter wird ausgeführt, bevor ein Wert gespeichert wird, und im Grunde nimmt er den aktuellen Beitrag, den Sie bearbeiten, und identifiziert die Beitrags-ID des Beitrags das wurde hinzugefügt, und aktualisiert dann den anderen Beitrag und führt diese Art des Abgleichs im Hintergrund für Sie durch, also sehr nützlich.

Ein bisschen Code, also solange Sie damit vertraut sind, ist es nicht zu schwer zu heben. Aber auch hier gibt es einen Link oder eine URL, die Sie in der Dokumentation zu erweiterten benutzerdefinierten Feldern überprüfen können, um zu sehen, wie Sie das tun können. Option zwei ist jedoch kein Code, was manchmal ganz nett ist. Dies ist also eigentlich ein Ökosystem-Plug-in namens ACF Extended. Es ist auf WordPress.org verfügbar und bringt diese Funktion einfach in die ACF-Benutzeroberfläche selbst.

Wenn Sie also diese Erweiterung, ACF Extended, installiert haben und ACF Pro installiert haben, sehen Sie eine Option, dass es beim Erstellen eines Beziehungsfelds einen bidirektionalen Schalter gibt, den Sie aktivieren können, und dann können Sie Richten Sie das direkt in der Benutzeroberfläche in einer Sammlung ein, was ziemlich praktisch ist. Jetzt geht es wirklich interessant voran mit diesem Projekt, aber verlieren wir nicht den Kopf darüber, oder doch? Iain, rüber zu dir.

Iain Poulson: Ja, danke Rob. Es lohnt sich, Headless zu nennen, wenn es um ACF geht. ACF hat Headless-Unterstützung, also ja, zugrunde liegende Headless-Sites, entkoppelte Natur von Sites. Es findet viel API-Kommunikation statt, und ACF bietet API-Unterstützung. Die REST-API haben wir ab 5.11 oder 5.11 nativ in ACF hinzugefügt, und wir unterstützen GraphQL mit dem WP GraphQL-Plugin, das ein ACF-Add-on für WP GraphQL enthält, sodass ACF Headless-Sites unterstützt. Es hat eine Integration mit dem WP Engine Atlas-Programm für richtige kopflose WordPress-Sites, aber lassen Sie uns nur über eine Art reales Beispiel sprechen, wie Sie die Daten auf unserer VHS-WordPress-Site nehmen und entkoppelt verwenden würden.

Also zum Beispiel – hören Sie mir zu – die Leute stimmen im Grunde genommen auf der VHS-Award-Site ab, und sie werden – ich denke, wir legen ein willkürliches Datum fest – sie müssen bis zum Ende des bestimmten Datums abstimmen, und wir Mal sehen, was am beliebtesten ist. Wir haben unser lokales Kino, und es macht eine doppelte Liste der Filme mit den meisten Stimmen aus den 90ern. Also haben sie im Kino ihre Reklametafel und sie ist online. Es ist mit dem Internet verbunden und wir können dynamisch steuern, was auf dieser Werbetafel angezeigt wird, also müssen wir eine Verbindung zu unserer WordPress-Site herstellen.

Zum Beispiel ist das Billboard eine einfache Node-App, wir müssen die Daten von der VHS-Site abrufen, also schauen wir uns kurz an, wie wir das mit einem benutzerdefinierten REST-API-Endpunkt machen könnten, und wie ich bereits sagte, das haben wir bekam GraphQL-Unterstützung. Dies kann auf beide Arten erfolgen, aber dies ist wahrscheinlich ein einfacher zu zeigendes Beispiel. Also erstellen wir zunächst eine Funktion, die im Grunde die Daten erhält, die wir benötigen. Wenn Sie das also durchgehen, ist es eine WP-Abfrage, die besagt: Ich möchte Filme oder Posttypen eines Filmtyps, aber nur ich möchte zwei. Aber ich möchte es auch nach dem ACF-Feld ordnen, das ist der Feldname Stimmen, und wir ordnen es in absteigender Reihenfolge, also werden wir die Spitze bekommen, und wir werden die Spitze bekommen zwei.

Als Nächstes erstellen wir einen benutzerdefinierten REST-Endpunkt, der die Callback-Funktion verwendet, die wir auf der vorherigen Folie erstellt haben, und der uns nur einen Endpunkt gibt, den wir drücken können, um die beiden Filme abzurufen. Also, wie das tatsächlich in der Realität aussieht – und das ist nur ein Test – also ist die URL vhsawards.com, das WP-JSON, und dann haben wir ihm einen Namespace von VHS Version 1 gegeben, falls wir jemals die API ändern wollen, und wir haben gerade eine sehr einfache URL-Struktur von popular.

Und das ist nur die Rückgabe eines JSON-Objekts mit zwei Elementen, den beiden am besten bewerteten, die zufälligerweise „Fight Club“ und „Goodfellas“ waren, die ziemlich gut sind, also ja. Das ist definitiv gut zu zeigen, wie ACF entkoppelte und kopflose Websites antreibt, aber es ist im Moment ziemlich schwierig, über WordPress zu sprechen, ohne Blöcke zu erwähnen. Ich kann nicht glauben, dass wir so weit gekommen sind, ohne Blöcke überhaupt zu erwähnen. Was hast du für uns, Rob, um das zu ändern?

Rob Stinson: Wir müssen definitiv über Blöcke sprechen. Bevor ich das tue, wurde mir klar, dass ich kurz zuvor, als wir uns Nummer fünf über bidirektionale Beziehungen ansahen, auf eine dritte Möglichkeit hingewiesen hatte, dies zu tun. Ich habe es nicht behandelt, also möchte ich nur sagen, beobachten Sie diesen Bereich, weil wir planen, wir haben es auf der Roadmap, um eine bessere Unterstützung für bidirektionale Beziehungen nativ in das Plugin selbst einzufügen, damit Sie diese Dinge einfach erleichtern können innerhalb des ACF-Plug-ins ohne die Notwendigkeit von Drittanbieter-Zeug, also schauen Sie sich einfach diesen Bereich an, keine Verpflichtungen bezüglich des Timings. Das ist etwas, was wir uns ansehen.

Also Nummer sieben, ja. Schauen wir uns die Erstellung eines benutzerdefinierten Blocks mit ACF an. Nun wissen die meisten Leute, dass man das jetzt in ACF machen kann, aber nicht unbedingt jeder hat es ausprobiert. Wenn Sie sich also in diesem Lager befinden und ein langjähriger ACF-Benutzer sind und die benutzerdefinierte Blockfunktion noch nicht verwendet haben, sehen Sie sich dies an, da Sie möglicherweise nur aufgefordert werden, den Wert dieser Funktion zu erkennen. Aber wie werden wir das für die VHS Awards verwenden? Vielleicht möchten wir eine Blockkomponente für unsere Website haben, die wir an verschiedenen Stellen hinzufügen können, und das Schöne an einem benutzerdefinierten Block oder jedem Block ist, dass er verwendet und auf Seiten und Posts auf der gesamten Website platziert werden kann, und wir wollen um einen benutzerdefinierten Call-to-Action-Block zu erstellen.

Nun, das ist ein ziemlich einfacher Block, und Sie können definitiv interessantere Dinge mit benutzerdefinierten Blöcken machen. Wir halten es jetzt einfach. Aber dieses blaue Banner, Aufruf zum Aktionsblock, möchten wir in der Lage sein, auf der Startseite oder vielleicht in einigen Blog-Posts und ähnlichen Dingen zu platzieren, um die Leser und Website-Besucher zu ermutigen, auf diese Schaltfläche zu klicken und durchzugehen und und Stimme für ihren Lieblingsfilm der 90er ab. Wie würden wir also diesen benutzerdefinierten Block mit ACF erstellen? Und der Grund, warum wir es als benutzerdefinierten Block verwenden, ist, dass es ein einzigartiges Design hat.

Es hat diesen interessanten Hintergrundverlauf für dieses sich wiederholende Punktmuster, und wir haben festgestellt, dass es für uns einfacher ist, dies als benutzerdefinierten Block mit dieser fein abgestimmten Steuerung aufzubauen, im Vergleich zu dem, was wir vielleicht mit Blöcken machen könnten, die außerhalb des Musters liegen Regal mit WordPress-Kern. Wie machen wir das? Schritt Nummer eins ist, dass wir unseren benutzerdefinierten Block registrieren, normalerweise in functions.PHP oder wo auch immer Sie diese Art von Code schreiben. Schön und einfach, und wir verweisen auf das Verzeichnis, in dem sich die Vorlagendateien letztendlich für unseren benutzerdefinierten Block befinden werden, also ist das Schritt Nummer eins.

Schritt Nummer zwei, wir erstellen unsere Feldgruppe und fügen unsere Felder hinzu. Für unseren Called-Action-Block möchten wir also auch Text, Schaltflächentext, Schaltflächenlink und Hintergrundfarbe haben. Vielleicht möchten wir die Option für einige Variationen des Stylings dafür anbieten. Nummer drei ist, dass wir in den Standortregeln Block auswählen und sagen, ist gleich, und wir haben den CTA-Block gerade zuvor registriert, und deshalb ist er verfügbar für uns dort in diesem Dropdown. Jetzt wechseln wir zu unserer Vorlagendatei, also sind alle Felder und alles eingerichtet, und jetzt werden wir einige unserer Vorlagen erstellen. Nun, die Vorlagenerstellung unterscheidet sich in gewisser Weise von der traditionellen Vorlagenerstellung mit ACF.

Aber in vielerlei Hinsicht ist es sehr, sehr ähnlich, also werden Sie viele der Muster, die Sie normalerweise für Ihre Entwicklung verwenden, beim Erstellen Ihrer benutzerdefinierten Blöcke verwenden, was fantastisch ist. Also werden wir in unserem Projekt sagen, dass es unser benutzerdefiniertes Thema ist. Wir haben ein Blockverzeichnis, dann haben wir ein CTA-Verzeichnis, das mit dem Block übereinstimmt, den wir registriert haben, und dann hätten Sie normalerweise drei Vorlagendateien, block.JSONsomething.PHP, unser HTML-Markup, und dann dot CSS für unser Styling.

Das ist also der Blocktyp JSON, und hier haben wir den Block sozusagen registriert, aber so können wir die Dinge ein bisschen besser verstehen, und Sie können hier viel rund um die Konfiguration und verschiedene native Core-Funktionen tun Sie können die Bereitstellung für Ihren benutzerdefinierten Block ein- oder ausschalten. Schauen Sie sich also auf jeden Fall die Dokumentation dazu an und verstehen Sie, was getan werden kann, denn hier können Sie wirklich konfigurieren, wie dieser Block verfügbar gemacht und angezeigt wird, und die Funktionen, die Kernfunktionen, die Sie durchlaufen können zu Ihrem benutzerdefinierten Block.

Wir haben dann unsere Vorlagendatei, unsere PHP-Datei, und Sie können hier sehen, dass ich nur Variablen einrichte, die mit Get field interagieren, dort mit unseren Felddaten interagieren, ein bisschen sehr einfache bedingte Logik für unser Styling dort, und dann unser HTML für unseren Block selbst. Und dann werde ich nicht durch das CSS gehen. Sie wissen, was CSS ist, und ich bin mir sicher, dass Sie wahrscheinlich besseres CSS schreiben könnten als das, was ich hier geschrieben habe, aber Sie verstehen, worauf es ankommt. Sie haben eine CSS-Datei für das Styling Ihres Blocks, und Sie können sehen, dass wir einige interessante Dinge in Bezug auf Schriftarten und den radialen Hintergrund mit Farbverlauf für diese Art von Punkthintergrund haben, was irgendwie Spaß macht.

Aber noch einmal, der Grund, warum wir diesen benutzerdefinierten Block erstellen, ist, dass wir wollen, dass er unser CSS, unser Styling, wirklich fein abstimmt, damit wir das Design, auf das wir hinarbeiten, wirklich implementieren können. Und nur um Ihnen zu zeigen, wie das im Editor aussieht, können Sie sehen, wir können unseren aufgerufenen Aktionsblock auswählen, Sie können weit leuchten. Wir können mit unseren Feldern interagieren, den Text für den Text und die Schaltfläche hinzufügen und auch einen Link für die Schaltfläche hinzufügen, und das ist ein sehr gut aussehender benutzerdefinierter Block, den wir an unsere Inhaltsredakteure weitergeben können.

Iain Poulson: Ja, danke, Rob. Was für ein schöner Anblick. Wir müssen das wirklich live stellen. Das ist fantastisch. Gut, lassen Sie uns noch einmal über das sprechen, worüber wir heute gesprochen haben. Also haben wir die Installation von ACF Pro durchgegangen, aber mit Composer. Wir haben darüber gesprochen, wie benutzerdefinierte Beitragstypen und Taxonomien in ACF registriert werden. Wir haben uns mit der Registrierung globaler oder standortweiter Felder mit einer Optionsseite beschäftigt, und wir haben uns mit einer anderen Methode zum programmgesteuerten Registrieren von Feldern mit einem Paket befasst.

Rob hat sich mit Beziehungen beschäftigt und wie man bidirektionale Beziehungen aufbaut. Wir haben Headless mit ACF angesprochen, und Rob hat gerade ein großartiges Beispiel für die Erstellung eines benutzerdefinierten Blocks mit ACF mit kaum etwas außer etwas PHP, HTML und CSS und überhaupt keiner Reaktion gemacht, also ist das wirklich gut. Das war großartig, Rob. Was sind die Stimmen? Als was sind wir herausgekommen?

Rob Stinson: Schauen Sie, für mich läuft es darauf hinaus – der größte Film der 90er Jahre ist zweifellos Robin Williams' „Hook“. Da steckt für mich viel Nostalgie drin, ich liebe diesen Film. Was ist mit dir, Iain?

Iain Poulson: Für mich muss es Kevin Costners „Robin Hood, Prince of Thieves“ sein. Es ist ein Klassiker. Vergiss die schlechten Haare, die Vokuhila, den zwielichtigen englischen Akzent, der nicht einmal ein englischer Akzent ist. Es ist der größte Robin-Hood-Film aller Zeiten, und das ist ein Hügel, auf dem ich bereit bin zu sterben.

Rob Stinson: Ha, ha, nein, fair genug. Danke an alle, dass ihr rumgehangen habt. Ich hoffe, Sie haben etwas gelernt, und wir freuen uns wirklich darauf, zu sehen, was Sie mit ACF bauen, Prost.