DE{CODE}: Nowe funkcje w Atlasie

Aktualizacje bezgłowych narzędzi programistycznych Atlas firmy WP Engine pomogą Ci sprostać najtrudniejszym wymaganiom klientów. Korzystając z bezpłatnego konta Sandbox, ta demonstracja pokaże Ci, jak dodać te nowe funkcje do witryny bez głowy. Obejrzyj poniższy film, aby rozpocząć tworzenie najbardziej wydajnej i bezpiecznej witryny internetowej!

Slajdy sesji

Transkrypcja pełnego tekstu

KELLEN MACE : Cześć. Jestem Kellen z zespołu ds. relacji z programistami w WP Engine. Podczas tego wykładu omówimy niektóre nowe, ekscytujące funkcje ekosystemu Atlas. Zobaczymy, jak w portalu użytkownika WP Engine możemy stworzyć nową aplikację Atlas i wybrać ten plan portfolio. W ten sposób możemy w ciągu kilku minut uruchomić w Internecie pełnowymiarową, bezgłową witrynę WordPress.

Następnie zobaczymy, jak możemy sklonować ten projekt na naszą lokalną maszynę i przygotować się do lokalnego rozwoju, abyśmy mogli dostosować naszą nową witrynę. Następnie zwrócimy uwagę na Atlas Content Modeler i zobaczymy, jak możemy go użyć do stworzenia nowego niestandardowego modelu zawartości o nazwie Zdjęcia.

A ten model zawartości w Zdjęciach będzie miał kilka własnych niestandardowych pól, w tym pole powtarzalne, które jest nową funkcją, która niedawno pojawiła się w Atlas Content Modeler. W końcu zobaczymy, jak możemy wykonać niestandardowy program w naszej front-endowej aplikacji JavaScript i zapytać o te niestandardowe dane Zdjęć, a następnie wyrenderować je na stronie.

Po utworzeniu konta WP Engine i zalogowaniu się na stronie Atlas portalu użytkownika mogę śmiało kliknąć przycisk, aby utworzyć nową aplikację. Od tego momentu możemy albo zacząć od planu, który jest wstępnie zbudowaną witryną, albo wyciągnąć z istniejącego repozytorium. Zacznijmy od planu. Teraz możemy wybrać, z którego schematu lubimy korzystać. Wybieramy więc schemat portfela, a następnie klikamy Kontynuuj.

Następnym krokiem jest połączenie tej aplikacji z GitHub. Więc klikniemy przycisk, aby to zrobić, a następnie zalogujemy się do GitHub. Następnie zobaczymy ten ekran, wskazujący, że nasza aplikacja została autoryzowana. Następnie musimy faktycznie sklonować to repozytorium. Klikniemy Clone Blueprint, a następnie nadamy nazwę naszemu nowemu repozytorium. I kliknij przycisk, aby utworzyć nowe repozytorium przy użyciu tego szablonu planu.

Więc tutaj możesz zobaczyć, że to nowe repozytorium aplikacji zostało utworzone na moim koncie GitHub. Teraz musimy połączyć to repozytorium z naszą aplikacją Atlas. Wracając do portalu użytkownika, przewiniemy w dół do sekcji Wybrane repozytorium. Jeśli zezwoliłeś na dostęp do wszystkich swoich repozytoriów, możesz zobaczyć to na liście. Jeśli nie, możesz kliknąć Zarządzaj repozytoriami.

Na tej stronie będziesz mógł wybrać repozytoria, do których Atlas powinien mieć dostęp. Więc wybierzemy nasze repozytorium na liście. Kliknij Zapisz, a teraz, gdy wrócimy do panelu użytkownika, na liście pojawi się wyskakujące repozytorium, które dodaliśmy. Więc śmiało i wybierz to. W przypadku regionu dla naszej aplikacji pozostaniemy przy US Central. Na koniec kliknij przycisk, aby utworzyć tę aplikację Atlas.

Tutaj zobaczymy powiadomienie, że nasza aplikacja jest w trakcie tworzenia. Więc damy temu tylko chwilkę. Teraz, gdy budowa naszej aplikacji Atlas została zakończona, możemy kliknąć ten link URL Atlasu, aby zobaczyć naszą nową aplikację Atlas działającą w Internecie. Tak więc na stronie głównej zobaczymy naszą listę najnowszych postów. Zobaczymy nasze referencje.

Możemy przejść do strony portfolio i sprawdzić listę naszych projektów portfolio tutaj. Przejdę do indywidualnego projektu. Następnie zajrzymy na bloga. Udaj się więc na stronę bloga i zobacz naszą siatkę postów tutaj. Możemy też kliknąć, aby zobaczyć stronę z indywidualnym postem na blogu. A potem gotowe, ustaw, kliknij, aby powrócić do naszej strony głównej.

Możesz więc zauważyć, że te przejścia stron są naprawdę szybkie. Otrzymujemy natychmiastowe przejście z jednej strony na drugą. I to jest jedna z zalet korzystania z bezgłowej architektury WordPress. Następnie przyjrzyjmy się witrynie WordPress, która jest za kulisami napędzającymi to doświadczenie. Wróćmy więc do portalu użytkownika WP Engine i stąd możemy kliknąć ten link do połączonego środowiska WordPress.

Tutaj możemy kliknąć WP Admin, aby zostać wysłanym do administratora WordPress dla naszej witryny. Oto nasze zaplecze, które napędza to doświadczenie. Przejdźmy do postów i widzimy tutaj, że zostało ono wstępnie wypełnione wieloma fikcyjnymi postami na blogu. To stąd pochodzą wszystkie dane dla naszej nowej witryny. Przyjrzyjmy się także wtyczkom. Tutaj możesz zobaczyć kilka wtyczek, które zostały zainstalowane i aktywowane, aby umożliwić bezgłowy rozwój WordPress.

Zwróćmy szczególną uwagę na Atlas Content Modeler. Więc na pasku bocznym klikamy Content Modeler. Możesz zobaczyć tutaj, że zostały stworzone dla nas dwie niestandardowe treści, projekty i referencje. I możemy je zobaczyć tutaj na pasku bocznym. Mamy więc projekty, listę tych, a także referencje i listę tych. Stąd pochodzą dane dotyczące projektów i referencji, które widzieliśmy w witrynie front-end.

A więc zrobiliśmy duży postęp. Widzieliśmy, jak z poziomu portalu użytkownika możemy stworzyć nową aplikację Atlas. A kiedy to robimy, tworzy nie tylko front-endową aplikację JavaScript do obsługi stron Twojej witryny, ale także tworzy zaplecze WordPress, które zasila to doświadczenie i oszczędza kłopotów z łączeniem tych dwóch elementów. Łączy te dwa elementy, dzięki czemu aplikacja front-end może pobierać dane z zaplecza WordPress.

Stamtąd mogliśmy rzucić okiem na aplikację front-end i zobaczyć, jak działa na żywo online, a także poszperać w panelu administracyjnym WordPress i zobaczyć niektóre niestandardowe typy danych lub modele danych, a także niektóre fikcyjne dane, które są stworzony dla nas. Tak więc w bardzo krótkim czasie możesz zobaczyć, że mamy teraz działającą w pełni działającą bezgłową aplikację WordPress.

Co jeśli jednak w tym momencie chcemy dokonać zmian? A co, jeśli tworzysz rzeczywistą witrynę z portfolio i myślisz sobie, że to naprawdę fajne. To świetny początek. Ale teraz chcę wprowadzić kilka zmian. Chciałbym wprowadzić pewne zmiany w kodzie, aby być może zamienić niektóre kolory lub dodać dodatkowe strony do mojej witryny. Jak mogę to zrobić? Jak rozpocząć rozwój lokalny? Dowiedzmy się dalej.

Na początek skopiujemy link do naszego repozytorium GitHub, a następnie uruchomimy git clone w wierszu poleceń, aby sklonować nasz projekt. Stąd możemy CD do tego katalogu projektu, a następnie uruchomić instalację NPM, aby zainstalować zależności naszego projektu. Gdy to zrobisz, przejdziemy dalej i otworzymy projekt w edytorze kodu.

Następnie musimy skonfigurować kilka zmiennych środowiskowych. Zobaczysz więc, że utworzono dla nas przykładowy plik. A teraz musimy tylko upewnić się, że ma to właściwe wartości. Więc z powrotem w portalu użytkownika, klikniemy Zarządzaj zmiennymi, a następnie przyjrzymy się zmiennym środowiskowym, których używa aplikacja produkcyjna. Śmiało, skopiuj i wklej oba do naszej aplikacji, aby nasza lokalna aplikacja używała tych samych zmiennych środowiskowych, co produkcja.

Ostatnim krokiem tutaj jest zmiana nazwy tego pliku, usunięcie .sample z końca, aby zaczęło obowiązywać. Teraz aplikacja front-end, z którą tutaj pracujemy, jest zbudowana na Faust.js. A Faust, aby wykonać magię pobierania danych, musi być w stanie uruchomić tak zwane zapytanie introspekcyjne GraphQL.

Więc to w zasadzie Faust pyta zaplecza WordPressa, hej, jakie dane masz dostępne w schemacie GraphQL, abym mógł zapytać? Aby to zadziałało, musimy włączyć introspekcję. Wrócimy tutaj do administratora WordPress i przejdziemy do GraphQL, a następnie ustawień na pasku bocznym.

Na stronie Ustawienia przewiniemy w dół do miejsca, w którym zobaczymy Włącz publiczną introspekcję i kliknij to pole. Skoro już tu jesteśmy, polecam również włączenie trybu debugowania graficznego. To da ci bardziej opisowe komunikaty debugowania. Gdy to zrobimy, możemy przejść dalej i kliknąć przycisk, aby zapisać nasze zmiany. A teraz w końcu możemy otworzyć terminal i uruchomić generowanie run NPM. A potem, kiedy to się skończy, w końcu NPM run dev, aby nasza aplikacja działała lokalnie.

Teraz kliknę ten link localhost 3000 i zobaczymy, że nasza witryna rzeczywiście działa tutaj lokalnie. Powiedzieliśmy więc, że chcemy dodać do tego trochę treści, aby dostosować naszą witrynę. A teraz, kiedy jesteśmy przygotowani na rozwój lokalny, możemy dokładnie to zrobić. Powiedzmy, że w przypadku tego projektu chcemy mieć nie tylko posty na blogu, ale także kilka niestandardowych treści, które mamy, takich jak projekty portfolio, które widzieliśmy, a także te referencje.

Powiedzmy, że poza tą niestandardową zawartością chcemy dodać jeszcze więcej. Poza kimś, kto tworzy posty na blogu i tworzy projekty portfolio, załóżmy, że klient, dla którego jest przeznaczona witryna, jest także fotografem i chce prezentować zrobione przez siebie zdjęcia. Jak moglibyśmy dodać niestandardowy typ zawartości lub niestandardowy model zawartości do naszej witryny, aby obsługiwać dane tego zdjęcia, zapytać o nie, a następnie wyświetlić zdjęcia w naszej aplikacji front-endowej? Zróbmy to dalej.

Wrócę więc do administratora WordPress tutaj i przejdziemy do Content Modeler. Więc już raz byliśmy na ekranie. Rzuciliśmy okiem na projekty i referencje. Widzimy, że są to niestandardowe modele treści, które zostały stworzone dla nas w ramach tego planu. Mogę kliknąć każdy z nich i zobaczyć, że każdy z tych modeli ma swój własny zestaw indywidualnych pól.

Na przykład projekty miałyby te indywidualne pola. Zarówno projekty, jak i referencje znajdują odzwierciedlenie tutaj, na pasku bocznym. A następnie pola dla każdego z nich. Jeśli kliknę projekt, a następnie kliknę istniejący lub przejdę do opcji Dodaj nowy, zobaczymy tutaj odzwierciedlenie wszystkich tych pól. Dzięki temu nasi twórcy treści zobaczą wszystkie pola potrzebne do wprowadzenia tych danych. W porządku.

Jednak dla naszej niestandardowej zawartości potrzebujemy nowego modelu. Stworzę więc nowy model, klikając ten przycisk tutaj. Więc nazwę to zdjęcie. W przypadku nazwy w liczbie mnogiej wstawimy po prostu literę S na końcu i nazwiemy ją zdjęciami. Ten automatycznie generowany identyfikator API – tutaj, ten identyfikator – nie mam nic przeciwko. Zdjęcie wydaje mi się dobre. Aby uzyskać widoczność interfejsu API, ten chcemy upewnić się, że klikniemy jako publiczny, ponieważ chcemy mieć możliwość zapytania o te dane za pośrednictwem GraphQL. W przypadku naszej ikony modelu może coś w rodzaju aparatu byłoby odpowiednie do zdjęć. A teraz kliknę Utwórz.

Tak po prostu powstał nasz model zawartości zdjęć. W tym momencie jest napisane, aby wybrać swoje pierwsze pole dla modelu treści. Od tego nagrania są to typy pól obsługiwane przez Atlas Content Modeler. W przypadku zdjęć, które chcemy zamieścić na tej stronie, użyjmy kilku z nich.

Załóżmy, że każdemu z naszych zdjęć nadasz tytuł. Powiem więc Tytuł, a następnie nazwijmy go Tytułem zdjęcia jako identyfikatorem API. I tak to będzie dostępne w schemacie GraphQL. Po to to jest. I powiemy, że chcemy użyć tego jako tytułu wpisu. A tekst jednowierszowy jest w porządku. Więc śmiało i kliknij Utwórz.

W przypadku naszego następnego pola powiedzmy, że chcemy uchwycić sam obraz do zdjęcia. Więc stawiam na plus. I tutaj utworzymy nowe pole. Nazwiemy to jednym obrazem. A dla typu faktycznie będziemy musieli wybrać Media, ponieważ będzie to zdjęcie. Nazwę go więc obrazem. A potem tutaj, pójdę dalej i ustawię to jako polecany obraz dla każdego postu. Kliknę to i sprawimy, że będzie to również wymagane. Więc zawsze wiemy, że tam będzie. A następnie kliknij Utwórz.

Proszę bardzo. Jest nasze drugie pole. Dla trzeciego, miejmy opis. Więc stawiam na plus. W tym przypadku będzie to pole tekstu sformatowanego. Więc powiemy opis i to wystarczy dla tego pola. A potem naszym ostatnim, którego chcemy, jest temat. Użyjemy więc tego pola, aby uchwycić to, co jest pokazane na zdjęciu. Więc jeśli jest to zdjęcie pasma górskiego o zachodzie słońca, jak na przykład jedno z naszych zdjęć, niektóre obiekty na zdjęciu mogą być górami, gwiazdami, niebem i tym podobnymi. Tylko lista rzeczy, które są obecne na zdjęciu.

Istnieją różne sposoby przechowywania tych danych. Możesz na przykład utworzyć niestandardową taksonomię, a następnie przypisać terminy do każdej z tych rzeczy. Więc każde z tych zdjęć może mieć jeden lub więcej terminów. To byłby jeden ze sposobów na zrobienie tego. Powiedzmy jednak, że dla naszych celów nie jesteśmy zainteresowani możliwością grupowania zdjęć na podstawie czegoś takiego jak tag lub taksonomia.

Zamiast tego ta lista służy tylko do wyświetlania w witrynie. Problem polega na tym, że jeśli trafimy tutaj na plus, zrobimy z tego pole tekstowe, no cóż, wtedy otrzymamy tylko jedno z nich, prawda? A jeśli jest ich więcej? Nie wiemy z góry, ile takich tematów może mieć dane zdjęcie, prawda? I tutaj bardzo przydatna jest funkcja powtarzalnych pól ACM. Zobaczmy więc, jak to wygląda.

Uczynię to pole tekstowe tutaj i nazwiemy je tematami. A następnie uczyń to pole powtarzalnym. Więc to jest kluczowe. Pójdziemy dalej i klikniemy to. Zachowamy to jako jednowierszowe pole tekstowe i klikniemy Utwórz. Tak po prostu powstał nasz model zawartości zdjęć. I możemy to zobaczyć na pasku bocznym.

Więc jeśli kliknę tutaj na Zdjęcia, zobaczymy, że mam jeden atrapę, którą stworzyłem tutaj z wyprzedzeniem. Ale jeśli utworzymy Dodaj nowy, zobaczysz, że to odzwierciedla — pola tutaj odzwierciedlają to, co dodaliśmy w modelu treści. Otrzymujemy więc tytuł. Otrzymujemy możliwość załączenia obrazu. Mamy tu pole tekstu sformatowanego do opisu zdjęcia, a tutaj pole powtarzalne, aby dodać jeden lub więcej tematów.

Zobaczmy więc, co możemy tutaj zrobić. Kliknę Dodaj wyróżniony obraz. I wybiorę jeden z mojej maszyny. Zobaczmy. A kiedy zakończy się przesyłanie, nadamy mu tekst alternatywny. Powiemy, że taki biały kwiatek i gotowe. Mamy więc nasz wizerunek. Wróćmy jednak teraz i nadajmy mu tytuł. Powiemy, że biały kwiat z bokeh. Właśnie tak. Dla opisu powiemy, że oto świetne ujęcie ładnych białych kwiatów. Właśnie tak.

A teraz, jeśli chodzi o naszych poddanych, możemy zadać sobie pytanie, co jest obecne na zdjęciu? I może nam się uda – kwiat mógłby być jeden. Kliknij Dodaj element. I ten efekt bokeh z rozmytym tłem też tam jest. A pień lub gałąź drzewa, jak sądzę, byłaby w ujęciu, jako kolejny przykład. Więc dodamy kilka z nich tutaj. A jeśli uważamy, że uchwyciliśmy wszystko, możesz śmiało kliknąć Opublikuj. Więc jedziemy.

A potem z powrotem na zdjęciach, wcześniej stworzyłem to. Góry są fajne. Tak powinno być ustawione. Więc dostajesz zdjęcie pasma górskiego. A oto świetne ujęcie pasma górskiego z górą, gwiazdami i cieniami. Kilka przedmiotów, które ma. Dałoby nam to przynajmniej kilka postów do pracy w naszej aplikacji front-endowej.

W tym momencie stworzyliśmy nasz model treści w zapleczu WordPress do przechowywania danych potrzebnych do tych zdjęć, a także stworzyliśmy dwa nowe posty ze zdjęciami, których możemy użyć do próby wykorzystania w naszej aplikacji front-end. A potem możesz się zastanawiać, w jaki sposób wyciągniemy te dane z WordPressa, abyśmy mogli użyć ich w naszej aplikacji front-endowej?

Atlas Content Modeler przedstawia bardzo fajną funkcję, która bardzo to ułatwia. Wrócę więc tutaj do Content Modeler, znajdę nasz model zdjęć i kliknę tutaj małą ikonę kropki w kształcie wielokropka. I przejdę do Otwórz w grafice. Więc jak tylko to kliknę, utworzy dla mnie zapytanie, które będzie zawierało ten model treści, który stworzyliśmy, czyli zdjęcia.

I pobiera pierwszych 10 z nich, a następnie dołącza poniższy fragment GraphQL, który zawiera wszystkie utworzone przez nas pola, w tym niestandardowe. Więc jeśli zauważysz, dodaliśmy tytuł zdjęcia, mieliśmy nasze zdjęcie, mieliśmy opis, a potem tematy. Jest to więc bardzo przydatne, aby zobaczyć, jak te dane wyglądają w schemacie GraphQL. Śmiało i naciśnij ten przycisk, aby wykonać to zapytanie.

I możesz zobaczyć, co otrzymałaby nasza front-endowa aplikacja JavaScript, gdyby wykonała dokładnie to samo zapytanie GraphQL. Przydałyby się zdjęcia. A wewnątrz tego byłby obiekt zwany tablicą, zwany węzłami. A wewnątrz tej tablicy byłyby obiekty, które wyglądają tak. Każde z tych zdjęć miałoby tytuł, obraz, a dalej opis i tematy.

Więc to jest dokładnie to, czego potrzebujemy. Więc użyjemy teraz kilku z tych pól. Więc jesteśmy gotowi do pracy, jeśli chodzi o nasze zaplecze WordPress i możliwość przechowywania, a także udostępniania tych danych zdjęć. Zobaczmy teraz, jak możemy to wykorzystać w naszej front-endowej aplikacji JavaScript.

Więc wrócimy tam. I myślę, że dobrym punktem wyjścia do tego byłoby spojrzenie na stronę Portfolio, która jest listą projektów, prawda? Ponieważ jest to lista niestandardowych postów z modelami treści, a zdjęcia też będą, te dwie strony mają ze sobą wiele wspólnego. Więc możemy użyć tego jako swego rodzaju punktu wyjścia.

Więc kliknę Portfolio tutaj, żeby sobie przypomnieć, jak to wygląda. I tak oto otrzymujemy tę listę projektów portfelowych. Więc złammy teraz kod i trochę ubrudzimy sobie ręce. Wyśledzimy tę stronę, która jest tym projektem ukośnym, i zobaczymy, jak to jest zbudowane.

Więc wewnątrz Source, przejdę do Pages. A potem znajdę Project. Tu jest. I otwórz znajdujący się w nim plik index.js. Przewiń trochę w dół, a zobaczymy, że używany jest ten hak paginacji węzłów. A to jest hak React, który pochodzi z tej lokalizacji tutaj, wewnątrz folderu Hooks. A wewnątrz tego wywołujemy query.projects.

A query.projects pozwoli nam uzyskać dostęp do danych o niestandardowym typie postu naszych projektów, czyli modelu treści naszego projektu, który stworzyliśmy. Zamierzamy więc wywołać query.projects, a następnie przekazać niektóre pola, które chcemy przetworzyć z wyprzedzeniem, tak aby były natychmiast po załadowaniu strony. Więc to jest to, czym jest ta tablica tutaj. Więc te pola są już przy pierwszym ładowaniu strony.

A kiedy już jesteśmy gotowi do renderowania zawartości tej strony, robimy to. Mamy komponent SEO, nagłówek, a następnie stopkę na dole. Następnie główna sekcja strony znajduje się wewnątrz tego tagu głównego, gdzie mamy nagłówek, który jest wciąganą niebieską sekcją. A następnie opakowanie div z listą naszych projektów w środku. A potem także ten komponent Załaduj więcej, co skutkuje tym przyciskiem Załaduj więcej na dole, który mogę kliknąć. A potem to pobiera więcej projektów i umieszcza je w interfejsie użytkownika.

Tak jest zbudowana ta strona. I jak powiedziałem, lubię używać tego jako punktu wyjścia dla nas. Więc skopiujmy cały ten plik i naśladujemy tutaj jego strukturę. Tak więc w Pages utworzymy Photo. Następnie w tym folderze utworzymy plik index.js. W porządku. W tym nowym pliku wkleję zawartość. Ale zmienimy niektóre rzeczy, ponieważ nie interesują nas w tym celu dane projektów, chcemy dane naszych zdjęć. Zobaczmy więc, jak możemy to zrobić.

Tak więc nazwa tej stałej odnosi się do projektów. Więc przejdźmy dalej i zmieńmy to jako pierwszy krok. Można powiedzieć, że fotowęzły wyprzedzają pola. Więc to będzie dobre. Będziemy musieli podać własną listę pól. Może na razie zostawmy identyfikator bazy danych, a za chwilę dodamy trochę.

Dalej, zobaczmy. Wstępne zdjęcie. O, nazwa się przekręciła. No to jedziemy. Więc teraz znów do siebie pasują. W porządku. Pamiętaj zatem, że zamiast query.projects chcemy query.photos dla naszego niestandardowego typu zawartości. Więc śmiało i zaktualizuj to, aby były to zdjęcia, właśnie tam. Przewiń trochę w dół.

Więc ten komponent projektów nie będzie już miał zastosowania, ponieważ go nie używamy. Więc usunę to w tym momencie i co powiesz na to? Po prostu będziemy mieli – po prostu H1. Mówi Cześć, tylko po to, aby coś renderowało się na stronie tutaj. A może skomentujemy też ładowanie więcej.

Więc zamierzam uruchomić wyszukiwanie projektu, aby zobaczyć, czy jest coś, o czym zapomniałem. Tak, tylko kilka komentarzy do kodu, a następnie ten komponent tutaj, który jest wciągany, a którego już nie używamy. Więc usunę ten komponent. I myślę, że powinniśmy być dobrzy. Więc nie używamy kilku z tych rzeczy w tym momencie, ale to jest OK. chwilowo będziemy.

Więc dam temu Zapisz i zobaczymy, czy uda nam się uzyskać ten rendering. Więc teraz w naszej aplikacji front-end powinienem móc przejść do Photo, tak jak to. I oto idziemy. Oto nasza nowa strona. Mówi cześć, a większość z nich wygląda tak samo, jak strona z naszymi projektami w portfolio, na przykład nagłówek u góry i stopka.

Zauważyłem, że nadal jest napisane portfolio i prawdopodobnie chcemy to wymienić. Więc możemy to zrobić bardzo krótko. Więc oto portfolio. Powiemy zdjęcia. I wtedy też w tym miejscu zamienimy to na zdjęcia. Zapisz to. No to jedziemy. Więc to zaktualizowało nagłówek.

Teraz przyjrzyjmy się, w jaki sposób możemy faktycznie wykorzystać te dane, pobrać dane naszych zdjęć i wyświetlić listę tutaj. Więc od czego w ogóle zaczynamy? Jak widzieliśmy w GraphQL – lub w administratorze WordPress tutaj, tak z grubsza będzie wyglądać nasze zapytanie. Będzie miał te pola. Więc zróbmy to. Tak więc tytuł zdjęcia jest polem niestandardowym. Ale tak naprawdę, ponieważ ustawiliśmy to pole jako tytuł posta, moglibyśmy po prostu użyć tytułu, ponieważ to będzie — tytuł postu będzie taki sam jak niestandardowe pole o tej nazwie. Więc moglibyśmy po prostu to wykorzystać.

Tak więc w tej tablicy będziemy mieć nie tylko identyfikator bazy danych, ale otrzymamy tytuł dla naszych zdjęć, obraz, opis i tematy. Więc dodajmy i te. Obraz, opis, a następnie temat. W porządku. Będziesz potrzebował przecinków na końcu. No to jedziemy. Myślę więc, że to wszystkie nasze pola, które chcemy mieć dostępne zaraz po zakończeniu strony. Więc to mi wygląda dobrze.

I sprawdźmy, czy rzeczywiście możemy uzyskać tutaj renderowanie danych. Więc pod naszym Hello H1, który mamy, zróbmy to. Zrobimy JSON.stringify, a potem przejdziemy do tego czegoś. Zrobimy więc dane tutaj i zobaczymy, czy uda nam się uzyskać renderowanie danych na naszej stronie.

Zapiszę to i wrócimy do naszego frontonu. I oto jest, to pewne. Tak mniej więcej wyglądają dane. Możesz zobaczyć, że z powodzeniem pobieramy go z naszego zaplecza WordPress. Mamy tę tablicę węzłów, a następnie wewnątrz tych obiektów reprezentujących każde z naszych indywidualnych zdjęć i dokładnie te dane, o które prosiliśmy z powrotem, w tym każdą indywidualną wartość dla naszego powtarzalnego pola tematów tutaj.

Więc to jest świetne. To jest dokładnie to, czego potrzebujemy. Sprawmy, by wszystko było trochę czystsze – cóż, chyba o wiele czystsze, niż po prostu wypluwanie danych na stronę w ten sposób. Zamiast tylko tego tagu wstępnego, zmapujmy każdy z naszych fragmentów danych i wyrenderujmy w tym celu kartę na stronie.

Więc jedną z rzeczy, które lubię robić, jest to, że zanim założymy, że mamy posty do wyrenderowania, musimy uwzględnić przypadek, w którym być może ich nie ma, prawda? Więc jedną z rzeczy, które lubię robić, jest umieszczanie na górze moich komponentów, zawsze mam zdjęcia, coś w tym rodzaju. A potem robię data.nodes.length w ten sposób. I zrobimy znak zapytania dla opcjonalnego łączenia, ponieważ nie wiemy, czy dane jeszcze będą istnieć.

A potem rzucimy to na taką wartość logiczną. Oznacza to, że jeśli w tym momencie zawiedziemy, a dane są niezdefiniowane, zostanie to rzucone na fałsz. Powiemy, że nie mamy zdjęć do renderowania. W przeciwnym razie, jeśli będziemy w stanie drążyć całą długość tej tablicy, będzie to albo zero, jeśli nie ma żadnych postów, albo jeden lub więcej. Jeśli więc przerzucimy tę liczbę całkowitą na wartość logiczną, powie nam ona, czy mamy zdjęcia, czy nie. Więc jeśli to zero, to będzie fałszywe. Jeśli jest to jeden lub więcej, havePhotos byłoby prawdziwe.

Więc mając tę ​​wiedzę, możemy podejmować pewne decyzje wewnątrz naszego komponentu tutaj. Zastanówmy się więc, jak możemy to zrobić. Powiem więc, że jeśli mamy zdjęcia, to chcemy wyrenderować jedną rzecz. Powiemy – zobaczymy. Chcemy zrobić data.photos, a następnie nałożymy na nie mapę. Więc dla każdego zdjęcia coś wyrenderujemy.

Więc zwróćmy najpierw coś łatwego. Zwrócimy – zobaczymy. Zrobimy H2, co powiesz na to, skoro to będzie jak jedna z naszych kart. A potem powiemy photo.title w ten sposób. W porządku. Więc zmapujemy każde z naszych zdjęć. A za każde z nich zwrócimy H2 z tytułem tego zdjęcia. W porządku.

Wszystko to jest tym, czego chcemy, jeśli rzeczywiście mamy zdjęcia do renderowania. Ale co z alternatywą, jeśli tego nie zrobimy? Mamy więc tutaj naszą klauzulę else i wyrenderujmy coś innego. A co do ust. I powiemy, że nie ma zdjęć do wyświetlenia. Więc teraz, jeśli to uratujemy, jedziemy. Więc teraz nasze tytuły postów renderują się tutaj.

Sprawmy więc, że ta funkcja będzie tutaj nieco bardziej kompletna. Powiemy, że chcemy zwrócić coś innego. W porządku. Dla każdego z nich skopiuję tylko kilka stylów, kilka stylów wbudowanych, które napisałem wcześniej tutaj, aby zaoszczędzić nam czasu na wpisywanie ich. Więc będę miał div opakowania. A potem wewnątrz tego możemy przywrócić nasze H2, które mieliśmy. Więc wkleję H2 z tytułem.

Po tytule pokażmy opis. Możemy zrobić następny. Więc to będzie foto.opis, o tak. Ale nie możemy po prostu wyrenderować tego samego, na przykład wewnątrz kontenera, tak po prostu. Jeśli spróbujemy to zrobić, to nie będzie dla nas działać, ponieważ kod HTML nie zostanie zmieniony. Więc jeśli to zapiszę, zobaczysz teraz, że na stronie wyświetlany jest kod HTML z kodem ucieczki, a nie jest to to, czego chcemy.

Więc React ma narzędzie do pracy z HTML, które jest bezpieczne i nie musi być zmieniane w ten sposób. A to oznacza użycie div, a następnie niebezpiecznie SetInnerHTML w ten sposób. I możesz przekazać do niego obiekt, w którym jedną właściwością jest podwójny podkreślnik HTML.

A następnie wartość, którą przekazujesz, jest rzeczą, którą chcesz renderować bez ucieczki. Więc dla nas byłby to foto.opis, tak po prostu. A potem ten div może się ubierać. W porządku. Więc teraz to ratuję. Zobaczymy, co dostaniemy. Fajny. Więc teraz nasz kod HTML nie jest już zmieniany. Więc dla mnie to wygląda dobrze.

Więc to jest świetne. A co z tym wyróżnionym obrazem? To, co moglibyśmy zrobić, to napisać to od podstaw. Moglibyśmy pobrać adres URL polecanego obrazu i mieć tag obrazu i przekazać go jako adres URL. A następnie przeglądarka wyrenderuje obraz i skieruje go do tego źródła.

Jednak ten projekt, jeśli zagłębisz się w tę bazę kodu planu, faktycznie ma wstępnie zbudowany komponent dokładnie do tego celu, zwany obrazem polecanym. Więc dla nas byłoby to idealne rozwiązanie dla nas. Więc przewinę nieco w górę do miejsca, w którym importujemy kilka różnych komponentów z naszego katalogu komponentów. I oznaczę jeden na końcu tutaj, zwany wyróżnionym obrazem, tak po prostu. Teraz możemy renderować nasz wyróżniony obraz w dowolnym miejscu.

Tuż pod tym div z naszym opisem zdjęcia wyrenderujemy nasz wyróżniony obraz. A to wymaga rekwizytu obrazu. A to, co musimy tutaj przekazać, to cały węzeł tego obrazu. Więc dla nas byłby to photo.feauredimage.node, tak po prostu. I myślę, że to powinno załatwić sprawę naszego wizerunku. Więc zapiszę to i oczywiście, zaczynamy. Więc kiedy nasza strona ponownie się tutaj załaduje, teraz mamy nasz tytuł, nasz opis, a następnie samo zdjęcie jest wyświetlane. Podobnie, dla naszego następnego zdjęcia, to zdjęcie jest wyświetlane na liście.

Więc to jest fajne. Robimy wielkie postępy. Ostatnią rzeczą było zadbanie o nasze powtarzalne pole dla osób obecnych na zdjęciu. Więc to, co zrobię, to utworzę tutaj akapit i zamknę go. A potem wewnątrz tego znacznika akapitu możemy otworzyć kilka loków i zrobić nasze te same zdjęcia.tematy. Ale teraz zajmiemy się końcem łączenia. I powiemy [INAUDIBLE], że chcemy do niego dołączyć przecinkiem, spacją, tak po prostu. A ja to ratuję.

Kiedy nastąpi nasze przeładowanie na gorąco, powinienem móc przewinąć w dół. I rzeczywiście, jedziemy. Więc są wyświetlane na liście. Użytkownik może nie być pewien, co to jest. Więc może w naszej aplikacji możemy wrócić i dodać jakąś etykietę, małą poprzedzającą rzecz, która mówi Tematy, może tak. Tematy kwiat, bokeh, oddział. A potem nasze inne zdjęcie tutaj przedstawia góry, gwiazdy, cienie, tylko dla przykładu.

Więc zatrzymamy się tutaj, ale możesz zobaczyć, jak szybko udało mi się złożyć tę stronę. Myślę, że powinniśmy pozbyć się naszego hello, world na górze. Nie jest nam to do końca potrzebne. Lub cześć słowo. Więc to usunę. Tam jesteśmy. Widzicie więc, jak mówiłem, jak szybko udało nam się to połączyć.

Po prostu opierając nasz kod na stronie z listą portfolio, byliśmy w stanie utworzyć naszą stronę z listą zdjęć tutaj, a następnie zmapować poszczególne zdjęcia i uzyskać dostęp do niestandardowych pól Atlas Content Modeler — tytuł, opis, obraz, a następnie nasze powtarzalne pola dla tematu tutaj. Dlatego chciałbym, abyście poczuli się wzmocnieni przez to we własnych projektach.

Jeśli chcesz wziąć jeden z naszych planów jako ogromną przewagę, dzięki której możesz wykonać większość swojego projektu, wykonaj wiele pracy nóg. Następnie możesz zrobić coś podobnego do tego, co zrobiliśmy w tej rozmowie. Możesz go dalej dostosowywać i dodawać własne dostosowania oraz inne modele treści i tak dalej.

Dziękuję bardzo za obejrzenie. Mam nadzieję, że ta prelekcja była naprawdę przydatna i dała dobre pojęcie o wszystkich wspaniałych funkcjach, które pojawiały się i będą pojawiać się w ekosystemie Atlas.

PREZENTUJĄCY: I to jest podsumowanie DE{CODE} 2022. Mam nadzieję, że uznałeś to za inspirujące i odchodzisz z większą wiedzą na temat WordPressa i nowymi kontaktami ze społecznością. Wypatruj nagranych treści w witrynie od piątku, aby nadrobić zaległości lub ponownie obejrzeć film.

Na koniec chciałbym podziękować naszym sponsorom: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios i 10Up. Ogromne podziękowania za wpłaty na naszą zbiórkę pieniędzy DE{CODE}. Naprawdę doceniamy twoją hojność.

Teraz dla każdego, kto kontaktował się z nami w naszym centrum uczestników i podczas naszych sesji, wybierzemy trzech najlepszych zwycięzców i poinformujemy Cię, jak możesz odebrać nagrodę pod koniec DE {CODE}. Mamy nadzieję, że spotkamy się ponownie na naszych przyszłych wydarzeniach, osobiście lub wirtualnie. Nie możemy się doczekać, aby przekazać Ci więcej informacji na temat najnowszych trendów rozwoju WordPress i sposobów ich wdrażania w celu szybszego tworzenia witryn WordPress.

To wszystko ode mnie. Dziękuję bardzo za dołączenie do nas i uważaj.