Jak korzystać z edytora bloków WordPress

W tym poście nauczę Cię, jak korzystać z edytora bloków WordPress, który jest dołączany do aktualizacji WordPressa od 2018 roku i zostanie z nami. Usłyszysz również, że nazywa się to redaktorem Gutenberga.

Od wydania WordPress 5.0 w edytorze tekstu WordPress dostępna jest opcja „KONWERSJI NA BLOKI”, którą można znaleźć, klikając trzy pionowe kropki, jak poniżej.

Czy powinieneś przekonwertować na bloki?

Jeśli korzystasz z edytora tekstu WordPress innej firmy, mogą wystąpić komplikacje. Nie omawiam ich w tym poście. Dowiedz się więcej od profesjonalisty na temat ostrożnego konwertowania i bieżnika.

Dla kogokolwiek innego – nie biorę odpowiedzialności – zawsze wykonaj kopię zapasową witryny/bloga przed przekształceniem strony w bloki.

Jesteś już nawrócony? Pomiń tę sekcję.

Tym z Was, którzy korzystali już z klasycznego edytora i mają prosty układ strony – mogę polecić bloki WordPress.

Kiedy już przyzwyczaisz się do edytora bloków WordPress, jest on intuicyjny.

Naciśnięcie KONWERSJI NA BLOKI nie przekonwertuje całej witryny/bloga na bloki. Tylko strona lub post, nad którym pracujesz.

Co się stanie, gdy przekonwertuję na bloki?

Konwersja strony powoduje zatwierdzenie każdego nagłówka, akapitu, fragmentu kodu i obrazu w osobny blok.

Niedługo się do tego przyzwyczaisz, jeśli dopiero się nawracasz.

Bloki umożliwiają łatwe dodawanie akapitów, kolumn, tabel, obrazów, widżetów, najnowszych postów i kategorii.

A także widżety, takie jak najnowsze posty, kalendarze, archiwa postów, kategorie, ikony społecznościowe i kanały RSS.

Blokady WordPress ułatwiają dodawanie prawie wszystkiego, czego może sobie życzyć właściciel witryny. To naprawdę wygodne.

Jeden blok reprezentuje jeden element, więc znacznie łatwiej jest również zmienić kolejność stron. Omówimy to później.

Zobacz witrynę WordPress w nowej karcie

Podczas edycji pierwszą rzeczą, którą robię, jest otwieranie publicznej części witryny w nowej karcie przeglądarki. Następnie obszar administracyjny (back end) jest widoczny w jednej karcie, a obszar publiczny (front end) widoczny w drugiej. W ten sposób mogę przełączać się między nimi.

Najłatwiejszym sposobem otwarcia frontonu witryny WordPress w nowej karcie jest;

• W panelu administracyjnym – najedź na ikonę domu w lewym górnym rogu ekranu.
• Z menu rozwijanego KLIKNIJ PRAWYM KLIKNIĘCIEM „Odwiedź witrynę”.
• Kliknij „Otwórz link w nowej karcie”.

NB. W zależności od używanej przeglądarki mogą występować różne słowa.

Dwie karty przeglądarki są teraz otwarte, co oznacza, że ​​możesz przełączać się między nimi.

Kontynuuj edycję strony WordPress na jednej karcie, korzystając z obszaru administracyjnego.

W drugim zobaczysz fronton swojej witryny. Oto jak sprawdzić każdą wprowadzoną zmianę.

Gdy wprowadzasz zmiany i je zapisujesz, możesz przejść do interfejsu strony. Naciśnij klawisz F5, aby odświeżyć stronę - spowoduje to wyświetlenie zaktualizowanej wersji przeglądarki.

Nagłówek h1 WordPress i permalink

Przyjrzyjmy się najpierw tytule i permalinkowi.

Nagłówek h1 to pierwszy blok u góry strony. To jedyny blok, który jest nieruchomy i to nie bez powodu.

Wszystkie strony i posty powinny mieć na początku nagłówek h1, aby wyszukiwarki i ludzie zrozumieli, co zawiera strona. To czynnik SEO.

Użyj myszki, aby kliknąć wewnątrz bloku tytułowego. Aby zmienić tytuł, zaznacz tekst tytułu i zacznij pisać. Prosty.

Pole permalinku znajduje się w ustawieniach dokumentu po prawej stronie, patrz obrazek poniżej. Etykieta WordPress dla nazwy strony to „URL Slug”.

Zachowaj ostrożność podczas edytowania permalinków – na dole tego posta zamieściłem ostrzeżenie.

Dodaj blok WordPress

Kliknij ikonę Plus + w lewym górnym rogu, aby rozpocząć.

Poznaj bibliotekę bloków – jest tu dostępnych tak wiele opcji.

Istnieją jeszcze dwa sposoby na dodanie bloku do strony WordPress.

Jeśli jesteś w fazie kreatywnej, dodaj blok, naciskając klawisz powrotu.

Trzeci sposób polega na najechaniu kursorem na klocek – pojawia się ikona Plus +.

W chwili pisania tego tekstu jest to kłopotliwe – najedź kursorem na dokładną środkową część bloku, aby pojawiła się ikona.

Kliknij ikonę i wybierz styl bloku. Nowy blok pojawi się pod ikoną plusa.

Paragrafy WordPress za pomocą bloków

Bloki akapitów będą często najczęstszymi elementami strony lub posta WordPress. Dodaj blok akapitu i po prostu zacznij pisać.

Naciśnij Enter, aby utworzyć nowy blok akapitu i kontynuuj pisanie.

Aby przyspieszyć pracę, bloki akapitów można przekształcić w inne style.

Gdy kursor znajduje się w nowym bloku akapitu, wpisz a / (ukośnik). To skróty do listy możliwych typów bloków.

Alternatywnie przekształć blok za pomocą paska narzędzi. Na wybranym bloku pojawia się pasek narzędzi w lewym górnym rogu.

Na pasku narzędzi akapitu znajdują się opcje zmiany „typu lub stylu bloku” lub formatowania tekstu:

Przekształć blok akapitu WordPress

Użyj przycisku „zmień typ lub styl bloku”, aby przekształcić blok akapitu. Transformacja ogranicza się do bloków o podobnym charakterze. Tj. akapitów nie można zamienić na tabele, ale można je zamienić na nagłówki.

Zamieńmy np. akapit w nagłówek.

Strzałka na obrazku poniżej wskazuje ikonę reprezentującą AKAPIT. W ten sposób wiesz, że blok jest akapitem.

Kliknij ikonę, aby przekształcić akapit.

Uderz w NAGŁÓWEK.

Ikona akapitu zmieni się w H, a obok niej zobaczysz H2 .

Nie można wybrać H1 – H1 powinien być używany tylko w tytule strony.

Blok jest teraz blokiem nagłówka.

Wybierz H3 lub H4, naciskając przycisk H2 wybierając z menu.

Używaj nagłówków jako hierarchii na stronach i w postach. Użyj H2, aby podzielić stronę na czytelne sekcje. Użyj H3, aby je podzielić.

Formatuj akapity i nagłówki

Formatowanie tekstu oznacza po prostu dodanie do niego określonego stylu.

W nagłówku lub bloku akapitu zaznacz tekst, który chcesz sformatować.

Pasek narzędzi pojawia się magicznie w lewym górnym rogu bloku. Tutaj znajdziesz opcje pogrubienia tekstu , kursywy lub dodania hiperłącza tekstowego.

Nadal można używać skrótów klawiaturowych – podświetl tekst i użyj:

• Control-b dla pogrubienia
• Control-i dla kursywy.
• Control-u podkreśli tekst.

Użytkownicy komputerów Mac – użyj klawisza polecenia zamiast klawisza kontrolnego.

Odwiedź skróty klawiaturowe WordPress, aby uzyskać przydatną listę.

Zauważ, że na pasku narzędzi znajduje się strzałka w dół ; rozwijane menu dla „więcej kontrolek tekstu sformatowanego”. Znajdują się tutaj dwa inne style – przekreślenie i kolor tekstu .

Uważaj na kolor tekstu – motyw będzie decydował o wyglądzie strony. Mniej kolorów w schemacie korporacyjnym sprawia, że ​​strona internetowa wygląda profesjonalnie. Oszczędnie używaj koloru tekstu.

W tym menu znajdują się również „kod wbudowany” i „obraz wbudowany”.

Wszelkie „inline” zostaną umieszczone w wierszu wpisywanego tekstu. Przydatne w przypadku fragmentów kodu i ewentualnie ikon, ale większe obrazy wyglądałyby moim zdaniem dziwnie.

Ustawienia akapitu

Wybierz blok akapitu, aby wyświetlić opcje po prawej stronie ekranu WordPress.

Zmień rozmiar tekstu tutaj.

Naprawdę fajnie, jeśli masz pasek, który chcesz wyróżnić.

Istnieje również możliwość zmiany koloru całych akapitów. Ostrzegam przed zbytnim szaleństwem przy tych opcjach.

Więcej opcji przekształcania akapitów

Inne opcje transformacji bloku akapitu to:

• lista,
• wstępnie sformatowany blok,
• cytat,
• werset
• lub grupa.

Listy

Listy to etykieta WordPress dla wypunktowań — naprawdę przydatna, aby wyróżnić elementy na stronie internetowej. Dostępne są dwa rodzaje list:

• Lista uporządkowana (OL) – opcjonalnie uporządkowana według cyfr rzymskich, miejsc dziesiętnych lub liter.
• Lista nieuporządkowana (UL) – stylizowane wypunktowania.

Podobnie jak akapity, listy można formatować. Istnieje również opcja wcięcia listy, dzięki czemu podlisty można tworzyć w ramach list.

Nie widzieliśmy wcześniej bloków „preformatowanych” lub „wierszowych” w WordPressie, więc wyjaśnię trochę o tych typach bloków.

Wstępnie sformatowany blok w WordPress

Wstępnie sformatowany blok pozwala użytkownikom WordPressa wpisywać tekst dokładnie tak, jak chcą, zachowując podziały wierszy i wcięcia.

W tej chwili nie wiem do końca, do czego to służy. Niech ktoś mnie oświeci.

W pustym bloku akapitu wpisz /preformatted, a następnie naciśnij Enter, aby utworzyć wstępnie sformatowany blok.

Lub użyj paska narzędzi, jak opisano powyżej.

Werset

WordPress twierdzi, że blok wersetowy jest idealny do dodawania poezji do Twojej witryny, tak trafnie nazwany.

Bardziej zaawansowani użytkownicy mogą dodawać CSS do bloków wersetowych, dzięki czemu stylizacja bloku wersetowego jest łatwa.

 Róże są czerwone , 
Fiołki są niebieskie.

Przyciski w edytorze bloków WordPress

Edytor bloków WordPress umożliwia edytorowi tworzenie przycisków na zamówienie.

Są to proste guziki o ograniczonych stylach, nie ma w nich nic szczególnie pomysłowego. Moim zdaniem WordPress podjął słuszną decyzję – utrzymanie porządku jest lepszą opcją.

Aby dodać przycisk, użyj ikony „Dodaj blok” i wybierz „Przycisk”.

Zacznij od razu wpisywać tekst przycisku.

Teraz „blok przycisków” składa się z dwóch części, które mogą być mylące.

Przycisk znajduje się w zewnętrznym bloku. Kliknij przycisk, a następnie kliknij poza przyciskiem, w białej przestrzeni, aby zobaczyć, co mam na myśli.

Przesuń lub przeciągnij przycisk za pomocą bloku zawierającego. Przycisk można w nim wyrównać.

Kliknij na przycisk, który może być stylizowany – kolor, tekst, obramowanie. W tym miejscu możesz również połączyć przycisk.

Ma sens?

Wybierz przycisk – więcej opcji stylizacji jest dostępnych po prawej stronie WordPressa.

Do tekstu przycisku można dodać styl, tak jak akapit. Uważaj, łącząc tekst.

Odkryłem, że WordPress daje możliwość łączenia TEKSTU przycisku (za pomocą paska narzędzi przycisków, tak jak akapit) lub łączenia całego przycisku za pomocą opcji po prawej stronie. Nieco mylące.

Najlepszą opcją jest tutaj połączenie całego przycisku.

Aby to zrobić, wybierz przycisk, klikając go, zobacz Opcje blokowania po prawej stronie? Przewiń do samego dołu i umieść link w polu Link rel.

Odradzam aktywowanie opcji „otwórz nową kartę”, ponieważ wyszukiwarki wolą, aby użytkownik podejmował decyzję o otwarciu nowych kart.

W przykładzie powyżej dodałem ikonę Font Awesome, kopiując kod HTML z Font Awesome:

 <i class="fas fa-arrow-right"></i>

Aby umieścić go na swoim przycisku, wybierz go, naciśnij 3 pionowe kropki na końcu paska narzędzi i wybierz „Edytuj jako HTML”. Wklej kod HTML przed zamykającym tagiem </a>.

Ta ikona jest dostępna tylko wtedy, gdy zainstalowano Font Awesome.

Grupy bloków

Blok grupy umożliwia edytorowi dodanie w nim więcej niż jednego bloku, dzięki czemu grupę można przenosić, powielać lub ponownie wykorzystywać jako całość.

Przydatne w przypadku układów. Lub trzymać nagłówki i akapity razem, aby strona się nie pomieszała.

Jednak uważam, że GRUPY są nieco frustrujące, ponieważ po prostu znikają! Uważam, że jest to błąd w WordPressie.

Zduplikuj blok WordPress

Alternatywnie, gdy jesteś w bloku, użyj skrótu CONTROL-SHIFT-D (COMMAND-SHIFT-D na Macu).

Użyj ponownie bloku WordPress

Kolejną świetną cechą bloków WordPress jest opcja BLOK WIELOKROTNEGO UŻYTKU.

Styl utworzony dla bloku można zapisać i ponownie użyć. Zmniejsza to potrzebę odtwarzania każdego elementu w całej witrynie.

Kliknij dowolny blok, aby wyświetlić pasek narzędzi, a następnie kliknij 3 pionowe kropki po prawej stronie. Tutaj znajdziesz pozycję menu oznaczoną „ Dodaj do bloków wielokrotnego użytku ”.

Zapisany blok wielokrotnego użytku znajduje się w bibliotece bloków w zakładce „Do wielokrotnego użytku”. Po prostu znajdź i dodaj jak każdy inny blok. Poręczny.

Blokami wielokrotnego użytku można zarządzać, dzięki czemu w kolekcji nie ma zbyt wielu nadwyżek.

Pamiętaj, aby zapisać swoją pracę. Następnie w dowolnym poście lub na stronie, spójrz na górę ekranu, zobaczysz przyciski PODGLĄD i AKTUALIZACJA oraz ikonę koła zębatego.

Na końcu tego paska znajdziesz 3 pionowe kropki, kliknij je, aby zobaczyć listę. Na dole znajduje się opcja „Zarządzaj wszystkimi blokami wielokrotnego użytku”.

Zarządzaj blokami wielokrotnego użytku w sposób podobny do postów – kliknij w nazwy, aby je edytować.

Edytowanie bloku wielokrotnego użytku NIE zmieni stylu bloków już znajdujących się na stronie.

Jak przeciągnąć blok WordPress?

Od czasu aktualizacji do WordPressa 5.5 opcja przeciągania nie jest oczywista.

Musisz wybrać blok, a następnie kliknąć i przytrzymać strzałki góra-dół.

Kiedy przeciągniesz blok, obszary zostaną podświetlone na niebiesko, wskazując, gdzie blok zostanie upuszczony po zwolnieniu myszy.

Mam nadzieję, że pomoże ci to rozpocząć edycję WordPressa za pomocą edytora bloków WordPress. Jest o wiele więcej do omówienia, więc zobacz moje inne posty na:

• Jak dodawać obrazy do WordPressa.
• Połącz obraz w WordPress.
• Nagłówki i akapity w WordPressie.
• Hiperłącze w WordPressie.
• Formatowanie w WordPressie.
• Jak dodać plik PDF do WordPressa (i link do niego).

Mnóstwo do zrobienia! Daj mi znać, jak sobie radzisz.