Motywy blokowe w WordPressie: Kompleksowy przewodnik teoretyczny

Motywy blokowe w WordPressie to potężne narzędzie do samodzielnej pracy nad własną stroną. Z łatwością edytujesz każdą część strony, zrobisz to bez znajomości języków programowania! Zapoznaj się z pojęciami i najważniejszymi funkcjonalnościami, jakie przynosi ta nowość w WordPressie.

Spis treści

Typy motywów w WordPressie

Możemy wyróżnić trzy typy motywów w WordPressie.

Motyw klasyczny

Motyw klasyczny (classic theme) – to typ, który do tej pory był jedynym sposobem na stworzenie własnego wyglądu strony. Wszystko odbywa się poprzez stworzenie folderu wraz z odpowiednią zawartością w folderze /wp-content/themes na serwerze. Do stworzenia takiego motywu wymagana była znajomość procesu tworzenia motywu od strony technicznej, podstaw programowania w PHP czy znajomości HTML i CSS. Edytowanie poszczególnych szablonów stron odbywa się poprzez edytor kodu. Wymagana jest podstawowa znajomość funkcji i struktury WordPressa oraz umiejętność korzystania z dokumentacji technicznej.

Motyw blokowy

Motyw blokowy (block theme) – to rodzaj motywu, który umożliwia użytkownikowi łatwe tworzenie unikalnego bloga czy strony, nawet przy minimalnej znajomości systemu WordPress. Nie jest wymagana znajomość żadnego języka programowania. Wszystkie czynności wykonamy w edytorze WordPressa (Gutenberg). Od strony technicznej to nie jest nic nowego — dalej korzysta z tych samych pojęć takich jak hierarchia szablonów czy functions.php. Szablony czy wzorce tworzymy jako pliki HTML, w których umieszczamy kod bloków (w formie komentarza HTML).

Motyw hybrydowy

Motyw hybrydowy (hybrid theme) – to nieoficjalny typ (stworzony przez społeczność WordPressa), który tak naprawdę jest motywem klasycznym z wybranymi funkcjonalnościami motywu blokowego, np. globalne style czy szablony bloków. Taki motyw spotkamy, kiedy będziemy chcieli uaktualnić nasz starszy motyw i dodać nowe funkcjonalności motywu blokowego, bez przepisywania całości.

Różnica pomiędzy motywem a szablonem w WordPressie

Zacznijmy od wyjaśnienia różnicy pomiędzy motywem a szablonem. Znajomość tych zagadnień pomoże w procesie tworzenia stron na WordPressie.

Motyw to zestaw plików, które tworzą wygląd w WordPressie. Zawiera pliki PHP, HTML, CSS oraz skrypty JavaScript. To on definiuje, jak wygląda nasza strona oraz jakie funkcjonalności posiada. Motyw wybieramy w panelu administracyjnym Wygląd > Motywy.

Szablon to plik motywu, który definiuje wygląd oraz strukturę stron w WordPressie. Możemy wyróżnić takie szablony jak: strona główna, archiwa, pojedynczy wpis, podstrona, podstrona wyszukiwania. Jest to część motywu.

Motyw potomny i nadrzędny. Sposoby tworzenia skórek.

Motyw nadrzędny (parent theme)

Motyw nadrzędny to główny motyw, który wykorzystywany jest jako niezależna skórka do WordPressa lub jako baza dla skórek potomnych. Zawiera on wszystkie wymagane pliki takie jak szablony wszystkich podstron, style, pliki funkcyjne.

Motyw potomny (child theme)

Motyw potomny to motyw, który nie wymaga do działania wszystkich plików skórki. Wystarczy plik style.css i functions.php (wymagany do poprawnego działania nowych styli). Wykorzystuje on pliki motywu nadrzędnego. Często wykorzystywany jest do nadpisywania czy rozszerzenia skórki nadrzędnej. W przypadku aktualizacji motywu nadrzędnego zmiany w motywie potomnym pozostaną.

Wprowadzenie do motywów blokowych

Motyw blokowy umożliwia edytowanie strony czy bloga przez panel administracyjny WordPressa. Nie jest wymagana znajomość żadnego języku programowania, HTML czy CSS. Edytor Gutenberg, który zagościł na początku jako edytor wpisów, rozwinął skrzydła i został wykorzystany również do edycji całej strony. Gutenberg to edytor, którego głównym założeniem jest budowanie treści z bloków.

Poniżej pierwszy widok edytora. Panel boczny wraz z nawigacją, która zawiera odnośniki do nawigacji, styli, stron, szablonów i wzorców.

Kliknięcie prawy sektor strony, gdzie znajduje się treść, spowoduje otwarcie edytora stron. Kolejny panel boczny zawiera wszystkie opcje dostępne dla danego elementu, który kliknęliśmy. W tym przypadku nagłówek artykułu posiada m.in. opcje zmiany koloru tekst oraz tła, zmiany typografii, dostosowanie wypełnień oraz marginesów. Dodatkowo można dostosować układ bloku. Do każdego bloku możemy dodać swój własny CSS poprzez kod lub dodanie klasy CSS (następnie kod CSS można zaimportować w plikach motywu).

Interfejs graficzny jest intuicyjny, co pozwoli każdemu na edytowanie własnej strony bez przeszkód.

Zalety i wady motywów blokowych

Każda technologia czy narzędzie ma zalety i wady. Poniżej moje spostrzeżenia.

Zalety:

Możliwość edycji całej strony poprzez panel administracyjny bez znajomości języków programowania.
Intuicyjny interfejs graficzny i ogromna ilość opcji.
Możliwość definiowania własnych wzorców, bloków, które mogą być wykorzystanie w każdym miejscu.
Dostępna jest opcja wyeksportowania motywu WordPress (doskonała opcja do testowania skórki na innej instalacji WordPress).
Zastępuje popularne „page builder” takie jak Elementor czy Divi, przez co nie mamy nadmiarowego kodu HTML.
Nie trzeba instalować tyle pluginów, ponieważ motyw blokowy dostarcza wiele funkcjonalności sam w sobie.
Przyszłościowe rozwiązanie. Motywy blokowe będą rozwijane i wspierane w najbliższej przyszłości przez WordPressa.

Wady:

Zaprogramowanie szablonów i całego motywu w edytorze kodu może nie być takie łatwe, ponieważ dokumentacja jest słaba i ciężko znaleźć kod do poszczególnych bloków. Konfigurowanie za pomocą pliku theme.json również nie należy do najprzyjemniejszych. Lepiej wyklikać i wyeksportować motyw z WordPressa
Wymaga zaznajomienia się z wszystkimi opcjami i strukturą całego edytora strony. Warto wiedzieć, co należy gdzie edytować, żeby nie robić tej samej pracy kilkukrotnie np. edytowanie poszczególnych elementów zamiast elementów globalnych.

Na tę chwilę zalety zdecydowanie przeważają nad wadami. Nie widzę powodu, żeby nie używać motywów blokowych w WordPressie. Co więcej, uważam, że to przyszłość WordPressa.

Poznaj możliwości motywu blokowego.

Zarządzanie treścią i wyglądem strony w jednym miejscu

Za pomocą edytora strony masz możliwość edytowania każdego elementu m.in. stopki strony, nagłówka strony, nawigacji, szablonów stron, wzorców (czyli elementów wielokrotnego użytku), globalnych styli czy nawet poszczególnych elementów. Wszystko, co widzisz, możesz edytować.

Globalne style dla wszystkich elementów

W tej sekcji będziesz w stanie edytować globalne style dla całej strony. Dzięki temu, masz pewność, że wszystkie elementy, typografia czy bloki będą wyglądały identycznie na całej stronie.

Typografia strony

Kolory dla całej witryny

Globalny układ

Style dla wszystkich bloków

Edycja szablonów

W tym miejscu masz dostęp do wszystkich szablonów, które możesz edytować. Łatwo zmienisz wygląd dla strony głównej bloga czy pojedynczego wpisu. Możesz dodać szablon dla zdefiniowanego obszaru np. strona głównej czy strony lub stworzyć swój własny szablon, który możesz zastosować dla dowolnego wpisu lub strony.

Wzorce — predefiniowane bloki

Wzorce to predefiniowane bloki, które możesz wykorzystać w każdym miejscu swojej witryny. Motyw Twenty Twenty Four zawiera wiele gotowych wzorców takich jak stopka witryny, sekcja z tekstem oraz obrazkiem, oraz wieloma innymi. Możesz stworzyć swój własny wzorzec. Na devpebe.com dodałem swój własny wzorzec „Spisu treści”, który wykorzystuję w każdym wpisie. Zaletą predefiniowanych bloków jest fakt, że wygląd i układ jest zsynchronizowany i w przypadku zmiany wyglądu, aktualizuje się na każdej podstronie.

Łatwe edytowanie treści, dzięki blokom i edytorowi Gutenberg

Edycja treści w WordPressie i motywie blokowym to zaledwie kilka kliknięć. Do zmiany układu czy wyglądu danego elementu należy wybrać element, a następnie dzięki dostępnym opcjom w panelu po prawej stronie lub w panelu przy bloku zmienić interesujące nas ustawienia.

Dodawanie bloków jest ekstremalnie proste. Wystarczy najechać poniżej wybranego bloku i kliknąć ikonę „+”. Pojawi się panel podręczny, w którym możemy szybko wybrać interesujący nas blok. Możemy również przeglądać wszystkie dostępne bloki (w tym wzorce i media).

Eksportowanie motywu poprzez panel administracyjny

Dzięki opcji eksportowania motywu możemy go pobrać i zainstalować na dowolnym WordPressie. Opcja ta pozwoliła mi na przetestowanie skórki na lokalnym środowisku i przeniesienie jej w łatwy sposób na produkcyjną wersję bloga. Sprawdzi się jako doskonały sposób na kopię bezpieczeństwa, zanim wprowadzisz zmiany.

Skróty klawiszowe przyśpieszą pracę

W edytorze dostępne są skróty klawiszowe, które przyśpieszą Twoją pracę. Wykonasz szybki zapis artykułu czy otworzysz paletę poleceń. Najczęstszymi używanymi skrótami przeze mnie są zapisywanie artykułu czy otwarcie podręcznego menu dodawania bloku.

Podsumowanie

W niniejszym artykule zgłębiliśmy świat motywów blokowych w WordPressie, nowej funkcji, która zdynamizowała proces projektowania stron internetowych. Po omówieniu podstawowych koncepcji, takich jak różnice pomiędzy motywem a szablonem oraz typami motywów dostępnych w WordPressie, skupiliśmy się na zrozumieniu motywów blokowych.

Motywy blokowe oferują niezrównaną elastyczność w edytowaniu witryny za pomocą intuicyjnego interfejsu Gutenberg. Ich zalety, takie jak możliwość edycji całej strony bez znajomości języków programowania, bogaty interfejs graficzny, czy przyszłościowe podejście do rozwoju, sprawiają, że stanowią one kuszącą opcję dla wielu użytkowników WordPressa.

Warto jednak pamiętać, że proces konfiguracji może wymagać pewnego zaznajomienia się z funkcjami edytora, co stanowi jedną z niewielu wad tej nowej technologii.

Podsumowując, motywy blokowe stanowią obiecującą przyszłość WordPressa, przynosząc zaawansowane możliwości projektowania stron, jednocześnie pozostawiając pole do manewru dla użytkowników bez specjalistycznej wiedzy programistycznej.