DE{CODE}: Nowoczesne motywy i przyszłość WordPressa: praca z pełną edycją witryny i nie tylko

WordPress 5.9 wprowadził pełną edycję witryny do rdzenia, co oznacza istotną zmianę w sposobie, w jaki tworzymy strony internetowe za pomocą WordPress. Podczas tej sesji DE{CODE} dołącz do rzecznika WP Engine Developer Advocate, Nicka Diego, który rozpakowuje te zmiany, a także niektóre sposoby wykorzystania ich do tworzenia lepszych stron internetowych — w nowoczesny sposób WordPress.

Slajdy sesji

Transkrypcja pełnego tekstu

NICK DIEGO : Witam i witam w „Praca z pełną edycją witryny i przyszłością nowoczesnych motywów w WordPress”. Nazywam się Nick Diego i jestem rzecznikiem programistów w WP Engine. A więc trochę o mnie – więc zacząłem pracować z WordPressem w 2012 roku. Byłem przede wszystkim programistą wtyczek i od tego czasu zacząłem dużo robić z motywami blokowymi. Właściwie dołączyłem do WP Engine w listopadzie 2021 r., więc jest to dla mnie trochę nowy koncert. Jestem pasjonatem bloków i wzorów oraz wszystkiego, co można edytować na całej stronie, dlatego nie mógłbym być bardziej podekscytowany dzisiejszą prezentacją.

Czym więc jest edycja całej witryny? Dużo o tym słyszeliśmy w ostatnich latach. W rzeczywistości jest to „zbiór funkcji, który zapewnia znane doświadczenie i rozszerzalność blokad we wszystkich częściach witryny, a nie tylko w postach i stronach”. W rzeczywistości jest to parasol funkcji, który obejmuje takie rzeczy, jak Edytor witryny, style globalne, bloki tematyczne, szablony i oczywiście motywy blokowe.

Tak więc w naszej dzisiejszej rozmowie omówimy kilka różnych rzeczy. Zaczniemy od podstaw. Chcę się upewnić, że wszyscy jesteśmy po tej samej stronie, zwłaszcza z punktu widzenia terminologii. Następnie porozmawiamy o anatomii motywu blokowego, a następnie globalnych stylach, ustawieniach, które zawierają plik theme.json. Na koniec podzielę się moimi przemyśleniami na temat nowoczesnych motywów i tego, jak to będzie wyglądać.

W dzisiejszej prezentacji użyjemy kilku różnych przykładów, a te będą pochodzić z motywu 2022, który został dołączony do WordPress 5.9 w styczniu 2022 roku. Jest to motyw blokowy opracowany przez Core WordPress i jest to świetne miejsce do rozpoczęcia, i jest dostępne w repozytorium wtyczek, więc nie ma lepszego motywu do wykorzystania jako przykłady.

Tak więc zaczynając dzisiaj ponownie, zaczniemy od podstaw. A nie ma nic bardziej podstawowego niż blok. Więc jeśli korzystasz z WordPressa od kilku lat, prawdopodobnie dobrze znasz bloki. Są podstawową jednostką treści w WordPress. Może to być akapit tekstu do galerii obrazów. Może przybrać niemal dowolną formę. Ideą edycji całej witryny jest to, że wkrótce lub teraz wszystko w Twojej witrynie będzie blokować. Porozmawiamy więcej o tym, jak to działa.

Teraz mamy przykład kilku różnych bloków, które są obecnie w WordPress. Lewe dwie kolumny, które powinieneś znać. Mamy paragrafy, nagłówki i bloki okładek – i tak dalej i tak dalej. W wersji 5.9 – ponownie wydanej w tym roku – mamy teraz tak zwane bloki tematyczne. Są to bloki zawierające treści, których tradycyjnie nie można edytować bezpośrednio z poziomu WordPressa.

Należą do nich takie rzeczy, jak logo Twojej witryny, pętla zapytań, fragment postu, autor postu. Są to wszystkie typy treści, których potrzebujesz, aby zagłębić się bezpośrednio w plikach szablonów opartych na PHP i kodzie lub użyć wtyczki innej firmy, która pomogła ci w edycji tych obszarów. I wszystkie one nadchodzą lub przyszły do ​​WordPressa i pozwalają użytkownikom na ich bezpośrednią edycję, a wszystkie mają formę bloku.

Następnie chcemy porozmawiać o wzorach. Wzory są swego rodzaju kamieniem węgielnym podczas edytowania całej witryny. Wzory mogą być całą rozmową samą w sobie, ale damy ci mały podgląd wzorców, jeśli nie jesteś zaznajomiony. Więc ponownie, wzór to po prostu predefiniowany zbiór bloków, który tworzy określony układ. Wzór może być pojedynczym blokiem z pewną stylizacją. Może to być kilka bloków.

Wzorce pozwalają użytkownikom za pomocą jednego kliknięcia wstawić cały projekt bezpośrednio do ich witryny, zamiast konieczności ręcznego budowania projektu, jeden blok na raz, co może naprawdę przyspieszyć tworzenie witryny. Jest to również bardzo przydatne, jeśli pamiętasz — widzisz tę piękną wersję demonstracyjną witryny i zawiera ona całą tę zawartość. Instalujesz motyw i pytasz, jak mogę uzyskać to demo? Wzorce rozwiązują ten problem, ponieważ autor motywu może dostarczyć całą masę układów stron lub indywidualnych projektów, które za pomocą jednego kliknięcia użytkownik może wstawić i uzyskać wersję demonstracyjną, którą zobaczył i która przyciągnęła go, gdy wybrał motyw.

Rzućmy więc okiem na wzór tutaj. Mamy tylko prosty nagłówek, trochę tekstu i kilka przycisków. Można to ponownie wstawić jednym kliknięciem na stronę i widzimy tutaj, że składa się z trzech różnych bloków, bloku nagłówka, bloku akapitu i bloku przycisków.

Teraz, ponownie w wersji 5.9, która pojawiła się w tym roku, zobaczyliśmy wprowadzenie Eksploratora wzorców. Tak więc motyw 2022, o którym wspomniałem wcześniej, ten, którego używamy we wszystkich naszych przykładach, nazywa się motywem Hatchery – dużo ptaków. I możesz zobaczyć tutaj w Eksploratorze wzorców, mamy kilka różnych projektów, które zbudowali autorzy motywu.

Więc jako użytkownik mogę wstawić dowolny z nich bezpośrednio na stronę i uzyskać tę samą estetykę, dla której autor motywu zaprojektował motyw, więc jego seria głośników, kilka ptaków obok siebie - cokolwiek chcesz. A wzorce i wzorce, które są podawane z motywem, są bardzo ważne dla tego doświadczenia z edycją całej witryny.

Dalej mamy Redaktora. Nie możemy nie wspomnieć o Redaktorze. Jeśli korzystasz z WordPressa, prawdopodobnie dobrze to znasz. Ale chcę o tym wspomnieć, ponieważ w przeszłości Edytor występował pod wieloma różnymi nazwami – Block Editor, Gutenberg, The Gutenberg Editor. Na potrzeby tej dyskusji po prostu zadzwonimy do Redaktora. To jest oficjalna nazwa i tak będzie wyglądać tutaj. Ponownie zostało to wprowadzone w WordPress 5.0 pod koniec 2018 roku.

Tak więc w Edytorze wystarczy kliknąć Insertor i możesz wstawić swoje bloki i wzory. Teraz chciałem pokazać ekran, ponieważ teraz musimy porozmawiać o Edytorze Witryny. W końcu prefiks witryny Edytora witryny prawdopodobnie zniknie i pozostanie nam tylko edytor. Ale Edytor witryny to spójne środowisko, które umożliwia bezpośrednią edycję i nawigację między różnymi szablonami, częściami szablonów, opcjami stylizacji i nie tylko.

Zasadniczo Edytor witryny przenosi nasz standardowy edytor, do którego przyzwyczailiśmy się w ciągu ostatnich kilku lat, i przenosi go na wyższy poziom, umożliwiając użytkownikom edytowanie dodatkowych obszarów witryny, które są teraz obsługiwane przez bloki. Tak więc WordPress 5.9 wprowadził edycję całej witryny, a wraz z nią Edytor witryny. W wersji 6.0, która ukaże się w maju, zobaczymy wiele ulepszeń, co jest bardzo ekscytujące.

Jeśli więc używasz motywu blokowego, takiego jak 2022, będziesz mieć dostęp do Edytora witryny. Istnieją dwa różne sposoby, górny pasek boczny, a następnie sekcja wyglądu. Teraz ponownie Edytor Witryny, ponieważ jest częścią… jest bardzo potężny, jest dostępny tylko dla administratorów. Więc nie martwcie się, redaktorzy, nie będą mogli uzyskać dostępu do Edytora strony. Aby uzyskać dostęp do Edytora witryny, musisz być administratorem.

A kiedy już tu wskoczymy, wygląda bardzo podobnie do standardowego edytora, ale zauważysz coś trochę innego. U góry mamy Dom. To nam mówi, że tak naprawdę edytujemy szablon home.HTML i mamy kilka różnych obszarów strony, które możemy edytować oddzielnie. Jak widać tutaj, mamy nagłówek i stopkę.

Jest to więc coś, czego nigdy wcześniej nie mogłeś zrobić. Nigdy nie mogłeś edytować home.PHP, ale teraz szablon HTML bezpośrednio z interfejsu, nie bez jakiegoś innego rozszerzenia innej firmy.

A jeśli klikniemy na stronę i widok listy, zobaczymy, że mamy pętlę zapytań. Ponownie, te znane motywy budowania są prawdopodobnie bardzo, bardzo, bardzo zaznajomione z budowaniem pętli w ramach szablonów dla motywów, ale tutaj możemy to wszystko zrobić za pomocą bloków wykorzystujących pętlę zapytań. Możemy również zobaczyć niektóre inne bloki tematyczne, takie jak tytuł postu, wyróżniony obraz, fragment postu i data postu. Wszystko to może być przenoszone i modyfikowane przez użytkownika z poziomu interfejsu bez potrzeby kodowania.

Teraz, jeśli klikniesz małą ikonę WordPress lub ikonę witryny, możemy uzyskać ten pasek boczny. I wtedy widzimy, że mamy dostęp do wszystkich naszych szablonów i części szablonów. Teraz chcę zauważyć, że przepływ – wszystkie te ekrany są w pełni opracowywane. Edycja całej witryny jest wciąż w fazie beta i czeka nas wiele udoskonaleń i ulepszeń. Więc to, co widzimy dzisiaj, może nie wyglądać tak samo za sześć miesięcy, ale to fantastyczny początek.

Więc jeśli zejdziemy do szablonów, zobaczymy wszystkie szablony, które są dołączone do 2022. Powinieneś zobaczyć kilka znanych, takich jak Page i Index oraz Home i 404. A potem, jeśli przejdziemy do naszych części szablonów, możemy zobaczyć niektóre niestandardowe części szablonu, które zostały dołączone przez autorów motywu. Mamy więc kilka różnych nagłówków i mamy stopkę.

Teraz znowu wszystkie z nich są edytowalne przez użytkownika. I tak, jeśli widzimy tutaj tę małą kropkę, widzimy, że ta część szablonu nagłówka została przeze mnie zredagowana. Teraz, kiedy edytujesz część szablonu lub szablon, zmiany te są zapisywane w bazie danych. W rzeczywistości nie modyfikują szablonów w twoim motywie, co jest świetne, ponieważ zawsze możesz wrócić do szablonów motywu lub części szablonu.

Ale znowu, jeśli klikniemy tutaj, możemy rozpocząć edycję tej części szablonu nagłówka, a zobaczysz, że wszystko to składa się z bloków. Jest to więc to samo środowisko, z którego korzystałbyś w Edytorze podczas edytowania posta lub strony. Możesz to zrobić teraz w Edytorze Witryny dla wszystkich szablonów i części szablonów.

To był szybki przegląd Edytora witryny i sposobu jego działania, ale teraz chcę porozmawiać o anatomii motywu blokowego, który jest głównym podstawowym elementem edycji całej witryny. Jak więc działa anatomia motywu blokowego? Cóż, właściwie jest podzielony na kilka różnych kategorii. Mamy więc motywy blokowe. W pełni obejmują edycję całej witryny. Szablony motywów składają się w całości z bloków. Szablony i części szablonów to HTML, a nie PHP.

A potem chcę zauważyć, że motyw blokowy może być bardzo prosty. Wszystko, co musi zrobić, to składać się z pliku style.CSS i pliku index.html, a także pliku index.PHP. Ten plik PHP jest pozostałością po tradycyjnym rozwoju motywu WordPress i prawdopodobnie zniknie w przyszłości.

I wreszcie, większość motywów blokowych zawiera plik theme.JSON. Porozmawiamy o tym osobno. To bardzo ważny temat dotyczący globalnych ustawień i stylów. Przyjrzyjmy się więc strukturze plików motywu. Więc to jest rok 2022, skrócona wersja struktury plików z roku 2022. I tutaj możemy zobaczyć te wymagane pliki.

Następnie zauważamy również, że istnieje kilka folderów, a mianowicie Szablony i Części szablonów. W każdym z tych folderów znajdują się wszystkie pliki HTML dla każdego szablonu i części szablonu. To, czego tutaj nie widać, co jest naprawdę ekscytujące, więc chciałem to przemycić, Gutenberg, wtyczka Gutenberg, w której odbywa się cały ten przyszły rozwój, pełna edycja witryny, niedawno wprowadziła nowy folder o nazwie Patterns. Możesz więc umieścić swoje pliki wzorców bezpośrednio w folderze Pattern, a WordPress zarejestruje je za Ciebie. Tylko rzut oka. Gorąco zachęcam do sprawdzenia Gutenberga i wszystkich nowych funkcji.

Ale wróćmy do slajdu tutaj. Posiadamy własne szablony i części do szablonów. I możesz zobaczyć poszczególne pliki HTML dla każdego. Teraz, aby lepiej zrozumieć, jak to działa, przyjrzymy się plikowi 404.HTML. To jest plik lub strona w Twojej witrynie, której nigdy nie możesz edytować bezpośrednio, chyba że zagłębisz się w kod lub użyjesz zasobu innej firmy, który umożliwiłby edycję tego szablonu.

Wracając do Edytora witryny, widzimy, że nasza strona 404 znajduje się właśnie tutaj. Jeśli klikniemy na to, użytkownik może teraz edytować różne komponenty tego szablonu. Przyjrzyjmy się jednak, jaki rzeczywisty kod HTML tworzy ten szablon, kod, który faktycznie znajduje się w motywie.

Widzimy więc, że mamy nasz plik 404.HTML, który zawiera sporo znaczników. Zaczynając od góry i od dołu, widzimy, że mamy specyfikację bloku części szablonu. To, co robi, to odwoływanie się do naszych zarejestrowanych części szablonu i wciąganie ich do szablonu. Więc jeśli wrócimy tutaj, zobaczymy, że mamy część footer.HTML i część header.HTML. I to jest to, o czym tutaj mowa.

Jest to więc unikalny blok, który umożliwia pobieranie szablonów składających się z innych bloków. Teraz oczywiście możesz po prostu dołączyć wszystkie bloki, które tworzą nagłówek i wszystkie bloki, które tworzą stopkę, ale odwołując się do części szablonu, możesz zrobić to wszystko w jednym miejscu, a następnie zastosować tę samą część szablonu we wszystkich szablonach, podobnie jak w przypadku tradycyjnego WordPressa z PHP.

Teraz, gdy patrzymy dalej, mamy trochę znaczników, tylko kilka głównych znaczników, a potem mamy element div. Nie zamierzam się w to zbytnio zagłębiać. Dzieje się tutaj kilka interesujących rzeczy, a mianowicie układ tutaj, co prawda, który wprowadza pewne ustawienia układu, ale to tylko ogólny znacznik dla strony, wzorzec 404.

Teraz wspomniałem o wzorze. 404 w tym motywie jest właściwie spakowane we wzorzec. Tak więc wszystkie bloki, które składają się na treść 404, układają się we wzór. A potem mamy blok wzorca, który faktycznie odwołuje się do tego wzorca, a następnie wciąga te bloki. Teraz oczywiście znowu możesz po prostu dołączyć wszystkie bloki, które składają się na stronę 404 tutaj, ale umieszczając je we wzorcu, a następnie odwołując się do nich, to po prostu trochę ułatwia zarządzanie.

Więc kiedy wrócimy do Edytora witryny, mamy naszą zawartość i możemy zobaczyć różne sekcje. Więc górna część to ta część szablonu nagłówka, która jest wciągana. A potem, oczywiście, główna sekcja to wciągany wzorzec 404. A teraz, ponieważ to wszystko są bloki, wszystko, co musimy zrobić, to edytować je tak, jak zwykle . Możemy zrobić to odważnie. Moglibyśmy zmienić kolor. Moglibyśmy usuwać bloki, dodawać bloki – i tak dalej i tak dalej.

Całkiem proste i wcale nie musieliśmy edytować żadnego kodu. Musieliśmy zrozumieć, jak działa kod, ale nie musieliśmy dotykać żadnego kodu. Kiedy jesteśmy szczęśliwi, po prostu klikamy Zapisz. Ponownie, te zmiany są zapisywane w bazie danych, więc tak naprawdę nie modyfikujesz plików motywu. Jeśli więc mielibyśmy cofnąć zmiany, wrócilibyśmy do tego, co zapewnia motyw.

Jedną ze wspaniałych rzeczy w Edytorze witryny – i znowu jest on wciąż rozwijany – jest możliwość dodawania nowych części szablonu. Więc znowu, ten motyw dodaje kilka różnych nagłówków i stopek, ale co by było, gdybyśmy chcieli dodać więcej? Może chcieliśmy mieć pasek boczny. Może chcieliśmy różnych sekcji treści. Możemy to zrobić bezpośrednio w Edytorze witryny.

I znowu ten przepływ zostanie ulepszony – więcej funkcji, więcej funkcji. Ale obecnie działa i możesz dodać wszystko tutaj. Należy zauważyć, że nie można jeszcze dodawać szablonów w Edytorze witryny. Możesz to zrobić w innym interfejsie w edytorze WordPress, ale jeszcze nie w edytorze witryny. Ale to przyjdzie.

Ostatnią częścią tego jest to, że rozmawialiśmy o wprowadzeniu wszystkich tych zmian. A co, jeśli mógłbyś po prostu wyeksportować wszystkie zmiany jako pojedynczy motyw, który faktycznie nadchodzi i naprawdę interesujące jest zobaczyć, jak wpłynie to na rozwój motywu. Dzięki najnowszej wersji Gutenberga możesz teraz wyeksportować wszystkie zmiany oraz oryginalny motyw.

Zostają scalone i możesz wyeksportować go jako zupełnie nowy motyw ze wszystkimi zmianami zastosowanymi do plików w motywie. Więc możesz sobie wyobrazić 2022. Przesyłasz to. Wprowadzasz wszystkie zmiany. Możesz zmodyfikować niektóre szablony, a następnie wyeksportować pełny motyw. Ma to kilka bardzo interesujących implikacji dla przyszłego rozwoju tematu.

Teraz musimy porozmawiać o globalnych ustawieniach i stylach. To jest ten plik theme.JSON. Jest to nowość w WordPressie i równie ekscytująca, co trudna. Więc jeśli spojrzymy wstecz na motyw z 2022 roku, zobaczymy, że ten plik znajduje się na górze. A kiedy wskoczymy do pliku theme.JSON, to tak naprawdę jest pięć sekcji, z których jedna to tylko numer wersji.

Pokrótce opowiem o niestandardowych szablonach i częściach szablonów. Więc tutaj, jeśli masz niestandardowy szablon, całkowicie niestandardowy szablon, taki, którego WordPress naturalnie nie rozpoznałby, możesz go tutaj zarejestrować. Tutaj również rejestrujesz wszystkie części szablonu, takie jak nagłówki i stopki. Każdy tradycyjny szablon, taki jak Index, Page, Post – te szablony, które WordPress ogólnie rozpoznaje – nie musisz tu umieszczać, tylko niestandardowe i oczywiście własne części szablonu.

Ale sedno tematu theme.JSON to sekcja ustawień i stylu. Więc jeśli najpierw spojrzymy na ustawienia, wiele się tutaj dzieje. I znowu, jest to bardzo skrócone. Ale górna część to ustawienia globalne. Są to ustawienia, które mają wpływ na Edytora witryny i Edytora w całej witrynie. Należą do nich takie rzeczy, jak obramowanie, kolor i typografia. Tutaj możesz ustawić paletę kolorów dla swojego motywu, ustawienia typografii dla swojego motywu, czcionki - i tak dalej.

Mamy też ustawienia na poziomie bloków, w których można, powiedzmy, ustawić paletę kolorów dla całej witryny, ale potem ustawić mniejszą paletę kolorów i zupełnie inną paletę kolorów, na przykład dla bloku akapitu lub bloku przycisków. Zapewnia więc ogromną elastyczność, ale ustawienia określają, jakie funkcje są dostępne dla użytkownika w Edytorze lub w bloku.

Więc jeśli spojrzymy ponownie na kolor, tutaj zdefiniowaliśmy naszą paletę. Mamy kolor pierwszego planu, tło, a następnie podstawowy, czarny, biały i coś w rodzaju leśnej zieleni. A jeśli przejdziemy do Edytora, zobaczymy, że kiedy pojawi się nasz próbnik kolorów, mamy zdefiniowane kolory do wyboru przez użytkownika.

Przejdźmy teraz do stylu. Więc style są w zasadzie jak twój CSS. Tradycyjnie więc sumowałeś wszystkie swoje CSS w pliku styles.CSS lub w innej konfiguracji. Ale sekcja stylów w theme.JSON pozwala ustawić styl na poziomie bloku, a także na poziomie globalnym w całym motywie. Pomyśl o nich jak o ustawieniach domyślnych, prawda, ponieważ Edytor – chodzi o to, aby użytkownicy mogli się tam dostać i zacząć modyfikować i wprowadzać zmiany oraz projektować swoją witrynę tak, jak lubią, używając bloków.

Ale musi istnieć wartość domyślna, a te ustawione w sekcji stylów motywu. JSON to wartość domyślna. Mamy więc znowu globalne style, takie jak nasze globalne kolory, globalną typografię, a następnie możemy również ustawić style na poziomie bloków. Rzecz w stylach globalnych polega na tym, że ustawiamy kolor tła naszego motywu. Tutaj ustawialibyśmy rozmiary czcionek dla naszych nagłówków, różne opcje typografii dla linków, tekstu, nagłówków i tym podobne rzeczy. Na poziomie bloku możemy zrobić to samo, ale specjalnie dla bloków.

Jedną z fajnych rzeczy w sekcji ustawień, o której właśnie mówiliśmy, jest to, że za każdym razem, gdy tworzysz ustawienie, WordPress zdefiniuje zmienną. Więc kiedy patrzyliśmy na tę paletę kolorów, zdefiniowaliśmy tło, pierwszy plan i podstawowy. WordPress faktycznie wygeneruje zmienną, która odwzorowuje ten kod szesnastkowy, niezależnie od tego, jaki kod szesnastkowy jest ustawiony dla podstawowego, pierwszego planu, tła.

W stylach możemy użyć tych zmiennych do zdefiniowania stylów zarówno dla stylów globalnych, jak i na poziomie bloków. Zaletą tego jest to, że jeśli użytkownik kiedykolwiek zmieni kolor tła, przejdzie on przez specyfikację stylu w pliku theme.JSON. Teraz, jeśli spojrzymy na sekcję bloków, tutaj mamy nasz blok przycisków, i mamy to od projektanta motywu.

Chciałem, aby moje przyciski miały domyślny kolor zielony z białym tekstem. Możesz zobaczyć, że w sekcji kolorów bloku przycisków definiujemy kolor tła jako podstawowy, czyli leśną zieleń, a naszym tekstem jest tło, które jest białe. Możemy więc używać tych zmiennych w całym pliku theme.JSON do definiowania stylów dla naszych bloków i dla samej witryny.

Wiąże się to z globalnymi stylami, o których wspomniałem wcześniej. Wracając do Edytora witryny, jeśli klikniemy na to małe dwukolorowe kółko u góry, otworzymy nasz globalny panel stylów. Dużo się tu dzieje, więc zrobię krótką demonstrację, jak to działa. Ale wiedz, że zachęcam do pobrania motywu 2022 lub innego motywu blokowego i prawdziwego odkrywania globalnych stylów.

A jeśli wskoczymy tutaj i spojrzymy na kolory, klikniemy na to, teraz możemy zobaczyć, że jest tam paleta kolorów, ta, która jest dostarczana przez motyw, a także niektóre różne elementy, takie jak nasze tło, tekst i linki . Teraz w tym panelu, na który patrzymy tutaj, edytujemy globalne elementy witryny. Na przykład rozmawialiśmy o tle strony. Na razie jest biały. Więc jeśli kliknę Tło, mogę wejść tutaj i zobaczyć, że jest zaznaczone jako białe. To jest kolor, który ustawiliśmy w pliku theme.JSON.

Ale co, jeśli naprawdę podoba mi się ten brzoskwiniowy kolor? Cóż, jednym kliknięciem mogę kliknąć i gotowe. Naszym kolorem tła naszej strony jest teraz brzoskwinia. Daje to użytkownikowi niespotykaną dotąd kontrolę nad całkowitą modyfikacją witryny w celu dostosowania jej do potrzeb. Ale znowu, theme.JSON zapewnia domyślne ustawienie, że jako twórca motywów udostępniasz użytkownikowi, a on może go stamtąd zabrać.

To był bardzo krótki przegląd edycji całej witryny, Edytora witryny i motywów blokowych. Ale chcę poświęcić trochę czasu i porozmawiać o moich przemyśleniach na temat przyszłości nowoczesnych motywów. Kiedy więc myślimy o nowoczesnych motywach, uważam, że nowoczesne motywy będą kładły nacisk na projekt, a nie na rozwój. Teraz możesz pomyśleć, cóż, projektowanie motywów zawsze dotyczy projektowania.

Ale jeśli wrócisz pamięcią do tradycyjnego rozwoju motywu, trzeba było wykonać wiele rzeczywistego kodowania. Wszystkie pliki szablonów były PHP, co wymagało znacznej wiedzy na temat WordPressa, a także programowania w PHP, aby zrobić to dobrze. Cóż, to trochę się zmienia. Widzimy, że teraz dzięki Edytorowi możesz projektować motywy bezpośrednio w interfejsie użytkownika Edytora witryny i tradycyjnego edytora.

I to będzie odgrywać główną rolę w sposobie, w jaki projektujemy motywy. Jestem więc rzecznikiem programistów WP Engine, aw naszym zespole budujemy eksperymentalny motyw o nazwie Frost. A kiedy tworzymy nowy wzór lub chcemy zmodyfikować szablon, nie wchodzimy w pliki i nie poprawiamy plików. Wchodzimy do Edytora witryny lub do Edytora i modyfikujemy ten wzorzec, budujemy wzorzec lub budujemy szablon. A potem jesteśmy z tego zadowoleni, następnie eksportujemy to, a następnie umieszczamy w motywie.

Więc tak naprawdę nie kodujemy. Właściwie wszystko robimy wizualnie. Korzyścią z tego jest to, że wiemy, że użytkownik, ludzie, którzy będą używać motywu, będą tam również poprawiać wzór lub szablon. Dlatego sensowne jest, aby podczas tworzenia motywu wykonać ten sam proces, co użytkownik, aby użyć motywu, co moim zdaniem jest po prostu magiczne.

A to doprowadzi do metody tworzenia motywów o niskim kodzie lub nawet bez kodu. Teraz oczywiście jesteśmy na konferencji programistów, prawda? A więc mówimy o braku kodu i niskim kodzie. Ale moja ostatnia uwaga, porozmawiamy o tym, gdzie moim zdaniem leży rozwój. Ale myślę, że to naprawdę ekscytujące, ponieważ przyciągnie to nową generację użytkowników, ludzi, którzy chcą zbudować własny motyw, dostosować go, ale może nie znają PHP, może nie znają JavaScript .

Mogą to wszystko teraz zrobić w edytorze witryny, co moim zdaniem jest rodzajem etosu WordPressa, demokratyzującego publikowanie. I myślę, że redagowanie całej witryny naprawdę dąży do tego. Szczerze mówiąc, w ciągu ostatnich dwóch lat lub ostatniego roku widzieliśmy takie postępy w zakresie edycji całej witryny. Robi się całkiem ekscytująco. Dlatego naprawdę wierzę, że edycja całej witryny to przyszłość tradycyjnego WordPressa.

Teraz może nie być dla wszystkich. Chcę, żeby to było bardzo jasne. I jest jeszcze dużo rozwoju, który jest nadal potrzebny. Więc kiedy mówimy o różnych typach ludzi korzystających z WordPress, mamy wszystko, od standardowego użytkownika aż po agencje. A agencje mogą chcieć zapewnić swoim klientom bardzo przejrzysty, bardzo uporządkowany interfejs, z którego będą mogli korzystać i pracować na swoich stronach internetowych. To może nie być edycja całej witryny. Myślę, że to w porządku.

Ale jak widzimy w gospodarce, mamy Squarespace, Wix i Element lub inne narzędzia do tworzenia stron. Istnieje ogromny kontyngent społeczności internetowej użytkowników, którzy chcą narzędzia, które umożliwi im edycję i zaprojektowanie własnej witryny. I myślę, że WordPressa naprawdę brakowało w WordPressie, zwłaszcza w Core. I myślę, że taki jest cel edycji na całej stronie i to jest pewnego rodzaju obietnica edycji na całej stronie.

Więc dużo do zrobienia. Wciąż mnóstwo do zrobienia. Wciąż jest wiele rzeczy, które musimy wymyślić, a mianowicie rzeczy takie jak responsywne sterowanie i jak ograniczyć różne komponenty interfejsu użytkownika, aby niektórzy użytkownicy nie zepsuli projektów ani nie zmodyfikowali rzeczy, których nie powinni. Więc jeszcze wiele rzeczy do odkrycia.

Ale jednym z obszarów, który moim zdaniem jest naprawdę ekscytujący, jest opracowywanie edycji na całej stronie. Teraz, gdy mamy to narzędzie, które pozwala użytkownikom zaprojektować własny motyw lub zaprojektować własną witrynę, musimy zacząć myśleć o tym, jak możemy przenieść to na wyższy poziom. Jako programiści, jak możemy na tym bazować? Jeśli wrócimy do tradycyjnego WordPressa, weźmy ekran widżetów – ogólnie widżety. WordPress zapewniał bardzo podstawowy poziom widżetów i funkcjonalności, a programiści tworzyli wszelkiego rodzaju rozszerzenia.

I myślę, że ten sam pomysł należy zastosować do edycji całej witryny. W tej chwili istnieje bardzo niewiele rozszerzeń i wtyczek, jeśli w ogóle, które naprawdę wykorzystują pełną edycję witryny i przenoszą ją na wyższy poziom. WordPress będzie kontynuował iterację edycji całej witryny i dojdzie do punktu. Ale nigdy nie zrobi wszystkiego, czego wszyscy chcą, i myślę, że nadszedł czas, aby poważnie zająć się edycją całej witryny i zacząć myśleć o sposobach, w jakie możemy zbudować na tym jako programiści i naprawdę przenieść to doświadczenie do następnego poziom.

Wzywam więc wszystkich do wyjścia, zbadania Gutenberga, wypróbowania motywu 2022 i zainstalowania go oraz rozpoczęcia nauki tworzenia bloków. Istnieje niewiarygodna ilość możliwości dla bloków niszowych. I spróbuj zbudować własny motyw. Spróbuj wziąć rok 2022. Spróbuj go zmodyfikować. Spróbuj zbudować motyw podstawowy. To naprawdę przyjemne i jest tak duży potencjał w tych rzeczach.

Więc chcę się na tym zatrzymać i podziękować za przybycie. A zanim pójdę, chcę porozmawiać o kilku zasobach, które moim zdaniem są naprawdę ważne, zwłaszcza jeśli chodzi o tę prezentację, jeśli jesteś nowy w edytowaniu całej witryny i chcesz dowiedzieć się więcej. Więc znowu możesz oczywiście mnie śledzić. Cały czas o tym tweetuję.

Ale jest kilka zasobów. Więc pierwszy to Mróz. Nawiązywałem do tego wcześniej. Jest to więc temat, który budują relacje programistów WP Engine. I jest to produkt eksperymentalny. Nie powinienem mówić produkt. To eksperyment, w którym próbujemy go wykorzystać do edukowania społeczności, jak budować motywy blokowe. Uczymy się po drodze. Po drodze wprowadzamy wiele zmian i aktualizacji, starając się być na bieżąco z WordPressem, ale jest to świetne źródło informacji. I jeszcze raz temat 2022 – fantastyczne miejsce do rozpoczęcia i nauki.

Następnie chcę podłączyć Learn WordPress. To jest nauka.wordpress.org. Zespół szkoleniowy w wordpress.org wykonuje dużo pracy, próbując edukować i udostępniać publicznie wiele z tych koncepcji. Więc jeśli jesteś zainteresowany i chcesz dowiedzieć się więcej, to fantastyczne miejsce. Mamy tam warsztaty i różnego rodzaju treści, w tym przestrzenie do nauki społecznościowej. Odbywają się one co tydzień, podczas których rozmawiamy na różne tematy, szczegółowo omawiamy, jak zakodować blok, jak zbudować motyw blokowy – i tak dalej.

A potem, oczywiście, jeśli jesteś zainteresowany rozwojem, zawsze zaczynaj od podręcznika edytora bloków. Od tego zacząłem i jest tak wiele wspaniałych zasobów. I wreszcie Gutenberg. Jeśli nie znasz Gutenberga, zachęcam do zapoznania się z Gutenbergiem, zwłaszcza jeśli interesuje Cię rozwój WordPressa. Jest to świetne miejsce do zagłębienia się, zbadania, jak budowana jest edycja całej witryny, jak budowane są różne bloki i jak można to zastosować we własnych przepływach pracy.

Więc bardzo dziękuję za obecność. Mam nadzieję, że wiele z tej prezentacji wyciągnąłeś z tej prezentacji i zachęcamy Cię do dalszego odkrywania możliwości edytowania całej witryny. Dzięki wielkie.