Jak korzystać z edytora bloków WordPress (tutorial Gutenberga)

Chcesz dowiedzieć się, jak korzystać z edytora bloków WordPress (Gutenberg)?

Kiedy WordPress 5.0 został wydany w 2019 roku, zastąpił stary klasyczny edytor nowym edytorem bloków o nazwie „Gutenberg”. Edytor bloków wprowadził inny sposób tworzenia treści w WordPress.

W tym samouczku pokażemy, jak korzystać z edytora bloków WordPress i opanować go, aby tworzyć oszałamiające wizualnie posty na blogu i strony.

Jaka jest różnica między edytorem blokowym (Gutenberg) a klasycznym edytorem?

Zanim przejdziemy do edytora bloków, najpierw porównajmy i zrozumiemy różnice między edytorem bloków Gutenberg a starszym edytorem klasycznym.

Oto jak wyglądał klasyczny edytor w WordPress:

I tak wygląda nowoczesny edytor bloków WordPress:

Jak widać, są to dwa zupełnie różne edytory do tworzenia treści w WordPress.

Stary klasyczny edytor był edytorem tekstu z przyciskami formatowania bardzo podobnymi do Microsoft Word.

Nowy edytor używa zupełnie innego podejścia, zwanego „blokami” (stąd nazwa edytor bloków).

Bloki to elementy zawartości dodawane do ekranu edycji w celu tworzenia układów zawartości. Każdy element, który dodajesz do swojego posta lub strony, jest blokiem.

Możesz dodawać bloki dla każdego akapitu, obrazów, filmów, galerii, audio, list i innych. Istnieją bloki dla wszystkich popularnych elementów treści, a więcej można dodać za pomocą wtyczek WordPress.

W jaki sposób edytor bloków WordPress jest lepszy niż klasyczny edytor?

Edytor bloków WordPress oferuje prosty sposób dodawania różnych rodzajów treści do postów i stron.

Na przykład wcześniej, jeśli chcesz dodać tabelę do zawartości, potrzebujesz oddzielnej wtyczki tabeli.

W edytorze bloków możesz po prostu dodać blok tabeli, wybrać kolumny i wiersze i rozpocząć dodawanie zawartości.

Możesz przenosić elementy zawartości w górę i w dół, edytować je jako pojedyncze bloki i łatwo tworzyć treści bogate w Multimedia.

Co najważniejsze, edytor bloków WordPress jest łatwy w użyciu i nauce.

Daje to ogromną przewagę wszystkim początkującym WordPress, którzy dopiero rozpoczynają swój pierwszy blog lub budują stronę biznesową DIY.

Mając to na uwadze, przyjrzyjmy się, jak korzystać z edytora bloków WordPress jak profesjonalista, aby tworzyć świetne treści.

Oto, co omówimy w tym tutorialu Gutenberga:

1. Korzystanie Gutenberg-edytor bloków WordPress
2. Tworzenie nowego posta lub strony na blogu
3. Jak dodać blok w Gutenbergu
4. Praca z blokami w nowym edytorze
5. Zapisywanie i ponowne wykorzystywanie bloków w Gutenbergu
6. Wydawnictwa i ustawienia postów w Gutenbergu
7. Ustawienia wtyczki w nowym edytorze
8. Dodawanie wspólnych bloków w Gutenbergu
9. Odkrywanie nowych bloków treści w Gutenbergu
10. Dodatkowe wskazówki dotyczące korzystania z Gutenberga jak profesjonalista
11. Dodawanie kolejnych bloków do edytora bloków Gutenberga
12. FAQ o Gutenbergu

Gotowy? Zanurzmy się.

Video Tutorial

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej.

Korzystanie Gutenberg-Edytor Bloków WordPress

Edytor bloków został zaprojektowany tak, aby był intuicyjny i elastyczny. Chociaż wygląda inaczej niż stary edytor WordPress, nadal robi wszystkie rzeczy, które udało ci się zrobić w klasycznym edytorze.

Zacznijmy od omówienia podstawowych rzeczy, które zrobiłeś w klasycznym edytorze i jak są one wykonywane w edytorze bloków.

Tworzenie nowego posta lub strony na blogu za pomocą Edytora bloków

Zaczniesz tworzyć nowy wpis na blogu lub stronę, tak jak zwykle. Wystarczy kliknąć na Posty ” Dodaj Nowy menu w panelu administracyjnym WordPress. Jeśli tworzysz stronę, przejdź do Strony ” Dodaj Nowy menu.

Spowoduje to uruchomienie edytora bloków.

Jak dodać blok w Gutenbergu

Pierwszym blokiem każdego postu lub strony jest tytuł.

Możesz użyć myszy, aby przenieść się pod tytułem lub naciśnij klawisz tab na klawiaturze, aby przesunąć kursor w dół i rozpocząć pisanie.

Domyślnie następnym blokiem jest blok akapitowy. Dzięki temu użytkownicy mogą od razu zacząć pisać.

Jeśli jednak chcesz dodać coś innego, możesz kliknąć przycisk Dodaj nowy blok (+) w lewym górnym rogu edytora, poniżej istniejącego bloku lub po prawej stronie bloku.

Kliknięcie przycisku spowoduje wyświetlenie menu Dodaj blok z paskiem wyszukiwania na górze i powszechnie używanymi blokami poniżej.

Możesz kliknąć karty, aby przeglądać kategorie bloków lub wpisać słowo kluczowe, aby szybko wyszukać blok.

Jeśli nie chcesz używać myszy do klikania przycisku, możesz użyć skrótu klawiaturowego, wpisując /, aby wyszukać i dodać blok.

Praca z blokami w nowym edytorze

Każdy blok ma własny pasek narzędzi, który pojawia się na górze bloku. Przyciski na pasku narzędzi zmieniałyby się w zależności od bloku, który edytujesz.

Na przykład na tym zrzucie ekranu pracujemy nad blokiem akapitu, który pokazuje podstawowe przyciski formatowania, takie jak wyrównanie tekstu, pogrubienie, kursywa, Wstaw link i inne.

Oprócz paska narzędzi każdy blok może mieć również własne ustawienia bloków, które pojawią się w prawej kolumnie ekranu edycji.

Możesz przesuwać bloki w górę i w dół, przeciągając je lub klikając przyciski góra i dół obok każdego bloku.

Organizowanie bloków w grupy i kolumny

Edytor bloków zawiera przydatne narzędzia do zarządzania i organizowania układów treści.

Możesz wybrać wiele bloków, klikając je, naciskając klawisz SHIFT na klawiaturze.

Następnie kliknij przycisk typ bloku na pasku narzędzi, aby przekształcić wybrane bloki w grupy lub kolumny.

Następnie można zastosować style do całego bloku grupy, na przykład zmieniając ich wyrównanie lub odstępy.

Edytor bloków umożliwia również dodanie pustej grupy lub bloku kolumn. Następnie możesz wypełnić je innymi blokami.

Następnie możesz wypełnić każdą kolumnę dowolnym typem bloku, aby stworzyć piękne układy.

Zapisywanie i ponowne wykorzystywanie bloków w Gutenbergu

Jedną z najlepszych rzeczy na temat bloków jest to, że można je zapisać i ponownie wykorzystać. Jest to szczególnie przydatne dla właścicieli witryn i blogerów, którzy często muszą dodawać określone fragmenty treści do swoich artykułów lub stron.

Po prostu kliknij przycisk menu znajdujący się w prawym rogu paska narzędzi każdego bloku. Z menu wybierz opcję „Dodaj do bloków wielokrotnego użytku”.

Musisz podać nazwę bloku wielokrotnego użytku, aby móc go później zidentyfikować i ponownie wykorzystać.

Edytor bloków zapisze teraz blok jako blok wielokrotnego użytku.

Teraz, gdy zapisałeś blok, zobaczmy, jak dodać blok wielokrotnego użytku do innych postów i stron WordPress w Twojej witrynie.

Po prostu Edytuj post lub stronę, na której chcesz dodać blok wielokrotnego użytku. Na ekranie Edytuj post kliknij przycisk Dodaj blok.

Zapisany blok znajdziesz w zakładce „wielokrotnego użytku”. Możesz go również znaleźć, wpisując jego nazwę w pasku wyszukiwania.

Możesz najechać myszką na niego, aby zobaczyć szybki podgląd bloku. Po prostu kliknij blok, aby wstawić go do swojego posta lub strony.

Wszystkie bloki wielokrotnego użytku są przechowywane w bazie danych WordPress i możesz nimi zarządzać, klikając link „Zarządzaj wszystkimi blokami wielokrotnego użytku”.

Spowoduje to przejście do strony menedżera bloków. W tym miejscu możesz edytować lub usuwać dowolne bloki wielokrotnego użytku. Możesz także eksportować bloki wielokrotnego użytku i używać ich na dowolnej innej stronie WordPress.

Uwaga: możesz używać całych grup i kolumn jako bloków wielokrotnego użytku. Pozwala to na zapisywanie całych sekcji i używanie ich w razie potrzeby.

Publikowanie i zarządzanie opcjami w edytorze bloków Gutenberga

Każdy post WordPress zawiera wiele metadanych. Obejmuje to informacje, takie jak data publikacji, kategorie i tagi, polecane obrazy i inne.

Wszystkie te opcje są starannie umieszczone w prawej kolumnie na ekranie edytora.

Opcje wtyczek w Gutenbergu

Wtyczki WordPress mogą skorzystać z interfejsu API edytora bloków, aby zintegrować własne ustawienia na ekranie edycji.

Niektóre popularne wtyczki mają własne bloki. Na przykład WPForms, najlepsza wtyczka do tworzenia formularzy WordPress pozwala dodawać formularze do treści za pomocą bloku.

Oto jak All in One SEO for WordPress pozwala edytować ustawienia SEO w edytorze bloków:

WooCommerce zawiera również bloki, które można łatwo dodać do dowolnych postów i stron WordPress.

Dodawanie wspólnych bloków w nowym edytorze

Zasadniczo edytor bloków może zrobić wszystko, co zrobił klasyczny edytor. Jednak będziesz robić rzeczy szybciej i elegancko niż wcześniej.

1. Dodawanie obrazu w edytorze bloków WordPress

W edytorze bloków WordPress znajduje się gotowy do użycia blok obrazów. Po prostu Dodaj blok, a następnie prześlij plik obrazu lub wybierz z biblioteki multimediów.

Możesz także przeciągać i upuszczać obrazy z komputera, a edytor automatycznie utworzy dla niego blok obrazów.

Po dodaniu obrazu będziesz mógł zobaczyć Ustawienia bloku, w których możesz dodać metadane dla obrazu, takie jak tekst alternatywny, rozmiar i dodać link do obrazu.

2. Dodawanie linku w edytorze bloków

Edytor bloków zawiera kilka bloków, w których można dodać tekst. Najczęściej używanym jest blok akapitu, który jest wyposażony w przycisk Wstaw łącze na pasku narzędzi.

Wszystkie inne powszechnie używane bloki tekstowe zawierają również przycisk łącza na pasku narzędzi.

Możesz również wstawić link za pomocą skrótu klawiaturowego, który jest Command + k Dla Komputerów Mac i CTRL + K na komputerach z systemem Windows.

3. Dodawanie galerii zdjęć w Gutenbergu

Blok galerii działa jak blok obrazu. Dodajesz go, a następnie przesyłasz lub wybierasz Pliki Obrazów.

4. Dodawanie skrótów w postach WordPress za pomocą Gutenberga

Wszystkie Twoje skróty będą działać tak, jak w klasycznym edytorze. Możesz po prostu dodać je do bloku akapitu lub użyć bloku skrótów.

Odkrywanie nowych bloków treści w Gutenbergu

Redaktor Gutenberg obiecuje rozwiązać pewne długotrwałe problemy z użytecznością w WordPressie, wprowadzając nowe bloki.

Oto niektóre z ulubionych, które uważamy, że użytkownicy znajdą niezmiernie pomocne.

1. Dodawanie obrazu obok tekstu w WordPress

Korzystając ze starego edytora, wielu naszych użytkowników nie było w stanie umieścić obrazu obok tekstu. Możesz to zrobić teraz z Media & Tekst blok.

Ten prosty blok zawiera dwa bloki umieszczone obok siebie, co pozwala łatwo dodać obraz z tekstem obok.

2. Dodawanie przycisku w postach i stronach WordPress

Dodanie przycisku do postów na blogu lub stron było kolejną irytacją w starym edytorze. Albo trzeba było użyć wtyczki, która stworzyła shortcode dla przycisku, albo trzeba było przełączyć się w tryb HTML i napisać kod.

Gutenberg jest wyposażony w Blok przycisków, który pozwala szybko dodać Przycisk do dowolnego postu lub strony.

Możesz dodać link do przycisku, zmienić kolory i nie tylko. Aby uzyskać szczegółowe informacje, zobacz nasz artykuł na temat łatwego dodawania przycisków w WordPress.

3. Dodawanie pięknych obrazów okładek w postach na blogu i stronach docelowych

Kolejną fajną funkcją, którą możesz wypróbować, jest blok „okładka”, który umożliwia dodawanie obrazów okładek lub kolorowej okładki tła do postów i stron.

Obraz okładki to szerszy obraz często używany jako okładka nowej sekcji na stronie lub na początku wątku. Wyglądają pięknie i pozwalają tworzyć angażujące układy treści.

Po prostu Dodaj blok okładki, a następnie prześlij obraz, którego chcesz użyć. Możesz wybrać kolor nakładki na okładkę lub uczynić z niej stały obraz tła, aby uzyskać efekt paralaksy, gdy użytkownicy przewijają stronę w dół.

Aby uzyskać więcej informacji, zobacz nasz artykuł na temat różnicy między obrazami okładki i funkcje obrazu w WordPress.

4. Tworzenie tabel wewnątrz artykułów

Klasyczny edytor nie miał przycisku do dodawania tabel do postów WordPress. Trzeba było użyć wtyczki lub utworzyć tabelę pisząc niestandardowe CSS i HTML.

Edytor Gutenberg jest wyposażony w domyślny blok tabel, co bardzo ułatwia dodawanie tabel do postów i stron. Po prostu Dodaj blok, a następnie wybierz liczbę kolumn i wierszy, które chcesz wstawić.

Możesz teraz zacząć dodawać dane do wierszy tabeli. Zawsze możesz dodać więcej wierszy i kolumn w razie potrzeby. Dostępne są również dwie podstawowe opcje stylu.

5. Tworzenie treści wielokolumnowych

Tworzenie treści wielokolumnowych było kolejną kwestią, z którą klasyczny edytor w ogóle nie poradził sobie. Edytor bloków umożliwia dodanie bloku kolumn, który zasadniczo dodaje dwie kolumny bloków akapitowych.

Ten blok kolumn jest dość elastyczny. Możesz dodać do 6 kolumn w wierszu, a nawet użyć innych bloków wewnątrz każdej kolumny.

Dodatkowe wskazówki, jak korzystać z Gutenberga jak profesjonalista

Patrząc na edytor bloków, możesz się zastanawiać, czy będziesz spędzać więcej czasu na dodawaniu i dostosowywaniu bloków niż tworzeniu rzeczywistej zawartości?

Cóż, edytor bloków jest niesamowicie szybki, a nawet bardzo podstawowe użycie przez kilka minut pozwoli Ci natychmiast dodawać bloki bez myślenia.

Wkrótce zdasz sobie sprawę, o ile szybszy stanie się twój przepływ pracy dzięki takiemu podejściu.

Dla zaawansowanych użytkowników, oto kilka wskazówek bonusowych, które pomogą Ci pracować jeszcze szybciej z edytorem bloków WordPress.

1. Przesuń pasek narzędzi bloku na górę.

Być może zauważyłeś na zrzutach ekranu powyżej, że na każdym bloku pojawia się pasek narzędzi. Możesz przenieść ten pasek narzędzi na górę edytora.

Po prostu kliknij przycisk z trzema kropkami w prawym górnym rogu ekranu, a następnie wybierz opcję górnego paska narzędzi.

2. Użyj skrótów klawiaturowych

Gutenberg ma kilka przydatnych skrótów, które jeszcze bardziej usprawnią przepływ pracy. Pierwszym, którego powinieneś zacząć używać od razu, jest/.

Po prostu wprowadź / a następnie zacznij pisać, a pokaże Ci pasujące bloki, które możesz natychmiast dodać.

Aby uzyskać więcej skrótów, kliknij menu z trzema kropkami w prawym górnym rogu ekranu, a następnie wybierz „skróty klawiaturowe”.

Spowoduje to wyświetlenie wyskakującego okienka z listą wszystkich skrótów klawiaturowych, których możesz użyć. Lista będzie miała różne skróty dla użytkowników Windows i Mac.

3. Przeciągnij i upuść multimedia, aby automatycznie tworzyć bloki multimedialne

Gutenberg pozwala po prostu przeciągać i upuszczać pliki w dowolnym miejscu na ekranie, a automatycznie utworzy dla ciebie blok.

Możesz upuścić pojedynczy obraz lub plik wideo, a on utworzy blok dla ciebie. Możesz także upuścić wiele plików obrazów, aby utworzyć blok galerii.

4. Dodawanie YouTube, Twitter, Vimeo i innych osadzeń

Edytor bloków ułatwia osadzanie treści innych firm w treści WordPress. Istnieją bloki dla wszystkich popularnych usług innych firm.

Możesz jednak po prostu skopiować i wkleić osadzony adres URL w dowolnym momencie, A automatycznie utworzy on dla ciebie blok.

Na przykład, jeśli dodałeś adres URL filmu w YouTube, automatycznie utworzy on blok osadzania w YouTube i wyświetli wideo.

Facebook i Instagram Facebook i Instagram osadzać, zobacz nasz artykuł na temat jak osadzać posty Facebook i Instagram w WordPress.

Dodawanie kolejnych bloków do edytora bloków Gutenberga w WordPress

Edytor bloków w WordPress pozwala programistom tworzyć własne bloki. Istnieje kilka niesamowitych wtyczek WordPress oferujących pakiety bloków dla nowego edytora.

Oto kilka z nich:

1. Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg to biblioteka bloków, która zawiera wiele zaawansowanych bloków, które pomagają dodać więcej elementów projektu do treści.

Stworzone przez ludzi stojących za popularnym motywem Astra WordPress, Ultimate Addons pomagają tworzyć piękne projekty bez pisania kodu.

2. Bloki Publicznepress

PublishPress Blocks to kolejna potężna biblioteka bloków, która zawiera dodatkowe bloki rozszerzające edytor bloków Gutenberga.

Zawiera piękne opcje układu, suwaki, przyciski, ikony, galerie obrazów, Mapy, Karty, referencje, akordeony i wiele innych.

3. Sztaplowanie-Bloczki Gutenberga

Stackable-bloki Gutenberga to kolekcja pięknie zaprojektowanych bloków Gutenberga, które możesz wykorzystać na swojej stronie internetowej. Zawiera bloki dla kontenera, postów, siatki funkcji, akordeonu, pola obrazu, listy ikon, wezwania do działania i innych.

FAQ o Gutenberg – edytor bloków w WordPress

Ponieważ Gutenberg stał się domyślnym edytorem WordPress, otrzymujemy wiele pytań. Oto odpowiedzi na najczęściej zadawane pytania dotyczące Gutenberga.

1. Co się dzieje z moimi starszymi postami i stronami? Czy nadal mogę je edytować?

Twoje stare posty i strony są całkowicie bezpieczne i nienaruszone przez edytor bloków. Nadal można je edytować, a edytor automatycznie otworzy je w bloku zawierającym klasyczny edytor.

Możesz edytować je w starym edytorze lub konwertować starsze artykuły na bloki i używać Edytora bloków.

2. Czy nadal mogę używać starego edytora?

Tak, nadal możesz używać starego edytora. Wystarczy zainstalować i aktywować wtyczkę Classic Editor.

Po aktywacji wyłączy edytor bloków i będzie można kontynuować korzystanie z klasycznego edytora.

Należy pamiętać, że Edytor Classic będzie obsługiwany do 2022 roku. Lepiej byłoby zacząć korzystać z edytora bloków, aby się z nim zapoznać.

3. Co zrobić, jeśli edytor bloków nie działa z wtyczką lub motywem, którego używam?

Projekt Gutenberg był rozwijany przez długi czas. Dało to autorom wtyczek i motywów dużo czasu na przetestowanie ich kodu pod kątem zgodności.

Jednak nadal istnieje szansa, że niektóre wtyczki i motywy mogą nie działać dobrze z edytorem bloków. W takim przypadku możesz zainstalować wtyczkę edytora classic, poprosić programistę o dodanie wsparcia Gutenberga lub po prostu znaleźć alternatywną wtyczkę lub motyw.

4. Jak dowiedzieć się więcej Gutenberg tips and tricks?

WPBeginner to najlepsze miejsce, aby dowiedzieć się o edytorze bloków w WordPress. Jesteśmy największą witryną zasobów WordPress w Internecie.

Będziemy publikować nowe artykuły i aktualizować nasze stare zasoby, aby pomóc ci opanować edytor bloków.

W międzyczasie, jeśli masz jakieś pytania, skontaktuj się z nami, zostawiając komentarz lub korzystając z formularza kontaktowego na naszej stronie internetowej.

Mamy nadzieję, że ten tutorial Gutenberga pomógł Ci nauczyć się korzystać z edytora bloków WordPress. Możesz również zapoznać się z naszym kompletnym przewodnikiem po wydajności WordPress, aby poprawić szybkość swojej witryny, lub sprawdzić nasze porównanie najlepszych usług e-mail marketingu dla małych firm.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.