Przewodnik po niestandardowych blokach Gutenberga

Opublikowany: 2022-11-08

Przedmowa
Czym są niestandardowe bloki Gutenberga?
Kiedy używać niestandardowych bloków Gutenberga?
Alternatywy dla używania niestandardowych bloków Gutenberga
- Wzory blokowe lub bloki wielokrotnego użytku
- Blok kodu
Jak stworzyć niestandardowy blok Gutenberga
- Kodujesz to sam
- Korzystanie z wtyczki
Cokolwiek budujesz, możemy pomóc

Jeśli spóźnisz się na imprezę WordPress, bloki są w .

WordPress nadal ewoluuje i ulepsza doświadczenie Gutenberga, co skłania wielu programistów do pytania, czy powinni tworzyć niestandardowe bloki Gutenberga.

W tym poście przyjrzymy się, jak działają niestandardowe bloki, kiedy ich używać, alternatywne opcje budowania witryny i jak budować bloki Gutenberga.

Czym są niestandardowe bloki Gutenberga?

Bloki to podstawowa jednostka do budowania stron i postów w WordPressie. WordPress wprowadził bloki z doświadczeniem edycji Gutenberga w 2018 roku. WordPress zawiera wiele domyślnych bloków typu treści, w tym tytuły postów, obrazy i galerie. Ponadto wtyczki również dodają własne bloki do edycji. Na przykład niektóre z najnowszych wydań WooCommerce wprowadziły nowe bloki, aby ułatwić dodawanie produktów i funkcji eCommerce do dowolnej strony lub posta w WordPress.

Utworzenie niestandardowego bloku Gutenberga umożliwia wykorzystanie tego bloku na dowolnej stronie lub w poście w witrynie. Na przykład możesz utworzyć blok, który pobierał i wyświetlał referencje klientów.

Wsparcie 24/7 WordPress

od prawdziwych ekspertów WordPress

UCZ SIĘ WIĘCEJ

Jeśli byłeś niechętny do pełnego przyjęcia bloków, tracisz. Wszystkie najnowsze funkcje WordPressa koncentrują się na ulepszaniu edytora bloków. Aby skorzystać z wielu najnowszych i nadchodzących funkcji WordPressa , musisz użyć bloków.

Pobierz nasz e-book dotyczący rozpoczęcia pracy z pełną edycją witryny, aby dowiedzieć się więcej o tym, jak używać bloków do tworzenia i edytowania całej witryny.

Kiedy używać niestandardowych bloków Gutenberga?

Możesz utworzyć niestandardowy blok Gutenberga, gdy istniejące opcje bloku nie odpowiadają Twoim potrzebom i nie możesz znaleźć realnej alternatywy dla wtyczek lub motywów.

Tworzenie niestandardowego bloku Gutenberga zwykle nie jest projektem przyjaznym dla początkujących. Dwa najczęstsze powody kodowania własnych niestandardowych bloków Gutenberga to tworzenie wtyczki lub tworzenie własnego motywu.

Budowanie bloku nie jest projektem, który większość ludzi podejmuje dla jednej witryny, chyba że jest to projekt na poziomie przedsiębiorstwa z dedykowanym deweloperem lub zespołem programistów. Udostępniamy kilka alternatywnych metod, które mogą działać lepiej, jeśli potrzebujesz niestandardowego bloku tylko dla jednej witryny.

Alternatywy dla używania niestandardowych bloków Gutenberga

Zanim przejdziesz przez całą pracę polegającą na ustalaniu niestandardowych bloków, zastanów się, czy jedna z tych alternatyw może Ci pomóc.

Wzory blokowe lub bloki wielokrotnego użytku

Jeśli nie musisz pobierać dynamicznej zawartości i naprawdę chcesz, aby blok powielał układ, użyj zamiast tego nowej funkcji Wzorów bloków lub Bloków wielokrotnego użytku. Ta opcja jest przyjazna dla początkujących i można ją wykonać przy niewielkim lub zerowym pisaniu kodu.

Wzory są jak mini-szablon, którego możesz używać w dowolnym miejscu w witrynie. Możesz wstawić go na stronę, a następnie edytować. W podobny sposób działają klocki wielokrotnego użytku. Duża różnica polega na tym, jak są traktowane po użyciu ich na stronie lub poście.

Wzór jest punktem wyjścia. Gdy już znajdzie się na stronie, wszelkie wprowadzone przez Ciebie modyfikacje są unikalne dla tej strony. Jeśli później zmienisz wzór, nie zmieni się on tam, gdzie był już używany.

Bloki wielokrotnego użytku pozostają ze sobą połączone. Jeśli zaktualizujesz blok, zmiany zostaną zastosowane do każdego miejsca, w którym użyłeś tego bloku.

Blok kodu

Użyj bloku kodu, aby wstawić niestandardowy kod na stronie. Twórcy motywów i wtyczek tworzą niestandardowe bloki do wykorzystania w wielu witrynach. Jeśli pracujesz w jednej witrynie, prawdopodobnie możesz osiągnąć ten sam cel w krótszym czasie, dodając niestandardowy fragment kodu. Obie opcje wymagają tego samego poziomu wiedzy technicznej.

Jedynym przypadkiem, w którym warto rozważyć zbudowanie własnego niestandardowego bloku, jest programista, który chce przekazać witrynę klientowi. Klient może być w stanie pracować z twoim niestandardowym blokiem za pomocą edytora Gutenberga, ale byłby całkowicie zagubiony, próbując edytować twój kod.

Jak stworzyć niestandardowy blok Gutenberga

Masz dwie opcje tworzenia niestandardowego bloku Gutenberga. Możesz go zakodować samodzielnie lub użyć wtyczki do tworzenia bloków. Obie opcje wymagają kodowania. Zanim spróbujesz, będziesz chciał odświeżyć podstawy tworzenia stron internetowych.

Kodujesz to sam

Budowanie niestandardowych bloków wymaga doświadczenia programistycznego. Jeśli lubisz trzymać się edytorów WYSIWIG, a twoje serce bije za każdym razem, gdy przypadkowo klikniesz opcję pokaż kod, to nie jest dla ciebie.

Tworzenie niestandardowych bloków wymaga średnio zaawansowanej znajomości HTML, CSS, JavaScript i React.

Zacznij od skonfigurowania środowiska programistycznego i narzędzi. Będziesz potrzebować środowiska WordPress, Node, NPM i edytora kodu. Następnie postępuj zgodnie z tym samouczkiem dotyczącym tworzenia pierwszego bloku z oficjalnego podręcznika edytora bloków WordPress.

Korzystanie z wtyczki

Jeśli znasz się na HTML, CSS i JavaScript, ale nie jesteś gotowy do kodowania wszystkiego od zera, rozważ podejście oparte na wtyczce. Używanie wtyczki do tworzenia niestandardowych bloków to świetna opcja, gdy potrzebujesz niestandardowego bloku do użycia w jednej witrynie.

Wtyczka Genesis Custom Blocks to najpopularniejsza wtyczka do tworzenia niestandardowych bloków. Utworzysz pola blokowe za pomocą znanego interfejsu WordPress. Po skonfigurowaniu pól musisz podać szablon HTML, CSS, JavaScript i PHP, aby blok działał.

Chociaż jest to łatwiejsze, nadal wymaga trochę kodowania. Różnica polega na tym, że możesz to wszystko zrobić z poziomu administratora WordPressa bez konfigurowania lokalnego środowiska programistycznego. Wtyczka ułatwia również testowanie i podgląd bloku, aby upewnić się, że działa poprawnie.

Cokolwiek budujesz, możemy pomóc

Bez względu na to, jak zbudujesz swoją witrynę, z niestandardowymi blokami lub jeśli nadal używasz klasycznego edytora, potrzebujesz niezawodnego hosta. Pressable z dumą jest miejscem, w którym WordPress działa najlepiej dla każdego, od solopreneur po zespół zaawansowanych programistów.

Pressable oferuje łatwy w użyciu interfejs, najwyższe bezpieczeństwo i niesamowitą szybkość. Dzięki hostingowi Pressable Twoja witryna będzie łatwa do aktualizacji i łatwa do znalezienia i użytkowania przez klientów.

Zarejestruj się już dziś i zacznij budować swoją witrynę lub dowiedz się więcej o przenoszeniu istniejącej witryny. Chętnie pomożemy Ci w migracji Twoich witryn!

Wydajność sieciowa

Czas ładowania ma znaczenie! Czy wiesz, jak szybka jest Twoja witryna?

UCZ SIĘ WIĘCEJ