WordPress Gutenberg Samouczek dla użytkowników

Maddy Osman Ostatnia aktualizacja 05.01.2021
.
. 11 Min.
Gutenberg-Przewodnik
Ostatnia aktualizacja 05.01.2021

Jeśli myślisz o zbudowaniu strony internetowej z WordPress , prawdopodobnie słyszałeś o Gutenberg . Gutenberg jest edytorem dla WordPress , który został wydany 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  Samouczek 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 mogę ci obiecać jedno: Po tym poradniku będziesz wiedział, jak tworzyć profesjonalne layouty dla swoich stron internetowych za pomocą Gutenberg .

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 nowego w edytorze bloków Gutenberg ?

Zanim zagłębimy się konkretnie w tutorial WordPress Gutenberg , spójrzmy 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. 

Podczas gdy znajomość HTML nie była niezbędna do korzystania z klasycznego edytora, często trzeba było przejść do widoku HTML, aby dokonać jakichkolwiek zmian. W przeciwnym razie, aby dodać do witryny proste funkcje, takie jak tabele czy galerie obrazów, trzeba było zainstalować oddzielną stronę Plugin .

WordPress  Gutenberg  Samouczek dla użytkowników

Dzięki Gutenberg możesz zaprojektować swoją stronę nie za pomocą tekstu, ale za pomocą 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, dla akapitów - i dla prawie każdego innego elementu, który chcesz mieć na swojej stronie.

WordPress  Gutenberg  Samouczek dla użytkowników

Gutenberg jest teraz domyślnym edytorem bloków w WordPress i jest dostarczany z wieloma blokami out-of-the-box. Możesz także dodać WordPress Plugins , który da ci jeszcze więcej bloków, aby łatwo osadzić różne funkcje w swoich postach i stronach. 

WordPress Gutenberg Tutorial

Kiedy budujesz strony internetowe, nigdy nie zaszkodzi uprościć przepływu pracy. Gutenberg może zaoszczędzić Ci wiele czasu. Najwyższy więc czas, aby przyjrzeć się bliżej edytorowi bloków WordPress . Najpierw omówmy razem podstawy strony Gutenberg.  

Jak korzystać z Gutenberg

  1. Utwórz nowy wpis na blogu jak zwykle w WordPress . 
  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 jest to! Tylko aby zrozumieć jak działają poszczególne bloki, dostosować je i pogrupować, wymaga to trochę więcej wyjaśnień. Dojdziemy do tego w dalszej części naszego poradnika WordPress Gutenberg . 

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

Teraz, gdy podstawy mamy już za sobą, zagłębmy się w specyfikę edytora bloków WordPress . Kiedy po raz pierwszy ładujesz ekran edytora strony lub postu z Gutenberg , edytor wygląda dość pusto - nawet bardziej niż klasyczny edytor, ponieważ brakuje tradycyjnych opcji menu. Nie szkodzi. 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  Samouczek dla użytkowników

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

Dostępnych jest wiele bloków, w tym

  • Obcasy
  • Zdjęcia
  • Nagłówki
  • Słuchaj
  • Tabele
  • Separator
  • Galeria
  • Przyciski
  • Filmy wideo
  • Pliki audio 

Jeśli zainstalowałeś Plugins z niestandardowymi blokami, pojawią się one również na tej liście. 

Alternatywnie można dodać blok klikając na czarny znak plusa: Pojawia się to po kliknięciu w projekcie, gdzie jest napisane "Napisz coś lub wpisz, aby zablokować wybór". 

WordPress  Gutenberg  Samouczek 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  Samouczek dla użytkowników

2. Zmień układ klockó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  Samouczek 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  Samouczek dla użytkowników

Jednak po prawej stronie ekranu pojawi się również dodatkowe menu. Kliknij na zakładkę"Ustawienia".  

WordPress  Gutenberg  Samouczek 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  Samouczek 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 WordPress Gutenberg tutorial. Zaoszczędzisz sobie wiele czasu i wysiłku, zapisując bloki, które możesz ponownie wykorzystać w przyszłych postach, stronach i innych witrynach WordPress .

WordPress  Gutenberg  Samouczek 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ć również 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  Samouczek dla użytkowników

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

WordPress  Gutenberg  Samouczek dla użytkowników

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

WordPress  Gutenberg  Samouczek dla użytkowników

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

WordPress  Gutenberg  Samouczek dla użytkowników

Można również eksportować bloki wielokrotnego użytku do wykorzystania na innych stronach internetowych. Wystarczy kliknąć na trzy kropki obok bloku, wybrać Eksportuj jako JSON i pobrać plik. 

WordPress  Gutenberg  Samouczek 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  Samouczek 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 Importuj z JSON. Gdy to zrobisz, powinieneś mieć do nich dostęp jak zwykle z zakładki Reusable w menu Blocks

Ułóż klocki w grupy

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żna zgrupować blok wezwania do działania w mediach społecznościowych z blokiem zawierającym ikony udostępniania społeczności owego. Możesz także zgrupować blok akapitu z blokiem przycisku, aby utworzyć standardowe CTA, które możesz wstawić na końcu swoich postów. 

Aby utworzyć grupę bloków za pomocą edytora blokówGutenberg , zaznacz wszystkie bloki, które chcesz zgrupować. Następnie kliknij ikonę warstw po lewej stronie małej nakładki menu:

WordPress  Gutenberg  Samouczek dla użytkowników

Pojawia się nowe menu z napisem"Transform to", kliknij na Group. To wszystko. Teraz możesz przesuwać i regulować te bloki tak, jakby były jednym. 

Nadal można dokonywać zmian w ustawieniach poszczególnych bloków. Na przykład, można 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 przycisk Ungroup (Odgrupuj).

WordPress  Gutenberg  Samouczek 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óry został użyty do uzyskania dostępu do menu Blok . Wybierz zakładkę Wzory

WordPress  Gutenberg  Samouczek 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  Samouczek dla użytkowników

Kolejną zaletą Wzorców Blokowych jest to, że pozwalają one na łatwiejsze przełączanie się pomiędzy Themes przełączać się między nimi. Ponieważ formatowanie jest związane z samymi blokami, nie ma na nie wpływu inna strona Theme . 

Jeśli chcesz tworzyć własne wzory bloków ręcznie, 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  Samouczek dla użytkowników

Dodaj dodatkowe bloki do Gutenberg

Zanim będziemy kontynuować ten WordPress Gutenberg tutorial, powinieneś wiedzieć, że istnieje kilka Plugins , które pozwalają na dodanie jeszcze więcej typów bloków do edytora, w tym

  • 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  Samouczek dla użytkowników

Pierwotnie planowano utworzenie podkatalogu dla pojedynczego bloku Plugins. Zamiast tego, bieżący katalog jest podsekcją standardowego katalogu Plugin w WordPress z przeszukiwalną listą bloków Plugins. 

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 Themes . Więc jeśli chcesz użyć konkretnego Theme i podoba Ci się jego wygląd, prawdopodobnie nie będziesz mógł go dostosować lub użyć Gutenberg w nim. Jeśli spróbujesz, rezultatem jest często po prostu bałagan. 

Cóż, Gutenberg jest kompatybilny z niektórymi Themes , 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 Theme nie są jeszcze dostępne na stronie Gutenberg , będziesz musiał zadowolić się tym, co Gutenberg kompatybilne Themes oraz tym, jakie bloki i bloczki Plugins są dostępne. 

Theme Zasoby dostępne do wykorzystania na Gutenberg rosną w stałym tempie - ale to nie czyni Gutenberg budowniczym. 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. 

Uwagi końcowe: przewodnik po stronie WordPress Gutenberg 

Edytor Gutenberg jest teraz częścią rdzenia WordPress . Zespół programistów stojący za WordPress ma wobec niej wielkie plany. W końcu będziesz mógł tworzyć menu nawigacyjne z Gutenberg , tworzyć pełne układy stron, a Gutenberg będzie kompatybilny z jeszcze większą ilością Themes . 

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. 

Więc śmiało: skorzystaj z porad zawartych w naszym samouczku WordPress Gutenberg i zacznij dostosowywać zawartość swojej strony. I upewnij się, że Twoja strona działa z optymalną prędkością dzięki WordPress stronie planu hostingowego z RAIDBOXES z optymalną prędkością. 

WordPress Gutenberg Redaktor: Wasze pytania

Co sądzisz o edytorze WordPress Gutenberg ? Jakie masz pytania do Maddy? Zapraszamy do skorzystania z funkcji komentarza. Chcesz więcej wskazówek na temat WordPress ? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Maddy Osman jest SEO Content Strategist. Współpracuje z wybranymi klientami w WordPress i sektora hostingowego. Z doświadczeniem w projektowaniu stron internetowych i WordPress , ma głębokie zrozumienie SEO - i wie dokładnie, jak połączyć marki z treściami odpowiednimi dla SEO.

Powiązane artykuły

Komentarze do tego artykułu

Jaworowicz WP
Jaworowicz WP

Ś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 obowiązkowe oznaczone są *.