Gutenberg-Przewodnik

WordPress Gutenberg Tutorial dla użytkowników

Jeśli myślisz o stworzeniu strony internetowej w WordPressie, prawdopodobnie słyszałeś o Gutenbergu. Gutenberg to edytor dla WordPressa, który został udostępniony w wersji 5.0.  

Od czasu pierwszego wydania edytora bloków WordPress dodano do niego wiele funkcji, w tym grupowanie bloków i wzory bloków. Ale głównym powodem, dla którego Gutenberg jest tak popularny, jest to, że pozwala edytować posty i strony znacznie bardziej wizualnie niż standardowy edytor WordPress .

WordPress Gutenberg Tutorial dla użytkowników

Ten przewodnik zawiera:

  • Co to jest Gutenberg
  • kompletny przewodnik po stronie Gutenberg dla programistów
  • krótka lista różnych funkcji w Gutenberg

I już teraz mogę obiecać ci jedną rzecz: Po tym poradniku będziesz wiedział, jak używać Gutenberga do tworzenia profesjonalnych układów stron internetowych.

WordPress 5.6 jest wreszcie tutaj!

Najnowsza wersja WordPress koncentruje się na układzie i projektowaniu: zupełnie nowa Theme, dodatkowe opcje układu dla postów i stron oraz wzory bloków dla całej witryny. Wszystkie szczegóły można znaleźć w oficjalnej informacji o wydaniu oraz w przewodniku terenowymWordPress .

Co jest nowego w Edytorze bloków Gutenberga?

Zanim zagłębimy się w samouczek WordPress Gutenberg, przyjrzyjmy się najpierw, czym właściwie jest Gutenberg. 

Gutenberg zastępuje edytor TinyMCE i pozwala używać bloków treści, aby dodawać tekst, obrazy i inne media do swoich postów i stron. Klasyczny edytor TinyMCE był oparty na tekście - i ograniczał nowych użytkowników, którzy nie mieli umiejętności kodowania. 

Chociaż znajomość języka HTML nie była niezbędna do korzystania z klasycznego edytora, często trzeba było przechodzić do widoku HTML, aby dokonać jakichkolwiek zmian. W przeciwnym razie, aby dodać do swojej witryny proste funkcje, takie jak tabele czy galerie obrazów, musiałeś zainstalować osobną wtyczkę.

WordPress Gutenberg Tutorial dla użytkowników

Dzięki Gutenbergowi możesz zaprojektować swoją stronę nie za pomocą tekstu, ale obrazów. Dzięki edytorowi bloków WordPress Gutenberg możesz łatwo dodawać bloki treści do swoich stron i postów. Istnieją bloki dla obrazów, akapitów i prawie wszystkich innych elementów, które chcesz mieć na swojej stronie.

WordPress Gutenberg Tutorial dla użytkowników

Gutenberg jest obecnie domyślnym edytorem bloków w WordPressie i posiada wiele bloków w zestawie. Możesz też dodać wtyczki do WordPressa, które dadzą ci jeszcze więcej bloków, aby łatwo osadzić różne funkcje w swoich postach i stronach. 

WordPress Gutenberg Tutorial

Kiedy tworzysz strony internetowe, nigdy nie jest źle uprościć swój sposób pracy. Gutenberg może zaoszczędzić Ci wiele czasu. Najwyższy czas, abyśmy przyjrzeli się bliżej edytorowi bloków WordPressa. Po pierwsze, przejdźmy razem przez podstawy Gutenberga.   

Jak korzystać z Gutenberg

  1. Jak zwykle utwórz nowy wpis na blogu w WordPressie. 
  2. Kliknij na niebieski znak plusa w lewym górnym rogu. 
  3. Wybierz blok, który chcesz umieścić w swoim poście. 
  4. Dostosuj ustawienia bloku w projekcie postu. 
  5. Zmieniaj układ bloków, przeciągając je i upuszczając.

To wszystko! Tylko żeby zrozumieć, jak działają poszczególne bloki, jak je dostosowywać i jak je grupować, potrzebujesz trochę więcej wyjaśnień. Tym zajmiemy się w dalszej części naszego tutorialu WordPress Gutenberg. 

Szczegółowa instrukcja obsługi edytora bloków Gutenberg 

Teraz, kiedy mamy już za sobą podstawy, zajmijmy się szczegółami Edytora blokowego WordPressa.- Kiedy po raz pierwszy załadujesz ekran edytora strony lub postu używającego Gutenberga, edytor wygląda dość pusto - bardziej niż klasyczny edytor, ponieważ brakuje w nim tradycyjnych opcji menu.- To dobrze. Pierwszym krokiem jest dodanie kilku bloków. 

1. Dodaj bloki do swojego postu

Aby dodać blok do swojego postu, naciśnij znak plusa w lewym górnym rogu szkicu postu. Nowy blok jest nakładany z małym zestawem opcji menu. 

Skupimy się najpierw na menu głównym, a później omówimy, jak można dokonać dalszych zmian w menu pomocniczym.

WordPress Gutenberg Tutorial dla użytkowników

Możesz przeglądać typy bloków lub użyć paska wyszukiwania, aby znaleźć żądany typ bloku. Następnie dodaj blok, wpisując "/" i typ bloku. Na przykład, jeśli chcesz dodać obrazek, wpiszesz "/image".

Dostępnych jest wiele bloków, w tym

  • Akapity
  • Zdjęcia
  • Nagłówki
  • Listy
  • Tabele
  • Separator
  • Galeria
  • Przyciski
  • Filmy wideo
  • Pliki audio 

Jeśli zainstalowałeś wtyczki z niestandardowymi blokami, będą one również widoczne na tej liście. 

Możesz też dodać blok, klikając czarny znak plusa: Pojawia się on po kliknięciu w szkicu, gdzie jest napisane: "Napisz coś lub stuknij, aby wybrać blok". 

WordPress Gutenberg Tutorial dla użytkowników

Możesz też postępować zgodnie z instrukcjami w tekście i wpisać "/", aby wybrać z rozwijanej listy opcji.  

WordPress Gutenberg Tutorial dla użytkowników

2. Zmień układ bloków

Bloki można przenosić tam, gdzie mają się pojawić, używając strzałek na samym bloku lub naciskając kropki między strzałkami, aby przeciągnąć i upuścić bloki.

WordPress Gutenberg Tutorial dla użytkowników

Dzięki edytorowi bloków WordPress reorganizacja treści jest znacznie łatwiejsza niż w przypadku klasycznego edytora. Nie musisz się martwić o łamanie kodu, ponieważ wszystkie informacje o zawartości bloku (w tym czcionka, kolor i rozmiar) przenoszą się wraz z blokiem. 

Prostota, z jaką możesz układać swoje bloki, jest jedną z najlepszych cech Gutenberg Block Editor. Oszczędzasz czas na naprawianie zepsutego kodu i nie musisz polegać na kopiuj-wklej, aby wykonać pracę.

3. Dostosuj ustawienia stylu swojego bloku

Kolejnym krokiem w naszym tutorialu WordPress Gutenberg jest poznanie menu Ustawienia stylu. W niektórych przypadkach niektóre opcje pojawiają się w pobliżu bloku po kliknięciu na nie. Na przykład, jeśli edytujesz blok akapitu, tuż nad nim pojawią się znajome opcje. 

WordPress Gutenberg Tutorial dla użytkowników

Po prawej stronie ekranu pojawia się jednak dodatkowe menu. Kliknij zakładkę"Ustawienia".  

WordPress Gutenberg Tutorial dla użytkowników

Opcje ustawień stylu, które można dostosować, zależą od bloku. Na przykład ustawienia dla bloku Paragraph wyglądają inaczej niż ustawienia dla bloku Image.

WordPress Gutenberg Tutorial dla użytkowników

Menu Ustawienia stylu pozwala na łatwe dostosowanie bloków w twoich postach. Ponownie, w przeciwieństwie do klasycznego edytora, nie musisz się martwić o dokonywanie zmian w podpisie obrazu i bałagan formatowania tekstu bazowego. 

Tworzenie bloków edytora Gutenberg wielokrotnego użytku

Teraz przechodzimy do zaawansowanych wskazówek zawartych w tutorialu WordPress Gutenberg. Oszczędzasz wiele czasu i wysiłku, zapisując bloki, które możesz wykorzystać w kolejnych postach, stronach i innych witrynach WordPressa.

WordPress Gutenberg Tutorial dla użytkowników

Bloki wielokrotnego użytku są przydatne, gdy masz elementy, które muszą być regularnie dodawane do konkretnej strony lub typu postu. 

Załóżmy, że piszesz recenzje filmów i masz arkusz kalkulacyjny, który wyświetla Twoje rankingi dla każdego filmu. Chcesz, aby zawsze wyglądał tak samo, z określoną stylizacją i taką samą liczbą kolumn i wierszy. Jeśli stworzysz blok wielokrotnego użytku, możesz zaoszczędzić znaczną ilość czasu, odtwarzając go dla każdego postu. 

Zapisywanie stylów i różnych atrybutów elementów może być także prawdziwą oszczędnością czasu dla przycisków. 

Załóżmy, że potrzebujesz tego samego CTA (call-to-action) w każdym poście, który piszesz. Aby stworzyć przycisk wielokrotnego użytku, zacznij od przejścia przez typowy proces dodawania bloku przycisku. Dostosuj stylizację i tekst, aż będzie wyglądał tak, jak chcesz.  

WordPress Gutenberg Tutorial dla użytkowników

Następnie kliknij trzy kropki w menu bloków i wybierz opcję Dodaj do bloków wielokrotnego użytku

WordPress Gutenberg Tutorial dla użytkowników

Tutaj możesz nadać nazwę swojemu nowemu blokowi. 

WordPress Gutenberg Tutorial dla użytkowników

Jeśli chcesz ponownie wykorzystać ten blok, przejdź do menu"Bloki zwykłe", przełącz się na zakładkę"Wielokrotnego użytku" i wybierz swój zapisany blok. 

WordPress Gutenberg Tutorial dla użytkowników

Możesz także eksportować bloki wielokrotnego użytku do wykorzystania na innych stronach internetowych. Wystarczy kliknąć na trzy kropki obok bloku, wybrać opcję Eksportuj jako JSON i pobrać plik. 

WordPress Gutenberg Tutorial dla użytkowników

Następnie, aby dodać wyeksportowany blok wielokrotnego użytku do innej witryny WordPress , przejdź do zakładki Reusable w menu Blocks i wybierz Manage All Reusable Blocks. 

WordPress Gutenberg Tutorial dla użytkowników

Otwiera to bardziej tradycyjnie wyglądającą sekcję w WordPress Dashboard, gdzie możesz zarządzać wszystkimi stworzonymi przez siebie blokami wielokrotnego użytku. 

Jeśli masz zapisane bloki wielokrotnego użytku z innych stron internetowych, możesz je załadować, klikając przycisk Importuj z JSON. Gdy to zrobisz, powinieneś mieć do nich dostęp jak zwykle w zakładce Reusable w menu Blocks

Ułóż bloki w grupach

Kolejna porada Pro Tip w naszym tutorialu WordPress Gutenberg dotyczy grupowania bloków. Jeśli umieścisz dwa lub więcej bloków w grupie, możesz je regulować i manipulować nimi tak, jakby były pojedynczym blokiem. 

Na przykład możesz zgrupować blok wezwania do działania w mediach społecznościowych z blokiem zawierającym ikony udostępniania społeczności owego. Możesz również zgrupować blok akapitu z blokiem przycisku, aby stworzyć standardowe CTA, które możesz wstawiać na końcu swoich postów. 

Aby stworzyć grupę bloków za pomocą Edytora bloków Gutenberga, zaznacz wszystkie bloki, które chcesz pogrupować. Następnie kliknij ikonę warstwy po lewej stronie małego menu:

WordPress Gutenberg Tutorial dla użytkowników

Pojawi się nowe menu z napisem"Przekształćw", kliknij na Grupę. To wszystko. Teraz możesz przesuwać i regulować te bloki tak, jakby były jednym. 

W dalszym ciągu możesz dokonywać zmian w ustawieniach poszczególnych bloków. Na przykład możesz dodać tekst do bloku akapitu i zmienić jego wygląd. 

Jeśli chcesz odgrupować bloki, zaznacz grupę, a następnie kliknij na trzy kropki w menu nakładki. Przewiń w dół i kliknij Grupuj.

WordPress Gutenberg Tutorial dla użytkowników

Funkcja ta działa również z blokami wielokrotnego użytku. Po pogrupowaniu bloków możesz zapisać je jako bloki wielokrotnego użytku, postępując w ten sam sposób jak powyżej. 

Używanie wzorów bloków w edytorze bloków WordPress

Dzięki WordPress Block Patterns możesz tworzyć i udostępniać predefiniowane układy bloków. Dzięki Block Patterns możesz tworzyć złożone układy za pomocą kilku kliknięć myszką.

Aby uzyskać dostęp do Wzorów bloków, kliknij ten sam znak plusa, którego użyłeś, aby wejść do menu Bloków . Wybierz zakładkę Wzorce

WordPress Gutenberg Tutorial dla użytkowników

Na pierwszy rzut oka Block Patterns wyglądają podobnie do bloków wielokrotnego użytku. Wzorce blokowe są jednak najbardziej zbliżone do możliwości tworzenia całych stron w Gutenberg najbliżej. 

Dzięki Block Patterns możesz dodawać pełne sekcje układu do swoich postów lub stron za pomocą jednego kliknięcia. Są one idealne, jeśli chcesz utworzyć i zapisać układ do wykorzystania w wielu postach. 

Edytor bloków WordPress zawiera kilka wstępnie zaprojektowanych wzorów, w tym

  • wiele kolumn tekstowych
  • sąsiadujące przyciski
  • niestandardowe nagłówki
  • cytaty z obrazkami
WordPress Gutenberg Tutorial dla użytkowników

Kolejną zaletą Wzorów blokowych jest to, że pozwalają one na łatwiejsze przełączanie się między motywami. Ponieważ formatowanie jest związane z samymi blokami, nie ma na nie wpływu inny motyw.  

Jeśli chcesz ręcznie tworzyć własne wzory bloków, wymaga to pewnych umiejętności programistycznych. W podręczniku programowania są one nazywane predefiniowanymi układami bloków

Tworzenie wzorców blokowych od podstaw wymaga użycia interfejsu programowania aplikacji blokowych (API). Pomocny może okazać się jednak program Plugin Block Pattern Builder

WordPress Gutenberg Tutorial dla użytkowników

Dodaj dodatkowe bloki do Gutenberg

Zanim przejdziemy do tego tutorialu WordPressa Gutenberg, powinieneś wiedzieć, że istnieje kilka wtyczek, które pozwalają na dodanie do edytora jeszcze większej liczby typów bloków, m.in.

  • Spis treści
  • Cenniki
  • Google Maps
  • Formularze kontaktowe

Istnieje oficjalny katalog bloków WordPress, gdzie można znaleźć i dodać dodatkowe bloki dla Gutenberg. 

WordPress Gutenberg Tutorial dla użytkowników

Pierwotny plan zakładał utworzenie podkatalogu dla wtyczek pojedynczego bloku. Zamiast tego bieżący katalog jest podsekcją domyślnego katalogu wtyczek WordPressa z przeszukiwalną listą wtyczek opartych na blokach.  

Pełna edycja strony internetowej w Gutenberg

W chwili obecnej Gutenberg nie umożliwia jeszcze pełnej edycji strony. Jednak zespół programistów WordPress robi duże postępy w tym kierunku, w tym dodaje wzorce bloków. 

Obecnie istnieje eksperymentalna wersja Twenty Twenty Themes, która wykorzystuje pełną edycję strony i realizuje ideę bloku Themes

Dzięki edytorowi bloków WordPress możesz teraz tworzyć w pełni spersonalizowane układy oparte na blokach - ale tylko dla postów i stron. Po pojawieniu się pełnej edycji strony na Gutenberg , widgety stają się przestarzałe. Daje to użytkownikom pełną kontrolę nad każdym elementem układu, w tym nagłówkami, paskami bocznymi i stopkami. 

Chociaż edytor bloków Gutenberg nie jest jeszcze pełnoprawnym WordPress page builderem, jest na dobrej drodze, aby się nim stać. W międzyczasie, Wzorce bloków, jak wyjaśniono powyżej w WordPress Gutenberg Block Tutorial, zapewniają zestaw funkcji bardzo zbliżony do tego z pełnego edytora stron internetowych. 

Wady edytora Gutenberg 

Chociaż Gutenberg to przydatne narzędzie, które zmieniło sposób, w jaki wielu użytkowników korzysta z WordPress i tworzy treści, edytor nie jest pozbawiony wad. 

Na przykład, kiedy Gutenberg został po raz pierwszy wprowadzony, był dość zabugowany. Większość z tego została już naprawiona. 

Jednak jedną z rzeczy, która nie jest błędem, jest fakt, że Gutenberg jest nadal niekompatybilny z wieloma motywami. Jeśli więc chcesz używać konkretnego motywu i podoba ci się jego wygląd, prawdopodobnie nie będziesz mógł go dostosować ani używać Gutenberga. Jeśli próbujesz, rezultatem jest często po prostu bałagan. 

Cóż, Gutenberg jest kompatybilny z niektórymi motywami, ale nie na tyle, by móc pochwalić się powszechną kompatybilnością. 

Innym problemem, który Gutenberg wnosi do stołu jest fakt, że nie oferuje takiej samej elastyczności jak klasyczny edytor. Jasne, Gutenberg eliminuje niektóre z idiosynkratycznych problemów z formatowaniem, które występują w klasycznym edytorze - ale niestety jesteś ograniczony w typach stron, które możesz tworzyć. 

Ponieważ szersze opcje dostosowywania motywów nie są jeszcze dostępne w Gutenbergu, będziesz musiał zadowolić się motywami kompatybilnymi z Gutenbergiem oraz dostępnymi blokami i wtyczkami do bloków. 

Zasoby dostępne do wykorzystania Gutenberga rosną w stałym tempie - ale to nie czyni Gutenberga konstruktorem motywów. Jeszcze nie. 

Ostatecznie, Gutenberg jest idealnym wyborem dla tych, którzy są już przyzwyczajeni do page builderów lub czysto wizualnych edytorów i chcą zachować to doświadczenie, lub tych, którzy po prostu chcą skupić się na treści i zrobić projekt drag-and-drop. 

Końcowe przemyślenia: Przewodnik po WordPressie Gutenberg 

Edytor Gutenberg jest teraz częścią rdzenia WordPressa. Zespół odpowiedzialny za rozwój WordPressa ma wobec niego wielkie plany. W końcu będziesz mógł tworzyć menu nawigacyjne za pomocą Gutenberga, tworzyć pełne układy stron i Gutenberg będzie kompatybilny z jeszcze większą liczbą motywów. 

Do tego czasu możesz w pełni wykorzystać funkcje oferowane obecnie przez WordPress Block Editor i tworzyć atrakcyjne wizualnie posty i strony - bez znajomości ani jednej linii kodu. Całkiem niezły interes, jeśli o nas chodzi. 

Zatem śmiało: skorzystaj z porad zawartych w naszym tutorialu WordPress Gutenberg i zacznij dostosowywać zawartość swojej witryny. Upewnij się, że Twoja strona działa z optymalną prędkością dzięki planowi hostingowemu strony WordPress od Raidboxes.  

Edytor WordPress Gutenberg: Twoje pytania

Co sądzisz o edytorze WordPress Gutenberg? Jakie masz pytania do Maddy? Zachęcamy do korzystania z funkcji komentarzy. Chcesz poznać więcej wskazówek dotyczących WordPressa? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz Newsletter.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Jeden komentarz do: " WordPress Gutenberg Tutorial dla użytkowników"

  1. Świetny artykuł dla początkujących. Q Gutenberg jednak za moment zrobi się podobny bałagan co w Visual Composer – będzie dużo wtyczek dodających kolejne i niektóre strony (szczególnie te zrobione samodzielnie) będą miały ich dziesiątki dla jednego czy dwóch elementów.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.