Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak wybrać i używać zagnieżdżonych bloków w WordPress

Chcesz dowiedzieć się, jak wybierać i używać zagnieżdżonych bloków w WordPress?

Funkcja zagnieżdżonych bloków Gutenberg umożliwia dodawanie wielu bloków w obrębie bloku nadrzędnego. Dzięki temu można dostosować różne elementy bloków w tym samym czasie, efektywnie organizować treść wpisów i uzyskać większą elastyczność projektowania.

W tym artykule pokażemy, jak łatwo wybrać i używać zagnieżdżonych bloków WordPress.

Select and use nested blocks in WordPress

Czym są zagnieżdżone bloki WordPress?

Funkcja zagnieżdżonych bloków WordPress Gutenberg pozwala wstawić (lub „zagnieździć”) jeden lub więcej bloków wewnątrz innego bloku.

Zagnieżdżone bloki pomagają tworzyć bardziej złożone układy na twojej witrynie internetowej WordPress, dodając wiele bloków wewnątrz siebie. Pozwala to na większą elastyczność podczas projektowania i formatowania treści stron i wpisów.

Można na przykład zagnieździć wiele bloków obrazków w bloku grupy, aby wyświetlić zestaw zdjęć z określonego wydarzenia lub serię dzieł sztuki stworzonych przy użyciu określonej techniki.

Preview of WordPress nested blocks

Dodatkowo funkcja zagnieżdżonych bloków pozwala edytować poszczególne bloki osobno. Oznacza to, że możesz dostosować każdy blok do swoich potrzeb, nie mając wpływu na inne bloki.

To z kolei przekłada się na lepszą organizację treści, czyni twoją treść bardziej atrakcyjną i usprawnia proces twórczy.

Biorąc to pod uwagę, zobaczmy, jak można łatwo wybrać i używać zagnieżdżonych bloków WordPress Gutenberg.

Jak korzystać z zagnieżdżonych bloków WordPress

Możesz łatwo zagnieżdżać wiele bloków razem za pomocą bloku Grupa lub Kolumny w edytorze bloków Gutenberg.

Najpierw należy otworzyć istniejący lub nowy wpis w edytorze bloków z panelu bocznego administratora WordPress.

Następnie wystarczy kliknąć przycisk dodawania bloku „+” w lewym górnym rogu ekranu i znaleźć blok Grupa. Po jego kliknięciu i dodaniu do strony, należy wybrać układ dla bloków, które zostaną ze sobą zagnieżdżone.

W tym poradniku wybierzemy układ „Grupa”.

Select Group block from the block menu

Następnie wystarczy kliknąć przycisk „+” na ekranie, aby rozpocząć dodawanie treści w bloku nadrzędnym.

Na potrzeby tego poradnika dodamy blok z obrazkiem.

Add an image block within the Group block

Po dodaniu bloku wystarczy kliknąć przycisk „Grupuj” na pasku narzędzi bloku u góry, aby wybrać blok nadrzędny.

Następnie należy kliknąć przycisk „+”, aby ponownie otworzyć menu bloków, z którego można wybrać inne bloki do dodania.

Open the block menu to add another block within the Group block

Jak skonfigurować ustawienia bloków zagnieżdżonych WordPress

Po zagnieżdżeniu wielu bloków można skonfigurować ich indywidualne ustawienia, klikając każdy z nich. Spowoduje to otwarcie ustawień bloku w prawej kolumnie na ekranie.

Z tego miejsca można dostosować kolor tła, kolor tekstu i rozmiar poszczególnych bloków, nie mając wpływu na inne bloki, które są w nim zagnieżdżone.

Configure the individual block settings

Aby skonfigurować ustawienia wszystkich zagnieżdżonych bloków razem, należy kliknąć przycisk „Grupuj” na pasku narzędzi bloku u góry. Spowoduje to otwarcie ustawień bloku nadrzędnego w prawej kolumnie.

Można teraz skonfigurować justowanie, orientację, kolor tła, kolor tekstu i typografię wszystkich zagnieżdżonych bloków.

Należy pamiętać, że ustawienia te mają wpływ na wszystkie bloki zagnieżdżone w bloku nadrzędnym.

Configure the settings of the Group block

Można również przekonwertować istniejący pojedynczy blok na bloki zagnieżdżone, klikając przycisk „Opcje” na górnym pasku narzędzi dowolnego bloku.

Spowoduje to wyświetlenie menu, w którym należy wybrać opcję „Utwórz wzorzec”.

Create a pattern

Gdy to zrobisz, pojawi się monit z prośbą o nadanie nazwy i wybranie kategorii dla twojego nowego bloku wielokrotnego użycia.

Następnie kliknij przycisk „Utwórz”, aby zapisać twoje ustawienia.

Add a name for the pattern

Po zakończeniu nie zapomnij kliknąć przycisku „Opublikuj” lub „Aktualizuj”, aby zapisać twoje zmiany.

W naszym przykładzie zagnieździliśmy blok tytułu, obrazka i akapitu w bloku grupy.

Tak wyglądały zagnieżdżone bloki na naszej demonstracyjnej witrynie internetowej.

Preview of WordPress nested blocks

Bonus: Użyj wtyczki Wayfinder, aby łatwo wybierać zagnieżdżone bloki

Czasami może być trudno wybrać pojedynczy blok i skonfigurować go, gdy istnieje wiele bloków zagnieżdżonych razem.

Na szczęście wtyczka Wayfinder bardzo ułatwia wybieranie zagnieżdżonych bloków z bloku nadrzędnego, a nawet informuje o rodzaju i klasie bloków.

Najpierw należy zainstalować i włączyć wtyczkę Wayfinder. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do strony Ustawienia ” Wayfinder z panelu bocznego administratora WordPress.

Po wejściu na stronę wszystkie ustawienia będą już włączane. Wystarczy odznaczyć pole obok ustawień, których nie chcesz używać.

Na przykład, jeśli chcesz, by Wayfinder wyświetlał rodzaje bloków dla wszystkich bloków w edytorze, zaznacz pole obok opcji „Wyświetl rodzaj bloku”.

Configure the Wayfinder plugin settings

Jeśli jednak nie chcesz, aby wtyczka wyświetlała klasy bloków, po prostu odznacz pole obok tej opcji.

Po skonfigurowaniu ustawień nie zapomnij kliknąć przycisku „Zapisz zmiany”.

Następnie należy otworzyć istniejący lub nowy wpis w edytorze bloków WordPress z poziomu kokpitu.

Po najechaniu twoim kursorem myszy na dowolny blok wewnętrzny pojawi się kontur z jego nazwą. Można również zobaczyć kontury i nazwy bloków zagnieżdżonych w bloku nadrzędnym.

GIF for the Wayfinder plugin

Pomoże to zidentyfikować wszystkie różne bloki zagnieżdżone w bloku grupy lub kolumny.

Z tego miejsca można łatwo wybrać pojedynczy blok z bloku nadrzędnego, aby skonfigurować jego ustawienia.

Use Wayfinder plugin to easily select a block

Możesz także wybrać wszystkie zagnieżdżone bloki jednocześnie, klikając nagłówek „Kolumny” lub „Grupa”. Spowoduje to otwarcie ustawień bloku nadrzędnego w prawej kolumnie.

Po skonfigurowaniu ustawień blokowania wystarczy kliknąć przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać twoje zmiany.

Click the Group block outline to open its settings

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się wybierać i używać zagnieżdżonych bloków WordPress. Możesz również zapoznać się z naszym poradnikiem krok po kroku, jak zmienić wysokość i szerokość bloku w WordPress ie oraz naszymi najlepszymi wtyczkami WordPress, które pomogą rozwinąć twoją witrynę.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

4 komentarzeZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      Administrator

  3. Jiří Vaněk

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.