Bloki WordPress: szczegółowy przewodnik

Bloki WordPress są głównym składnikiem systemu edycyjnego „przeciągnij i upuść” Gutenberga dla stron internetowych.

Najłatwiejszym sposobem nauczenia się używania bloków jest praktyczna praktyka, ale zrozumienie, czym są bloki i co mogą dla Ciebie zrobić, może sprawić, że budowanie strony będzie bardziej wydajne, a nawet przyjemne.

Niezależnie od tego, czy dopiero zaczynasz tworzyć witryny WordPress, czy chcesz rozwinąć pewne zaawansowane umiejętności, ten przewodnik nauczy Cię więcej o blokach, typowych blokach używanych przez ludzi, sposobie ich używania i innych informacjach, które mogą ulepszyć Twoją witrynę.

Dowiedz się więcej: Projekt witryny WordPress: jak stworzyć witrynę WordPress od podstaw

Czym są bloki WordPress?

Bloki WordPress to dyskretne elementy tekstu, multimediów lub niestandardowego kodu, które można dodać do posta na blogu lub strony internetowej za pomocą systemu edycji WordPress Gutenberg.

Większość ludzi skupia się na używaniu go do blogów, ale działa dobrze na większości innych stron w wielu witrynach.

Bloki WordPress istnieją, aby uprościć tworzenie postów i stron, które dobrze wyglądają dla czytelników, eliminując potrzebę ręcznego kodowania każdego elementu. Zamiast tego możesz przeciągnąć i zmienić kolejność każdego bloku, aby dostosować wygląd swojej strony.

Każdy blok jest funkcjonalnie samodzielnym elementem na stronie, więc zmiana jednego bloku nie spowoduje modyfikacji pozostałych.

To nie jedyny system do edycji blokowej na rynku. Niektóre konkurencyjne usługi, takie jak Ghost, mają również solidne edytory, których można używać do tworzenia stron internetowych.

Jednak Ghost to głównie platforma blogowa, a jej edytor skupia się na tym, podczas gdy edytor WordPressa jest również pomocny przy tworzeniu stron innych niż blogi w Twojej witrynie.

Te bloki różnią się również od Drupala, innego systemu zarządzania treścią.

Drupal skupia się na blokach, które mogą pojawiać się w wielu częściach witryny, podczas gdy WordPress skupia się na poszczególnych częściach jednej strony.

Możesz łatwo zduplikować zawartość, ale same bloki nie są połączone i nie zmienią się podczas edycji.

Dowiedz się więcej: Projekt strony docelowej: 10 inspirujących, konwertujących stron docelowych

Historia Gutenberga

Gutenberg jest obecnym redaktorem WordPressa.

Pierwotnie wprowadzony na rynek w 2018 roku, od tego czasu rozwinął się do bardziej dojrzałego systemu, który jest w stanie zapewnić szybką i wydajną edycję stron internetowych i postów na blogach.

Nadal nie jest to zrobione, ponieważ programiści chcą go używać do pełnej edycji witryny, ale ma teraz znacznie więcej funkcji niż w momencie uruchomienia.

Gutenberg istnieje, ponieważ wielu użytkowników WordPressa chciało mieć czystszy i prostszy sposób blogowania bez edytowania kodu, aby wszystko wyglądało dobrze.

Tutaj ważne jest, aby zrozumieć, że WordPress przyciąga wielu zwykłych użytkowników, z których wielu ma niewielką wiedzę na temat kodowania.

Jest to ostry różnica od wczesnych lat w internecie, jeśli nawet nie mieć stronę internetową, chyba że miał stosunkowo zaawansowane kodowanie wiedzy na czasie. Innymi słowy, WordPress chce wspierać rynek casual, gdzie procesy typu „kliknij i przeciągnij” mają większy sens.

Drugą kwestią dla Gutenberga jest to, jak i gdzie ludzie blogują.

Niektórzy właściciele witryn używają systemów zamiany tekstu na mowę zamiast ręcznie pisać, podczas gdy system edycji typu „przeciągnij i upuść” znacznie ułatwia tworzenie witryn internetowych na smartfonach, tabletach i innych urządzeniach.

Jednak niektórzy ludzie nadal wolą stary system edycji. Nie jest to niespodzianką, ponieważ nadal oferuje znacznie większą kontrolę i wsparcie dla użytkowników zdolnych do zarządzania swoim kodem.

Gutenberg to potężny edytor , ale z konieczności ogranicza niektóre rzeczy, które użytkownicy mogą zrobić. Nic nie jest tak elastyczne, jak czyste kodowanie, ale Gutenberg jest szybszy i łatwiejszy w przypadku większości potrzeb.

Więcej informacji: Optymalizacja współczynnika konwersji: kompletny przewodnik

Przełączanie między edytorem klasycznym i blokowym

WordPress wie, że elastyczność jest zwykle lepsza niż zmuszanie wszystkich do korzystania z jednego systemu i dlatego możesz przełączać się między jego klasycznymi i blokowymi systemami edycji.

W większości przypadków musisz być administratorem witryny, aby przełączać się między widokami edycji.

Jednak po zalogowaniu się na właściwe konto możesz zmienić edytor na każdej stronie podczas jej modyfikacji, klikając przycisk u góry ekranu.

To wszystko większość użytkowników wiedzieć, ale można dodatkowo dostosować rzeczy.

Wiele wtyczek WordPress pozwala tworzyć strony z interfejsem typu „przeciągnij i upuść”, takim jak Gutenberg, ale możesz to preferować. Zazwyczaj oferują opcje edycji, których nie ma Gutenberg.

Wtyczki, takie jak Divi Builder, SeedProd i popularny, łatwy w użyciu Elementor, oferują systemy edycji poza blokami, które zapewnia Gutenberg.

Wtyczki te zazwyczaj zawierają narzędzia do zmiany rozmiaru, wieloczęściowe komponenty i ulepszone szablony, które dodatkowo redukują proces tworzenia stron.

Wtyczki zewnętrzne są pomocne w przypadku stron innych niż blogi, w których Gutenberg często trochę spada. Może zrobić wiele z tych stron, ale nie z taką elastycznością, jak inne systemy.

Dowiedz się więcej: Mapa podróży klienta: najlepsze praktyki + gotowe szablony

Jak wyłączyć Gutenberga?

Czy możesz wyłączyć Gutenberga dla określonych użytkowników? Czy można go całkowicie wyłączyć?

Odpowiedź na oba pytania brzmi: tak. Istnieje kilka sposobów na wyłączenie Gutenberga, jeśli nie chcesz go używać w swojej witrynie.

Wyłącz Gutenberga, instalując wtyczkę

Pierwsza metoda i dla większości użytkowników najlepsza, to użycie wtyczki Classic Editor. To oficjalna wtyczka zespołu WordPress, z dosłownie milionami aktywnych instalacji na stronach.

Edytor klasyczny umożliwia ustawienie domyślnego edytora dla każdego użytkownika, pozwala użytkownikom wybrać edytor i zawiera kilka dodatkowych funkcji, które ułatwiają pracę.

To nie tyle technicznie wyłącza Gutenberga, ile go ukrywa, ale praktyczny rezultat jest taki sam. Lub, w innym sensie, instalacja Edytora klasycznego jest mądra, ponieważ pozwala korzystać z dowolnego edytora, a to po prostu lepsze niż utknięcie z jednym edytorem przez cały czas.

Alternatywa oparta na społeczności wykorzystuje wtyczkę Disable Gutenberg, która nie jest tak popularna jak Edytor klasyczny, ale nie wymaga oficjalnego wsparcia.

Jest to prosty i praktyczny sposób całkowitego wyłączenia Gutenberga lub wyłączenia go dla określonych stron, typów postów, ról lub motywów w witrynie.

Aby zainstalować dowolną wtyczkę, kroki są proste:

1. Zaloguj się do interfejsu WordPress
2. Po lewej stronie wybierz „Wtyczki”
3. Na rozszerzonym ekranie wtyczek wybierz „Nowe”
4. W polu wyszukiwania u góry wpisz nazwę wtyczki, którą chcesz
5. Wybierz żądaną wtyczkę z wyników i kliknij przycisk „Zainstaluj teraz”
6. Po zakończeniu kliknij „Aktywuj wtyczkę”

Wyłącz Gutenberga, edytując functions.php

Na koniec możesz zmodyfikować plik functions.php na swojej stronie, aby bezpośrednio wyłączyć różne rzeczy.

Może to jednak doprowadzić do uszkodzenia witryny, jeśli zrobisz to niepoprawnie, więc nie zalecamy tego zwykłym użytkownikom. Instalacja jednej z wymienionych powyżej wtyczek jest zarówno prostsza, jak i łatwo odwracalna.

Jeśli chcesz wyłączyć Gutenberga bez wtyczki i jesteś początkującym kodem WordPress, możesz wykonać następujące kroki. Ta metoda wyłącza ją dla wszystkich użytkowników.

1. Zaloguj się do interfejsu WordPress (musisz być administratorem)
2. Znajdź „Wyglądy” na lewym pasku bocznym i najedź na nią
3. Wybierz „Edytor motywów”
4. Na liście plików po prawej wybierz „functions.php”
5. Utwórz kopię swojego pliku functions.php jako kopię zapasową, aby móc ją przywrócić, jeśli coś pójdzie na boki
6. Gdy pojawi się edytor, skopiuj dokładnie następujące elementy i wklej do pliku: add_filter( 'use_block_editor_for_post', '__return_false' );
7. Kliknij przycisk Aktualizuj plik poniżej

Dowiedz się więcej: Objaśnienie mapy ciepła + Jak stworzyć mapę termiczną witryny

Typowe typy bloków WordPress

Oto najpopularniejsze typy bloków dostępne w podstawowym edytorze WordPress.

Przed Gutenbergiem większość ludzi kodowała te bloki bezpośrednio lub za pomocą narzędzi do formatowania tekstu i obrazów w edytorze tekstu sformatowanego i zmieniała kod w razie potrzeby, aby dostosować układ na stronie.

Ustęp

To jest blok, którego większość ludzi używa częściej niż jakikolwiek inny. Jak sama nazwa wskazuje, skupia się na treściach pisanych.

Edytor tekstu konwertuje każdy akapit na blok, dzięki czemu można je przenosić i zmieniać ich kolejność po napisaniu.

Obraz

Bloki osadzania obrazów zawierają pojedyncze grafiki, które można przesuwać po stronie.

Są one wyposażone w różne opcje wyrównania, w tym zmianę rozmiaru obrazu, a nawet przejście na pełną szerokość, poza zwykły limit motywu.

Akapit i bloki obrazu razem wystarczają, aby stworzyć podstawową stronę internetową, więc wszystko inne jest ostatecznie po to, aby iterować i ulepszać te elementy, zgodnie z podstawowymi zasadami hierarchii wizualnej.

Nagłówki

Bloki nagłówków zawierają zbyt duże teksty, aby podzielić stronę na sekcje i ułatwić użytkownikom znajdowanie treści. Edytor pozwala w razie potrzeby dostosować rozmiary nagłówków, formatowanie, hiperłącza i inne elementy.

WordPress obsługuje do 6 poziomów nagłówków, w tym h1 dla tytułu strony, ale większość ludzi rzadko wychodzi poza h4.

Galeria

Blok galerii to zaawansowana wersja podstawowego bloku obrazu i umożliwia dodawanie wielu zdjęć w określonym układzie.

Bieżący edytor obsługuje maksymalnie osiem kolumn na obrazy, a także zmianę rozmiaru, łączenie i inne opcje formatowania strony.

Lista

Bloki listy tworzą listy numerowane lub wypunktowane.

Zasadniczo jest to po prostu zastosowanie bloku akapitowego, ale rozdzielenie list na ich własny komponent ułatwia uniknięcie przypadkowej modyfikacji formatowania.

Cytat

Bloki cytatów to specjalnie sformatowane bloki akapitowe, które pomagają przywołać coś szczególnie ważnego.

Większość ludzi używa ich do cytowania przez konkretną osobę, ale możesz również użyć ich do dodania komentarza lub w inny sposób podkreślenia ważnych informacji.

Audio

Bloki audio są stosunkowo rzadkie na stronach internetowych, ale WordPress nadal je obsługuje.

Umożliwiają one dodawanie dowolnych plików audio, w tym funkcji takich jak automatyczne odtwarzanie dźwięku lub zapętlanie go.

Pamiętaj, że większość użytkowników nie lubi dźwięku odtwarzanego automatycznie, chyba że tego chce, więc staraj się unikać zaskakiwania odwiedzających nieoczekiwanymi dźwiękami.

Pokrywa

Bloki okładki to bardziej zaawansowany element formatowania. Ten blok pozwala wybrać obraz lub wideo, a czasem tekst, który możesz nałożyć na swoją stronę.

Te media mogą unosić się w tle, powtarzać i w inny sposób przyciągać uwagę.

WordPress obsługuje brak przezroczystości nakładki lub pełną przezroczystość, ale zaleca umiarkowaną ilość, aby zapewnić czytelność tekstu.

Plik

Bloki plików umożliwiają udostępnianie bezpośrednich łączy do plików w witrynie, dzięki czemu odwiedzający mogą je pobierać.

Możesz przesłać prawie każdy rodzaj pliku do swojej witryny, ale dostawca usług hostingowych może mieć pytania, jeśli spróbujesz przesłać coś zbyt dużego lub pobrać zbyt wiele plików dla swojego planu.

To dobry przykład wzajemnych powiązań tworzenia stron internetowych.

Prawdopodobnie nie przekroczysz limitów, jeśli pozwolisz ludziom pobierać tylko podstawowe pliki tekstowe, ale porozmawiasz z hostem swojej witryny przed dodaniem jakichkolwiek innych plików. Mogą ci powiedzieć, co jest dozwolone w twoim planie lub zasugerować alternatywy w razie potrzeby.

Wideo

Bloki wideo umożliwiają dodawanie treści multimedialnych do witryny, przesyłając je bezpośrednio lub łącząc treści w innej witrynie.

Pliki wideo są zwykle bardzo duże, więc zazwyczaj potrzebujesz dobrego planu hostingowego, jeśli chcesz mieć pliki w swojej witrynie.

Hosting zewnętrzny, na przykład przez YouTube i korzystanie z YouTube embed, jest znacznie prostsze. Gutenberg automatycznie konwertuje niektóre linki wideo do innego typu bloku, jeśli jest to właściwe.

Jak korzystać z bloków WordPress

Istnieje kilka sposobów na dodanie bloku w edytorze Gutenberga. Możesz dodać je bezpośrednio z górnego paska ikon lub klikając przycisk wstawiania.

Ten przycisk wygląda jak okrąg z plusem i umożliwia kliknięcie typu bloku do dodania.

Gdy bloki znajdą się na stronie, możesz je przesuwać w górę iw dół, klikając strzałki po lewej stronie bloku. Możesz też kliknąć siatkę sześciu kropek i przytrzymać przycisk myszy, a następnie przeciągnąć blok w wybrane miejsce.

Aby edytować bloki, po prostu kliknij ich przestrzeń. Spowoduje to automatyczne otwarcie informacji o bloku i umożliwi dostosowanie komponentów w razie potrzeby.

Możesz użyć tych samych funkcji do zmiany typu bloku. Strzałki w panelu sterowania mogą służyć do rozwijania lub zamykania sekcji edytora, a przycisk X umożliwia zamknięcie edytora bloków i skupienie się na innych rzeczach.

Różnica między blokami WordPress a widżetami

Bloki to przede wszystkim zawartość strony internetowej, w tym tekst i multimedia, takie jak obrazy i dźwięk. Czym więc jest widżet WordPress i czym różni się od bloku?

Natomiast widżety WordPress to treści, które można umieścić w specjalnych obszarach, takich jak paski boczne i stopki. Edytor Gutenberga w większości unika tych obszarów, chociaż możesz dołączyć elementy przypominające widżety do swojej głównej treści, dodając bloki kodu.

Interfejs blokowy zwykle znajduje się po prawej stronie ekranu, gdy otwarty jest edytor stron. Edytor widżetów jest dostępny w obszarze Wygląd > Dostosowywanie oraz w menu administratora.

Widżety zwykle pojawiają się na każdej stronie witryny, więc nie można ich edytować z tego samego miejsca, w którym można edytować bloki.

Tworzenie szablonów bloków WordPress wielokrotnego użytku

WordPress umożliwia tworzenie szablonów bloków wielokrotnego użytku.

Przydaje się to do zachowania spójnego brandingu i projektu w witrynie bez konieczności odtwarzania dokładnego układu za każdym razem. Jest to szczególnie przydatne, jeśli używasz oprogramowania takiego jak Vectornator lub Adobe Illustrator do tworzenia zaawansowanych grafik wektorowych i układów.

Samo tworzenie szablonu jest proste. Wszystko, co musisz zrobić, to wybrać blok, kliknąć trzy kropki na wyświetlonym pasku narzędzi, a następnie kliknąć Dodaj do bloków wielokrotnego użytku.

Stamtąd możesz zmienić jej nazwę na coś łatwego do zapamiętania i wrócić do pracy na stronie.

Szablony blokowe upraszczają takie rzeczy, jak logo, niestandardowe przyciski wykonane w oprogramowaniu do projektowania graficznego, elementy projektu i wszystko, co jest używane w brandingu witryny.

Szablon pozwoli na łatwe dodawanie elementu w dowolnym miejscu bez konieczności przerabiania określonego elementu marki lub układu za każdym razem, gdy chcesz go użyć.

Ostatnie przemyślenia na temat bloków WordPress

Chociaż bloki WordPress nie są idealne dla wszystkich, są potężnym punktem wyjścia do tworzenia stron i porządkowania treści w intuicyjny, przyjazny dla użytkownika sposób.

Jednak samo czytanie o blokach nie wystarczy, aby opanować ich używanie.

Zamiast tego przejdź teraz do swojej witryny WordPress i zacznij bawić się na jednej stronie. Dzięki praktycznej praktyce będziesz w stanie opanować ich użycie i zacząć tworzyć zaawansowane układy w swojej witrynie.

Podobnie jak jazda na rowerze, bloki WordPressa są trudne do zapomnienia, gdy się ich nauczysz i mogą pomóc w stworzeniu prawie każdego standardowego projektu strony.