Jak zbudować swój pierwszy bezgłowy projekt WordPress z ACF + WPGraphQL

Każdy ma swoje ulubione narzędzia, jeśli chodzi o programowanie WordPressa, a pomysł zbudowania bezgłowej witryny bez tych narzędzi może być zniechęcający. Na szczęście dwa ulubione narzędzia programistów WordPress — ACF i WPGraphQL — mogą pomóc Ci zanurzyć się w programowaniu bez głowy.

W tej sesji starszy rzecznik programistów WP Engine, Jeff Everhart, prezentuje tajniki infrastruktury, budując witrynę demonstracyjną w ciągu kilku minut za pomocą Atlasu!

Slajdy sesji:

Transkrypcja:

JEFF EVERHART: Co słychać, wszyscy? Nazywam się Jeff Everhart, starszy rzecznik programistów w WP Engine. Bardzo dziękuję za przyłączenie się do mojej dzisiejszej rozmowy na temat budowania pierwszego bezgłowego projektu WordPress z ACF i WP GraphQL. Zanim przejdę do budowania, zawsze lubię podać kontekst tego, czym jest bezgłowy WordPress. Wygląda na to, że bezgłowy staje się coraz mniej niszowym terminem, a bardziej mainstreamowym, więc postaram się, aby wyjaśnienie było krótkie.

Bezgłowy WordPress w swej istocie polega na wykorzystaniu CMS WordPress za pośrednictwem interfejsu API do obsługi innego rodzaju aplikacji. Jeśli spojrzymy na diagram na tym slajdzie, gdy użytkownik żąda site.com/page, zamiast tego, aby WordPress obsłużył to żądanie, aplikacja JavaScript odpowiada na tę trasę. Sprawdza ścieżkę, określa, jakich danych potrzebuje z WordPressa lub innych źródeł, wywołuje te interfejsy API i generuje odpowiedź dla użytkownika.

Należy zauważyć, że to, co znajduje się w tym gnieździe wykonawczym Node.js, może być naprawdę dowolną liczbą różnych typów aplikacji lub klientów. Widzieliśmy różne przykłady aplikacji mobilnych lub stron internetowych zbudowanych przy użyciu wszystkich najpopularniejszych frameworków, które z powodzeniem wykorzystują ten wzorzec. Teraz, gdy masz dobre pojęcie o tym, czym jest bezgłowy WordPress, przejdźmy przez stos technologii, którego użyjemy w dzisiejszym projekcie.

Na naszej najbardziej tylnej warstwie użyjemy WP GraphQL jako naszego API. WP GraphQL zamienia Twój backend WordPress w potężne API GraphQL. Wymusza wszystkie te same kontrole bezpieczeństwa ról i możliwości, co natywny WordPress i podstawowy interfejs API REST. WP GraphQL to doskonały wybór do tworzenia aplikacji bezobsługowych, ponieważ za pomocą deklaratywnego języka zapytań możemy wyszukiwać różne typy treści w całym zakresie treści. Więc pobieranie postów, stron z ich kategoriami w tym samym żądaniu.

Zobaczmy teraz, jak możemy ustrukturyzować i modelować bardziej złożone dane za pomocą CMS WordPress. Wielu programistów zajmujących się projektami headless musi modelować i przechowywać inne dane, prawda? Wykracza poza typowe posty lub strony WordPress. ACF lub zaawansowane pola niestandardowe to świetne narzędzie do modelowania tych pól niestandardowych. W nadchodzącym wydaniu stanie się jeszcze potężniejszy, umożliwiając rejestrowanie typów postów i taksonomii bezpośrednio w interfejsie użytkownika w darmowej wersji tej wtyczki.

Dzięki temu wszystkie dane są łatwo dostępne za pośrednictwem interfejsu API REST, ale konieczne będzie zainstalowanie rozszerzenia WP GraphQL, aby dodać niektóre dane z tych pól do naszego schematu GraphQL. Osobiście jestem bardzo podekscytowany widząc, jak ta wtyczka ewoluuje, ponieważ staje się potężniejsza dla bezgłowych programistów.

Teraz, gdy możemy modelować złożone dane i wyszukiwać je za pomocą WP GraphQL, potrzebujemy sposobu na stworzenie nowoczesnych doświadczeń internetowych dla naszych użytkowników, jednocześnie wspierając edytorów treści, którzy już znają i kochają WordPress. I tu wkracza Faust. Faust to dwuczęściowy framework składający się z wtyczki WordPress i frameworka JavaScript opartego na Next.js. Pracują razem, aby tworzenie bezgłowych witryn WordPress było łatwe i intuicyjne.

Dodaje wsparcie dla rzeczy takich jak podgląd postów i uwierzytelnianie od razu po wyjęciu z pudełka, a także możesz pochylić się nad przeprojektowaną hierarchią szablonów WP w nowoczesnym JavaScript. Faust.js ma być bardzo rozszerzalną platformą i jest dostarczany z systemem wtyczek i paskiem administracyjnym, którego można używać do dostosowywania i tworzenia doświadczeń, które obsługują konkretny przypadek użycia.

Wreszcie, będziemy potrzebować kilku sposobów pracy z tymi narzędziami lokalnie iw środowisku produkcyjnym. Korzystając z migracji lokalnej i WP, ściągnąłem wszystkie zasoby WordPress, których będziesz potrzebować do tego projektu, do jednego pliku ZIP, który możesz przeciągnąć i upuścić w folderze lokalnym, aby rozpocząć. Gdy skończymy budować naszą witrynę, możemy przenieść naszą pracę na platformę Atlas. Atlas WP Engine to wszystko w jednym, bezobsługowym rozwiązaniu hostingowym, które łączy backend WordPress i kontener Node.js, wszystkie dostrojone do współpracy, dostępne za pośrednictwem jednego płynnego pulpitu nawigacyjnego.

Skoro już dobrze rozumiesz wszystkie narzędzia, których będziemy używać w dzisiejszej prezentacji, przejdźmy od razu do tworzenia. Otwórz adres URL na tym slajdzie, aby uzyskać dostęp do kodu demonstracyjnego w przeglądarce. Starałem się, aby to doświadczenie było jak najłatwiejsze do śledzenia, ale w ciągu następnych 25 minut zajmiemy się wieloma rzeczami, więc zachęcamy do oglądania teraz i odsyłania do tego repozytorium GitHub i nagranie tej sesji później, aby kontynuować pracę po konferencji. Jeśli reszta dekodowania to pokaz samochodów, ta sesja dotyczy budowy silników. Gra słów całkowicie zamierzona.

Teraz, gdy mamy otwarte repozytorium GitHub, zacznijmy. Pierwszą rzeczą, którą polecam zrobić, to zrobić rozwidlenie tego repozytorium na własnym koncie. Jeśli przejrzysz to, co jest zawarte w tym repozytorium, zobaczysz kilka przykładowych kodów, a także instrukcje krok po kroku w pliku readme dotyczące wszystkiego, co zrobimy w tej prezentacji. W rzeczywistości wykonamy wiele operacji kopiowania i wklejania bezpośrednio z tego repozytorium do Twojego projektu. Aby sklonować to lokalnie, uruchommy polecenie klonowania Git w twoim terminalu.

Pobieranie zajmie tylko sekundę, a kiedy już pobierzemy projekt, przejdźmy dalej i zmieńmy nasz katalog na ten katalog projektu. Stamtąd zamierzam uruchomić polecenie, aby otworzyć ten projekt w VS Code, ale możesz swobodnie używać dowolnego edytora kodu. Ponieważ VS Code ma już zintegrowany terminal, mogę to wyczyścić, a następnie po prostu zamknąć iTerm. A teraz możemy przejść do lokalizacji naszej lokalnej witryny WordPress. Aby to zrobić, otworzymy ten projekt w Finderze, a następnie zlokalizujemy bezgłowy plik ZIP demonstracyjny WP, który dla Ciebie przygotowałem.

Przeciągniemy i upuścimy ten plik ZIP bezpośrednio do lokalnego środowiska programistycznego, a lokalne rozpocznie proces rozpakowywania i ładowania demonstracyjnej witryny WordPress. Możemy prawie trzymać się ustawień domyślnych, a utworzenie nowej witryny WordPress zajmie tylko kilka minut. Teraz jest to świetna funkcja WP migrate pro, która pozwala mi wyeksportować dowolną witrynę jako ZIP i przeciągnąć ją i upuścić bezpośrednio do lokalnego, dzięki czemu mogę bardzo szybko przenieść witrynę produkcyjną na moją lokalną maszynę, niezależnie od platformy.

Po zakończeniu instalacji możesz zaufać temu certyfikatowi SSL, a następnie otworzymy ten projekt w WP Admin. Stamtąd pójdziemy dalej i po prostu zminimalizujemy lokalnie, ponieważ już działa i tak naprawdę nie musimy z nim nic więcej robić. Stamtąd otworzymy nasze repozytorium, w którym znajdziesz nazwę użytkownika i hasło administratora, które już utworzyłem dla tej witryny demonstracyjnej. Powinieneś być w stanie użyć tych poświadczeń, aby przejść dalej i zalogować się do pulpitu administratora WP. Stamtąd zajmiemy tylko sekundę, aby zlokalizować tę lokalną instalację WordPress.

Pierwszą rzeczą, którą zrobimy, to przyjrzymy się wtyczkom, które są instalowane z tą witryną WordPress. Widzimy takie rzeczy, jak zaawansowane pola niestandardowe do modelowania danych. Mamy faule, aby umożliwić niektóre z naszych bezgłowych funkcji, WP GraphQL, aby działał jako interfejs API dla naszej witryny, a następnie WP GraphQL dla rozszerzenia ACF, aby wyświetlić niektóre grupy pól ACF. A teraz spójrzmy na posty. Jeśli spojrzysz na wszystkie różne posty demonstracyjne, które wstępnie wypełniłem w ramach tego projektu, zobaczymy, że mamy wiele różnych postów z wieloma różnymi kategoriami.

Jeśli przyjrzymy się zawartości każdego posta, zobaczymy, że mamy kilka treści, kilka obrazów, polecanych obrazów i kilka grup pól ACF, które już utworzyliśmy i wstępnie wypełniliśmy. Przyjrzyjmy się więc bardziej szczegółowo grupom pól. Jeśli otworzymy menu ACF, zobaczysz, że mamy utworzone dwie grupy pól — zasoby żywności i słodki mixtape. Przyjrzyjmy się najpierw zasobom żywności.

To naprawdę podstawowa grupa pól z dwoma indywidualnymi polami — tekstem i adresem URL. Dla każdej z tych rzeczy mam zaznaczoną opcję Pokaż w GraphQL, aby pojawiały się w GraphQL. Następnie sprawdziłem również tę opcję na poziomie grupy pól. Ponadto mam pewną logikę warunkową, aby określić, kiedy renderować te posty – więc jeśli kategoria postu jest równa jedzeniu. I sprawdźmy, jak wygląda słodki mixtape.

Przekonamy się, że wygląda to podobnie do naszych zasobów żywności i że mamy kilka różnych pól. Każdy z nich ma zaznaczoną opcję Pokaż w GraphQL, a także dodatkowo zaznaczoną na poziomie grupy pól. Widzimy, że istnieje kilka różnych ustawień, które daje nam rozszerzenie WP GraphQL, których możemy nie potrzebować. Ponadto widzimy, że warunkowo wyświetlamy to również na podstawie kategorii postów.

Przyjrzyjmy się teraz WP GraphQL i temu, co nam to daje pod względem narzędzi. Jeśli otworzymy menu GraphQL, zostaniemy wrzuceni do graficznego IDE. Teraz jest to interaktywne środowisko programistyczne, które umożliwia tworzenie zapytań za pomocą WP GraphQL. Możemy określić, że chcemy, powiedzmy, pierwszych 10 postów z kategoriami i dołączyć tutaj również nasze dodatkowe pola ACF. Kiedy klikniemy przycisk Uruchom, otrzymamy z powrotem aktualne dane z naszej witryny WordPress, które pasują do danych w tym zapytaniu.

Jeśli chcemy, możemy otworzyć okno Query Composer i wizualnie skomponować aspekty naszego zapytania. Jest to więc naprawdę przydatne narzędzie, jeśli nie masz pewności, jakie konkretne pola lub dane mogą znajdować się w konkretnym obiekcie WordPress. Za pomocą narzędzia Query Composer można eksplorować i uruchamiać te zapytania w czasie rzeczywistym. Przejdźmy teraz do konfiguracji Fausta, otwierając menu ustawień Fausta. Jak powiedziałem we wstępie, Faust to tak naprawdę dwuczęściowy framework, który składa się z wtyczki WordPress i bazy kodu front-end.

Więc jeśli wrócimy do menu ustawień wtyczki WordPress, zobaczymy, że ustawiliśmy tę opcję dla adresu URL witryny front-end, który będzie wskazywał adres naszej witryny front-end. Tuż poniżej opcji tajnego klucza będziemy kontynuować i klikniemy regeneruj, aby wygenerować unikalny klucz, którego możesz użyć w swoim projekcie demonstracyjnym. Stamtąd wróćmy do bazy kodu JavaScript i uruchommy to polecenie, aby skopiować przykładowy plik zmiennej środowiskowej do pliku, którego możemy użyć w naszej witrynie.

Po uruchomieniu tego polecenia otwórz plik .env.local i dokonamy kilku zmian. Pierwszą rzeczą jest to, że zastąpi następną publiczną opcję adresu URL WordPress lokalizacją Twojej witryny lokalnej. Więc ACF.WPEngine.local. Następnie weźmiemy również wartość tego tajnego klucza i użyjemy go dla naszego tajnego klucza Fausta. Upewnij się, że chcemy to również odkomentować, a następnie ta ostatnia zmienna środowiskowa jest naprawdę przydatna do testowania i lokalnego rozwoju, abyś mógł wygładzić wszelkie problemy z SSL, które możesz mieć podczas łączenia się z lokalnym środowiskiem programistycznym.

Stamtąd będziemy chcieli uruchomić NPM Install, aby zainstalować wszystkie zależności naszego projektu, a kiedy to się skończy, możemy to uruchomić i uruchomić NPM Run Dev, aby rozpocząć nasz projekt. Kompilacja zajmie tylko sekundę, ale kiedy to się stanie, możemy otworzyć localhost:3000 w przeglądarce i powinniśmy zobaczyć naszą witrynę Fausta w akcji.

Gdy to się wyrenderuje, zobaczysz, że Faust już zajmuje się dla nas magią. Jeśli spojrzymy na to menu w prawym górnym rogu, zobaczymy, że już pobiera strony i treści z naszych menu, które zdefiniowaliśmy w naszym zapleczu WordPress, a jeśli wrócimy do naszego administratora WordPress, możemy spojrzeć na jak to połączenie działa nieco bardziej szczegółowo.

Ponieważ wtyczka Faust zna adres URL naszego frontonu, przepisuje wiele linków, takich jak linki podglądu, tak aby po otwarciu ich w przeglądarce otwierały się w adresie URL witryny frontonu, dzięki czemu otrzymujesz prawdziwy podgląd na żywo tego, jak Twoja zawartość będzie wyglądać w interfejsie użytkownika.

Teraz przyjrzyjmy się bliżej strukturze naszego projektu Faust JavaScript. Jeśli jesteś zaznajomiony z pracą w Next.js, prawdopodobnie używałeś katalogu strony do tworzenia komponentów strony, które implementują twoje trasy. Nadal możesz to zrobić w Fauście, ale opiera się on na tej koncepcji, zapewniając ogólną trasę zwaną węzłem WordPress, która umożliwia pobranie dowolnego identyfikatora URI zarządzanego przez WordPress i rozwiązanie go do określonej treści.

Następnie uzyskujemy dodatkowe dane o tym elemencie treści i przekazujemy je przez nasze komponenty, abyśmy mogli przypisać ten pojedynczy fragment treści do konkretnego szablonu w folderze szablonów WP. Jest to bardzo podobne do koncepcji hierarchii szablonów i tradycyjnego motywu WordPress oraz wielu konwencji nazewnictwa. Dopasuj na przykład frontpage.js to strona główna naszej witryny, podczas gdy page.js odpowiada za renderowanie elementów typu zawartość strony. A single.js służy do renderowania pojedynczych postów.

Teraz zacznijmy i sprawmy, by nasz plik frontpage.js był trochę bardziej dynamiczny. OK . Więc na początek otworzymy nasz plik front page.js i damy sobie trochę więcej miejsca do pracy. Więc jeśli spojrzymy na zawartość tego pliku, zobaczymy, że są trzy główne elementy. Jest sam komponent, który renderujemy, właściwość zapytania, która jest dołączana do komponentu i jest uruchamiana za każdym razem, gdy renderujemy komponent, a następnie niektóre zmienne, które możemy przekazać na dole.

Jak widać, istnieją dwa naprawdę główne sposoby korzystania z tego. Albo za pomocą haka use query wewnątrz komponentu, albo może zostać przekazany jako rekwizyty do samego komponentu, co zobaczysz w przykładzie później. Wróćmy więc do repozytorium i zacznijmy od kroku 2.1, aby zaktualizować zapytanie dla naszego pliku frontpage.js. Więc skopiujemy to, a następnie wrócimy do graficznego IDE i pobawimy się tam przez chwilę. Więc to zapytanie, które mamy w naszym schowku, powinno uzyskać pierwsze 10 postów i pobrać kilka fragmentów danych powiązanych z każdym z tych postów.

Jeśli więc klikniemy tam i uruchomimy, zobaczymy, że wszystko działa świetnie. I tak będziemy chcieli iść dalej i dodać to do naszej właściwości zapytania komponentowego. Więc znajdziemy dobre miejsce do zrobienia tego i po prostu wkleimy to tam i trochę przeformatujemy. A więc to, co robi, polega na dodaniu tej indywidualnej części zapytania do samego zapytania. Nadal musimy udostępnić wyniki tego zapytania reszcie naszego komponentu, więc dodamy ten dodatkowy wiersz, który po prostu wyodrębnia ten wynik posta do zmiennej, z którą możemy pracować.

Następnym krokiem do uczynienia strony głównej dynamiczną jest utworzenie komponentu do renderowania tych fragmentów postów. Więc zrobimy to i utworzymy kilka plików w folderze z komponentami, i wspomnę tutaj, że - zamierzam iść dalej i utworzyć plik postexcerpt.js w folderze z fragmentami postów i m naprawdę po prostu powiela strukturę istniejących komponentów, które są częścią tego projektu Faust.js Pierwsze kroki. Tutaj naprawdę możesz robić, co chcesz, a ja po prostu postępuję zgodnie z ramami, które zostały już dla mnie określone w ramach tego Pierwsze kroki.

Więc kiedy już będziemy mieć wszystkie trzy z tych plików, zaczniemy dodawać do nich trochę rzeczy, aby renderować te posty. Tak więc pierwszą rzeczą, którą zrobimy, będzie umieszczenie treści w naszym komponencie fragmentu posta. Po prostu skopiujemy i wkleimy to z naszego repozytorium i zobaczymy, że importujemy ten plik module.css. I mamy funkcję o nazwie post excerpt, która jest naszym komponentem, który smakuje jeden atrybut, którym jest post, a następnie renderujemy sekcję, mając link, który będzie prowadził bezpośrednio do tego URI posta, renderując tytuł. Następnie na dole mamy kafelki kategorii, które również renderujemy, a następnie używamy niebezpiecznie ustawionego w naszym kodzie HTML, aby ustawić treść HTML dla fragmentu posta.

Teraz, gdy wszystko będzie świetne i zapisane, zapiszemy to, ale wejdziemy tutaj i dodamy ten dodatkowy styl z zakresem do naszego komponentu, aby nadać styl tagom span dla naszych kategorii, a potem po prostu wykonaj import eksportujący do pliku index.js, aby przenieść go z domyślnego eksportu do nazwanego eksportu, a my zapiszemy wszystkie te rzeczy. A następnie ostatnim krokiem, aby udostępnić to do użycia w innych rzeczach, jest dodanie jeszcze jednej linii eksportu do pliku index.js w naszym folderze komponentów. A teraz, gdy już to zrobiliśmy, jeśli wrócimy do strony głównej, frontpage.js, powinniśmy być w stanie po prostu dodać dodatkowy import do naszej istniejącej instrukcji importu, aby użyć naszego fragmentu posta.

Teraz będziemy chcieli znaleźć miejsce, w którym to zaimplementujemy, a jeśli zejdziemy na dół i zajrzymy do środka naszego głównego elementu, zobaczymy, że mamy coś tuż pod bohaterem – zrobimy to po prostu skopiuj i wklej część kodu w repozytorium i nadpisz to, co jest w środku, korzystając z naszego fragmentu posta. Zrobimy tylko trochę przeformatowania, aby wygładzić niektóre rzeczy, ale możesz zobaczyć, że to, co robimy, jest wewnątrz tego kontenera, będziemy mapować tablicę postów, które otrzymaliśmy z powrotem jako wynik naszego zapytania, a następnie zwróć komponent fragmentu postu, w którym przekazujemy post i nadaj mu klucz.

A jeśli pójdziemy dalej i zapiszemy to wszystko, wyrenderujemy to w przeglądarce i odświeżymy, powinniśmy zobaczyć, że mamy świetną dynamiczną stronę główną. Tak, każdy z tych tytułów ma klikalny link, podobnie jak poszczególne kafelki kategorii. A jeśli klikniemy, zobaczymy, że dzięki szablonom, które już istnieją w Fauście, wszystkie nasze posty są już renderowane, chociaż brakuje nam niektórych z tych grup zasobów, które stworzyliśmy za pomocą ACF. Więc jeśli przejdziemy do drugiego posta, zobaczymy, że jeden renderuje się świetnie, a także wszystkie gotowe linki do kategorii, które są - po prostu używamy tych identyfikatorów URI kategorii, aby pochylić się nad Faustem w renderowaniu szablonu JS tej kategorii .

Skoro mamy już dynamiczną stronę główną, przejdźmy do renderowania tych pól ACF w naszym szablonie single.js. Śmiało, po prostu wyczyść nasz edytor kodu, a potem będziemy mogli otworzyć plik single.js i zobaczyć, co tam jest. Wiemy, że na tym najwyższym poziomie mamy funkcję komponentu, którą eksportujemy, która w rzeczywistości pobiera rekwizyty, oraz właściwość component.query, która ma dynamiczne zapytanie GraphQL, które odczytuje niektóre z tych zmiennych, które otrzymujemy z zapytania źródłowego.

Ostatecznie ostatecznie będziemy chcieli wyświetlić niektóre z tych różnych zasobów postów na dole treści naszych postów. Wracam więc do repozytorium i przewijam w dół do kroku 3.1, w którym aktualizujemy zapytanie o pojedynczy post i przyjrzymy się temu, ponieważ zaczyna przyciągać zarówno słodkie składanki, jak i grupy pól zasobów żywności, które utworzyliśmy w wcześniejszy krok. Jeśli wezmę to zapytanie i skopiuję je i wkleję do grafiki, pójdę dalej i zakoduję na stałe identyfikator bazy danych dla postu i usunę tylko kilka różnych rzeczy, których nie potrzebujemy, takich jak As Preview i ten inny fragment .

Jeśli pójdę dalej i uruchomię to, zobaczymy, że odzyskam trochę danych, które zawierają naprawdę to, czego oczekiwałbym. Treść, odzyskuję autora i, co ważne, odzyskuję obie te grupy dziedzinowe i ich dane. Więc pójdę dalej i skopiuję to zapytanie i wrócę do single.js. Stamtąd po prostu zastąpię tę część zapytania tym, co mam ze schowka. Możemy po prostu iść naprzód i uratować to. Możesz go ponownie sformatować, jeśli chcesz, ale jest to niezależne od białych znaków, więc myślę, że w większości wygląda to dobrze.

Od tego momentu będziemy chcieli zrobić to samo, co w ostatnim kroku, w którym uczyniliśmy to częścią naszego zapytania. Teraz chcemy się upewnić, że udostępniamy te zmienne w naszym komponencie. Więc dodamy je do tego stwierdzenia strukturyzującego, a dodatkowo, ponieważ mamy kilka różnych kategorii dla naszych postów, chcemy stworzyć pewne elementy logiczne, które pomogą nam określić, czy powinniśmy wyświetlać zasoby żywności lub słodką składankę. Ponieważ jak tam widać, bez względu na to, co otrzymujemy z powrotem, a jeśli nie ma nic do znalezienia dla pól słodkich mixtape'ów, te wracają jako zerowe. Więc będę chciał przeprowadzić tam pewne sprawdzanie warunkowe, więc dodam te dwie linie kodu do naszego pliku.

A to zasadniczo robi to, że tworzy nam pewne zmienne boolowskie, których możemy użyć poniżej do warunkowego renderowania szablonów. W tym przypadku patrzymy na węzły dla każdej kategorii, a następnie zasadniczo je filtrujemy, aby określić, czy zawierają jedzenie lub muzykę, a następnie sprawdzamy długość. Prawdopodobnie istnieje wiele sposobów na zaimplementowanie tego typu zmiennej boolowskiej, więc możesz to zmienić, jeśli masz bardziej przejrzysty sposób, ale myślę, że dla naszych celów tutaj będzie to działać dobrze.

Teraz następnym krokiem jest to, że będziemy chcieli, podobnie jak w poprzednim kroku, utworzyć dodatkowe komponenty. Więc pójdę dalej i wewnątrz mojego pliku składników, utwórz komponent zasobów żywności. Stworzę więc w nim folder, a następnie plik food resources.js, a wraz z nim plik index.js oraz plik modułów CSS. A teraz plik modułów SCSS jest naprawdę pomocny, ponieważ pozwala nam zawęzić zakres naszych stylów do tego konkretnego komponentu. Wydaje się więc, że jest to funky składnia, ale ostatecznie jest to naprawdę czysty wynik, ponieważ nie musimy pisać wielu klas i innych rzeczy.

Zacznę więc kopiować i wklejać kod komponentu z repozytorium bezpośrednio do tych plików. Widzimy, że mamy funkcję zasobów żywności, która pobiera dwa rekwizyty, nazwę przepisu i link do przepisu, a następnie renderujemy te poniżej naszego ładnego wieku za pomocą emoji burrito. Skopiujemy również i wkleimy niektóre style plików SCC do tego konkretnego folderu, a następnie upewnimy się, że wyeksportujemy je z folderów komponentów index.js. I podobnie jak w poprzednim przykładzie, będziemy chcieli wyeksportować to również do pliku index.js naszego folderu komponentów, abyśmy mogli mieć naprawdę fajną grupę do zaimportowania, tak jak widzieliście bezpośrednio z tych komponentów folder w innym miejscu w niektórych z tych różnych plików.

Kiedy już to dodamy, zwrócimy uwagę na komponent zasobów muzycznych i zrobimy to samo. Zamierzamy iść dalej i stworzyć tę samą strukturę plików. Tak więc folder zasobów muzycznych i znajdujący się w nim plik musicresources.js. Następnie utworzymy plik index.js, aby go wyeksportować, a następnie także nasz plik musicresources.module.scss dla tych stylów zakresu.

Więc kiedy już będziemy mieć te wszystkie rzeczy, zrobimy to samo, co zrobiliśmy z naszymi zasobami żywności i po prostu skopiujemy i wkleimy część tego kodu z repozytorium. Widzimy, że ten element wygląda niemal identycznie. Mamy zasoby muzyczne. To faktycznie ma trzy rekwizyty zamiast dwóch, ale mieliśmy trzy pola w tej grupie pól, ale konwencja styles.component jest taka sama. Po prostu robimy nieco inne renderowanie, ponieważ mamy inną zawartość.

Stamtąd dodamy również nasz kod SCSS i upewnimy się, że wyeksportujemy go z folderów komponentów index.js, a następnie zaimportujemy go do naszego folderu tutaj i myślę, że faktycznie to zrobiłem – naprawdę szybko zmieńmy nazwę tego i po prostu upewnij się, że wszystkie nasze nazewnictwa wyglądają dobrze, tak aby nasz plik index.js i komponenty znajdowały nasze zasoby muzyczne i wszystkie te rzeczy były świetne. Więc teraz pójdziemy dalej i po prostu zamkniemy wszystkie te zbędne karty, ponieważ jesteśmy gotowi do faktycznego zaimplementowania tych komponentów w naszym pliku single.js.

Aby to zrobić, po prostu dodamy te dwa komponenty do naszej istniejącej instrukcji importu, która już je automatycznie rozpoznaje, i znajdziemy odpowiednie miejsce do tego. I tak oto mamy ten komponent opakowujący zawartość tutaj. Tak więc w tej chwili przekazujemy treść, ale to faktycznie będzie również opcjonalnie akceptować dzieci. Możemy więc przekazać zawartość, ale także przekazać niektóre komponenty potomne bezpośrednio do tego opakowania treści, aby było wyświetlane w tej ładnej poziomej przestrzeni, którą już mamy i wszystko jest wyrównane.

Tak właśnie zrobimy, a potem skopiujemy i wkleimy tam ten kod, ponownie go sformatujemy i porozmawiamy o tym, co dzieje się w tym konkretnym przykładzie. Tak więc bezpośrednio w tym komponencie opakowania zawartości używamy zmiennych boolowskich is food i is music do warunkowego renderowania odpowiednich komponentów zasobów. Więc jeśli jedzenie jest prawdziwe, a ten post należy do kategorii jedzenia, zrenderujemy to. A jeśli to muzyka, zrobimy to samo. I tam możesz zobaczyć, że przekazujemy wszystkie różne rekwizyty, które są potrzebne do renderowania tego.

A jeśli wrócimy i odświeżymy jedną z naszych stron z szablonami single.js, zobaczymy, że nasze zasoby żywności renderują się dokładnie tak, jak byśmy tego oczekiwali, a ten link działałby odpowiednio, gdybyśmy wrócili do WP Admin lub do naszego domu strona. A jeśli znajdziemy taką i kategorię jedzenia lub muzyki, możemy otworzyć Kinfolk Synth DIY i zobaczyć, jak wygląda nasz komponent zasobów muzycznych, i wszystko wygląda świetnie. A jeśli znajdziemy taki, który faktycznie należy do obu kategorii, możemy zobaczyć, że w rzeczywistości renderuje oba te komponenty dokładnie tak, jak byśmy tego oczekiwali.

OK. Teraz, gdy mamy już naszą witrynę taką, jak chcemy, przejdźmy do omówienia sposobu wdrożenia tej witryny. Teraz mam utworzoną dla nas sekcję repozytorium GitHub, a właściwie stworzyłem całkowicie oddzielną wdrożoną gałąź w gałęzi końcowej. Więc uruchomienie sprawdzania Git zakończone, damy ci to. Możesz także po prostu wdrożyć tę gałąź bezpośrednio w Atlasie, który jest bezgłowym rozwiązaniem hostingowym WordPress firmy WP Engine.

Daje to zarówno instalację WordPressa, jak i kontener Node.js, a także możesz założyć bezpłatne konto w piaskownicy, klikając ten przycisk na stronie docelowej Atlasu. Zabierze Cię na naprawdę szybkie forum, a jak widzisz, cena wynosi zero. Być może nadal będziesz musiał włożyć kartę kredytową, której używamy tylko do celów zapobiegania oszustwom, ale możesz mieć darmowe konto, aby przetestować to wszystko, aby uczyć się bez głowy zgodnie z pragnieniem twojego serca. Więc pójdę dalej i otworzę pulpit nawigacyjny WP Engine, aby rozpocząć wdrażanie tej witryny w Atlasie.

Pierwszą rzeczą, którą zamierzam zrobić, jest otwarcie mojej listy witryn i otworzę moją produkcyjną witrynę WordPress. Tak więc ta bezgłowa witryna ACF, którą widzisz tutaj, gdzie zamierzam otworzyć administratora WP w nowym oknie, jest witryną nadrzędną dla pliku zip, którego wszyscy używacie lokalnie. Zrobiłem więc plik ZIP za pomocą eksportu WP i właśnie tego zamierzam użyć do mojego wdrożenia produkcyjnego.

Stamtąd przejdę do karty Atlas, a następnie kliknę opcję Utwórz aplikację. I została mi przedstawiona taka opcja. Zamierzam wybrać Pull From Repo, a następnie kliknąć Kontynuuj. A jeśli nie uwierzytelniłem się w GitHub, to jest miejsce, w którym byś to zrobił, ale ponieważ już to zrobiłem, mogę po prostu wybrać moje repozytorium. Więc pójdziemy dalej i wybierzemy repozytorium, którego używamy w tym projekcie, kliknij Kontynuuj, a następnie zamierzam wdrożyć moją aplikację w US Central.

Stąd pozwala mi wybrać gałąź i tak jak powiedziałem, użyję opcji Zakończone. Istnieją również opcje, jeśli używasz monorepo, którego nie używamy, i zamierzam zostawić zaznaczoną opcję Mam instalację WordPressa i wyszukać moją bezgłową witrynę ACF. Teraz, tutaj, będę chciał właściwie zamiast używać pliku .env, będę chciał skopiować dwie zmienne środowiskowe z mojego projektu plików.

Więc pierwszy to następny publiczny adres URL WordPress. To są te same zmienne środowiskowe, które ustawiliśmy w naszym lokalnym projekcie, i skopiuję tam link do mojej produkcyjnej instalacji WordPressa. Następnie dodam kolejną zmienną środowiskową, a ta będzie dotyczyć naszego tajnego klucza Fausta. Więc pójdę dalej i skopiuję to z menu ustawień Fausta, wrzucę to tam i ustawię klucz do tajnego klucza Fausta.

Gdy to zrobię, mogę śmiało kliknąć Utwórz aplikację, a Atlas rozpocznie proces tworzenia i wdrażania mojej aplikacji. Podczas procesu kompilacji Atlas uruchomi instalację NPM i polecenie kompilacji NPM dla dowolnego używanego frameworka. A kiedy cały ten kod zostanie zbudowany, wdroży ten kontener Node w naszej sieci. Kiedy to wszystko kręci się tylko przez sekundę, powinniśmy otrzymać komunikat o powodzeniu, a następnie możemy kliknąć podany adres URL i faktycznie zobaczyć naszą witrynę na żywo.

Otrzymamy więc wiadomość o powodzeniu, a następnie możemy otworzyć ten adres URL w innej karcie. I tam widzimy, że nasza witryna wygląda dokładnie tak samo, jak lokalnie, i pobiera wszystkie poprawne dane, wszystkie poprawne obrazy, a nawet zasysa całą naszą zawartość ACF. Wiele naszych postów wygląda naprawdę świetnie, a nasze bardzo wydajne w Atlasie – właściwie używam tutaj naprawdę dużych obrazów, więc jeśli widzisz trochę powolności, to z pewnością wynika to z moich wyborów.

Platforma Atlas jest pełna funkcji, które docenią współcześni programiści JavaScript. Niestety, w tej prezentacji nie ma wystarczająco dużo czasu, aby szczegółowo je wszystkie przejrzeć.

Ale Atlas wykonuje naprawdę dobrą robotę, łącząc ważne szczegóły zarówno z frontendu, jak i backendu Twojego bezgłowego ekosystemu w jednym wygodnym pulpicie nawigacyjnym, gdzie możesz przeglądać poszczególne dzienniki kompilacji i dane wyjściowe kompilacji, sprawdzać wdrożenia, zmienne środowiskowe, których użyłeś do konkretnej kompilacji, a także mieć dostęp do dodatkowych ustawień lub funkcji, które można włączyć, takich jak środowiska podglądu, w których można utworzyć dodatkowe środowisko dla każdego żądania ściągnięcia utworzonego na podstawie repozytorium GitHub lub utworzyć elementy webhoo środowiska w celu odbudowania określonych części Twojej aplikacji lub CDN podczas wprowadzania zmian w WordPress.

Wszystkie te rzeczy stają się możliwe dzięki platformie Atlas i naprawdę obniżają barierę dla rozpoczęcia tworzenia bezgłowego WordPressa.

Wow. Gratulacje, jak powiedziałem, było dużo do omówienia w 25 minut. Nie krępuj się ćwiczyć po prezentacji i skontaktuj się ze mną, jeśli masz jakiekolwiek pytania dotyczące rozpoczęcia korzystania z zasobów demonstracyjnych. Jeśli chcesz dowiedzieć się więcej o headless, ale potrzebujesz miejsca, aby to zrobić, zarejestruj bezpłatne konto Atlas Sandbox. Oprócz wdrażania własnych repozytoriów kodu, tak jak zrobiliśmy to dzisiaj, możesz także rozpocząć pracę z niektórymi z naszych gotowych schematów, które są stosami projektów jednym kliknięciem, które pomogą Ci zobaczyć, jak wygląda ukończony projekt bez głowy.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.