7 rzeczy, o których nie wiedziałeś, że możesz zrobić z zaawansowanymi polami niestandardowymi
Opublikowany: 2023-04-09Zaawansowane pola niestandardowe (ACF) są niemal równoznaczne z rozwojem WordPress. Ta wtyczka, obsługująca ponad 4,5 miliona witryn, pomogła WordPressowi osiągnąć nowe wyżyny. Wtyczkę znasz. Prawdopodobnie zbudowałeś za pomocą wtyczki. Ale czy w pełni z tego korzystasz?
Podczas tej sesji przyjrzymy się szybko niektórym mniej znanym sposobom wykorzystania ACF do stworzenia najbardziej dynamicznego, wydajnego i wciągającego WordPressa.
Głośniki:
- Iain Poulson, starszy menedżer produktu w WP Engine
- Rob Stinson, menedżer ds. marketingu produktów w WP Engine
Slajdy sesji:
Transkrypcja:
Iain Poulson: Witamy na naszej sesji poświęconej wtyczce Advanced Custom Fields. Nazywam się Iain Poulson, menedżer produktu ACF w WP Engine, a dołącza do mnie Rob Stinson, który jest naszym menedżerem ds. marketingu produktu. Dzisiaj przeprowadzimy Cię przez dość szybką sesję siedmiu rzeczy, o których nie wiedziałeś, że możesz zrobić z wtyczką Advanced Custom Fields, niektórych rzeczy, które są całkiem nowe, i kilku rzeczy, które są mniej znane. I funkcjonalność, którą zamierzamy skoncentrować wokół fikcyjnej witryny zaprojektowanej przez Roba, więc jesteśmy fanami raczej prawdziwych przykładów niż abstrakcyjnych rzeczy, ale jesteśmy też wielkimi fanami filmów.
Więc ta strona jest świętem najlepszego okresu kina, prawdopodobnie filmów z lat 90., a więc strona opiera się na rozpoznawaniu i nagradzaniu najpopularniejszych i najbardziej lubianych filmów z lat 90. Witryna musi prezentować filmy i umożliwiać użytkownikom głosowanie na ich ulubione, aw prawdziwym stylu Roba witryna wygląda świetnie. Zacznijmy więc od początku i zainstalujmy ACF. Powiedz mi jak, Rob.
ROB Stinson: Świetnie, dzięki, Iain. Tak, dzięki stary. Wygląda całkiem nieźle, prawda? Projektowanie tego zajęło sporo czasu, trochę zabawy. Więc wygraliśmy kontrakt. Mamy projekt i zaczynamy, a pierwszą rzeczą, którą zrobiliśmy, było zidentyfikowanie, że ma to sens przede wszystkim dla ACF. Będziemy musieli skonfigurować całą masę niestandardowych pól dla niektórych niestandardowych typów postów i zrobić kilka interesujących szablonów i tym podobnych. ACF jest tutaj narzędziem do pracy. Więc oczywiście najpierw musimy zainstalować ACF, i to jest tutaj numer jeden. Zazwyczaj wiemy, że możesz po prostu pobrać wtyczkę jako plik ZIP i przesłać ją do administratora WordPress, ładnie i prosto.
To standardowy sposób instalowania wtyczek, ale wiemy też, że programiści w dzisiejszych czasach lubią nieco inaczej zarządzać swoimi zależnościami. Zwykle lubię zarządzać tym w kodzie, aw świecie PHP, zwykle robi się to za pomocą Composer. Teraz możesz dość łatwo instalować wtyczki WordPress z repozytorium WordPress.org za pomocą Composer, ale było to trochę trudniejsze w przypadku wtyczek premium, takich jak ACF Pro.
Ale w najnowszej wersji sprzed kilku tygodni, właściwie około miesiąca temu, umożliwiliśmy teraz instalację ACL Pro przez Composer, co jest fantastyczne, więc zrobimy to teraz. Więc jak to zrobić, krok numer jeden, musisz dodać adres URL repozytorium ACF Pro Composer do swojego pliku composer.JSON. Krok numer dwa polega na utworzeniu pliku auth.JSON dla swoich danych uwierzytelniających i umieszczeniu go w katalogu głównym projektu, zarówno lokalnie, jak i w drodze do miejsca, w którym wdrażamy poświadczenia potrzebne do tego pliku są teraz dostępne w obszarze Twojego konta w witrynie advancedcustomfields.com.
Więc jeśli się zalogujesz, zobaczysz obszar licencji i kilka dodatkowych zakładek i tym podobnych rzeczy, możesz właściwie pobrać cały fragment kodu, skopiować i wkleić całość lub możesz pobrać indywidualną nazwę użytkownika i password i przenieś je do utworzonego pliku, pliku auth.JSON.
W trzecim kroku uruchamiamy polecenie Composer, więc jest to przyjemne i łatwe, 3-etapowy proces, ale fantastyczny, ponieważ oznacza to, jak powiedziałem, że programiści, którzy lubią mieć trochę bardziej dostrojoną kontrolę nad tym, jak zarządzają zależnościami swojego projektu, teraz możesz to zrobić za pomocą ACF Pro, co jest fantastyczne. Oczywiście jest więcej dokumentacji na ten temat, więc po prostu zagłębić się i zobaczyć, jak to wszystko się rozpakowuje, przeskocz do dokumentów na stronie internetowej i powinieneś być gotowy. Spoko, zwymiotuję do Iaina za numer dwa.
Iain Poulson: Dobrze, teraz porozmawiajmy o konfigurowaniu danych dla witryny. Tak więc niestandardowe typy postów są dość fundamentalne w WordPressie, jeśli chodzi o sposób budowania witryny, która nie zawiera tylko postów lub stron. Jest to niestandardowa funkcja typu postu, która pojawiła się w dowolnej wersji WordPressa, zamieniając ją w odpowiedni CMS i zwykle jest to pierwszy krok, jaki robią programiści, gdy budują witryny. I to zawsze działo się poza ACF. Historycznie albo rejestrujesz typ postu za pomocą kodu, albo używasz do tego innej wtyczki, ale jest to część podróży, która całkiem dobrze łączy się z ACF. Tak więc w ramach ACF 6.1 ta funkcjonalność pojawia się we wtyczce, więc jest to naturalny punkt początkowy podróży.
Chcesz zbudować witrynę z danymi struktury danych, zamierzasz zbudować typ postu. Zamierzasz dodać do niego pola, a następnie możesz dodać kilka taksonomii, a następnie zaczniesz edytować te dane. Więc tak, to coś, co umieściliśmy w wersji 6.1, i to jest całkiem ekscytujące mieć ten pełny przepływ budowania w CMS. Poszukajmy więc strony z nagrodami VHS. Będziemy musieli uporządkować nasze dane i sprawić, by WordPress robił to, czego potrzebujemy, więc jeśli chodzi o typ postu, ponieważ nie chcemy używać postów i stron, utworzymy niestandardowy post typ dla filmu, do przechowywania danych filmu, obiektu danych lub modelu danych, ale oczywiście w kategoriach WordPressa jest to niestandardowy typ postu.
Chcemy sklasyfikować filmy za pomocą taksonomii, aby umożliwić użytkownikom łatwe oglądanie filmów z określonego gatunku, a następnie uzyskasz łatwe przeglądanie z przodu, proste adresy URL, które umożliwiają dostęp do filmów z określonych gatunki. Będziemy potrzebować dodatkowych pól do przechowywania danych strukturalnych wokół filmu, więc chcemy na przykład, aby reżyser był polem tekstowym. Będziemy potrzebować roku, w którym film wyszedł jako liczba, i będziemy potrzebować jakiejś formy relacji, aby powiązać filmy ze sobą, i oczywiście musimy zapisać liczbę głosów, które otrzyma, i to jest pole liczbowe.
Rzućmy więc okiem na ACF 6.1, jak mamy zamiar to zrobić. To jest ekran ACF 6.1, a zauważysz nieco inny, mamy menu na pasku bocznym. Teraz jest to ACF, a nie tylko pola niestandardowe, a to jest ekran typu postu. Więc to tylko ja konfiguruję typ postu filmowego. Jest to najprostszy przepływ pracy, polegający na dodaniu pojedynczej etykiety dla typu postu, którym jest film, etykieta liczby mnogiej, i automatycznie generowany jest klucz typu postu. Ustawienie publiczne jest ustawione jako domyślne, ponieważ chcę, aby było widoczne w interfejsie użytkownika, typie posta i chcę mieć możliwość edytowania go w panelu administracyjnym.
Więc kiedy to zostanie zapisane i dodane, dobrą rzeczą w połączeniu tutaj z ACF jest fakt, że następnym krokiem w podróży jest utworzenie typu postu, czy chcemy dodać pola do typu postu, czy też chcemy połączyć istniejące pola z typem postu lub utworzyć taksonomię? Możemy więc zrobić to wszystko od tego momentu tutaj, więc i oczywiście musimy iść i dodać te pola. OK, więc klikając to powiadomienie, aby dodać nowe pola do typu posta filmowego, otrzymujemy edytor grup pól, który jest wstępnie wypełniony na dole w ustawieniach Metabox.
Tak więc reguły dotyczące lokalizacji są już ustawione, aby powiedzieć, pokaż te pola, kiedy edytujesz typ postu filmu, a następnie możesz śmiało dodać swoje pola, co już zrobiłem tutaj na zrzucie ekranu. Mamy więc reżysera, rok, głosy i powiązane filmy. Następnie oczywiście możemy zarejestrować niestandardową taksonomię, o której mówiliśmy, dodając gatunek i łącząc taksonomię gatunku z filmami typu post. Ale to są pola, które dodaliśmy i które są dołączone do obiektu filmowego, ale co z polami, których potrzebujemy do przechowywania danych, które mogą być bardziej globalne lub obejmujące całą witrynę? Rob, co my za to mamy?
Rob Stinson: Fajnie, dzięki za to, Iain, dobrze wyglądasz. Nasz model zawartości idzie dobrze, ale jeszcze nie skończyliśmy. Teraz omówiliśmy już instalację ACF Pro przez Composer i właśnie przyjrzeliśmy się niestandardowym typom postów i niestandardowym taksonomiom w ACF. Teraz te dwie rzeczy, które są bardzo, bardzo świeże, ale trzecia rzecz, którą chcę teraz omówić, to stare, ale dobre. I tak jest we wtyczce od wielu lat, ale nie wszyscy o tym wiedzą i nie wszyscy w pełni rozumieją wartość tego, więc przyjrzymy się teraz globalnym polom ze stroną opcji.
Teraz zazwyczaj myślisz o niestandardowym polu i sposobie przechowywania danych dla określonego posta, strony lub niestandardowego typu postu. Ale czasami musimy przechowywać dane, które są powiązane w całej witrynie, a doskonałym przykładem na naszej wspaniałej stronie z nagrodami VHS jest tego rodzaju górny pasek powiadomień lub promocyjny. I to jest pasek, który chcemy utrzymać na każdej stronie witryny Strona główna, przechodzisz do strony filmu, tam jest. Idziesz na stronę Informacje, stronę Kontakt lub stronę Blog, ten mały pasek znajduje się w całej witrynie, bez względu na to, dokąd przechodzi użytkownik, więc nie ma sensu wiązać tych istotnych danych z postem lub film.
To coś, co powinno być związane z witryną. Dlatego chcemy mieć możliwość włączania i wyłączania tego paska, ponieważ chcemy to skonfigurować, ale być może będziemy chcieli włączać go w określonych porach roku. Możemy mieć określoną promocję lub kampanię, więc chcemy mieć możliwość posiadania pola logicznego, abyśmy mogli włączać i wyłączać tę rzecz. Ponadto chcemy mieć możliwość aktualizacji samego tekstu wywoływanej akcji lub w przycisku, więc oczywiście niestandardowe pola mają do tego duży sens.
Teraz, aby skonfigurować stronę opcji, która jest funkcją ACF, która pozwala nam to zrobić, krok numer jeden to zwykle plik .PHP w twoich funkcjach lub możesz go oczywiście zarejestrować w innym miejscu, być może wtyczka, nad którą pracujesz. Ale zamierzasz zarejestrować samą stronę opcji, a w ustawieniach jest kilka małych konfiguracji, które możesz zrobić. Możesz mieć jedną stronę opcji, ale możesz też mieć ich wiele i mieć je w pewnym sensie zagnieżdżone, więc strony podrzędne, strony nadrzędne i tym podobne, więc możesz robić ciekawe rzeczy.
Dla nas nasz jest całkiem prosty. Właśnie konfigurujemy tutaj pasek powiadomień, więc potrzebujemy tylko jednej strony, więc pierwszym krokiem jest zarejestrowanie tej strony Opcje. Krok drugi, jak zwykle, utworzylibyśmy grupę terenową. Nazwalibyśmy to polami paska promocji lub czymś w tym rodzaju, albo polami paska powiadomień, i możesz zobaczyć, że mam pole Boolean na górze, więc prawda lub fałsz oznacza, że pasek promocji jest aktywny. A potem mam pole tekstowe na wiadomość, pole tekstowe na tekst przycisku, pole adresu URL na link do przycisku, a potem możemy również mieć typ powiadomienia, ale być może chcemy mieć alerty lub styl promocyjny zawiadomienia i być może wykonamy kilka interesujących stylów warunkowych w oparciu o to, co zostanie tam wybrane.
Więc dodajemy naszą grupę pól i dodajemy nasze pola, a krok trzeci jest tuż poniżej. Jak wiesz, w regułach lokalizacji możemy teraz wybrać Strona opcji jest równa – i widzisz ustawienia witryny, które tam mam – to jest strona Opcje, którą zarejestrowałem w kroku numer jeden. I tak po tym wszystkim, w panelu administracyjnym WordPress widzimy teraz po lewej stronie, w naszym pasku administracyjnym mamy Ustawienia witryny, klikamy na to i widzimy wszystkie pola, tak jak byśmy się spodziewali.
I możemy włączyć lub wyłączyć pasek powiadomień. Możemy zaktualizować tekst, zaktualizować przycisk, a następnie te dane zostaną udostępnione naszemu szablonowi, więc tworzenie szablonów z polami danych na stronie opcji jest zasadniczo takie samo, jak w innym przypadku. Istnieje kilka drobnych niuansów dotyczących tego, w jaki sposób celujesz w fakt, że jest to strona opcji, a nie post, ale wskocz do dokumentacji na advancedcustomfields.com i przeprowadzi cię przez cały proces, jak sobie z tym poradzić. Po czwarte, zwrócę ci to, Iain.
Iain Poulson: Dzięki, Rob, tak. Chcę teraz porozmawiać o tym, jak programowo rejestrujemy pola za pomocą ACF. Tak więc tworzenie pól w ACF jest bardzo łatwe dzięki interfejsowi użytkownika Field Editor, który znamy i kochamy, widzieliśmy już wcześniej, ale istnieją inne sposoby definiowania pól. ACF pozwala nam eksportować zarówno pliki JSON, jak i PHP z definicjami pól, które można wykorzystać do tworzenia pól.
Ale czy wiesz, że tak naprawdę w społeczności ACF istnieje pakiet o nazwie ACF builder, który umożliwia tworzenie pól za pomocą pewnego rodzaju płynnego API z kodem PHP? W rzeczywistości jest to pakiet innej firmy i nazywa się ACF Builder Package firmy StoutLogic. Tak, jest tam link do GitHub. Zasadniczo pozwala tworzyć pola bezpośrednio z kodu, nie znając zawiłości tego, jak ACF potrzebuje danych pól w PHP. Robi to w naprawdę ekspresyjny sposób. To sprawia, że jest wielokrotnego użytku i przenośny.
Możesz zatwierdzić definicje pól, ponieważ pliki PHP do kontroli wersji ułatwiają współpracę. Łatwo jest wysłać go do mechanizmu wdrażania, a także w pewnym sensie usuwasz interfejs użytkownika edytora grup pól, więc definiujesz te pola w kodzie, który uniemożliwia klientom dotykanie interfejsu użytkownika, więc przyjrzyjmy się szybko, jak Zrób to. Aby go zainstalować, ponieważ jest to pakiet – rozmawialiśmy wcześniej o Composer. To jest pakiet Composer, który można zainstalować za pomocą następującego polecenia, Composer nabywa StartLogic, dostawcę, ACF Builder, a następnie tak wygląda kod.
W pewnym sensie tworzysz instancję Konstruktora pól i dajesz mu informację o tym, co byłoby grupą pól. A potem mówisz, że w tej grupie pól dodajmy pole tekstowe o nazwie Dyrektor. Dodajmy pole liczbowe o nazwie Rok, a następnie, co ważne, ustawimy lokalizację grupy pól, która ma się pojawiać w typie posta filmu.

I to wszystko robi wiele dla ciebie bez konieczności myślenia o tym, więc nadajesz mu nazwisko reżysera dla wytwórni terenowej, a to pójdzie naprzód i, oczywiście, stworzy ślimak lub klucz do pola bez twojej wiedzy dodać to, więc zabiera dużo pisania, dużo myślenia i dużo podatnego na błędy tworzenia. Następnie druga część polega na załadowaniu tej definicji pola do ACF, która zbuduje dla ciebie grupę pól.
Rob Stinson: W porządku, więc numer 5 tutaj, relacje dwukierunkowe. To jest interesujące. Myślę, że pamiętam ten konkretny projekt, nad którym pracowałem w czasach mojej agencji, gdzie właściwie to rozgryzłem, i był to rodzaj zmiany gry. Więc jeśli nie robiłeś tego wcześniej z ACF, zwróć uwagę, ponieważ jest to naprawdę przydatna rzecz, więc spójrzmy na przykład. Patrząc oczywiście na naszą stronę z nagrodami VHS, mamy listę powiedzmy 100 filmów i oczywiście istnieją różne sposoby łączenia tych rzeczy.
Mamy już wcześniej naszą niestandardową taksonomię gatunku. Możemy mieć kilka różnych pól, które obsługują takie rzeczy, jak tagi lub grupowanie, więc relacje dwukierunkowe są przydatne, gdy chcesz utworzyć określony typ dwukierunkowego połączenia między dwoma postami lub, w naszym przypadku, dwoma filmami. Dla naszego przykładu, powiedzmy, że mamy te trzy filmy w naszej bazie danych i wszystkie są animowane, więc chcemy stworzyć z nimi dwukierunkową relację.
Oznacza to, że załóżmy, że mamy tutaj nasz pierwszy film, „Toy Story”, świetny film, i stwierdzamy, że są jeszcze dwa inne powiązane filmy, które chcemy z tym powiązać. Moglibyśmy więc utworzyć pole relacji dla naszego niestandardowego typu postu, którym są filmy, i mielibyśmy tam pole relacji i wybralibyśmy film „Król lew” i Princes Monon – bardzo mi przykro. Ciągle gubię się w tym słowie. Rozwalam to, ale film nazywa się „Księżniczka Mononoke”. Hahaha. Proszę, nie nienawidź mnie. Z jakiegoś powodu mam problem z wymówieniem tego słowa.
I stwierdzamy, że te dwa filmy są ze sobą powiązane, więc wybieramy je z pola relacji. Teraz w tym przypadku miałoby sens, że tak, na przykład „Król Lew” jest powiązany z „Toy Story”, a zatem „Toy Story” jest powiązany z „Królem Lwem”. Więc być może normalnie przeszlibyśmy do ekranu edycji „Króla Lwa”, a potem znaleźlibyśmy „Toy Story” i dodalibyśmy go tam, ale podwajamy tam naszą pracę. Tak więc związek dwukierunkowy polega na tym, że automatycznie tworzy dla nas to połączenie, co jest naprawdę, bardzo przydatne.
Kiedy więc dodamy na przykład „Króla Lwa” do „Toy Story”, „Toy Story” zostanie automatycznie dodane do „Króla Lwa” i jest to naprawdę bardzo przydatne. Oszczędza to dużo czasu twórcom treści i menedżerom treści. Zmniejsza to ryzyko zapomnienia, a może możesz usunąć jeden z postów, a potem zapomnieć o usunięciu go z drugiego. To naprawdę bardzo upraszcza edycję treści, więc jest to naprawdę przydatna rzecz, której można użyć, szczególnie w interesujących witrynach, takich jak ta. Jak to zrobić? Cóż, obecnie można to zrobić na dwa sposoby, a ja opowiem o trzeciej rzeczy, być może, która pojawi się na torze jeszcze w tym roku.
Więc jak to się robi, po pierwsze, możesz to zrobić w kodzie. Tak więc po zainstalowaniu wtyczki ACF Pro możesz napisać kod, aby to zrobić. I możesz napisać funkcję, która łączy się z ACF Update Value Filter, a ten filtr działa przed zapisaniem wartości i zasadniczo to, co robi, to pobiera bieżący post, który edytujesz, i identyfikuje identyfikator posta który został dodany, a następnie aktualizuje drugi post i wykonuje takie dopasowywanie w tle, co jest bardzo przydatne.
Trochę kodu, więc dopóki czujesz się z tym komfortowo, nie jest to zbyt ciężkie podnoszenie. Ale znowu jest tam link lub adres URL, który możesz sprawdzić w dokumentach Zaawansowane pola niestandardowe, aby zobaczyć, jak możesz to zrobić. Jednak opcja druga to brak kodu, co czasami jest miłe. Jest to właściwie wtyczka ekosystemu o nazwie ACF Extended. Jest dostępny na WordPress.org, a to, co robi, to po prostu wprowadza tę funkcję do samego interfejsu ACF.
Więc jeśli zainstalowałeś to rozszerzenie, ACF Extended, i masz zainstalowany ACF Pro, zobaczysz opcję, że kiedy tworzysz pole relacji, istnieje dwukierunkowy przełącznik, który możesz włączyć, a następnie możesz ustalić to do kolekcji bezpośrednio z poziomu interfejsu użytkownika, co jest całkiem przydatne. Teraz sprawy idą naprawdę ciekawie z tym projektem, ale nie traćmy tym głowy, czy nie powinniśmy? Iain, do ciebie.
Iain Poulson: Tak, dzięki Rob. Warto zawołać bez głowy, jeśli chodzi o ACF. ACF ma obsługę bezgłową, więc tak, bazowe witryny bezgłowe, niezależny charakter witryn. Trwa dużo komunikacji API, a ACF obsługuje API. Interfejs API REST dodaliśmy natywnie do ACF w wersji 5.11 lub 5.11 i obsługujemy GraphQL z wtyczką WP GraphQL, która ma dodatek ACF dla WP GraphQL, więc ACF obsługuje strony bezgłowe. Ma integrację z programem WP Engine Atlas dla odpowiednich bezgłowych witryn WordPress, ale porozmawiajmy o prawdziwym przykładzie, w jaki sposób można pobrać dane z naszej witryny VHS WordPress i użyć ich w sposób oddzielony.
Na przykład – wysłuchaj mnie – ludzie w zasadzie głosują na stronie z nagrodami VHS i będą – myślę, że ustaliliśmy arbitralną datę – muszą głosować do końca określonej daty, a my Zobaczę, co jest najpopularniejsze. Mamy nasze lokalne kino, które wystawia podwójną listę najczęściej głosowanych filmów z lat 90. Więc mają w kinie, mają swój billboard i jest on online. Jest podłączony do sieci i możemy dynamicznie zasilać to, co jest wyświetlane na tym billboardzie, więc musimy połączyć się z naszą witryną WordPress.
Na przykład billboard to prosta aplikacja węzła, musimy pobrać dane z witryny VHS, więc rzućmy okiem, jak możemy to zrobić za pomocą niestandardowego punktu końcowego interfejsu API REST, i jak powiedziałem wcześniej, mamy otrzymał wsparcie GraphQL. Można to zrobić w obie strony, ale jest to prawdopodobnie prostszy przykład do pokazania. Więc przede wszystkim stworzymy funkcję, która zasadniczo pobiera dane, których potrzebujemy, więc przechodząc przez to, jest to zapytanie WP, które mówi, chcę filmy lub typy postów typu filmu, ale ja tylko chcę dwa. Ale chcę to również uporządkować według pola ACF, którego nazwa pola to głosy, i porządkujemy to w porządku malejącym, więc dostaniemy górę i dostaniemy górę dwa.
Następnie utworzymy niestandardowy punkt końcowy REST, który będzie korzystał z funkcji wywołania zwrotnego, którą stworzyliśmy na poprzednim slajdzie, a to po prostu da nam punkt końcowy, w który możemy trafić, aby przejść i pobrać dwa filmy. Więc jak to wygląda w rzeczywistości – a to tylko testowanie – więc adres URL to vhsawards.com, WP-JSON, a następnie nadaliśmy mu przestrzeń nazw VHS w wersji 1 na wypadek, gdybyśmy kiedykolwiek chcieli zmienić interfejs API, i właśnie otrzymaliśmy bardzo prostą strukturę adresu URL popularnego.
A to jest po prostu zwrócenie obiektu JSON z dwoma przedmiotami, dwoma najwyżej ocenionymi, którymi tak się złożyło, że to „Fight Club” i „Chłopcy z ferajny”, które są całkiem dobre, więc tak. Zdecydowanie dobrze jest pokazać, w jaki sposób ACF zasila oddzielone i bezgłowe strony, ale w tej chwili trudno mówić o WordPressie bez wspominania o blokach. Nie mogę uwierzyć, że zaszliśmy tak daleko, nie wspominając nawet o blokach. Co masz dla nas, Rob, żeby to zmienić?
Rob Stinson: Zdecydowanie musimy porozmawiać o blokach. Zanim to zrobiłem, zdałem sobie sprawę, że tuż przed tym, kiedy patrzyliśmy na numer pięć dotyczący relacji dwukierunkowych, zasugerowałem trzeci sposób na zrobienie tego. Nie omówiłem tego, więc wszystko, co chcę powiedzieć, to obserwować tę przestrzeń, ponieważ planujemy, mamy na mapie drogowej, przyjrzenie się dodaniu lepszej obsługi relacji dwukierunkowych natywnie do samej wtyczki, abyś mógł ułatwić te rzeczy po prostu we wtyczce ACF bez potrzeby korzystania z elementów innych firm, więc po prostu obejrzyj to miejsce, bez zobowiązań dotyczących czasu. To jest coś, na co patrzymy.
Więc numer siedem, tak. Przyjrzyjmy się tworzeniu niestandardowego bloku za pomocą ACF. Teraz większość ludzi wie, że można to zrobić w ACF teraz, ale niekoniecznie każdy tego próbował. Więc jeśli jesteś w tym obozie i jesteś długoletnim użytkownikiem ACF i nie korzystałeś teraz z funkcji niestandardowego blokowania, obejrzyj to, ponieważ może to po prostu skłonić cię do zobaczenia wartości tej funkcji. Ale jak wykorzystamy to do rozdania VHS Awards? Być może chcemy mieć komponent blokowy dla naszej witryny, w którym moglibyśmy dodawać różne miejsca, i na tym polega piękno niestandardowego bloku lub dowolnego bloku, że można go używać i umieszczać na stronach i postach w całej witrynie, a my chcemy aby utworzyć niestandardowy blok wezwania do działania.
Teraz jest to całkiem prosty blok i zdecydowanie możesz robić ciekawsze rzeczy z niestandardowymi blokami. Uprościmy to teraz. Ale ten niebieski baner, wezwanie do bloku akcji, chcemy móc umieścić na stronie głównej, a może na niektórych wpisach na blogu i tym podobnych, zachęcając czytelników i odwiedzających witrynę do kliknięcia tego przycisku i przejścia przez głosować na swój ulubiony film z lat 90. Jak więc zbudowalibyśmy ten niestandardowy blok za pomocą ACF? A powodem, dla którego robimy to jako niestandardowy blok, jest to, że ma unikalny projekt.
Ma ten interesujący gradient tła dla tego powtarzającego się wzoru kropek i zdaliśmy sobie sprawę, że łatwiej jest nam zbudować to jako niestandardowy blok z precyzyjnie dostrojoną kontrolą, która daje nam, w porównaniu z tym, co moglibyśmy zrobić z blokami, które są poza półka z rdzeniem WordPress. Więc jak to robimy? Pierwszym krokiem jest zarejestrowanie naszego niestandardowego bloku, zazwyczaj w functions.PHP lub gdziekolwiek piszesz ten rodzaj kodu. Ładne i proste, a my wskazujemy katalog, w którym ostatecznie znajdą się pliki szablonów dla naszego niestandardowego bloku, więc to jest krok numer jeden.
Krok numer dwa, tworzymy naszą grupę pól i dodajemy nasze pola. Tak więc dla naszego bloku wywołanej akcji chcemy mieć również tekst, tekst przycisku, łącze przycisku i kolor tła. Być może chcemy dać możliwość wariacji na temat stylizacji. Po trzecie, w regułach lokalizacji wybierzemy blok i powiemy, że jest równy, a blok wezwania do działania zarejestrowaliśmy właśnie wcześniej i dlatego jest on dostępny dla nas w tym menu rozwijanym. Teraz przechodzimy do naszego pliku szablonu, więc wszystkie pola i wszystko jest skonfigurowane, a teraz zajmiemy się tworzeniem szablonów. Tworzenie szablonów różni się pod pewnymi względami od tradycyjnego szablonowania z ACF.
Ale pod wieloma innymi względami jest bardzo, bardzo podobny, więc wiele wzorców, które zwykle stosujesz w swoim rozwoju, będziesz używać podczas budowania niestandardowych bloków, co jest fantastyczne. Więc w naszym projekcie powiemy, że to nasz niestandardowy motyw. Mamy katalog bloków, następnie mamy katalog CTA, który pasuje do zarejestrowanego przez nas bloku, a następnie zwykle masz trzy pliki szablonów, block.JSONcoś.PHP, który jest naszym znacznikiem HTML, a następnie kropką CSS dla naszego stylizacja.
Więc to jest typ bloku JSON i to jest miejsce, w którym zarejestrowaliśmy blok, ale w ten sposób możemy trochę więcej zrozumieć i jest wiele rzeczy, które możesz tutaj zrobić w zakresie konfiguracji i różnych natywnych funkcji Core, które możesz włączyć lub wyłączyć opcję udostępniania niestandardowego bloku. Więc zdecydowanie sprawdź dokumentację na ten temat i dowiedz się, co można zrobić, ponieważ tak naprawdę możesz, jak powiedziałem, skonfigurować sposób udostępniania tego bloku i wyświetlania oraz funkcje, podstawowe funkcje, przez które możesz przejść do własnego bloku.
Następnie mamy nasz plik szablonu, nasz plik PHP i możecie zobaczyć tutaj, po prostu konfiguruję zmienne wchodzące w interakcję z polem Get, wchodząc w interakcję z naszymi danymi pola, trochę bardzo prostej logiki warunkowej w naszym stylu tam, a następnie nasz kod HTML dla naszego bloku. A potem nie zamierzam przechodzić przez CSS. Wiesz, czym jest CSS i jestem pewien, że prawdopodobnie mógłbyś napisać lepszy CSS niż to, co napisałem tutaj, ale rozumiesz, o co chodzi. Masz plik CSS do stylizacji swojego bloku i widzisz, że mamy kilka interesujących rzeczy związanych z czcionkami i radialnym, gradientowym tłem dla tego rodzaju tła z kropkami, co jest trochę zabawne.
Ale znowu powodem, dla którego tworzymy ten niestandardowy blok, jest to, że chcemy, aby naprawdę dostroił nasz CSS, naszą stylizację, abyśmy mogli naprawdę wdrożyć projekt, nad którym pracujemy. Aby pokazać, jak to wygląda w Edytorze, możesz zobaczyć, że możemy wybrać nasz blok Called Action, możesz rozświetlić szeroko. Możemy wchodzić w interakcje z naszymi polami, dodawać tekst do tekstu i przycisku, a także dodawać link do przycisku, a to jest bardzo ładnie wyglądający niestandardowy blok, który możemy przekazać naszym redaktorom treści.
Iain Poulson: Tak, dzięki Rob. Cóż za przystojny widok. Naprawdę musimy to puścić na żywo. To jest niesamowite. Dobra, wróćmy do tego, o czym dzisiaj rozmawialiśmy. Przeszliśmy więc przez proces instalacji ACF Pro, ale z Composerem. Rozmawialiśmy o tym, jak zarejestrować niestandardowe typy postów i taksonomie w ACF. Przyjrzeliśmy się rejestrowaniu pól globalnych lub obejmujących całą witrynę za pomocą strony opcji i przyjrzeliśmy się innemu sposobowi programowej rejestracji pól za pomocą pakietu.
Rob zagłębił się w relacje i sposoby tworzenia relacji dwukierunkowych. Dotknęliśmy headless z ACF, a Rob właśnie zrobił świetny przykład tworzenia niestandardowego bloku z ACF z prawie niczym oprócz PHP, HTML i CSS, i nie reaguje w ogóle, więc to jest naprawdę dobre. To było świetne, Rob. Jakie są głosy? W czym wyszliśmy?
Rob Stinson: Dla mnie wszystko sprowadza się do tego – największym filmem lat 90. jest niezaprzeczalnie „Hook” Robina Williamsa. Owinęło mnie w to wiele nostalgii, uwielbiam ten film. A ty, Ian?
Iain Poulson: Dla mnie to musi być „Robin Hood, książę złodziei” Kevina Costnera. To klasyk. Zapomnij o brzydkich włosach, barwach, podejrzanym angielskim akcencie, który nawet nie jest angielskim akcentem. To najwspanialszy film o Robin Hoodzie wszechczasów i jest to wzgórze, na którym jestem gotów umrzeć.
Rob Stinson: Ha, ha, nie, w porządku. Słuchajcie, dziękuję wszystkim za spotkanie. Mam nadzieję, że się czegoś nauczyłeś i naprawdę nie możemy się doczekać, aby zobaczyć, co zbudujesz z ACF, na zdrowie.