Blok Query Loop czyli Pętla Zapytania

Nowy blok Pętla Zapytania (ang. Query Loop) to chyba najciekawsza rzecz, którą przynosi WordPress 5.8.

Choć nazwa sugeruje coś bardzo technicznego, blok ten może wykorzystywać praktycznie każdy użytkownik WordPressa, nawet początkujący bloger.

Trzeba tylko załapać, o co w tym bloku chodzi i jakie są jego praktyczne zastosowania.

Ten wpis pomoże Ci zrozumieć, jak działa i jak używać blok Pętla Zapytania na stronie w WordPressie.

Zacznijmy od przykładu

Spójrz na obrazek niżej.

Widzisz na nim 5 ostatnich wpisów z hipotetycznego bloga.

A teraz zastanów się, jak byś się zabrał do tego, żeby wyświetlić artykuły w takim właśnie układzie.

Jeśli pomyślałeś: „Pewnie trzeba użyć ten nowy blok i on zrobi robotę”, to się nie pomyliłeś.

Tak, blok Query Loop (na polski został przetłumaczony jako Pętla Zapytania) pozwala wyświetlić wpisy lub strony w miejscu, gdzie ten blok wstawiasz. Na przykład jako fragment strony głównej albo fragment wpisu z bloga.

Ale jeśli teraz poprosiłabym Cię, żebyś za pomocą bloku Query Loop odtworzył dokładnie taki układ wpisów jak na obrazku wyżej , to najprawdopodobniej by Ci się to nie udało. A przynajmniej nie od razu.

Dlaczego?

Otóż, kiedy wstawiasz blok Pętla zapytania do strony na WordPressie, zobaczysz kilka przykładowych sposobów rozmieszczenia wpisów. Są one dość proste i żaden z nich nie przypomina układu z obrazka wyżej:

Przykładowe wbudowane szablony bloku Pętla zapytania

Przykładowe wbudowane szablony bloku Pętla zapytania

Żeby uzyskać jakiś ciekawszy układ wpisów niż te 6 wbudowanych, które proponuje nam WordPress, trzeba najpierw zrozumieć anatomię tego bloku.

Warto, bo gdy już „załapiemy”, o co tutaj chodzi, będziemy mieć w ręku potężne narzędzie do budowania ciekawych układów treści.

Budowa bloku Query Loop

Tak naprawdę blok Pętla Zapytania (Query Loop) składa się z dwóch nierozerwalnych bloków:

1. Pętla zapytania (ang. Query Loop)

2. Szablon wpisu (ang. Post Template)

Blok Pętla zapytania tworzą dwa bloki: Pętla zapytania i Szablon wpisu

Każdy z nich pełni nieco inną rolę:

Pętla zapytania (zewnętrzy) – decyduje o tym jakie wpisy zostaną pobrane z bazy, ile ich będzie i w jakiej kolejności zostaną wyświetlone. Przykłady:

1. 3 ostatnie wpisy bloga

2. Wszystkie podstrony witryny w porządku alfabetycznym

3. 4 ostatnie wpisy bloga z kategorii X

4. 10 opinii klientów, gdzie „Opnie klientów” tzw. custom post type1

1 custom post type należy wcześniej utworzyć za pomocą wtyczki lub dodatkowego kodu

Szablon wpisu (wewnętrzny) – decyduje o tym, jak jakie konkretnie elementy wpisu zostaną wyświetlone i jak względem siebie ułożone. Przykłady:

1. Wyświetl obrazek wyróżniający, tytuł wpisu, datę wpisu, zajawkę (ang. excerpt)

2. Wyświetl tytuł wpisu i zajawkę

3. Wyświetl obrazek wyróżniający i tytuł wpisu

4. Wyświetl datę i tytuł wpisu

Nowe bloki dynamiczne

Zwróćmy uwagę, że wewnątrz bloku Szablon wpisu pojawiają się nowe bloki:

1. Tytuł wpisu

2. Treść wpisu

3. Obrazek wyróżniony wpisu

4. Data wpisu

5. Zajawka wpisu

6. Kategorie wpisu

7. Tagi wpisu

Są to bloki dynamiczne, czyli ich zawartość jest zmienna zależnie od kontekstu użycia.

Gdybyśmy każdy z tych bloków wstawili bezpośrednio do wpisu (np. jakiegoś artykułu blogowego) jako fragment jego treści, to blok taki wyświetli nam dane aktualnego wpisu. Na przykład datę publikacji wpisu.

Tutaj, wewnątrz bloku Pętla Zapytania, bloki te są częścią pętli. Umieszczając te bloki wewnątrz bloku Pętla Zapytania, a dokładnie jako część bloku Szablon Wpisu, mówimy WordPressowi, co ma zostać wyświetlone podczas pojedynczego obiegu pętli:

Nowe bloki WordPressa 5.8 jako składowe bloku Szablon wpisu

A zatem w każdym obiegu pętli blok Tytuł wpisu wyświetli tytuł innego wpisu.

To od nas zależy, jakie dokładnie bloki znajdą się wewnątrz bloku Szablon wpisu.

Można zmieniać ich kolejność, a nawet zagnieżdżać w innych blokach (na przykład w bloku Kolumny) i w ten sposób budować bardziej urozmaicone układy.

Bloki wewnątrz Szablonu wpisu można dowolnie przestawiać i mieszać z innymi blokami

Parametry bloku Pętla zapytania

Blok Pętla zapytania możemy kontrolować z dwóch miejsc:

1. górny pasek bloku

2. pasek boczny bloku

Parametry bloku Pętla zapytania

Parametry ustawiane na pasku górnym

Parametry wyświetlania (display settings)

1. Items per page – ile wpisów na stronę mamy wyświetlić

2. Offset – od którego wpisu mamy zacząć wyświetlanie (pozwala pominąć początkowe wpisy)

3. Max page to show – ile stron wyświetlić

Parametry ukryte pod pierwszą ikonką

pozwalają nam kontrolować, ile wpisów wyświetlić. Jeśli do bloku Pętlą dołączymy również blok Stronicowanie zapytania2, to parametry te nabiorą większego sensu.

2Więcej o podziale wpisów na strony w dalszej części artykułu

Jeśli chcemy wyświetlić na przykład 3 ostatnie wpisu z bloga, ustawiamy Items per Page na 3, Max page to show na zero i nie dodajemy bloku Stronicowanie.

Widok listy/siatki

Kolejne dwie ikonki

pozwalają nam na szybkie przełączenie układu wpisów: Widok listy i Widok siatki

Widok listy to zwyczajne wyświetlenie wpisów jeden pod drugim:

Blok Pętla zapytania w widoku lista

Widok siatki umożliwia wyświetlenie wpisów w formie tzw. grida, czyli w wierszy i kolumn. Przykładowo, na obrazku niżej widzimy 3 ostatnie wpisy bloga w układzie 3-kolumnowym:

Blok Pętla zapytania w widoku siatka (grid)

Liczbę kolumn siatki kontrolujemy na pasku bocznym.

Parametry ustawiane na pasku bocznym

Inherit query from template3

3 W momencie publikacji tego wpisu nie wszystkie parametry zostały przetłumaczone na język polski (używałam wersji beta WP 5.8)

Ten parametr należy pozostawić wyłączony i go zignorować.

Jego zastosowanie okaże się przydatne podczas używania strony w tzw. trybie Full Site Editing, kiedy przykładowo będziemy chcieli utworzyć własny szablon dla archiwum wpisów.

Typ treści

Tutaj możemy zdecydować, czy wyświetlamy strony, wpisy czy wpisy oparte o jakiś Custom Post Type.

1. Wpis

2. Strona

3. Lista własnych typów (Custom Post Types (CPT))

Custom Post Types pokażą się, jeśli jakieś mamy zdefiniowane na stronie. Custom post types najczęściej dodajemy do WordPressa za pomocą wtyczki lub własnego kodu.

Sortuj wg

Kolejność wyświetlania wpisów

Filtry

Ta część umożliwia wyświetlenie wpisów tylko z wybranej kategorii, tagu, danego autora lub wybrania po słowie kluczowym.

Dzięki wykorzystaniu filtra po kategoriach możemy uzyskać taki widok na stronie głównej:

Tytuły sekcji: Relacje i Emocje reprezentują kategorie naszego bloga. Tak wygląda lista wpisów z obrazka wyżej w naszym WordPressie:

Zwróćmy uwagę, że w tym przykładzie wykorzystaliśmy blok Pętla 2 razy, za każdym razem ustawiając inną kategorię w filtrach:

Blok pętla użyty 2 razy na stronie, za każdym razem z inną kategorią w filtrze

Możemy również wyświetlić tylko te wpisy, które zawierają w tytule lub treści jakieś słowo kluczowe. W tym celu wykorzystamy filtr Keyword.

Parametr Offset

Uważny czytelnik zauważył, że jednym z parametrów bloku Query jest tzw. Offset (Przesunięcie).

Ten parametr pozwala pominąć X początkowych wpisów.

Ta cecha bloku Pętla przyda się do tworzenia ciekawych układów (layoutów) wpisów z wykorzystaniem kilku bloków Pętla dla tego samego typu wpisu.

Zobaczymy to na przykładzie:

Przykład z trzykrotnym wykorzystaniem bloku Pętla oraz parametru offset

Taki layout wpisów możliwy jest dzięki trzykrotnemu wykorzystaniu bloku Pętla.

Drugi blok Pętla w tym przykładzie zaczyna się od drugiego wpisu (bo chcemy pominąć pierwszy wpis w prawej kolumnie), więc ma Offset ustawiony na 1. Trzeci blok pętla musi pominąć wszystkie wpisy z dwóch poprzednich pętli, więc ma offset ustawiony na 3 (pomija 1 wpis z pierwszej pętli + 2 wpisy z drugiej pętli).

Stronicowanie wpisów

Kiedy za pomocą bloku Pętla chcemy wyświetlić większą liczbę wpisów, warto podzielić je na podstrony.

W tym celu do bloku Pętla zapytania musimy dodać kolejny blok wewnętrzny o nazwie Stronicowanie zapytania (ang. Query Pagination)

Uwaga! Blok Stronicowanie zapytania należy dodać wewnątrz bloku Pętla zapytania (a nie wewnątrz bloku Szablon wpisu).

Należy upewnić się, że jesteśmy w obszarze bloku Pętla zapytania (zobacz niebieska ramka na obrazku niżej) i dopiero wówczas w liście bloków zobaczymy blok Stronicowanie zapytania:

Blok Stronicowanie zapytania zobaczymy tylko w obszarze bloku Pętla zapytania

Tak będzie wyglądać nasz blok Pętla na frontendzie kiedy dodamy stronicowanie:

Blok Pętla ze stronicowaniem – strona 1

Blok pętla ze stronicowanie – strona 2

A tak wygląda cały nasz blok Pętla na backendzie:

Zwróćmy uwagę, że gdy usuniemy blok Stronicowanie zapytania z bloku Pętla, na front-endzie zobaczymy tylko jedną stronę.

Zastosowania bloku Pętla

Najczęstszym zastosowaniem bloku Pętla zapytania będzie zapewne wyświetlanie wpisów wybranego typu na stronie głównej.

Blok ten szczególnie dobrze sprawdzi się w połączeniu z tzw. własnymi typami wpisów (Custom Post Types)4. Wówczas takie elementy jak Opinie klientów, Portfolio, Członkowie zespołu możemy trzymać osobno (zobacz czerwona ramka niżej), a potem wyświetlać je w wybranym miejscu w witrynie za pomocą bloku Pętla zapytania.

4 Własny typ wpisu należy do WordPressa dodać za pomocą wtyczki (np. darmowej Custom Post Type UI lub płatnej Toolset Types z pakietu Toolset) lub kodu.

Własne typy wpisów (Custom Post Types) w WordPressie

Blok Pętla wyświetlający opinie klientów jako post type

Blok Pętla, wykorzystany wielokrotnie, sprawdzi się do wyświetlania wpisów w ciekawy sposób, na przykład w tzw. układzie newsowym (tzw. magazine layout), tak jak już widzieliśmy wcześniej na przykładzie, gdzie był omawiany parametr offset.

Kreatywni blogerzy mogą wyświetlić zachętę do przeczytania ostatnich wpisów z bloga według własnego pomysłu, na przykład w taki oto sposób:

Wpisy rozmieszczone według własnego pomysłu.

Tak będzie wyglądać powyższy układ wpisów w edytorze WordPressa:

Wpisy rozmieszczone według własnego pomysłu – widok edytora. 2. i 3. blok Pętla wykorzystuje parametr offset

Bloku Pętla można użyć również wewnątrz wpisu bloga, żeby wyświetlić inne wpisy z danej kategorii. Tutaj szkoda, że nie można pominąć bieżącego wpisu (może taki parametr pojawi się w przyszłych wersjach WordPressa).

Wady bloku Pętla

Blok pętla jest nowym blokiem i jeszcze ma sporo niedociągnięć.

Największą wadą jest mała elastyczność jeśli chodzi o kontrolowanie wyglądu poszczególnych jego składowych. Nie możemy ustawić marginesów, dopełnienia itp.

Wadą jest również to, że blok Tytuł wpisu ma przypisany nagłówek h1, h2, h3, itp a nie ma możliwości wybrania innego elementu HTML, np. akapit.

Jest też trochę niedociągnięć, które być może wynikają z niedopatrzenia i szybko zostaną poprawione w kolejnych wersjach, np:

1. blok obrazek wyróżniający wstawiany jest w wersji ze Zwiększoną szerokością i ręcznie trzeba ją wyłączyć

2. środkowanie bloku Stronicowanie nie działa poprawnie na froncie

Pozostałe „wady” to właściwie rzeczy tzw. „nice-to-have”, których na razie nie ma:

1. brakuje bloku, który pozwoliłby ustawić link do tytułu wpisu jako przycisk

2. nie można pominąć wyświetlania bieżącego wpisu (przydatne podczas wstawiania tego bloku do wpisów)

3. przy wyświetlaniu stron nie można zawęzić listy zwracanych tylko do stron w ramach danego rodzica

4. nie można ręcznie wybrać wpisów/stron do wyświetlania

5. podczas stronicowania przeładowuje się cała strona, adres URL przy stronicowaniu zawiera słowo query-

Zalety bloku Pętla

Niewątpliwie największą zaletą bloku Pętla jest sam fakt, że taki blok powstał.

Pozostałe zalety:

1. prosty interfejs

2. szybkość

3. parametr offset, który pozwala tworzyć ciekawe kombinacje

4. obecność przykładowych szablonów

Blok Query – podsumowanie

Blok Pętla Zapytania (Query Loop) umożliwia wyświetlenie listy wpisów (w tym stron i wpisów opartych o tzw. Custom Post Type) w dowolnym miejscu na stronie lub artykule.

Dzięki elastycznej budowie i współpracy z dynamicznymi blokami takimi jak Tytuł wpisu, Obrazek wyróżniony wpisu, Zajawka wpisu, itd. blok Pętla pozwala tworzyć dowolne układy treści. Dodatkowo bloki te można zagnieżdżać w bloku Kolumny, co jeszcze bardziej powiększa repertuar kreatywnych pomysłów.

Blok Query odegra dużą rolę w tzw. Full Size Editing (FSE), koncepcji, która umożliwi tworzenia całych witryn (łącznie ze stopką, headerem i własnymi templatkami) w oparciu o bloki. FSE ma się pojawić w oficjalnym wydaniu WordPressa pod koniec roku.

Co sądzisz o bloku Pętla?

Ja osobiście bardzo się ucieszyłam, że taki blok wchodzi do WordPressa 5.8.

Kiedy zaczynałam tworzyć pierwsze strony na WordPressie w 2009 roku, jedyną możliwością wyświetlenie custom post typów na stronie głównej było pisanie własnego Query w PHP, co było to ciężkie w aktualizacji. Przykładowo, klient zażyczył sobie usunięcia daty wpisów z listy newsów na stronie głównej. Trzeba było otwierać kod i robić zmianę ręcznie.

Teraz, taką zmianę właściciel strony może zrobić sam. O ile oczywiście zna edytor blokowy WordPresse i rozumie, jak działa blok Pętla zapytania. Mam nadzieję, że ten wpis stał się w zrozumieniu tego bloku pomocny.

A Ty co sądzisz o bloku Query?

#Gutenberg