Jak zbudować stronę za pomocą Gutenberga w WordPressie

Pod koniec 2018 roku miłośnicy WordPress dostały długo oczekiwaną odnowę dla swego systemu. Tym razem praca nad nową wersją 5.0 trwała ponad 2 lata, co było związane między innym z wprowadzeniem Gutenbergu. Jest to wizualny kreator, który zastąpił wcześniejsze rozwiązanie bazujące się na edytorze TinyMCE.

Dzięki temu możecie Państwo nie tylko dodawać zawartość, lecz także tworzyć całe strony za pomocą metody „Przyciągnij i Upuść”. Mówiąc w prosty sposób obecnie dla dodania strony na WordPress nie musicie Państwo edytować kod. Wystarczy wybrać potrzebne bloki i za pomocą myszki umieścić ich na stronie. Oprócz tego każdy blok ma swoje unikatowe opcje. To pozwala w lekki sposób zmodyfikować elementy na stronie według własnych potrzeb.

Jednak nowa funkcjonalność systemu została negatywnie podejrzana przez jego użytkowników. Dodam tylko, że moja pierwsza znajomość z tym edytorem nie była zachwycająca.

Wcześniej pracowałem z innymi edytorami dla WordPress, w tym Elementorem. Mają one nie tylko dużo więcej opcje, lecz także posiadają wygodniejszy interfejs oraz szybciej działają. Ale warto zauważyć, że te edytory istnieją na rynku już od kilku lat. Dlatego one były dopracowane przez zespoły twórców.

Oprócz tego inne użytkownicy przygotowały szereg rozszerzeń do popularnych edytorów. Gutenberg na pewno czeka podobna historia. Przynajmniej spodziewam się na to. 🙂

W dzisiejszym artykułu nie chcę chwalić Gutenberga (chociaż jestem sympatykiem tego rozwiązania). Lepiej pokażę jak wygląda tworzenie prostej strony na zasadzie tego edytora. Więc jeśli planujecie aktualizować WordPress do wersji 5.x i zacząć pracę z Gutenbergiem, ten temat na pewnie się przyda.

Najpierw zaczniemy z motywu. Musicie Państwo upewnić się, że on jest kompatybilny z Gutenbergiem. Jeśli Pańska strona funkcjonuje od kilku lat i wasz motyw nie był zaktualizowany po wydaniu WordPress 5.0, z dużym prawdopodobieństwem templatka nie wspiera nowy edytor. Także warto zauważyć, że przejście na nową wersję systemu także jest ryzykowne.

Więc przed podjęciem takiej decyzji warto zrobić kopię zapasową strony! Wtedy w razie awarii witryny będą Państwo mogły jej odnowić. W moim przypadku skorzystam się ze standardowego motywu Twenty Nineteen, który został wydany razem z nową wersją WordPress. Jak mogliście Państwo zrozumieć on jest na 100% kompatybilny z Gutenbergiem.

A teraz przejdę do tworzenia strony za pomocą nowego edytora. Dlatego w panelu administracyjnym wybieram sekcję Strony – Dodaj nową (rys. 1).

Okno edytora Gutenberg

Otworzy się nowe okno edytora, które jest podzielone na 3 obszary:

1. Obszar główny, który znajduje się po centrum. Tutaj dodajemy naszą zawartość.
2. Obszar po prawej stronie oraz panel boczny. W nim znajdziecie ustawienia dotyczące strony oraz wybranego bloku.
3. Obszar górny także jest dodatkowym panelem. Na nim znajdują się przyciski dotyczące dodania bloków, cofania zmian, zapisania zmian, podglądu strony i jej publikacji.

Dlatego aby dodać pierwszy element (w Gutenbergu to się nazywa blok) na stronę warto kliknąć przycisk (+). On jest dostępny na panelu górnym oraz pojawia się na obszarze głównym po najechaniu myszką na blok z tekstem „Proszę zacząć pisać aby wybrać typ bloku”. Klikając po tym przycisku otworzy się nowe okno z dostępnymi blokami do wyboru (rys. 2).

Dodanie nowego bloku na stronę

Na początku wybieram okładkę, do której wstawię obrazek tematyczny (rys. 3).

Dodanie bloku Okładka

Obrazek, który planuję dodać mam w bibliotece, dlatego podłączam go z tego źródła.

Dodanie obrazku do Okładki

Jak widać z rynku 4 na panelu bocznym pojawiły się dodatkowe opcje dla personalizacji tego bloku. Każdy blok ma swoje ustawienia, które możecie Państwo poznać po bliższym zapoznaniu z elementami edytora.

Do okładki dodam tekst powitalny i wybiorę nakładkę o kolorze czarnym (w przejrzystości 60%), aby trochę przyciemnić obrazek. Dalej wybiorę położenie okładki na stronie. W moim przypadku to pełną szerokość (rys. 5).

Personalizacja Okładki

Następnie dodam trochę informacji o sobie. Warto zauważyć, że każdy nowy akapit to osobny blok. Na poniższym rysunku podałem przykład jak wygląda dodanie nagłówku (rys. 6).

Dodanie nagłówku na stronę

Poniżej nagłówku dodałem blok, który się nazywa Media i tekst. Za jego pomocą można razem połączyć obrazek i zawartość tekstową (rys.7).

Dodanie nagłówku na stronę

A teraz stworzę 2 kolumny (niestety standardowa funkcjonalność Gutenberga nie pozwala tworzyć 3 i więcej kolumn) do których dodam informacje o oferowanych kategoriach produktów. Zrobię to w taki sposób: do każdej kolumny dodam okładkę i podłączę obrazek tematyczny oraz odpowiedni tekst (rys. 8).

Dodanie okładek do kolumn

Dalej dodam przyciski, które będą prowadziły do tych kategorie produktów. Odpowiedni blok można znaleźć wśród dostępnych elementów Gutenberga (rys. 9).

Dodanie przycisków do kolumn

Jak widać z rysunku 9 jeden przycisk zrobiłem niebieskiego koloru, a inny – bordowego. Oprócz tego można zmieniać kolor tekstu oraz styl przycisków.

No i na sam koniec dodam jeszcze akapit tekstowy i wideo z YouTube. Warto dodać, że Gutenberg zawiera wygodne widgety do podłączenia różnej zawartości z zewnętrznych źródeł. Wystarczy wybrać odpowiedni widget i dodać link. W moim przypadku to YouTube (rys. 10).

Dodanie wideo na stronę

Po dodaniu odnośnika wideo będzie załadowane na stronę (rys. 11).

Dodanie wideo na stronę

A teraz można opublikować wpis i sprawdzić jak on wygląda (rys. 12).

Strona stworzona za pomocą Gutenbergu

Jak widać z rysunku wszystko wygląda fajnie. Oczywiście można jeszcze pozmieniać rozmiary oraz połażenie bloków, aby wszystkie one były umieszczone po centrum. No i poprawić błędy w pisownie. 🙂 Ale to już drobiarski. Główny ceł został osiągnięty. Stworzyłem pierwszą stronę na Gutenbergu w krótki czas i nie dodałem żadnej linijki kodu. Dlatego można powiedzieć na pewno, że ten edytor jest ciekawszy za TinyMCE, który używał się wcześniej.

I chociaż obecnie Gutenberg nie zawiera tyle opcje jak inne edytory dla WordPress, ale znaczniej uprasza tworzenie stron i dodawanie zawartości w trybie witalnym. A jeśli wyniknie potrzeba użyć nowe bloki, można skorzystać z płatnych lub darmowych wtyczek dla podanego edytora. Ich liczba cięgle rośnie. 😉

Jeśli w końcu zdecydowaliście przejść na WordPress 5.x i użyć Gutenberg na pewno będą Państwo potrzebowały funkcjonalnego motywy? Wybrałem ciekawe motywy WordPress z ofert TemplateMonster, które są całkiem kompatybilne z nowym edytorem. Zapraszam więc do ich przejrzenia.