Począwszy od WordPress 5.0, użytkownicy tego systemu CMS mają nowy edytor do tworzenia treści internetowych. Tworząc witrynę korzysta z tzw Bloki. Poszczególne bloki można edytować. W poniższym samouczku porozmawiamy o tym, jak używać edytora Gutenberg do tworzenia treści witryny.
Co to jest Gutenberg?
Gutenberg to nowy domyślny edytor WordPress . Działa na innej zasadzie niż dotychczas używany edytor TinyMCE. Oferuje zupełnie nowe wrażenia z projektowania stron internetowych, tworząc bloki za pomocą bloków. W poszczególnych blokach możliwa jest praca z tekstem jak w edytorze tekstu.
Bloki można przesuwać i grupować na stronie według konkretnych pomysłów użytkownika. Dzięki Gutenbergowi użytkownik ma możliwość lepszego dostosowania wyglądu i układu strony.
Co to jest blok?
Bloki to fragmenty treści na stronie . Możesz utworzyć blok na tekst, widżety, obrazy, wideo, cytaty i tym podobne. Istnieje możliwość kontynuowania pracy z każdym blokiem. Zaletą tworzenia strony internetowej jest funkcja przeciągnij i upuść , która może być wykorzystana do łatwego przenoszenia bloków.
Jak stworzyć stronę w edytorze Gutenberg
Aby utworzyć nową stronę, przejdź do Strony ›Dodaj nową w administracji strony. Otworzy się następująca strona:
Wpisz tytuł w wyświetlonym bloku. Znajdziesz tu również opcję edycji serwisu serwisu . Możesz edytować ślimak w dowolnym momencie, klikając tytuł. Wystarczy kliknąć przycisk Edytuj obok adresu URL strony.
Tworzenie bloków
Po wpisaniu tytułu możesz dodać więcej tekstu do wstępnie ustawionego bloku wprowadzania tekstu lub możesz wstawić własny blok. Aby to zrobić, kliknij ikonę plusa:
. Tutaj możesz wybrać rodzaj treści, które chcesz dodać.
W moim przykładzie wybrałem dodanie akapitu. W bloku akapitu znajdziesz opcje czcionki, wyrównanie i ikonę do wstawiania łącza. Na końcu paska narzędzi edycji bloku znajdziesz przycisk z dodatkowymi opcjami edycji
. Na przykład można go użyć do ukrywania ustawień bloków, duplikowania, edycji jako HTML, dodawania do bloków wielokrotnego użytku i usuwania bloku.
Więcej opcji tekstu znajdziesz po prawej stronie ekranu . Dostępne są ustawienia czcionek. Możesz wybrać rozmiar czcionki z kilku gotowych opcji lub ustawić własny. Możesz także wybrać kolor tła, kolor tekstu lub ustawić własne zaawansowane ustawienia.
Opcje edycji bloków bezpośrednio nad blokiem oraz w prawej części ekranu różnią się w zależności od poszczególnych typów bloków.
Zmień typ bloku
Możesz zmienić typ bloku w dowolnym momencie podczas tworzenia strony. Robisz to, klikając pierwszy przycisk nad aktywnym blokiem. Tutaj zawsze wyświetlany jest znak aktywnego typu bloku. Po kliknięciu pojawi się lista bloków, z których możesz wybierać.
Typy bloków
Podczas tworzenia stron dostępnych jest kilka rodzajów bloków. Są one ułożone w czytelną listę, która podzielona jest na kilka części:
Najczęściej używane — tutaj wyświetlane są najczęściej używane typy bloków, takie jak akapit, obraz, galeria i tym podobne.
Elementy bezpośrednie – jest blok dla bezpośredniego obrazu.
Wspólne bloki — tutaj znajdziesz bloki na obrazy, wideo, plik, listę, cytat i inne często używane części strony.
Formatowanie – umożliwia dodanie sformatowanej treści, takiej jak tabela, kod, niestandardowy kod HTML, ale także blok w klasycznym edytorze tekstu WordPress .
Elementy układu — tutaj znajdziesz bloki na podziały stron, przyciski, kolumny lub blok z wcześniej utworzonym układem multimediów i tekstu.
Widgety – dzięki dostępnym opcjom możesz dodać skróty, kategorie, listę ostatnich komentarzy i tym podobne.
Osadzone — umożliwia osadzanie treści zewnętrznych, takich jak YouTube, Twitter, Instagram, Facebook i inne.
Jak stworzyć podstawowy układ na stronie
Zacznijmy od prostej strony. Wystarczy, jeśli ma tytuł, tekst, obraz, listę punktowaną i galerię obrazów.
Dodaj tekst
Po wpisaniu tytułu po prostu zacznij pisać w predefiniowanym bloku. Gutenberg tworzy osobny blok dla każdego akapitu. Nie musisz za każdym razem dodawać go do strony. Wszystko, co musisz zrobić, to nacisnąć Enter. Nowy blok akapitu jest tworzony sam.
Dodaj obraz
Aby dodać obraz, wybierz odpowiedni blok z listy bloków. Lista bloków jest wyświetlana po kliknięciu ikony plusa w lewym górnym rogu ekranu. Możesz wybrać obraz z biblioteki multimediów lub przesłać go na stronę.
Pojawi się w układzie strony zaraz po przesłaniu. W prawej części ekranu ustaw rozmiar obrazu, wypełnij tekst alternatywny lub wstaw link.
Dodaj listę punktowaną
Wybierz odpowiedni blok z listy. Podczas edycji tekstu masz również możliwość wybrania listy numerowanej, wstawienia linku i tak dalej.
Dodaj galerię obrazów
Wybierz blok do galerii z listy bloków. Następnie prześlij zdjęcia. W bloku galerii możesz dostosować wyrównanie, wstawić lub usunąć obraz. W prawej części ekranu znajdziesz funkcje do ustawiania liczby kolumn i przycinania zdjęć w galerii.
Jak przenosić klocki
Poszczególne bloki można przesuwać na stronie. Niezbędne przyciski pojawiają się, gdy najedziesz kursorem na blok, który chcesz przenieść. Do poruszania się są dwie strzałki w górę iw dół. Te zawsze przesuwają wybrany blok o jedną pozycję wyżej lub niżej. Pomiędzy strzałkami znajdziesz ikonę funkcji przeciągnij i upuść
. Kiedy najedziesz na niego myszą, pojawi się ręka, którą możesz po prostu przytrzymać klocek i przesunąć go w wybrane miejsce.
Jak ponownie wykorzystać utworzone bloki
Jeśli utworzyłeś blok, którego chcesz użyć ponownie później, kliknij ikonę Więcej opcji. Znajdziesz go w menu funkcji na górze bloku. Wybierz opcję Dodaj do bloków wielokrotnego użytku tutaj.
W ten sposób będziesz mieć dostęp do utworzonych bloków za każdym razem, gdy tworzysz nowy post. Zapisane bloki pojawiają się na liście typów bloków w obszarze Wielokrotnego użytku . Można nimi również zarządzać. Możesz je przekonwertować z powrotem do normalnego bloku lub usunąć je z menu.
Dodatkowe funkcje
Dostępnych jest kilka innych przydatnych funkcji do tworzenia stron lub artykułów. Najpierw spójrzmy na przyciski u góry strony.
Wspomniałem już o pierwszej z ikon. Służy do dodawania bloku do strony.
Strzałki wstecz i do przodu nie muszą być reprezentowane – przeniosą cię o jeden krok do przodu lub do tyłu.
ja – tutaj możesz zobaczyć strukturę treści.
Ciekawą funkcję oferuje ostatnia nawigacja za pomocą bloków przycisków. Oprócz wyświetlania kolejności poszczególnych bloków służy również do szybkiego przeskakiwania do wybranego bloku.
Więcej funkcji znajdziesz po prawej stronie. Być może znasz już niektóre z poprzednich prac z WordPress . Inne są nowe.
Dokument — umożliwia dostęp do ustawień dokumentu, takich jak edytowanie adresu URL strony, dodawanie obrazu ilustracji i włączanie komentarzy. Przypisanie kategorii i tagów jest również dostępne na stronie publikowania. Możesz także dodać tekst do podsumowania.
Blok – o niektórych funkcjach tego przycisku wspomniałem już w rozdziale Tworzenie bloków. Różnią się one w zależności od wybranego typu bloku.
Podgląd — przycisk podglądu wyświetla podgląd na żywo strony lub posta.
Opublikuj — użyj tego przycisku, aby opublikować stronę. Jeśli edytujesz istniejącą stronę, zamiast przycisku Opublikuj pojawi się przycisk Odśwież.
Link bezpośredni — edytuj tutaj część tekstową adresu URL.
Właściwości strony — służy do konfigurowania szablonu strony i przypisywania strony nadrzędnej.
Pokaż więcej narzędzi i opcji – ostatni przycisk w prawym górnym rogu strony to Pokaż więcej narzędzi i opcji . Oto kilka funkcji, takich jak tryb reflektorów, które pomogą Ci skupić się na treści konkretnego bloku podczas tworzenia strony.
Znajdziesz tu również przełącznik między edytorem wizualnym a edytorem kodu, a także tryb pełnoekranowy. Ponadto znajdziesz skróty klawiaturowe, możliwość zarządzania blokami wielokrotnego użytku i inne opcje konfiguracji strony.
Zaawansowane wskazówki
Wspomnę też o kilku bardziej zaawansowanych funkcjach edytora:
Szybkie tworzenie bloków
Możesz ułatwić sobie pracę, aby nie zawsze szukać konkretnego bloku na liście. Wszystko, co musisz zrobić, to wpisać ukośnik i pierwsze litery nazwy bloku w ustawionym bloku :
/názov bloku
Gdy tylko zaczniesz pisać, zobaczysz listę pasujących opcji.
Edycja kodu źródłowego
Możesz edytować kod źródłowy strony na każdym etapie jej tworzenia. Możesz to zrobić, klikając ikonę . Poszukaj tutaj opcji edytora kodu.
Aktywuj tryb pełnoekranowy
W edytorze Gutenberg możesz pracować bez niepotrzebnego rozpraszania uwagi, oferując menu strony. Przewiń do prawego górnego rogu strony i kliknij . Tutaj znajdziesz funkcję trybu pełnoekranowego. Możesz także wybrać tryb Spotlight, aby jeszcze lepiej skupić się na określonym bloku.
Korzystanie ze skrótów klawiaturowych
Gutenberg umożliwia korzystanie z wielu specjalnych skrótów klawiaturowych oprócz zwykłych skrótów. Na przykład:
- Pokaż lub ukryj ustawienia paska bocznego Ctrl + Shift +
- cofnij ostatnie zmiany Ctrl + Z
- ponownie wprowadź cofnięte zmiany Ctrl + Shift + Z
Użyj Ctrl + Shift + H, aby otworzyć listę skrótów.
Rozszerz opcje za pomocą wtyczek
Aby rozszerzyć opcje projektowania, zainstaluj jedną z wtyczek Gutenberga. Na przykład wtyczka Stackable oferuje kolekcję wstępnie przygotowanych bloków. Stworzysz ciekawe strony główne. Otter Blocks to także świetna wtyczka. Twórz bloki, takie jak ceny, Mapy Google i nie tylko.
Oto kilka odpowiedzi na najczęściej zadawane pytania
A jeśli nie chcę używać Gutenberga?
Niektórzy użytkownicy pytają, czy WordPress umożliwia korzystanie z poprzedniego edytora TinyMCE. Tak to mozliwe. W takim przypadku Gutenberg można dezaktywować. Wszystko, co musisz zrobić, to zainstalować wtyczkę WordPress Classic Editor .
Czy zmieni się stara treść?
Cała zawartość, którą już masz na stronie, pozostanie niezmieniona. Gutenberg umieszcza określoną stronę lub artykuł w jednym bloku. Gutenberg jest dostępny w tym celu tak zwane klasyczny blok. Pozwala to na pracę z oryginalną treścią, jak w klasycznym edytorze TinyMCE.
Możesz po prostu edytować oryginalną treść w klasycznym bloku lub przekonwertować ją na bloki . Wymaganą funkcję znajdziesz pod ikoną Więcej opcji . Możesz także pracować z treścią tak, jakbyś stworzył ją w edytorze bloków.
