Wprowadzenie do motywów blokowych WordPress

Komponenty składające się na typowy motyw WordPressa nie zmieniły się zbytnio na przestrzeni lat. Do tego stopnia, że ​​współzałożyciel projektu Matt Mullenweg zażartował, że oldschoolowy motyw Kubricka (wydany w 2005 roku) nadal działa z nowoczesnymi wersjami systemu zarządzania treścią.

Jasne, twórcy motywów wykorzystali własne dodatki. Widzieliśmy wszystko, od złożonych interfejsów użytkownika ustawień po zintegrowane kreatory stron. Ale u podstaw motywy zachowały spójną strukturę. To znaczy do czasu wprowadzenia motywów blokowych.

Motywy blokowe mają stać się przyszłością WordPressa. Zmienią sposób, w jaki budujemy i utrzymujemy strony internetowe. Ponadto są one ściślej zintegrowane z edytorem bloków Gutenberga niż ich „klasyczne” odpowiedniki.

Zastanawiasz się, o co to całe zamieszanie? Dzisiaj przedstawimy Ci podstawy motywów blokowych WordPress. Po drodze zbadamy, jak porównują i kontrastują z tradycyjnymi motywami. Zacznijmy!

Dlaczego blokować motywy?

Przez pierwsze kilka lat swojego istnienia edytor bloków był przede wszystkim narzędziem do stylizowania i budowania treści. W połączeniu z klasycznym motywem oznaczało to, że strony i posty mogą być tworzone zgodnie z życzeniem twojego serca.

Jeśli chodzi o wprowadzanie zmian, które wpływają na cały motyw, WordPress Customizer pozostaje głównym zasobem. To narzędzie zapewnia dostęp do ustawień projektu i układu, które zostały udostępnione przez autora motywu. Jeśli nie ma go w Customizer, prawdopodobnie będziesz musiał zagłębić się w kod.

Jednak jednym z kluczowych założeń edytora bloków było stworzenie bardziej ujednoliconego interfejsu w panelu WordPress. Widzieliśmy już, jak to się dzieje, gdy ekran widżetów został przeniesiony do interfejsu użytkownika opartego na blokach. Customizer po prostu nie pasuje do tej formy.

Wprowadzenie pełnej edycji witryny (FSE) jest kolejnym krokiem w tym procesie. To nie tylko stylizacja naszych stron i postów. Teraz każdym aspektem projektu motywu (nagłówek, stopka, szablony stron itp.) można zarządzać bezpośrednio w WordPressie.

Motywy blokowe służą jako brama do tej funkcjonalności. W związku z tym są budowane wyłącznie z myślą o blokach.

Wewnętrzne działanie motywu blokowego WordPress

Nie ma mnóstwa podobieństw między motywami klasycznymi i blokowymi. Ale obaj mają zestaw podstawowych zasad, które kierują ich makijażem. Jeśli miałbyś pobrać motyw blokowy i poruszać się po jego strukturze plików, kilka kluczowych kontrastów może się wyróżniać.

Pliki szablonów to HTML, a nie PHP

W klasycznym motywie znajdziesz pliki szablonów o nazwach takich jak index.php i header.php . Motywy blokowe usuwają PHP i zamiast tego mają rozszerzenie pliku .html .

Wewnątrz plik szablonu zawiera kombinację kodu HTML i znaczników blokowych. Na przykład spójrzmy na ten szablon z oficjalnej dokumentacji WordPressa:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

Znaczniki blokowe bardzo przypominają komentarze HTML. Ale zawiera składnię do wywoływania określonych bloków w szablonie. Witryna WordPress Full Site Editing zawiera przydatne odniesienie, które zawiera znaczniki dla każdego domyślnego bloku.

A jeśli ten typ kodu wydaje się znajomy, być może widziałeś coś podobnego w widoku edytora kodu Gutenberga.

Korzystanie z folderów

Motywy klasyczne mogą przechowywać szablony w folderach, ale nie jest to konieczne. Motywy blokowe wymagają kilku podfolderów:

/parts
Zawiera elementy wielokrotnego użytku, takie jak nagłówek, stopka i pasek boczny.

/templates
Domy szablony dla różnego rodzaju treści. Elementy takie jak strony, archiwa postów i pojedyncze posty to typowe przykłady. Zwróć uwagę, że ich konwencja nazewnictwa jest zgodna z hierarchią szablonów WordPress – kolejne podobieństwo do klasycznych motywów.

Jednym z pozytywnych efektów ubocznych tego układu jest to, że motywy będą lepiej zorganizowane. Posiadanie standardowej struktury folderów oznacza mniej czasu spędzonego na poszukiwaniu konkretnego pliku.

Stylizacja Theme.json

Plik theme.json służy do przypisywania domyślnych ustawień do edytora bloków. Oznacza to między innymi, że możliwe jest ustawienie domyślnych palet kolorów, typografii i odstępów. Ustawienia mogą dotyczyć całej witryny lub być stosowane do określonych bloków.

Ponieważ theme.json automatycznie wygeneruje odpowiedni kod CSS na podstawie jego konfiguracji, może nie być konieczne wypełnianie pliku style.css motywu tak bardzo. W tym scenariuszu arkusz stylów służy do zdefiniowania kilku podstaw, podczas gdy wszystko inne opiera się na tym nowomodnym pliku.

Tworzenie i edytowanie szablonów

WordPress od dawna zapewnia możliwość edytowania plików szablonów motywu bezpośrednio na pulpicie nawigacyjnym. Często się do tego odradzano, ponieważ nawet drobny błąd w kodowaniu mógł uniemożliwić dostęp do strony internetowej. Nie wspominając o możliwości nadpisania zmian, gdy motyw jest aktualizowany (jest to część powodu używania motywu potomnego). Niektórzy programiści całkowicie wyłączają tę funkcję, aby uniknąć nawet odległej szansy na katastrofę.

Ale motywy blokowe dotyczą edycji w desce rozdzielczej. Szablony dołączone do motywu można modyfikować za pomocą edytora bloków, a także można tworzyć nowe szablony niestandardowe.

Jak można się spodziewać, w tym scenariuszu kod jest całkowicie opcjonalny. Wszystko można edytować za pomocą nowego edytora witryny ( Wygląd > Edytor – wymagany WordPress 5.9 lub nowszy ), który zastępuje starszy Customizer po aktywowaniu motywu blokowego. Podobnie jak strony lub posty, Edytor Witryny korzysta ze znanego interfejsu użytkownika edytora bloków.

I to nie wszystko. Wszelkie zmiany wprowadzone w WordPressie można wyeksportować. Umożliwiłoby to korzystanie z niestandardowego motywu blokowego na wielu stronach internetowych.

To obniża barierę wejścia dla tych, którzy chcą dostosowywać, a nawet tworzyć motywy. Teraz podstawowe oko do projektowania i praktyczna znajomość bloków może prowadzić do niestandardowej strony internetowej.

O czym należy pamiętać

Zanim zanurkujesz i przełączysz wszystkie swoje witryny na motywy blokowe, powinieneś wiedzieć o kilku rzeczach.

Motywy blokowe to przede wszystkim rodząca się technologia . Nie wszystkie funkcje zostały sfinalizowane, a niektóre najlepsze praktyki wymagają dopracowania. Ponadto dopiero zaczynamy dostrzegać, jak te motywy działają w środowisku produkcyjnym. Spodziewaj się kilku zmian w miarę rozwoju rzeczy.

Jeśli tworzysz witryny dla klientów i chcesz zachować pewną elastyczność w przyszłości, motywy hybrydowe mogą być interesujące. Pozwalają na korzystanie z funkcji FSE przy zachowaniu struktury PHP klasycznego motywu. Możesz nawet zmodernizować istniejący motyw, aby korzystać z tej funkcji.

Wreszcie, motywy blokowe nie oznaczają końca klasycznych motywów – przynajmniej nie w dającej się przewidzieć przyszłości. Dzięki temu przejście na ten nowy sposób tworzenia tematów nie musi być natychmiastowe. Można na przykład poeksperymentować z blokami w lokalnym środowisku, jednocześnie opierając się na ulubionych klasycznych motywach w produkcji.

Blokuj zasoby tematyczne

Jeśli chcesz dowiedzieć się więcej o motywach blokowych WordPress, dostępnych jest kilka wyjątkowych zasobów. Oto kilka naszych ulubionych:

• Dokumentacja motywu blokowego autorstwa WordPress
• Motyw Blockbase firmy Automattic
• Pełna edycja witryny autorstwa Carolina Nymark
• The Ultimate Guide to WordPress Block Templates in Gutenberg autorstwa Richa Tabora
• Rewolucja motywów blokowych WordPress po cichu nabiera rozpędu autorstwa Justina Tadlocka
• Eksperymenty tematyczne WordPress autorstwa WordPress