Tworzenie motywów blokowych WordPress i edycja całego stosu

Jeśli ostatnio śledziłeś fora i wiadomości WordPress, z pewnością słyszałeś o edycji całej witryny (FSE), a przynajmniej widziałeś odniesienia do niej, takie jak tworzenie motywów blokowych. Nawet jeśli nie jesteś świadomy, co to jest, prawdopodobnie słyszałeś o tym, a może nawet zastanawiałeś się, co może to dla ciebie wiązać.

Niezależnie od tego, czy często korzystasz z WordPressa, czy jesteś programistą, mamy dla Ciebie świetną wiadomość. Prawdziwym kickerem jest to, że nie powinieneś się tego bać i że wszystko ułoży się dla ciebie dobrze, ułatwiając ci proces.

Na jakiej podstawie tak twierdzimy? Pierwsze jest pierwsze. Najpierw zrozummy trochę o kompletnej edycji witryny WordPress, zanim przejdziemy do tego, co omówiliśmy w tytule.

Edycja całej witryny WordPress (FSE) to…?

Zasadniczo edycja całej witryny pozwala uniknąć idei bloków. Wcześniej bloki mogły być używane do edycji obszaru zawartości witryny. Każda sekcja Twojej witryny będzie teraz uważana za blok podczas korzystania z edycji całej witryny.

Dzięki temu znacznemu ulepszeniu użytkownicy mogą teraz wchodzić w interakcje zarówno ze stroną, jak i elementami globalnymi na jednej platformie. Dodatkowo dodano nowe pliki konfiguracyjne motywów i narzędzia programistyczne.

Po zaktualizowaniu WordPressa do najnowszej wersji musisz włączyć motyw FSE, taki jak Twenty Twenty-Two. Następnie możesz użyć tylko bloków Gutenberga do zbudowania całej witryny.

Jak FSE może Ci pomóc?

Budowanie i rozwijanie witryny WordPress jest teraz łatwiejsze niż kiedykolwiek dzięki pełnej edycji witryny. Zarówno elementy globalne, jak i wszelkie aktualizacje strony można wykonać za pomocą tego samego edytora.

A elementy globalne, czym one są? Po przydzieleniu globalne elementy, kontenery i kolumny mogą być używane w całej witrynie.

Ta innowacyjna technika pozwala na edycję strony internetowej lub dowolnej konkretnej strony, co pozwala zaoszczędzić czas. Nie musisz przełączać się między edytorami, aby dowiedzieć się, co się dzieje, ponieważ podczas edycji możesz zobaczyć je wszystkie w czasie rzeczywistym. Wynik? Twoja strona internetowa poprawia się, gdy jednocześnie działasz na poziomie strony i globalnym.

Wersja WordPress 6.0 nie ma domyślnie włączonej funkcji FSE. Dlatego, aby korzystać z możliwości edycji całej witryny podczas korzystania z wersji WordPress starszej niż 6.0, musisz najpierw zaktualizować WordPress przed aktywacją motywu FSE. Pulpit nawigacyjny Twojej witryny to miejsce, w którym zajmujesz się tym wszystkim.

Środowisko WordPress znów ewoluuje

Tego typu zmiana w WordPressie miała miejsce w poprzednim okresie. Wszyscy znaliśmy Gutenberga jakieś trzy lata temu (trudno sobie przypomnieć, bo jeden, jeśli nie więcej, z tych ostatnich lat nagle zniknął). Możesz teraz odnosić się do niego jako do edytora bloków.

Jednak, gdy został początkowo włączony do rdzenia WordPressa, otrzymał kryptonim Gutenberg. Zmiana jest trudna. W ten sposób większość ludzi zareagowała jakimś szaleństwem. No, prawie wszyscy. Gutenberg dzisiaj, kilka lat później, jest postrzegany jako dość pomocny, często przyjemny w użyciu i stale się rozwijający. Dzięki temu jesteśmy przekonani, że ta zmiana zakończy się sukcesem. Ale zmiana jest bardziej znacząca niż wcześniej.

Przesunięcie ostrości: od użytkowników do budowniczych

Kiedy taki edytor bloków został wprowadzony po raz pierwszy, programiści zmienili sposób tworzenia materiału. Dla tych, którzy tworzyli posty na blogach, nie było to tak destrukcyjne, jak dla tych, którzy tworzyli strony internetowe i rozwijali strony internetowe. Przejście na bloki było korzystne dla użytkowników i pojawiło się wiele ekscytujących możliwości, takich jak możliwość zdefiniowania bloku materiału, a następnie dynamicznego umieszczania go w dowolnym miejscu (i wszędzie) na stronie. Teraz każdy może to zrobić bez użycia kodu.

Ale ta zmiana jest trochę wyraźna. Nie chodzi tylko o to, jak modyfikujesz swoją witrynę, co zmieniło się wraz z pełną edycją witryny. Ma to związek z podstawową strukturą Twojej witryny. Tutaj definiuje się nie tylko nagłówek lub stopkę. Dotyczy składników motywu. Innymi słowy, FSE ma ostatecznie przynieść korzyści użytkownikom, ale na razie bardziej przypomina nacisk na ulepszanie rzeczy dla twórców — zarówno tych, którzy tworzą strony internetowe, jak i tych, którzy tworzą motywy.

Niezależnie od tego, czy korzystałeś z kreatorów stron, tj. Realizowałeś projekt uruchomienia witryny z łatwą w użyciu platformą wśród najlepszych twórców witryn członkowskich, czy też je budowałeś, wielu z was przyzwyczaiło się do tej fazy życia. Twoje strony mogą być zaprojektowane w dowolny sposób. Ale później stajesz się świadomy problemów z wydajnością. Google obniżył twoje rankingi i stwierdził, że twój DOM jest zbyt duży (cokolwiek to było). Ponieważ wszyscy wiemy, że wydajność jest najważniejsza, teraz jest idealny moment, aby dowiedzieć się więcej o FSE i o tym, jak może on zmienić tworzone przez Ciebie strony internetowe.

Dlaczego więc tworzenie motywu całej witryny jest ważne?

Beaver Builder pojawił się przed Elementorem, pamiętasz? Wielu z Was wykorzystywało go samodzielnie lub w firmach, w których pracowałeś przy tworzeniu znaczących stron internetowych dla klientów biznesowych. Potrzebowali jednak innego produktu, Beaver Themer. W przeciwnym razie trzeba było zapewnić im pomoc w postaci motywu obsługującego niestandardowe (i dynamiczne) nagłówki i stopki, gdy trzeba było zmodyfikować nagłówek i stopkę stron internetowych (lub postów).

To było ekscytujące, gdy motywy takie jak Blocksy, Kadence i Astra zaczęły rozwijać te funkcje. Ale doprowadziło to również do pewnego zamknięcia. I rozpoznajesz, co dzieje się dalej: po zainstalowaniu wtyczki na swojej stronie internetowej klient dowiaduje się, że nie jest ona zgodna z motywem lub kreatorem stron.

Nagle wszyscy wskazują palcami. Firmy tematyczne twierdzą, że to nie one. Według twórców stron, to też nie oni. Zgadnij co? Nowi gracze w grze, firmy hostingowe, twierdzą, że to nie oni. Ostatecznie obwiniono budowniczych (wykonawców i agencje), którzy początkowo zbudowali tę witrynę.

To samo stało się, gdy użytkownicy zaczęli narzekać na to, jak wolno ładowały się te strony, dzięki kodowi wygenerowanemu przez te same kreatory stron. Agencje i freelancerzy spotykali się z krytyką.

Rozwiązanie

Ta zmiana motywów blokowych, które obsługują dostosowywanie całej witryny, stanowi fundamentalną zmianę w sposobie tworzenia witryn internetowych. Dzięki tej zmianie każdy element na stronie i w całej witrynie jest blokiem: treść, menu, paski boczne, nagłówki i stopki. Każdy blok. W rezultacie motywy mogą być lżejsze.

Motyw musi jeszcze wykonać kilka zadań, takich jak ujednolicenie uniwersalnej stylizacji bloków w całej witrynie czy naprawienie błędów typograficznych. Deweloperzy mogą to wszystko skonfigurować w nowym pliku themes.json. Ale służy nie tylko do ustalania parametrów. Jest to również sposób, w jaki programista może zmienić sposób, w jaki klient korzysta z edytora.

Ponadto motywy nie zawierają wielu elementów interfejsu użytkownika. Łatwo sobie wyobrazić, że następna iteracja tego, do czego jesteś przyzwyczajony – przy użyciu niestandardowego konstruktora – będzie sterowana przez konfigurator JSON w obecnej formie.

Krótko mówiąc, jest to przyszła generacja motywów i środki, dzięki którym ostatecznie będziesz w stanie ograniczyć to, co użytkownicy mogą osiągnąć dzięki takim nowym motywom.

Jak nadać temu wszystkiemu sens logiczny?

Nawet jeśli wydaje się to ekscytujące, większa trudność polega na ustaleniu, jak wszyscy to rozwiąże. Nikt nie chce opracować nowatorskiej koncepcji, która okazuje się dość prosta. Nikt nie chce stworzyć zupełnie nowego motywu, który irytuje użytkowników.

Pragniesz komfortu „wypróbowanego i prawdziwego” z siłą „nowego”. A pytań jest więcej niż rozwiązań…

Szukasz kursu dla programistów w zakresie integracji i motywów bloków konstrukcyjnych

Wyobraź sobie, że bierzesz udział w kursie, w którym szczegółowo wyjaśniono wszystko, co trzeba było zrozumieć, dotyczące tworzenia motywów blokowych i FSE. Oprócz innych, mamy na myśli następujące 14 punktów:

• Dowiedz się o edycji całej witryny, aby zobaczyć, jak wpływa to na tworzenie motywów.
• Utwórz szablon indeksu bare-bones, a następnie użyj bloków, aby pobrać posty z bazy danych.
• Bez kodowania ani jednej linii, zaimplementuj cały szablon domu bloga.
• Należy dodać nagłówki i stopki do motywu.
• Dowiedz się, jak edycja całej witryny traktuje menu nawigacyjne.
• Dowiedz się, jak wstępnie ustawić preferencje edytora bloków za pomocą pliku theme.json.
• Dowiedz się, jak korzystać z wbudowanych kontrolek wzoru, aby tworzyć wszechstronne układy.
• Używając theme.json, zastosuj uniwersalną typografię i schematy kolorów.
• Zarządzaj dopełnieniem i marginesami za pomocą kontrolek odstępów.
• Dowiedz się, jak skonfigurować edytor bloków, aby jego ustawienia były zgodne z motywem.
• Dodaj wybór czcionek, gradienty, palety kolorów i inne opcje dostosowywania.
• Aby ograniczyć zakres, w jakim Twoi klienci mogą różnić się od podstawowego projektu, dowiedz się, jak wyeliminować niepożądane opcje dostosowywania z bloków.
• Dowiedz się, jak stosować wzorce, aby pomóc Tobie i Twoim klientom szybciej tworzyć strony.
• Wykorzystaj elementy szablonu, aby zapobiec ponownemu używaniu komponentów blokowych w różnych szablonach.

To imponująca lista lekcji do nauczenia. Dobrą wiadomością jest to, że to nie szkolenie skupia się wyłącznie na przekazywaniu wiedzy. Zachęcamy do ubrudzenia sobie palców i paznokci podczas tego szkolenia. Praktyka czyni go idealnym.

I hej, nie musisz tego sobie wyobrażać, co jest wspaniałą wiadomością. Program jest tworzony. Wszystko gotowe. Chociaż nie był to zamierzony temat posta, ujawnimy go, ponieważ natknęliśmy się na niego podczas zbierania informacji do artykułu. Kurs stworzył Frank Klein, programista znany i ceniony przez specjalistów WordPressa.

Więc, chłopaki, powodzenia w motywach konstrukcyjnych i robieniu FSE!