Jak zbudować motyw blokowy: 4 najlepsze metody w 2023 r

Opublikowany: 2023-08-22

Jeśli dopiero zaczynasz przygodę z tworzeniem motywów WordPress, być może zastanawiasz się, jak zbudować motyw blokowy. Od czasu wprowadzenia edytora bloków sposób budowania motywów WordPress zmienił się, aby go dostosować.

Jeśli porównasz motyw klasyczny, np. Twenty Seventeen, z motywem blokowym, np. Twenty Twenty Three, zobaczysz wiele różnic.

dwadzieścia siedemnaście:

dwadzieścia dwadzieścia trzy:

Główna różnica polega na tym, że w klasycznych motywach strony internetowe są renderowane dzięki szablonom PHP. W motywie blokowym są one renderowane za pomocą bloków, szablonów HTML (w folderach części i szablonów) oraz wzorców bloków PHP (w folderze wzorców).

Możesz także zauważyć, że motyw bloku nie ma functions.php ; jest to opcjonalne w motywach blokowych. Istnieje plik style.css , ale jest on pusty poza nagłówkiem. Zamiast tego kolory i typografia motywu są obsługiwane w pliku theme.json .

W tym poście przyjrzymy się, jak zbudować motyw blokowy, abyś mógł zrozumieć, jak to jest korzystać z nowego doświadczenia WordPress Site Editor.

📚 Spis treści :

Po co budować motyw blokowy?
Jak zbudować motyw blokowy za pomocą Podręcznika motywów
Jak zbudować motyw blokowy za pomocą FullSiteEditing.com
Używanie motywu Blockbase jako punktu wyjścia
Jak zbudować motyw blokowy za pomocą wtyczki Utwórz motyw blokowy

Po co budować motyw blokowy?

👉 Budowanie motywu blokowego ma kilka zalet, a mianowicie:

Motywy bloków ładują tylko style potrzebne dla bloków renderowanych na stronie, co poprawia wydajność.
Motywy blokowe nie wymagają ręcznego kolejkowania arkuszy stylów.
Zamiast korzystać z funkcji add_theme_support() , plik theme.json obsługuje aspekty specyficzne dla motywu, takie jak niestandardowe logo.
Nie ma potrzeby pisania dodatkowego kodu, aby zaimplementować funkcje ułatwień dostępu (np. przechodzenie do treści, nawigację za pomocą klawiatury i punkty orientacyjne). Tworzone są automatycznie.
Użytkownicy mogą dostosować kolory i typografię motywu i bloków.
Użytkownicy nie muszą znać kodu, aby edytować wszystkie części swojej witryny.

Jak zbudować motyw blokowy za pomocą Podręcznika motywów

Podręcznik motywów WordPress zawiera dobry przegląd motywów blokowych z porównaniem ich z motywami klasycznymi. Motywy blokowe są obsługiwane od czasu wprowadzenia WordPress 5.9. Czasami są one również nazywane motywami do edycji pełnej witryny ( chociaż od tego czasu WordPress odszedł od terminologii edytora pełnej witryny ).

Aby rozpocząć tworzenie motywu blokowego, potrzebujesz pliku style.css i pliku templates/index.html . Plik theme.json jest opcjonalny, ale zdecydowanie zalecany.

Poniżej przedstawiono przykładową strukturę motywu.

Jak zbudować motyw blokowy: Foldery i pliki struktury motywu blokowego.

Plik theme.json zawiera ustawienia stylu motywu, w tym kolor, typografię, układ i odstępy. Kontroluje także organizację części szablonu na stronie (nagłówek, stopkę itp.) i umożliwia definiowanie niestandardowych szablonów stron i stylów globalnych.

Edytor witryny daje Ci pełną kontrolę nad projektem Twojej witryny. Aby z niego skorzystać, musisz mieć aktywny motyw blokowy na swojej stronie. WordPress zawiera kilka elementów, ale możesz znaleźć ich więcej, przechodząc do Wygląd > Motywy > Dodaj nowe i filtrując według motywów blokowych . Najedź kursorem na żądany motyw i kliknij przycisk Instaluj , aby go zainstalować, lub przycisk Aktywuj , aby stał się aktywnym motywem.

Filtrowanie nowych motywów według motywów blokowych.

Następnie przejdź do Wygląd > Edytor, aby aktywować Edytor witryny.

Do zmiany szablonów motywów można użyć interfejsu edytora bloków. Oto przykład zmiany szablonu 404 w Twenty Twenty Three:

A oto przykład edycji części szablonu Post Meta w Twenty Twenty Three:

Modyfikowanie części szablonu meta posta.

Możesz także edytować style motywu, wybierając szablon lub część szablonu i klikając ikonę Style półksiężyca. Oto przykład edycji palety kolorów za pomocą panelu Style :

Tekst w szablonach lub częściach szablonów w plikach HTML nie podlega tłumaczeniu. Jeśli chcesz, aby Twój motyw był możliwy do przetłumaczenia, musisz utworzyć blok wzorców PHP. Przykład podano na stronie Internacjonalizacja podręcznika tematów blokowych.

Możesz użyć Edytora witryny, aby dostosować istniejący motyw i wyeksportować zmiany jako nowy motyw. Aby uzyskać pełną obsługę motywów, zaleca się użycie WordPressa w wersji 6.0 lub nowszej. Przydatne może być także pobranie danych testowych jednostki motywu w celu utworzenia motywu bloku.

Opcja eksportu jest dostępna podczas edycji szablonu motywu lub części szablonu. Zaznacz trzy kropki , a następnie wybierz Eksportuj .

Twój motyw będzie miał taką samą nazwę jak motyw aktywny. Dlatego zanim zainstalujesz motyw w witrynie, powinieneś zmienić nazwę pliku ZIP na nową nazwę motywu. Będziesz także musiał zmienić nazwę motywu i domenę tekstową w pliku style.css, a także nazwę autora i linki w style.css i readme.txt .

👉 Możesz użyć narzędzia wyszukiwania i zamiany, aby zmienić następujące elementy:

Domena tekstowa w ciągach tłumaczeń
Przedrostki dla funkcji PHP
Ślimaki używane w bloku wzorów

Jak zbudować motyw blokowy za pomocą FullSiteEditing.com

Carolina Nymark ma świetne zasoby na temat motywów blokowych w witrynie FullSiteEditing.com, co czyni ją kolejnym doskonałym narzędziem do tworzenia motywów blokowych.

Prowadzi Cię przez proces tworzenia motywu blokowego od zera, zaczynając od utworzenia plików style.css , templates/index.html , theme.json functions.php . Aby skorzystać z samouczków, musisz zainstalować wtyczkę Gutenberg.

Dowiesz się więcej, postępując zgodnie z tutorialami i dodając podany kod, ale nie martw się, jeśli popełnisz błąd – możesz pobrać kod na GitHub.

Sekcja ustawień w theme.json to miejsce, w którym definiujesz ustawienia, takie jak kolory i typografia, a sekcja stylów to miejsce, w którym stosujesz je do motywu.

Theme.json jest zgodny z tym formatem:

 { "version": 2, "settings": { "color": {}, "typography": {} }, “styles”: {} }

Oto jak motyw wygląda po zdefiniowaniu kolorów i typografii w theme.json :

Motyw FSE z zastosowanymi kolorami i typografią.

Oto definicje kolorów w ustawieniach:

 "color": { "palette": [ { "slug": "primary", "color": "#111", "name": "Primary" }, { "slug": "secondary", "color": "#fefefe", "name": "Secondary" }, { "slug": "tertiary", "color": "#383838", "name": "Tertiary" }, { "slug": "quaternary", "color": "#00838f", "name": "Quaternary" }, { "slug": "quinary", "color": "#4fb3bf", "name": "Quinary" } ],

Oraz przykłady ich użycia w sekcji stylów:

 "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--secondary)" }, "elements": { "link" :{ "color": { "text": "var(--wp--preset--color--quinary)" } } },

Oto odniesienie w sekcji stylów do części szablonu nagłówka i stopki:

 "templateParts": [ { "name": "header", "area": "header", "title": "Header" }, { "name": "footer", "area": "footer", "title": "Footer" } ]

W późniejszych lekcjach szczegółowo zapoznasz się ze składnią pliku theme.json i pokażesz, jak:

Włącz i wyłącz palety kolorów, filtry duotone i gradienty
Ustaw kolory obramowania i łącza
Zastosuj kolory do elementów i bloków
Dodaj rodziny czcionek, w tym czcionki Google
Zdefiniuj rozmiary czcionek
Używaj płynnej typografii z Gutenbergiem
Włącz lub wyłącz wysokość linii
Wyłącz następujące elementy:
- opcja drop cap
- kontrola wagi czcionki
- kursywa
- zamiana tekstu na wielkie litery
- opcja odstępów między literami
- kontrolka dekoracji tekstu
Zdefiniuj szerokości treści
Włącz margines i dopełnienie
Ustaw blockGap (pionowy odstęp między blokami)
Dodaj lub wyłącz niestandardową skalę odstępów
Ustaw minimalną wysokość bloków treści grupowych i publikujących
Ustaw pozycję bloku grupy na lepką
Dodaj style aktywowania i ustawiania ostrości
Dodaj efekty cienia pudełkowego
Dodaj niestandardowy CSS
Wdrażaj globalne wariacje stylu
Filtruj theme.json za pomocą PHP
Modyfikuj odmiany stylu bloku

Możesz ustawić style globalnie lub dla każdego bloku. Aby wybrać właściwy blok, zapoznaj się z dokumentacją Core Block Reference.

Używanie motywu Blockbase jako punktu wyjścia

Motyw Blockbase to prosty motyw startowy, który można dostosować. Wymaga wersji PHP 5.7 lub nowszej oraz WordPress 6.1 lub nowszej.

Blockbase zawiera następujące szablony:

404
Archiwum
Pusty
Tylko stopka
Tylko nagłówek i stopka
Indeks
Strona
Szukaj
Pojedynczy

Oraz następujące części szablonu:

stopka
nagłówek
skoncentrowany na nagłówku
domyślny nagłówek
nagłówek-liniowy
nagłówek-minimalny
w całym nagłówku
post-meta
post-meta-ikony

Możesz użyć Edytora witryny, aby zmodyfikować te szablony i części szablonów lub edytować plik theme.json . Możesz także modyfikować typografię, kolory i układ, korzystając z opcji Style.

Modyfikuje to szerokość treści na 800 pikseli:

Jak zbudować motyw blokowy: Zwiększanie szerokości treści w motywie Blockbase.

A oto odmiana w stylu Ruby Wine:

Jak zbudować motyw blokowy: odmiana stylu Ruby Wine w motywie Blockbase.

A oto blok praw autorskich dodany do części szablonu stopki:

Jak zbudować motyw bloku: Blok praw autorskich dodany do stopki.

Po zakończeniu dostosowywania pamiętaj o wyeksportowaniu motywu i zmianie nazwy oraz domeny tekstowej.

W wyeksportowanym motywie kod stopki jest aktualizowany o dodany blok praw autorskich:

Jak zbudować motyw bloku: Zaktualizowana stopka Blockbase z blokiem praw autorskich.

Jak zbudować motyw blokowy za pomocą wtyczki Utwórz motyw blokowy

Inną metodą tworzenia motywu blokowego jest użycie wtyczki Create Block Theme stworzonej przez zespół WordPress.org.

Wymaga WordPressa w wersji 6.0 lub nowszej oraz PHP w wersji 7.0 lub nowszej. Aby móc korzystać z wtyczki, musisz mieć motyw blokowy jako aktywny motyw.

Po zainstalowaniu wtyczki przejdź do Wygląd > Utwórz motyw bloku i wybierz jedną z sześciu opcji (używam motywu Twenty Twenty Three):

Eksportuj dwadzieścia dwadzieścia trzy

[Eksportuj aktywowany motyw ze zmianami użytkownika]

Ta opcja tworzy nowy plik ZIP o nazwie dwadzieścia trzy. Aby używać go w witrynie, należy zmienić jego nazwę. W przeciwnym razie zostanie on zastąpiony, gdy pojawi się aktualizacja Twenty Twenty Three.

Stwórz dziecko Dwudziestu Dwudziestu trzech

[Utwórz nowy motyw potomny. Aktualnie aktywowany motyw będzie motywem nadrzędnym.]

Wtyczka udostępnia formularz do wypełnienia w celu utworzenia motywu.

Jak zbudować motyw blokowy: Formularz umożliwiający utworzenie motywu potomnego.

Klon dwadzieścia dwadzieścia trzy

[Utwórz nowy motyw, klonując aktywowany motyw. Powstały motyw będzie zawierał wszystkie zasoby aktywowanego motywu, a także zmiany użytkownika.]

Otrzymujesz ten sam formularz do wypełnienia, co w przypadku motywu potomnego.

Zastąp dwadzieścia dwadzieścia trzy

[Zapisz zmiany UŻYTKOWNIKA jako zmiany TEMATU i usuń zmiany UŻYTKOWNIKA. Twoje zmiany zostaną zapisane w motywie w folderze.]

Pamiętaj, że jeśli wybierzesz tę opcję, zmiany motywu zostaną nadpisane po jego aktualizacji.

Utwórz pusty motyw

[Wygeneruj szablonowy „pusty” motyw w katalogu motywów tej witryny.]

Wypełnij formularz swoimi dostosowaniami, a następnie aktywuj motyw po jego zbudowaniu. Twój motyw zawiera minimalną liczbę szablonów i części szablonów – tylko stronę indeksu, stopkę i nagłówek, które możesz dodawać i dostosowywać. Nie ma również zastosowanej stylizacji.

Pusty motyw stworzony przez Create Block Theme.

Utwórz odmianę stylu

[Zapisz zmiany użytkownika jako odmianę stylu Twenty Twenty-Three.]

Tworzysz odmianę, wypełniając pole Wariacja , a następnie naciskając przycisk Generuj .

Twoja nowa odmiana stylu jest widoczna w panelu Style Edytora witryny podczas edycji szablonu lub części szablonu.

Przeglądaj style dla Twenty Twenty Three.

Wybierz utworzoną odmianę stylu, a następnie przejdź do sekcji Kolory , aby edytować kolory i zastosować je do motywu.

Jak zbudować motyw blokowy: Ustawianie kolorów odmian w stylu różowym.

Zarządzanie czcionkami Google

Możesz dodawać lub usuwać czcionki we wtyczce Utwórz motyw bloku , przechodząc do Wygląd > Zarządzaj czcionkami motywu .

Lista pokazuje, jakich czcionek używasz. Aby usunąć rodzinę czcionek lub odmianę czcionki, kliknij łącze Usuń rodzinę czcionek lub Usuń .

Jak zbudować motyw blokowy: Zarządzaj czcionkami motywu.

Aby dodać nową czcionkę Google, kliknij przycisk Dodaj czcionkę Google . Wybierz żądaną czcionkę z menu rozwijanego i sprawdź żądane warianty czcionki. Następnie wybierz przycisk Dodaj czcionki Google do swojego motywu .

Jak zbudować motyw blokowy: Dodaj czcionki Google do swojego motywu.

Aby dodać czcionki lokalne, użyj przycisku Dodaj czcionkę lokalną i wyszukaj czcionkę, której chcesz używać w swoim systemie. Powinien być w .otf , .ttf , .woff lub . format pliku woff2 . Po zakończeniu kliknij przycisk Prześlij czcionkę do motywu .

Aby użyć nowych czcionek w motywie, wróć do panelu Style i wybierz typografię, którą chcesz zmienić. Z menu rozwijanego wybierz żądaną czcionkę.

Nowe czcionki zastosowane w nagłówkach w Twenty Twenty Three.

Kiedy skończysz, pamiętaj o zapisaniu zmian w motywie.

Oto jak zbudować motyw blokowy! 🚀

Dobrze zrobiony; teraz nauczyłeś się, jak zbudować motyw blokowy. Motywy blokowe są przyszłością WordPressa i otwierają możliwość dla niekodujących osób budowania własnej strony internetowej i dostosowywania jej za pomocą bloków.

Projektanci i programiści będą chcieli poznać składnię theme.json , aby stworzyć kolory motywu, typografię i opcje odstępów, a także skorzystać z wzorców blokowych, aby ułatwić tłumaczenie swoich motywów.

Czy nadal masz pytania dotyczące budowania motywu blokowego? Daj nam znać w komentarzach!