Najnowocześniejsze zarządzanie i tworzenie wzorców

Ci, którzy opanują wzorce blokowe, będą mieli silną pozycję, aby przewodzić w nowym paradygmacie projektowania, budowania i skalowania WordPressa.

Obejrzyj tę sesję, aby dowiedzieć się, jak wykorzystać najnowsze funkcje wzorców, a także ekscytujące nowe narzędzie, które podnosi poziom zarządzania wzorami dla freelancerów i agencji.

Głośniki:

• Michael Day, inżynier reakcji w WP Engine
• Phil Johnston, starszy inżynier ds. oprogramowania w firmie WP Engine

Slajdy sesji:

Transkrypcja:

PHIL JOHNSTON: Cześć. Nazywam się Phil Johnston i jestem starszym inżynierem oprogramowania w WP Engine. A ja wraz z moim kolegą z zespołu, Mikiem Dayem, będziemy rozmawiać o najnowocześniejszym zarządzaniu i tworzeniu wzorców w WordPress.

Tak więc ostatnio do WordPressa dodawanych jest wiele nowych i interesujących rzeczy. A jednym z nich są wzory. I będę o tym mówił. Wzory są wykonane z bloków. Więc zanurzmy się w tym.

Używałbyś bloków w edytorze bloków, który jest pulpitem nawigacyjnym WordPress. To miejsce, w którym możesz zrobić coś w rodzaju posta na blogu lub strony i gdzie możesz zacząć pisać lub tworzyć. I to jest miejsce, w którym użyłbyś bloków.

Mogłem więc pożyczyć kilka klocków LEGO od moich dzieci na tę prelekcję. Aby to zilustrować, gdy spojrzysz na stronę, na której jest napisane, że jestem blokiem nagłówka, możesz pomyśleć o nim jako o bloku LEGO. A pod tym, gdzie jest napisane, że jestem blokiem akapitu, możesz myśleć o tym jako o kolejnym bloku, który wyciąłeś pod tym i tak dalej i tak dalej.

Pod spodem masz kolejny blok nagłówka. Więc możesz to kliknąć. A potem możesz zacząć budować swoją stronę tak, jak chcesz. I możesz zmienić kolejność tych bloków, po prostu klikając, przeciągając lub zmieniając kolejność. A potem możesz bardzo łatwo złożyć swoją stronę w ten sposób, ponieważ wszystkie są zablokowane.

Chociaż jest to bardzo proste w przypadku czegoś takiego jak post na blogu, możesz po prostu zanurzyć się w edytorze i zacząć to robić, nawet nie wiedząc, że to są bloki, ale możesz także zbudować znacznie bardziej złożony układ bloków, taki jak ten ponownie tutaj. Więc tutaj masz układ trzech kolumn z trzema obrazami. A poza tym masz kolumnę o pełnej szerokości. I rozciąga się na wszystkie trzy kolumny. A potem trzy bloki obrazu, trzy przykładowe bloki nagłówków, trzy bloki akapitów, a następnie trzy bloki przycisków poniżej.

Więc znowu, bloki WordPress są jak LEGO. Możesz połączyć je razem, aby stworzyć prosty układ, taki jak pierwszy, który pokazałem, lub bardziej złożony układ, taki jak ten, na który patrzysz tutaj. Dlatego zaznaczyłem na czerwono bloki, których możesz się spodziewać na takiej stronie. Możesz więc zobaczyć, że pierwszy jest otoczony czerwoną ramką. [ODCZYSTA GARDŁO] Przepraszam. A to oznacza blok. A pod tym masz kolejny blok z tekstem Lorem ipsum, a następnie trzy bloki obrazów, jak wspomniałem, trzy bloki nagłówków, trzy bloki akapitów pod tym i trzy bloki przycisków.

Możesz pomyśleć, że to wszystko, czego potrzeba, aby stworzyć taki układ strony, ale w rzeczywistości jest to trochę bardziej złożone. Więc tutaj, na tym slajdzie, zaznaczyłem niewidzialne bloki, bloki, których nie widać. Są to bloki, które muszą znajdować się na stronie, aby określić, gdzie powinny znajdować się rzeczy, na przykład fakt, że są trzy kolumny zamiast jednej kolumny.

I tak niewidzialne bloki, choć potężne, są również bardzo trudne dla przeciętnego użytkownika do nurkowania i po prostu rozpoczęcia używania. Gdy poruszasz myszką w edytorze bloków, nie będziesz wiedział, że są tam niewidzialne bloki, ponieważ są one niewidoczne. Wszystkie te bloki mają również złożone elementy sterujące, które są z nimi dostarczane. Na przykład oto jeden z bloków kolumn.

A jeśli spojrzysz na prawą stronę, zobaczysz wszystkie złożone elementy sterujące, które towarzyszą tym, które nie są zbyt łatwe ani intuicyjne do zrozumienia. Rzeczy takie jak wewnętrzne bloki wykorzystują szerokość treści, dopełnienie lub odstępy między blokami. Przeciętny użytkownik nie będzie wiedział ani rozumiał, do czego służą te ustawienia. I to jest trochę jak ja, gdybym wszedł do kuchni i zobaczył całą masę przypraw.

Nie jestem świetnym kucharzem. I tak miałbym garść przypraw na stojaku w ten sposób. I nie wiedziałbym, jak je połączyć lub wykorzystać, ponieważ nie poświęciłem czasu, aby zostać szefem kuchni. I tak jak potrzeba czasu, aby zostać pięciogwiazdkowym szefem kuchni i ugotować wspaniały i pyszny posiłek, tak samo potrzeba czasu i trudnej krzywej uczenia się edytora bloków i zrozumienia, których bloków użyć w danym momencie, aby zrobić coś, co wygląda dobrze lub smakuje Dobry.

I tak jest to specjalność. To rzemiosło, które trzeba rozwijać. Tak więc przeciętny użytkownik zostanie wrzucony do edytora bloków z pustą tablicą, taką jak tutaj. I nie będą wiedzieć, że muszą użyć bloku kolumn, ani jak użyć tego bloku, ani co włożyć do tego bloku, w zasadzie przypraw, które muszą połączyć, aby stworzyć coś, co naprawdę świetnie wygląda.

Mogą uznać to za frustrujące. Zdobycie tego, czego chcą, może być dla nich nudne i trudne. A nawet jeśli nauczą się wszystkich tych złożoności bloków, mogą po prostu nie mieć umiejętności projektowania. I tak, choć potężne, bloki mogą być trudne w użyciu. I właśnie dlatego wymyślono koncepcję wzoru.

Dlatego w WP Engine zbudowaliśmy wtyczkę o nazwie Atomic Blocks. A w Atomic Blocks w zasadzie wpadliśmy na koncepcję wzoru, ale nazwaliśmy je sekcjami i układami. I to jest dokładnie ta sama koncepcja. A WordPress Core faktycznie czerpał inspirację z Atomic Blocks dla koncepcji tego, co jest teraz w WordPress Core i nazywa się wzorcami.

Tak więc wzorce to gotowe grupy bloków, które użytkownicy mogą przeglądać, jak widać tutaj. Jest tu dla nich kilka wzorów do wyboru. Klikając jeden z nich, jednym kliknięciem umieszczają to wszystko na swojej stronie. Więc zamiast konieczności składania takich klocków, klocków LEGO, dostają coś takiego, wstępnie zmontowaną grupę kilku klocków, która została wykonana przez, miejmy nadzieję, kogoś, kto jest już bardzo dobry w projektowaniu i poświęcił wiele godzin na tworzenie tego rzemiosła Bloki.

A więc po wstawieniu go na stronę wygląda to trochę tak. I tak po prostu, bum, masz wzór, całą masę wstępnie zmontowanych bloków, które dobrze wyglądają, dobrze smakują i działają, a potem możesz po prostu wejść i wpisać tekst, który musisz zmienić . Zmieniłbyś więc coś w rodzaju przykładowego nagłówka na unikalny tekst swojej strony.

Tak więc wzorce są jak ogromna przewaga dla przeciętnego użytkownika. Nie muszą uczyć się wszystkich zawiłości edytora bloków, wszystkich tych skomplikowanych rzeczy. Nie muszą być profesjonalnymi projektantami, ale mogą uzyskać świetnie wyglądający projekt, po prostu umieszczając wzór na stronie.

Więc jeśli jesteś agencją, kimś, kto tworzy strony internetowe dla innej osoby lub klienta, możesz użyć wzorców blokowych, aby pomóc swoim klientom pomóc sobie. Dostarczając klientowi całą masę gotowych wzorców, może on budować własne strony.

Powiedzmy, że zbliża się wydarzenie, na które potrzebują specjalnej strony. Mogą pobrać wzór bloków, który dla nich stworzyłeś i który pasuje do ich marki. Pasuje do ich schematu kolorów i innych tego typu rzeczy, a oni mogą po prostu kliknąć i wstawić go na stronę i przeprowadzić inżynierię wsteczną - po prostu zacznij pisać w tych blokach, zamiast znać wszystkie złożoności, który blok użyć w którym scenariusz, a także czego nie robić i jak zbudować układ, który świetnie działa na różnych urządzeniach i wszelkiego rodzaju rzeczach.

Jednak chociaż wzorce bloków są łatwe w użyciu dla przeciętnego użytkownika, ich tworzenie nie jest łatwe. A z czasem jeszcze trudniej nimi zarządzać. A dla programistów i agencji WordPress nie ma przepływu pracy ani narzędzi wbudowanych w tworzenie wzorców.

Więc podzieliłem kroki do zbudowania wzorca w tym, co tutaj nazywam trudną drogą, na 10 kroków. A jeśli wygląda to przytłaczająco, to dlatego, że tak jest. Pierwszą rzeczą, którą musisz zrobić, to utworzyć plik PHP w edytorze kodu, takim jak VS Code. Musisz umieścić określony nagłówek pliku na górze tego pliku.

Wtedy trzeba mieć gdzie budować. Więc musisz mieć WordPressa, prawdopodobnie na swoim lokalnym, co jest świetne. Ale potem musisz utworzyć tymczasową stronę w tym WordPressie, abyś mógł gdzieś umieścić bloki i nad nimi pracować. A potem trzeba to rozbudować. Musisz użyć tych umiejętności, tego rzemiosła, które rozwinąłeś, i sprawić, by wyglądało ładnie. A kiedy skończysz, musisz przełączyć się do widoku kodu i skopiować cały ten kod do tego pliku, który utworzyłeś w kroku pierwszym.

Następnie musisz zapisać ten plik w określonej lokalizacji w swoim motywie. Jeśli budujesz motyw i dostarczasz go klientowi, musisz umieścić go w katalogu wzorców. A jeśli twój wzór zawiera obrazy, takie jak ten układ z trzema kolumnami, który pokazałem, musisz upewnić się, że te obrazy rzeczywiście będą działać, gdy dostarczysz go swojemu klientowi. Ponieważ zbudowałeś go na komputerze lokalnym, ten obraz będzie również odwoływany w kodzie, tak jakby znajdował się na dysku twardym komputera lokalnego.

Oczywiście jest to problem. Gdy nie będzie go już na twoim komputerze, ten obraz nie będzie działał. Następnie musisz przejrzeć kod za pomocą cienkiego grzebienia, wyszukać adresy URL dowolnego komputera lokalnego i zastąpić je określonym znacznikiem PHP. Następnie musisz upewnić się, że faktycznie przeniesiesz te pliki obrazów również do swojego motywu. Nie możesz tego po prostu zmienić w kodzie. Musisz także przenieść ten plik.

A potem, żeby było jeszcze trudniej, w tym miejscu robi się naprawdę. Myślę, że najbardziej frustrujące, przynajmniej dla mnie, gdy budowałem wiele wzorków, było to, że gdybym popełnił błąd ortograficzny we wzorze, musiałbym zacząć ponownie w kroku trzecim i za każdym razem przejdź do kroku dziewiątego, aby poprawić błąd ortograficzny. Musisz także – ponieważ za każdym razem musisz regenerować cały kod blokowy – musisz następnie wyszukać wszystkie te adresy URL obrazów i zastąpić je, umieścić z powrotem w pliku.

To cały powtarzalny, żmudny zestaw kroków, szczególnie do zarządzania w czasie. Powiedzmy, że musisz poprawić wzór za kilka miesięcy. To bardzo uciążliwe. I to jest coś, na co natknęliśmy się podczas tworzenia wzorów do naszej kolekcji Genesis Pro. Dostarczyliśmy z tym wiele sekcji i układów lub wzorców i byliśmy bardzo sfrustrowani procesem robienia tych żmudnych rzeczy w kółko.

I to właśnie skłoniło nas do zbudowania narzędzia, które pomoże nam nie musieć robić tych rzeczy, pozbędzie się tej nudy i sprawi, że będzie to naprawdę tak szybkie, jak to możliwe. Możesz po prostu nad tym popracować, zapisać i, bum, trafi prosto do pliku. Umieści plik we właściwym miejscu. Pisze cały kod za Ciebie. Postanowiliśmy więc zbudować narzędzie dla siebie wewnętrznie, które usunie cały ten ból. I nigdy tak naprawdę nie zamierzaliśmy, aby stało się czymś, z czego pozwolilibyśmy korzystać innym ludziom, ale stało się dla nas tak przydatne, że chcieliśmy udostępnić je również innym ludziom.

Więc znowu, jak widać, obecny trudny sposób budowania wzoru nie jest idealny i nie jest to świetny sposób na robienie rzeczy. Dlatego stworzyliśmy Pattern Manager, interfejs użytkownika do tworzenia i utrzymywania kolekcji wzorców w WordPress. Więc przekażę go mojemu koledze, Mike'owi Dayowi, aby przeprowadził nas przez menedżera wzorców i pokazał nam wszystkie niesamowite funkcje w nim zawarte. Więc do ciebie, Mike.

MIKE DAY: Cześć. Jestem Mike. Jestem inżynierem oprogramowania w WP Engine. Wzorce to potężne narzędzie do tworzenia układu, które może zmienić grę dla twórców WordPress. Ale jak właśnie zademonstrował Phil, doświadczenia związanego z faktycznym używaniem tych wzorców w zakresie ich tworzenia i zarządzania nimi, co najmniej brakuje. Pattern Manager ma na celu przeniesienie zarządzania plikami wzorców na pierwszy plan projektowania WordPress w bezproblemowy sposób za pośrednictwem wtyczki, która może wsunąć się w Twój przepływ pracy. Wskoczmy.

Na potrzeby tego demo zostawię otwarte okno edytora kodu po prawej stronie. To jest rzeczywisty plik wzorca zapisany bezpośrednio na moim dysku. I naprawdę chcę podkreślić, że kiedy pracujesz z Pattern Manager, faktycznie manipulujesz i tworzysz fizyczne pliki zapisane na dysku. W szczególności są one zapisywane w bieżącym katalogu motywów. Więc możesz zobaczyć tutaj te dwa pliki PHP lub pliki sygnatur, reprezentują one wzorce, które są aktualnie aktywne w tym widoku Wzorców.

Ponadto zwróć uwagę na ten katalog obrazów. Phil poruszył bardzo interesującą kwestię, że teraz, kiedy pracujesz ze wzorami, powiedzmy, że masz kilka obrazów zapisanych we wzorze. Wszystkie te adresy URL dla tych konkretnych obrazów będą wskazywać na lokalną instalację. To duży problem, gdy przychodzi czas na udostępnienie swojej pracy.

Wszystkie te obrazy zostaną zniszczone. Więc podchodzimy do tego trochę inaczej. W rzeczywistości zapisujemy kopie tych obrazów bezpośrednio w samym folderze motywu. Jest to na przykład zmieniacz gier do kontroli wersji. Załóżmy, że Ty i Twoi współpracownicy korzystacie z Git. Teraz możesz mieć pewność, że wszyscy macie dostęp do tych samych obrazów podczas pracy.

OK. Przejdźmy więc do interfejsu. To jest widok wzorców. I od razu tutaj możesz zobaczyć oba wzory, które są zarejestrowane dla mojego motywu. Gdy najedziesz kursorem na podgląd wzoru, zwróć uwagę na wyskakujące przyciski akcji. Mamy opcje edycji, powielania lub usuwania danego wzoru. Istnieje również kilka opcji filtrowania tutaj po lewej stronie, ale wrócę do tego tutaj za chwilę. Na razie wskoczmy i edytujmy wzór.

Jestem więc pewien, że od razu rozpoznasz bardzo znajomy interfejs użytkownika. To jest edytor bloków WordPress, w tym przypadku przeprojektowany, aby zapewnić określoną przestrzeń do pracy z wzorami. A tutaj, po prawej stronie, zobaczysz te różne właściwości nagłówka. Teraz, zanim do nich wskoczę, chcę podać trochę więcej kontekstu i właściwie użyć tekstu zapożyczonego z dokumentacji programisty WordPress.

Właściwość tytułu jest dość oczywista. Jest to czytelny dla człowieka identyfikator skierowany do przodu, jeśli wolisz, który użytkownicy zobaczą, gdy będą wchodzić w interakcje z twoim wzorcem w witrynie. Kategorie są naprawdę używane do grupowania wzorców razem. To będzie tablica zarejestrowanych kategorii, w których możesz dodać jedną, wiele lub naprawdę żadnej, jeśli chcesz. Ale jest tu problem z obecnym sposobem, w jaki działa to w WordPress Core.

Naprawdę nie ma dobrego sposobu na stwierdzenie, jakie kategorie są faktycznie dostępne. Nie ma oczywistego miejsca, w którym można znaleźć te zarejestrowane kategorie wzorców bloków w dowolnym miejscu na twojej stronie, przynajmniej o tym wiem. Teraz słowa kluczowe, o których możesz myśleć jak o wyszukiwanych hasłach. Zasadniczo możesz wprowadzić te opisowe aliasy, aby opisać swój wzorzec, aby użytkownicy mogli łatwo znaleźć to, czego szukają w module wstawiania, bez względu na to, czego szukają. A opis jest swego rodzaju rozszerzeniem tego pomysłu, z wyjątkiem tego, że jest wizualnie ukrytym tekstem. Jest to bardzo przydatne dla użytkowników niedowidzących, którzy mogą korzystać z czytnika ekranu.

Wracając teraz do Menedżera wzorców, zmodyfikujmy te meta właściwości. Tytuł wzoru to proste wprowadzenie tekstu. Po prostu zacznij pisać, aby zmienić nazwę wzoru. Ale zauważ tutaj ukrytą funkcję. Menedżer wzorców informuje mnie, że wzór o takim tytule już istnieje w motywie. Nie chcę przypadkowo zniszczyć tego pliku, więc po prostu zostawię tytuł w spokoju.

OK. Wybierzmy kilka kategorii. Więc od razu zauważ, że wyrenderowaliśmy tę listę kategorii tylko w rozwijanym menu. W przeciwnym razie trudno jest wiedzieć, gdzie faktycznie znaleźć te dane. Ale ta lista jest wypełniana dynamicznie za pomocą wywołania interfejsu API. Oznacza to, że pokażemy tutaj nie tylko wszystkie zarejestrowane kategorie wzorów bloków dla Twojego motywu, ale każdą zarejestrowaną kategorię. Na razie wybierzmy polecane.

OK. Dodajmy też wyszukiwalne terminy. Na potrzeby tego demo użyję tylko przykładowego wzorca. Pamiętaj jednak, że w tym miejscu możesz dodać terminy opisujące ten wzorzec dla użytkowników wyszukujących w module wstawiania. I zauważcie, że użyłem tutaj wielowyrazowego terminu. Są one obsługiwane w menedżerze wzorców.

OK. I dodajmy opis. Przypomnij sobie, że jest to wizualnie ukryty tekst. Tak więc moim zdaniem głównym celem jest pomoc czytnikom ekranu. Więc po prostu opiszmy to jako trzy kolumny z odwróconymi kolorami. OK. Doskonały. Czuję, że jesteśmy teraz w dobrym miejscu. W rzeczywistości możemy zapisać naszą pracę. Ale zanim to zrobię, chcę, żebyś zwrócił szczególną uwagę na nagłówek w tym pliku po prawej stronie. Teraz, gdy tylko kliknę Aktualizuj wzór, nagle jest tu dużo więcej danych. Opis, kategorie i słowa kluczowe, które właśnie modyfikowaliśmy, pojawiły się tutaj bez konieczności dotykania tego pliku.

OK. Przyjrzyjmy się pozostałym właściwościom meta. Po pierwsze, mamy całkiem interesującą właściwość szerokości rzutni. Ma to być liczba całkowita reprezentująca przeskalowaną szerokość do podglądu tego wzorca. Tak więc domyślnie za każdym razem, gdy tworzysz wzór — powiedzmy, że tworzysz coś, co ma pełną szerokość, a może nawet jest bardzo wąskie. Domyślne ustawienia tego w WordPress Core mogą sprawić, że skalowanie będzie wyglądać nieco dziwnie w podglądach.

Więc typy postów. Jest to po prostu tablica ślimaków typu post, z którymi ma być używany wzorzec. Zauważ, że dodanie tutaj wartości faktycznie ograniczy wzorzec, więc działa tylko z tymi typami postów. Pamiętaj też, że pozostawienie tego pola pustego spowoduje, że wzorzec będzie działał ze wszystkimi typami postów.

Następnie mamy typy bloków. To jest kolejna tablica, ale tym razem typów bloków, z którymi ma być używany wzorzec. Teraz muszę przyznać, że za każdym razem, gdy zaczynałem używać tych typów bloków, wydawało mi się to trochę mylące. Wygląda na to, że użycie ma być naprawdę wielozadaniowe, ale intencja, która się za tym kryje, nie jest moim zdaniem bardzo jasna.

I wreszcie, mamy właściwość inserter. Teraz domyślnie wszystkie wzory pojawią się we wstawiania, ale powiedzmy, że chcesz to zmienić. Po prostu dodasz wartość logiczną false dla tej właściwości i zostanie ona ukryta przed użyciem we wstawiaczu.

Wracając więc do Menedżera wzorców, zobaczmy, jak poradzimy sobie z pozostałymi metawłaściwościami. Po pierwsze, zamknę pozostałe panele. I spójrzmy na szerokość rzutni. Przypomnij sobie teraz, że jest to wartość całkowita, która po prostu kontroluje skalowane podglądy twojego wzoru w module wstawiania. Jedną z rzeczy, która jest uciążliwa przy obecnym wdrażaniu tego, jest faktycznie oglądanie wyników twojej pracy.

Powiedzmy, że modyfikuję nagłówek w moim pliku wzorca i zmieniam szerokość rzutni. Jedynym sposobem, aby zobaczyć, jak to wygląda, jest utworzenie nowego posta. To robi się trochę zawiłe. Przeskakiwanie w tę iz powrotem jest trochę zbyt skomplikowane. To trochę boli. Więc sposób, w jaki do tego podeszliśmy, to po prostu najechanie kursorem na suwak i natychmiastowy podgląd. Kiedy przeciągam i próbuję różnych rozmiarów, widzę, jak ten wzór się skaluje. Jest to naprawdę przydatne i pozwala zaoszczędzić dużo czasu. Wybierzmy na razie 1200. I przejdźmy do typów postów.

Pierwszą rzeczą, na którą należy zwrócić uwagę w tym panelu, jest obecność tych podpowiedzi. Są to po prostu małe kąski informacji, które pomogą Ci poprowadzić Cię podczas korzystania z aplikacji. Po pierwsze, to tylko powtórzenie czegoś, o czym już mówiłem. Jeśli nie ma żadnych wyborów, jeśli nie ma żadnych typów postów dodanych do nagłówka twojego pliku sygnatur, twój wzorzec będzie działał dla wszystkich typów postów. Ale zauważ poniżej, że jest to ustawienie o nazwie Widoczność modalna.

To naprawdę fajna ukryta funkcja. Zasadniczo, jeśli masz prawidłowy typ typu bloku w nagłówku pliku sygnatur, za każdym razem, gdy użytkownicy utworzą nowy post typu docelowego, zobaczą modal. I mogą wybrać twój wzór bezpośrednio z tego modalu. A za chwilę pokażę dokładnie, co mam na myśli. Ale chcę, żebyś zauważył, jak ten przełącznik jest faktycznie wyłączony. A to dlatego, że ustawienia widoczności modalnej nie będą działać, jeśli nie zostanie wypełniony typ postu.

Tak więc podchodzimy do tego, po prostu wyłączając przełącznik, dopóki nie pojawi się typ postu. OK. Teraz mogę to włączyć. A przełączanie wyświetlacza i insertera robi to, czego można się domyślić. Jeśli miałbyś to wyłączyć, przypisałoby to wartość false w nagłówku twojego pliku. I ten wzór nie pojawiałby się już w inserterze. OK. Chodźmy dalej i zaktualizujmy to.

Zobaczmy teraz, jak to wszystko faktycznie działa w poście. Więc przełączę się i właściwie stworzę nowy post. Teraz od razu to jest ten modal, o którym mówiłem w akcji. Ponieważ zarówno prawidłowy typ bloku, jak i typ postu są dodawane do pliku, teraz widzę to od razu, gdy tworzę nowy post. Mogę po prostu kliknąć podgląd wzoru i bum, mój wzór jest właśnie tam.

To całkiem fajne, ale zobaczmy, jak tagowanie faktycznie działa inaczej. Oto kategoria, którą wybrałem, funkcja. A drugi wzorzec w moim motywie ma kategorie kolumn i tekstu, więc działa świetnie. Co z moimi wyszukiwanymi hasłami? Moje wyszukiwane hasło z przykładowym wzorem. To działa świetnie. A mój ukryty tekst zaczął się od trzech kolumn, które również działały dokładnie tak, jak powinny. To wspaniale.

OK. Wskoczmy więc z powrotem i omówimy jeszcze jedną pozostałą właściwość meta. To jest trochę dziwne do wyjaśnienia. Czuję, że będzie łatwiej, jeśli po prostu ci pokażę. Przejdźmy więc dalej i stwórzmy nowy wzór. Wszystko, co musisz zrobić, to nacisnąć ten przycisk Utwórz nowy wzór. I oto jestem z powrotem w edytorze. W tym przypadku wybiorę blok kodu. W tym bloku kodu wkleję przykładowy kod.

Teraz jest to faktycznie zaczerpnięte z dokumentacji WordPress. W ten sposób zarejestrowałbyś transformację bloku przy użyciu PHP. Więc wziąłbyś ten kod i może wkleiłbyś plik funkcji, cokolwiek wolisz. Pokażę ci, jak do tego podchodzimy. W tej sekcji przekształconego typu bloku znajduje się lista rozwijana. Ta lista rozwijana jest wypełniana dynamicznie, podobnie jak typy postów i kategorie za pośrednictwem wywołania API.

Mogę więc po prostu wyszukać mój docelowy typ — oto jest, rdzeń/kod — i wybrać go. Teraz, aby zilustrować to jeszcze raz, różnica polega na tym, jak możesz to zrobić teraz, a nie za pomocą menedżera wzorców. Aby to zrobić teraz, muszę odszukać ten blok kodu, dowiedzieć się dokładnie, jakiej treści mogę potrzebować, ustalić typ mojego bloku i wkleić to gdzieś, w przeciwieństwie do Menedżera wzorców, po prostu wybrałem to pole. Wybrałem tę wartość z listy rozwijanej. OK. Zaktualizujmy to. A ja stworzę nowy post. I wyjdźmy z naszego modalu.

Tym razem wybiorę również blok kodu. Ale zamiast wypełniać to treścią, mogę po prostu wybrać tę opcję z paska narzędzi. I zauważ ten wybór wzoru. Kiedy wybieram wzory, jest mój wzór. Klikając na niego, natychmiast ten blok został przekształcony w mój docelowy wzór.

Kolejną rzeczą, którą należy omówić z typami transformacji, jest idea tak zwanych wzorców bloków semantycznych. Są one podobne do transformacji blokowej, ale ukierunkowane na części szablonu. Na przykład nagłówki i stopki. Ale tam jest haczyk. Jedną rzeczą, którą należy wiedzieć o wyborze docelowego typu bloku części szablonu, jest to, że musisz mieć również przypisany prawidłowy typ typu postu, w przeciwnym razie po prostu nie zadziała. Tak więc podeszliśmy do tego, po prostu przypisując ci ten typ szablonu. I jest zablokowany. I pozostanie zablokowany, dopóki ten typ blokady nie zostanie faktycznie usunięty.

To tyle w przypadku wstępnej wersji demonstracyjnej tego widoku edytora, ale muszę tutaj zmienić motywy w tle. A teraz przełączę się z powrotem do widoku wzorców. Chodzi o to, aby pokazać, jak Menedżer wzorców zachowuje się z wieloma wzorcami. Ten konkretny motyw ma zarejestrowanych ponad 50 wzorów.

Teraz zauważ, kiedy klikam wokół tych różnych kategorii, jak natychmiast te wzorce są filtrowane. Jest to bardzo przydatne, gdy próbuję znaleźć to, czego potrzebuję, wśród wielu wzorców. Ale powiedzmy, że chcesz bardziej szczegółowej kontroli. Po prostu zacznij pisać. To filtrowanie działa bardzo podobnie do Insertera. Jest to naprawdę przydatne i naprawdę szybkie. Mówiąc o żwawym, jeszcze jedną rzeczą, na którą należy zwrócić uwagę, jest to, jak szybki jest ten interfejs użytkownika.

Zauważ, że te podglądy nie ładują się, dopóki nie przewinę do nich. Jest to niestandardowa implementacja, która naprawdę świetnie oszczędza zasoby przeglądarki. I sprawia, że ​​​​ta aplikacja jest szybka i bardzo zgrabna, bez względu na to, ile wzorów używasz. W porządku. W tej prezentacji omówiliśmy wiele kwestii, więc po prostu szybko podsumujmy. Wzorce stanowią interesujące skrzyżowanie pomiędzy selekcją poszczególnych elementów treści a pełnym projektem strony.

Dla konstruktora WordPress możliwość tworzenia większych elementów układu i ponownego wykorzystywania ich w motywie jest atrakcyjnym pomysłem. Nagłówki, stopki, referencje, pola funkcji. To cechy charakterystyczne każdej strony internetowej. A teraz możesz łatwo zaprojektować całą witrynę za pomocą wzorców.

Teraz, pomimo pojawienia się wzorców jako kluczowego składnika motywów blokowych, sam WordPress nie ma oficjalnego interfejsu do faktycznego tworzenia tych wzorców lub zarządzania nimi, ani nie ma nic na mapie drogowej. Zamiast tego konstruktorzy muszą ręcznie tworzyć wzorce w swoim edytorze kodu, kopiując i wklejając kod dziesiątki razy, pozostawiając wiele miejsca na błędy.

Nasz produkt, Pattern Manager, został zaprojektowany tak, aby wkomponowywał się w przepływ pracy. Po prostu zainstaluj i aktywuj wtyczkę, a otrzymasz nowoczesny interfejs użytkownika do filtrowania wzorców, tworzenia, powielania, edytowania, usuwania, a wszystko to wraz z doświadczeniem w edytowaniu treści w znanym środowisku korzystania z podstawowego edytora WordPress. Ponadto wiele trudniejszych do zrozumienia zawiłości związanych z prawidłowym tagowaniem pliku wzorców, na przykład dodawanie kategorii, słów kluczowych, a może nawet ograniczenie pracy tylko z określonymi niestandardowymi typami postów, zostało wyabstrahowanych w naszym interfejsie użytkownika. Konstruktorzy mają pełną kontrolę nad tymi ustawieniami za pomocą łatwych w obsłudze elementów sterujących na pasku bocznym.

Menedżer wzorców został wydany i jest już dostępny do pobrania pod poniższym adresem URL. Zakręć nim i daj nam znać, co myślisz. I proszę, skontaktuj się ze mną osobiście i daj mi znać, co myślisz. Mamy nadzieję, że wypróbujesz Menedżera wzorców. Mamy nadzieję, że pomoże ci to w taki sam sposób, jak pomogło naszemu zespołowi twórców WordPress. Dziękuję.