Przewodnik krok po kroku do konstruktora Gutenberga dla WordPressa

Myślę, że zgodzisz się, kiedy powiem: cała ta sprawa Gutenberga jest myląca.


Po pierwsze, czy nowy edytor bloków jest trudny w użyciu? To znaczy, nie wiesz, gdzie poszły wszystkie twoje ulubione narzędzia. Prawdopodobnie tworzenie wpisu trwało dłużej, prawda?

Może dodanie linku (afiliacyjnego lub innego) rzuciło cię o jeden krzywa i poczułeś rozczarowanie. Być może masz problemy z dodaniem obrazu obok tekstu.

Być może próbowałeś dodać wiele kolumn, a rzeczy nie działały zgodnie z oczekiwaniami. Jeśli tak nie jest, być może nie możesz łatwo dodać plików PDF lub widzisz poważny komunikat „Aktualizacja nie powiodła się”.

Nie martw się już; Nie tak dawno byłem na twojej dokładnej pozycji, ale teraz uważam, że Gutenberg jest podekscytowany. Jest krzywa uczenia się, tak, ale pod koniec dzisiejszego postu będziesz myśleć o Gutenbergu inaczej.

Co to jest redaktor Gutenberg?

edytor WordPress Gutenberg

Patrzysz na Gutenberga, domyślnego edytora bloków WordPress

Jeśli używasz WordPress 5.0 i nowszych, musiałeś natknąć się na nowy i błyszczący edytor WordPress, znany jako Gutenberg.

I podobnie jak wielu innych użytkowników, chcesz skorzystać z rewolucyjnego edytora, ale wahasz się, ponieważ Gutenberg jest skomplikowane.

A może kiedy pierwszy raz spotkałeś Gutenberga, różne rzeczy nie działały. W końcu programiści byli i wciąż dostosowują kompozycje i wtyczki do edytora bloków.

Więc szybko wróciłeś do Klasyczny edytor, co, BTW, jest z nami w porządku. Pamiętaj tylko, że WordPress nie będzie obsługiwał Classic Editor po 2022 roku. Dodatkowo brakuje Ci wszystkich dodatkowych korzyści, jakie oferuje Gutenberg.

Pod względem funkcjonalności Classic Editor i Gutenberg robią to samo; oba narzędzia pomagają tworzyć treści bez kodowania.

Jednak jesteśmy tak przyzwyczajeni do starego edytora WYSIWYG, że dostosowanie do nowego interfejsu Gutenberga jest trochę obce, jeśli nie całkowicie mylące. Tak przynajmniej myślę.

Ale czym dokładnie jest Gutenberg?

Gutenberg to nowy domyślny edytor WordPress. W przeciwieństwie do tradycyjnego edytora wizualnego / tekstowego; Gutenberg używa bloków treści podobnie jak wiele współczesnych kreatorów stron.

Ma bardziej intuicyjne funkcje niż klasyczny edytor, co oznacza, że ​​możesz tworzyć treści multimedialne w locie. Teraz możesz szybko tworzyć niezwykłe układy, niezależnie od tego, czy pracujesz z postami lub stronami WordPress.

Dzięki kilku dodatkom Gutenberg może korzystnie konkurować z uznanymi twórcami stron WordPress, takimi jak Brizy, Elementor i Divi.

Jedyną wadą jest to, że twórcy stron często oferują więcej funkcji, ponieważ są to przede wszystkim twórcy stron! W tym samym czasie Gutenberg jest wciąż dość młody i można oczekiwać, że edytor bloków będzie rósł skokowo.

W dzisiejszym poście spędzimy ekscytujący czas, tworząc post WordPress z edytorem Gutenberga. Staram się opisywać każdy najmniejszy szczegół i funkcję, abyś mógł używać Gutenberga do tworzenia treści takich jak profesjonaliści.

Jesteś gotowy? Jeśli tak, utwórzmy ten post WordPress.

Jak utworzyć post WordPress za pomocą Gutenberga

Jeśli prowadzisz witrynę WordPress, prawdopodobnie tworzysz więcej postów niż stron. W poniższej sekcji tworzymy post WordPress w Gutenberg od podstaw. Mam nadzieję, że będziesz się dobrze bawić podczas testowania Gutenberga.

To na marginesie, przejdź do Posty> Dodaj nowe jak podkreślamy na zrzucie ekranu poniżej.

tworzenie nowego postu w Gutenberg

Takie postępowanie prowadzi prosto do pokazanego poniżej edytora Gutenberga.

edytor WordPress Gutenberg

Całkiem nieźle, co? Teraz zakasajmy rękawy i zabierzmy się do pracy.

Dodawanie tytułu

dodając nowy tytuł w Gutenberg

Nie możesz napisać posta bez solidnego tytułu. Dobrą rzeczą jest to, że Gutenberg sprawia, że ​​dodanie tytułu jest niezwykle łatwe.

Pierwszym blokiem, który widzisz, jest Tytuł u góry dokumentu, jak szczegółowo pokazano na powyższym obrazku. Aby utworzyć tytuł swojego wpisu, wpisz wewnątrz bloku. Proste jak A, B, C.

Chcesz edytować bezpośredni link? Możesz to łatwo zrobić w Tytuł zablokuj, klikając Edytować przycisk, jak pokazano poniżej.

edytuj bezpośredni link w Gutenberg

Po dodaniu tytułu kliknij WCHODZIĆ klawisz, aby rozpocząć nową linię. O tak, Gutenberg zachowuje natywną nawigację, którą kochałeś w klasycznym edytorze WordPress.

Dodawanie nowego akapitu

nowy blok akapitów w Gutenberg

Uderzenie w WCHODZIĆ Klawisz tworzy nowy Ustęp blok, jak pokazano powyżej. Przed wpisaniem dowolnego tekstu blok przedstawia kilka opcji. Zobacz numerowane zdjęcie poniżej, aby uzyskać więcej informacji.

nowe opcje bloku akapitów gutenberg

Notatki Możesz:

  1. Konwertuj nowy blok akapitu na dowolny inny blok, np. Obraz, nagłówek, okładkę, galerię, WooCommerce, formularz itp..
  2. Użyj skrótu, aby zmienić blok akapitu w blok obrazu
  3. Zmień blok akapitu na blok nagłówka, tj. H2, H3 i H4
  4. Przekształć blok akapitu w blok obrazu okładki

W celach ilustracyjnych zarezerwuję pierwszy akapit na wprowadzenie postu. Po dodaniu tekstu pojawi się pasek narzędzi formatowania, jak pokazano poniżej.

Pasek narzędzi formatowania akapitu Gutenberga

Dzięki paskowi narzędzi formatowania możesz:

  • Zakryj akapit akapitem, cytatem, nagłówkiem, listą, kodem i wstępnie sformatowanym tekstem
  • Pogrubienie, Wykursywiać, przekreślenie, i podkreślać zadowolony
  • Wyrównaj tekst do lewej, prawej, wyśrodkuj i uzasadnij
  • Dodaj link, który można również otworzyć w nowej karcie
  • Wstaw obraz wbudowany (tak, istnieje!)
  • Ukryj ustawienia bloków
  • Duplikuj blok
  • Wstaw blok przed lub po bieżącym bloku (w naszym przypadku jest to pierwszy akapit, więc nie dodawaliśmy niczego wcześniej, tylko po.) Możesz dodać blok obrazu okładki przed pierwszym akapitem, jeśli chcesz, ponieważ wygląda tak dobrze
  • Edytuj blok jako HTML
  • Dodaj bieżący blok do bloków wielokrotnego użytku, abyś mógł go używać w innych postach
  • Usuń blok całkowicie

Możesz dodatkowo dostosować blok akapitu za pomocą opcji dostępnych w Blok kartę znajdującą się w menu paska bocznego, jak pokazano poniżej.

Opcje paska bocznego gutenberga dla bloku akapitu

Kilka uwag na temat powyższego obrazu:

  1. Wybierz Blok tutaj, aby wyświetlić wszystkie opcje i ustawienia bloków
  2. Wybierz rozmiar czcionki i aktywuj tutaj Drop Cap
  3. Dodaj kolor tła do akapitu. Dla celów ilustracji ustawiłem kolor na niebieski. Możesz także dostosować kolor tekstu. W obu przypadkach możesz dodać nieograniczoną liczbę kolorów niestandardowych
  4. Możesz tutaj dodać niestandardową klasę CSS, co oznacza, że ​​możesz dodać dodatkowe style CSS do swojego bloku
  5. Niebieskie tło i Drop Cap zostały już zastosowane w edytorze Gutenberga

Karta Dokument na pasku bocznym

W menu paska bocznego znajduje się kolejna karta; Dokument kartę, jak pokazano poniżej.

blok dokumentu pasek boczny akapit karta dokumentu

Tutaj uwagi do powyższego obrazu:

  1. Kliknij tutaj, aby przejść do Dokument patka
  2. Tutaj możesz zaplanować post, ustawić widoczność na oba Prywatny lub Publiczny, ustaw post na W oczekiwaniu na opinię status, wybierz format postu i utwórz przyklejony post
  3. Ta sekcja pozwala edytować bezpośredni link
  4. Tutaj możesz wybrać lub utworzyć nowe kategorie
  5. Dodaj tagi do swojego postu
  6. Ustaw polecany obraz
  7. Utwórz ręczny fragment
  8. Zezwalaj na komentarze, pingbacki i trackbacki

Jak widać, masz wiele opcji zaprojektowania bloku akapitu (i całego postu) w dowolny sposób. Nawiasem mówiąc, różne bloki mają różne ustawienia, ponieważ nauczymy się za chwilę.

Po pierwszym akapicie naciśnij WCHODZIĆ Klawisz ponownie, aby utworzyć nowy wiersz (lub blok akapitu). Dodajmy teraz obraz poniżej pierwszego akapitu.

Dodawanie zdjęć w Gutenberg

dodanie nowego obrazu w Gutenberg

Mówią, że obraz mówi tysiąc słów, a post na blogu bez obrazów jest, no cóż, ponury. Aby dodać obraz do posta WordPress za pomocą Gutenberga, masz kilka opcji.

Kiedy uderzysz WCHODZIĆ kilka chwil temu uruchomiłeś nowy blok akapitu. Ponieważ Gutenberg jest intuicyjny, możesz dodać obraz, klikając ikony plusa (+), obrazu lub okładki, jak podkreślamy na obrazku poniżej.

dodanie nowego obrazu w edytorze Gutenberga

Kilka uwag:

  1. Możesz dodać obraz za pomocą ikon plus (+)
  2. Tutaj możesz łatwo dodać obraz
  3. Ta opcja pozwala dodać pokrywa obraz (są zwykle większe niż inne zdjęcia. Dodatkowo można dodać tekst na okładkach, BTW)

Śmiało i kliknij dowolną ikonę plusa (+). Następnie kliknij Wizerunek kartę, jak pokazano poniżej.

dodawanie zdjęć w Gutenberg

Kliknięcie Wizerunek Tab ładuje Wizerunek blok pokazany na zrzucie ekranu poniżej.

blok obrazów Gutenberga

The Wizerunek blok umożliwia przesłanie obrazu lub dodanie go z adresu URL lub biblioteki multimediów. W tym procesie możesz dodać tekst alternatywny (ważny dla SEO), podpis i opis za pomocą ustawień ekranu mediów lub Blok pasek boczny, jak pokazano na poniższych obrazkach.

Zwykłe ustawienia multimediów…

ustawienia mediów wordpress

… I… Wizerunek ustawienia bloku.

ustawienia bloku obrazów Gutenberga

Uczysz się tu dzisiaj czegoś? Mam nadzieję. Przejdźmy dalej.

Po dodaniu obrazu Gutenberg dodaje nowy blok akapitu tuż pod nim. Możesz dodać, co chcesz, ale dla celów ilustracyjnych dodałem trochę tekstu, a następnie przycisk poniżej.

Jak dodawać pliki do pobrania, np. PDF, obrazy, filmy itp

Gutenberg sprawia, że ​​niezwykle łatwe jest dodawanie plików do pobrania do posta lub strony WordPress.

W nowym Ustęp blok, kliknij ikonę plusa (+), przejdź do Wspólne bloki i uderzył Plik kartę, jak podkreślamy poniżej.

dodawanie plików do pobrania w Gutenberg

Spowoduje to uruchomienie następującego bloku:

blok plików Gutenberga

Od Plik blok, możesz przesłać nowy plik lub dodać go ze swojej biblioteki multimediów. Po dodaniu pliku Gutenberg dodaje urocze Pobieranie przycisk automatycznie, jak pokazano na obrazku poniżej.

dodawanie pliku w Gutenberg

Możesz bawić się z opcjami. Na przykład możesz edytować / usunąć „Darmowa lista kontrolna Gutenberg PDF”Oraz tytuł Pobieranie przycisk. Możesz dodać klasę CSS do bloku i stylizować ją w dowolny sposób.

Dodanie wyceny w Gutenberg

Następnie dodajmy wycenę, ponieważ są urocze, chwytliwe i pomagają w prowadzeniu sprawy do domu. W nowym wierszu kliknij znak plus (+) i przejdź do Wspólne bloki i uderzył Zacytować kartę, jak pokazano poniżej.

dodawanie cytatów w Gutenberg

Robi to, dodaje Zacytować zablokuj w swoim poście, jak zaznaczamy na poniższym zrzucie ekranu.

Ustawienia bloków cytatów Gutenberga

Zwróć uwagę na ustawienia bloku cytowania na prawym pasku bocznym powyżej?

Aby dodać ofertę, wpisz wewnątrz bloku. Oto mój wynik.

cytat Gutenberga

Wygląda niesamowicie, prawda?

Dodawanie mediów umieszcza się w Gutenberg

Gutenberg zawiera kilka bloków do osadzania filmów i innych mediów z ponad 30 witryn, takich jak YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare i tak dalej.

Aby osadzić zawartość, kliknij ikonę plus (+) i przejdź do Osadza, i wybierz stronę. Na przykład chciałem YouTube, jak pokazano poniżej.

Gutenberg youtube embed

Następnie skopiuj i wklej adres URL filmu na YouTube i kliknij Osadzać przycisk, jak pokazano na obrazku poniżej.

Gutenberg youtube osadzanie bloku

Jak tylko uderzysz Osadzać przycisk, Gutenberg automatycznie ukrywa link w filmie, co podkreślamy poniżej.

osadzone wideo z YouTube w Gutenberg

Płynne żeglowanie przez całą drogę. Dodajmy teraz samodzielny przycisk, który jest idealny do tworzenia wezwania do działania (CTA).

Jak dodać przycisk w Gutenberg

W tym momencie nie powinieneś mieć trudności z dodawaniem bloków. Wystarczy kliknąć plus (+) i wybrać blok. To nie może być łatwiejsze niż to.

Jak więc dodać przycisk?

W nowej linii (lub bloku) kliknij ikonę plusa (+) i przejdź do Elementy układu i kliknij Przycisk kartę, jak pokazano poniżej.

dodawanie przycisków w edytorze Gutenberga

Takie postępowanie prowadzi do Przycisk blokuj, jak szczegółowo poniżej.

dodawanie przycisków w edytorze Gutenberga

Jak widać na powyższym obrazku, możesz edytować tekst przycisku i dodać link. Dodatkowo możesz dostosować przycisk za pomocą menu paska bocznego po prawej stronie ekranu.

Po kilku kliknięciach oto, co mam.

Przykład przycisku Gutenberga

Nawiasem mówiąc, jeśli używasz trudnych do odczytania kombinacji kolorów na przyciskach, Gutenberg niezwłocznie Cię powiadomi. Jak miło?

Jak dodać kolumny w Gutenberg

Po umieszczeniu pięknego przycisku dodajmy kilka kolumn. Dodam dwie kolumny, więc uważnie podążaj.

Oto co robić. Kliknij ikonę plus (+), przejdź do Elementy układu i kliknij Kolumny kartę, jak widać na obrazku poniżej.

edytor kart Gutenberga

Gutenberg domyślnie dodaje dwie kolumny. Zobacz obraz poniżej i pamiętaj, że dodałem już treść do kolumn.

kolumny Gutenberga w edytorze WordPress

Co mi daje:

frontend kolumn Gutenberga

Nieźle jak na kilka sekund pracy. Ale być może nie chcesz tworzyć kolumn. Może chcesz wyświetlić obraz obok tekstu.

Czy jest na to jakiś blok? Tak jest!

Jak dodać obrazek obok tekstu w Gutenberg

Czy chcesz dodać zdjęcie do tekstu? Jeśli tak, pokochasz następującą sekcję.

Jak zwykle kliknij ikonę plus (+), przejdź do Elementy układu i kliknij Media i tekst jak pokazano niżej.

blok medialny i tekstowy Gutenberga

Powinieneś zobaczyć Media i tekst blok, jak pokazano poniżej.

blok medialny i tekstowy w Gutenberg

Następnie prześlij swoje zdjęcie / wideo / multimedia lub dodaj je z biblioteki multimediów. Następnie dodaj tekst obok multimediów, jak pokazano na poniższym obrazku.

Bawiłem się z Media i tekst blok i wymyśliłem następujące. Uważaj na siebie; Też udało mi się wcisnąć przycisk ��

blok multimediów i tekstu w pełnej akcji

Och, to jest zaplecze! Pokażę ci front-end. Tutaj:

blok tekstu medialnego w Gutenberg

Wygląda bardzo profesjonalnie, prawda? Z pewnością możesz sobie wyobrazić, ile możesz osiągnąć dzięki edytorowi Gutenberga.

Bloki Gutenberga innych firm

Programiści WordPress chętnie dostosowują motywy i wtyczki do edytora Gutenberga. Kilka przykładów obejmuje WooCommerce, Jetpack i Yoast SEO.

Na przykład możesz dodać bloki WooCommerce do swojego posta WordPress. Po pierwsze, musisz zainstalować i aktywować WooCommerce.

Następnie w nowym wierszu kliknij ikonę plus (+) i przejdź do WooCommerce i wybierz blok, który chcesz, jak pokazano poniżej.

Woocommerce Gutenberg Blocks

Wiesz co to oznacza? Oznacza to, że możesz tworzyć multimedia i świetne posty oraz strony w ciągu kilku minut.

Inne znaczące bloki

Mamy już ponad 2000 słów i jeśli to utrzymamy, skończymy pisać cały eBook. Modlę się, abyś mógł teraz korzystać z Gutenberga bez żadnych czkawek.

Na marginesie, oto lista innych dostępnych bloków.

  • Widżety – Możesz dodawać treści ze swoich widżetów do postów na blogu
  • Skróty – Nadal możesz używać natywnych skrótów WordPress
  • Klasyczny – Świetny blok, który przechowuje twoje stare treści
  • Więcej – Blok był wcześniej znany jako Czytaj więcej etykietka
  • Podział strony, separatory, przekładki
  • Niestandardowy HTML, Pullquote, Tabela
  • Galeria i Audio / wideo HTML5
  • I wiele więcej w zależności od używanych motywów i wtyczek

Na bok: Tworzenie strony WordPress jest podobne do tworzenia zapisu postu z kilkuminutowymi różnicami, więc nie zagłębimy się w to dzisiaj.

Szybkie hacki Gutenberga i skróty klawiaturowe

Gutenberg ma kilka hacków i skrótów klawiaturowych, które jeszcze bardziej ułatwiają. Na przykład, jeśli wpiszesz „/” w bloku akapitu, pojawi się lista bloków.

Możesz nawet wybrać konkretny blok, wpisując tytuł bloku po odwrotnym ukośniku (/), np. Wpisanie „/ image” powoduje wyświetlenie bloku obrazu wśród innych bloków związanych z obrazem. Zobacz zdjęcie poniżej, aby uzyskać więcej informacji.

skrót luzu Gutenberga

Skróty klawiszowe: Aby wyświetlić wszystkie dostępne skróty, naciśnij SHIFT + ALT + H w systemie Windows i OPT + CTRL + H w systemie Mac.

W górnej części dokumentu możesz zobaczyć strukturę dokumentu, klikając ikonę (i), jak pokazano poniżej.

struktura dokumentu Gutenberga

Miły. Wyjątkowo gładka.

A tak przy okazji, błąd „Aktualizacja nie powiodła się” zwykle występuje z powodu chwiejnego połączenia internetowego ��


Między tobą a mną Gutenberg to fantastyczny edytor treści. Pod warunkiem, że chcesz nauczyć się lin; możesz wiele czerpać z edytora WordPress przyszłości.

Gutenberg jest wciąż stosunkowo młody i można oczekiwać, że wzrośnie pod względem użyteczności i funkcjonalności. Będzie to poważna siła, z którą należy się liczyć w nadchodzących dniach. Twórcy stron lepiej uważaj, bo w przeciwnym razie zabraknie im firmy ��

Mamy nadzieję, że nasz przewodnik krok po kroku do edytora Gutenberga pomógł ci spojrzeć na to z innej perspektywy. Wierzymy, że możesz teraz używać edytora bloków do tworzenia treści jak profesjonalista.

Podziel się swoimi obawami, przemyśleniami i pytaniami w sekcji komentarzy poniżej.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me